12.13小记(VUE前后端分离)

1:ElementUI的使用:注(VUE3对应的element-plus) 下载之后 在main.js之中引用即可使用

$ npm install element-plus --save

2:在页面上显示数据和:

首先定义好要显示的数据, 然后在表格中显示.注:使用v-for 遍历数据 依次显示

之后定义一个<tr>调用total函数计算总价

3:vue实现双向绑定:首先在script标签当中定义一个User对象然后在template标签当中使用v-model实现双向绑定,如果里面的数据修改,则绑定的对应数据也要进行修改.

4:使用vue实现从数据库当中读取数据显示到前端界面当中:

(1):首先在前端 封装好对应的utils文件 用来处理后端返回的数据:

(2)封装完成对应的utils工具包之后定义对应的API文件用来访问对应的后端页面 

(3)定义完成对应的API之后 开始设计对应的VUE前端页面,使用elementui-plus定义对应的表格:对应的属性是根据返回数据定义的

(4)设计完页面之后开始调用函数,加载页面数据:前面是引用ref  生命周期等  然后引用之前定义好的API文件 之后定义数组tableData用来存储返回的数据并显示在前端页面,然后调用生命周期函数进行异步操作 调用API文档的方法进行访问后端

 

(5)访问后端之前需要在后端定义两个bean 一个是枚举类型用来枚举返回的数据代码 200  404 等数据 还有一个是封装成前端需要的数据:就类似于当时的layuidata  前端封装的Utils工具需要的参数有三个 code  msg data 因此需要封装成三个参数的bean 然后重写各种方法 最后在后端调用方法返回数据 因为前端封装的API里面已经规定好了路径 后端的mapping只能跟着前端来