简单vue-elementui-java学习

vue-java项目结构

在这里插入图片描述

项目运行步骤

vue运行

  1. 到vue项目根目录
  2. 运行cmd
  3. 运行之前安装一下:npm install
  4. 安装axios:npm i axios
  5. 执行命令:npm run dev 运行
  6. 访问页面

java后台运行

  1. 环境设置,如sdk,依赖加载,tomcat设置等
  2. 运行tomcat

vue访问流程

前台发送请求流程

在这里插入图片描述

  1. 定义路由路径在router目录下index.js中设置
  2. 首先在libs目录下定义好AxiosPlugin.js(导入axios,请求拦截,json转换等)
  3. config目录下dev.env.js里面定义请求根路径API_URL
  4. api目录下index.js里面定义axios请求方法的模板
  5. 在请求页面中表单定义请求参数
  6. 在请求页面script标签里引入axios定义好的方法
  7. 点击提交按钮开始请求参数,如请求成功回话存储(sessionStorage)设置一些信息
  8. 通过$router.push(’/***’);路由到指定页面

后台接受以及响应数据

后台接受参数

  1. 如果是qs.stringify序列化请求可直接传入参数使用(@PostMapping等注解)
  2. qs.stringify的传参格式是:username=***&userpwd=***
  3. 参数处理完返回对象即可
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值