VUE前后端分离之数据交互（简单项目作为演示） |
您所在的位置：网站首页 › 前后端数据传递 › VUE前后端分离之数据交互（简单项目作为演示） |
VUE前后端分离之数据交互（简单项目作为演示）
|
文章目录
一、添加后端访问依赖二、建立后端三、配置前端
提示:这里重点演示前端如何访问后端，对于前、后端的建立不作为重点 一、添加后端访问依赖进入前端vue项目，进入内部或外部终端 输入如下代码并安装 cnpm install axios --save cnpm install qs --save安装好之后可以在package.json中看到添加的依赖 在main.js中引入添加的依赖（main,js中存储组件的公共依赖，在此文件中添加依赖后无需再在各组件文件里单独添加依赖） 引入依赖 设置别名  在组件文件中通过 this.$axios.xxx 等即可使用依赖
二、建立后端
后端的建立可参考基于 Spring Mvc 一个简单项目的基本流程 ＜用户注册功能＞(校正版)的第一、二步，建立符合自己前端的后端。 处理跨域问题 ：前后端分离开发后，前后端的访问最主要的问题即跨域，即对于http的请求，为了安全，禁止ip地址和不同端口的程序项目访问，准确说仅可以访问但不响应。由于采用SpringBoot，所以通过在控制器中添加注解来解决。 直接上前端的JS处代码 export default{ name:'Users', data() { return { emp:{ ename:'', loSal:'', hiSal:'', deptno:'', }, depts:[], emps:[], pageNum:1,//当前页 pageTotle:0 ,//总条数 pageSize:4 //每页显示几条 } }, methods:{ // 定义页面加载方法(例如搜索按钮触发该事件) init(){ // ###打包参数### this.emp.pageNum=this.pageNum;//JS中变量可以动态自动添加，可以不实现定义emp.pageNum this.emp.pageSize=this.pageSize; // 把json对象转为字符串 var param=this.$qs.stringify(this.emp);// 将emp数据转为字符串，作为参数上传 // ###参数传递、结果接收### this.$axios // 将参数上传到后台的服务器端口8088、访问路径/vue、以及控制器与方法的RequestMapping路由 .post("http://localhost:8088/vue/emp/findByParam",param) //参数传递 .then(rst => { // 结果接收 console.log(rst);//如果获取了结果就在控制台打印 // vue前端将返回的后端返回的结果用data封装，而rst是包含了data以及其他参数的总结果集合 this.emps = rst.data.list; this.pageTotle = rst.data.total; }).catch(ex => { console.log(ex);//如果没获取结果，就打印错误 }); }, // 定义Search方法 search(){ // 即页面加载方法 this.init() } } }重点在于参数的目的地是 “http://localhost:8088/vue/emp/findByParam” ，这串链接的来源如下： http://localhost:8088/vue |
/emp/findByParam 
【本文地址】
今日新闻 |
推荐新闻 |