实现vue项目与web后台进行数据交互

前期工具准备

安装下载Node：https://nodejs.org/en/

vue管理系统：https://github.com/xxpstyle/vue

doc命令：

查看node版本：node -v

查看npm版本：npm -v

安装cnpm的淘宝镜像：npm install -g cnpm --registry=http://registry.npm.taobao.org

使用cnpm来替代npm：cnpm install -g vue-cl

doc命令打开项目：cd vue的路径

项目打包：cnpm install 生成node_modules文件夹，也就是依赖包资源

运行项目： npm run dev 

 

此项目默认http://localhost:8080

所以需要改Tomcat的端口即在tomcat的解压包中的cong文件夹下的server.xml（第69行）

vue的双向绑定数据

加载data中的str变量

eg1：v-bind:value="str"

eg2：{{ str }}

vue/src/views/nav1/Table.vue的代码（第3行）

<input type="text" @change="getTest" v-bind:value="str"/>

<p>Message is: {{ str }}</p>

//byxxp：定义数组，类似于小程序的data:[]

data(){return{str:" "}}

实现vue项目与web后台进行数据交互（有两种方法）

1.通过jquery的ajax进行传值

controller的代码

在controller类中设置注解（类注解）

@CrossOrigin(origins = "*", maxAge = 3600)

index.html引用jquery才可以使用ajax

<script type="text/javascript"

src="https://code.jquery.com/jquery-3.3.1.js"

integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="

crossorigin="anonymous"></script>

vue/src/views/nav1/Table.vue的代码（第201行）

var _this = this;

$.ajax({

url: 'http://localhost:9090/test/test',

type: 'get',

data: {abc: 1},

dataType: "json",

success: function (e) {

console.log('success:', e);

_this.str = e;

}

})

2.通过vue的axios传值

vue/src/api/api.js中的代码

export const getTestByHT = params => { return axios.get(`http://localhost:9090/test/test`, { params: params }); };

 

vue/src/views/nav1/Table.vue的代码

引用api.js中的传值方法【113行】

import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser,getTestByHT } from '../../api/api';

方法引用getTestByHT[第188行]

getTest(){

//let para = {abc:12 };

//byxxp：进行与后台进行数据交互

//this.listLoading = true;

//NProgress.start();

//getTestByHT(para).then((res) => {

//this.str=res;

//this.listLoading = false;

//NProgress.done();

//});

}

后台进行跨域注解@CrossOrigin(origins = "*", maxAge = 3600)