vue-java项目结构
项目运行步骤
vue运行
- 到vue项目根目录
- 运行cmd
- 运行之前安装一下:npm install
- 安装axios:npm i axios
- 执行命令:npm run dev 运行
- 访问页面
java后台运行
- 环境设置,如sdk,依赖加载,tomcat设置等
- 运行tomcat
vue访问流程
前台发送请求流程
- 定义路由路径在router目录下index.js中设置
- 首先在libs目录下定义好AxiosPlugin.js(导入axios,请求拦截,json转换等)
- config目录下dev.env.js里面定义请求根路径API_URL
- api目录下index.js里面定义axios请求方法的模板
- 在请求页面中表单定义请求参数
- 在请求页面script标签里引入axios定义好的方法
- 点击提交按钮开始请求参数,如请求成功回话存储(sessionStorage)设置一些信息
- 通过$router.push(’/***’);路由到指定页面
后台接受以及响应数据
后台接受参数
- 如果是qs.stringify序列化请求可直接传入参数使用(@PostMapping等注解)
- qs.stringify的传参格式是:username=***&userpwd=***
- 参数处理完返回对象即可