1. 后端项目搭建
1.1 创建项目
项目名称: springboot_demo5_axios
要求: mapper/service/pojo/controller 5分钟开始创建
1.2 SpringMVC 参数传递方式
1.2.1 简单的参数传递
url地址: http://localhost:8090/getUserById?id=100
编辑后台Controller代码:
1.2.2 对象的方式传递
URL: http://localhost:8090/getUser?id=100&name=“tomcat”&age=18
后台代码说明:
1.2.3 RestFul风格
特点:
1. 参数需要使用/ 进行分割
2. 参数的位置是固定的.
3. restFul请求方法路径不能出现动词
作用:
用户可以通过一个URL请求的地址,可以实现不同的业务操作
知识回顾:
查询: http://localhost:8090/getUserById?id=100 类型:get
新增: http://localhost:8090/insertUser 类型:post
更新: http://localhost:8090/updateUser 类型:post
删除: http://localhost:8090/deleteUserById?id=200 类型:get
意图明显: 常规的请求的方式其中包含了动词,导致操作的意图非常明显.
RestFul风格实现CURD操作:
1.查询: http://localhost:8090/user/100 type:GET
2.新增: http://localhost:8090/user/tomcat/18/男 type:POST
3.删除: http://localhost:8090/user/100 type:DELETE
4.更新: http://localhost:8090/user/mysql/100 type:PUT
1.2.3 RestFul风格-简单参数接收
入门案例:
/** * 1.restFul实现用户查询 * URL: http://localhost:8090/user/100 * type: GET * RequestMapping 默认的可以接收所有的请求类型 * RestFul语法: * 1.参数的位置固定. * 2.参数必须使用{}包裹 * 3.必须使用@PathVariable 动态的接收参数 * 注意事项: {参数名称}必须与方法中的名称一致. */ //@RequestMapping(value = "/user", method = RequestMethod.GET) @GetMapping("/user/{id}") public String restFulGet(@PathVariable Integer id){<span class="token keyword">return</span> <span class="token string">"restFul动态的获取参数:"</span><span class="token operator">+</span>id<span class="token punctuation">;</span> <span class="token punctuation">}</span>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
1.2.4 RestFul风格-对象参数接收
/**
* 需求: 查询name=tomcat age=18 sex=女的用户
* 要求使用:restFul
* URL: http://localhost:8090/user/tomcat/18/女
* restFul的优化:
* 如果{参数名称}与对象中的属性名称一致,
* 则SpringMVC动态的为对象赋值,
* @PathVariable 可以省略
* 注意事项:
* 前后端的参数的传递必须保持一致!!!!
*/
@GetMapping("/user/{name}/{age}/{sex}")
public User restGetUser(User user){
//执行后续的业务操作 userService
return user;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
2. Axios学习
2.1 Axios介绍
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
特点:
1.从浏览器中创建 XMLHttpRequests
2.从 node.js 创建 http 请求
3.支持 Promise API
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动转换 JSON 数据
8.客户端支持防御 XSRF
结构说明:
1. JS中原生提供了Ajax操作. 弊端: 操作特别的复杂 易用性较差.
2. jQuery中的Ajax 封装了原生的JS Ajax 提高了开发的效率
3. Axios是VUE中默认支持的Ajax的请求的方式.
- 1
- 2
- 3
- 4
** 特点: 调用简洁 解决了 “回调地狱问题”!!!**
2.2 回调地狱问题(了解)
说明: 前端中如果需要发起大量的Ajax请求,并且Ajax 请求有嵌套的关系.则可能引发回调地狱问题.
例子: 请求 参数A --1–结果B/参数B—2–结果C/参数C—3--- 结果D
课下了解: 什么是回调地狱!!!
2.3 Axios 入门案例
2.3.1 编辑后台代码
编辑后台代码完成业务获取
2.3.2 Axios调用步骤
- 导入Axios的JS文件
- 发起Ajax请求
- 解析返回值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Axios</title> </head> <body> <h1>Axios练习</h1> <!-- 引入JS文件 --> <script src="../js/axios.js"></script> <script> /** * 注意事项: * 1.Axios将原来的嵌套的结构,改为链式加载方式 * 2.回调函数中的data,不是服务器的返回值,是promise对象 * * 发起Ajax请求: * 1. GET请求获取数据 */ axios.get("http://localhost:8090/axios/getUser") .then(function(result){//promise对象 //获取服务器返回值 promise.data console.log(result.data) })<span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
promise对象说明: 其中data表示服务器的返回值.
2.4 Axios-Get-简单参数
2.4.1 前端Ajax请求
/**
* GET请求-简单参数的写法
* 需求: 根据ID查询数据
* URL: http://localhost:8090/axios/getUserById?id=100
* then(): 回调函数通过then返回 结构
*/
axios.get("http://localhost:8090/axios/getUserById?id=100")
.then(function(result){
console.log(result.data)
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
2.4.2 后端Controller
2.5 Axios-Get-resultFul结构
2.5.1 前端Ajax请求
/**
* restFul风格实现业务传参
* 需求: 根据name/age查询数据
* URL: http://localhost:8090/axios/user/tomcat/18
* 注意: 模版字符串优化参数 ``
*/
let name = "mysql"
let age = 20
axios.get(`http://localhost:8090/axios/user/${name}/${age}`)
.then(function(result){
console.log(result.data)
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
2.5.2 编辑后端Controller
2.6 Axios-Get-对象传参(重要!!!)
2.6.0 F12的说明
一般用来检查网络的请求 使用network 其中不要添加缓存, 检查所有的请求的路径
2.6.1 需求说明
说明: 如果用户查询数据 其中包含了多个参数,可以使用restFul风格(少量参数)/可以使用对象封装(多个参数)
如果参数较多则建议使用对象的方式封装.
案例: 查询name=“mysql” age=18 sex="女"的用户 要求使用对象的方式封装参数
2.6.2 编辑前端Ajax
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Axios</title> </head> <body> <h1>Axios练习</h1> <!-- 引入JS文件 --> <script src="../js/axios.js"></script> <script><span class="token comment">/** * 需求: 实现对象方式的数据传递 * url: http://localhost:8090/axios/user/getUserObj * 语法: axios.get("url","参数").then(回调函数) * 业务需求: 查询name="mysql" age=18 sex="女"的用户 */</span> <span class="token comment">//封装对象</span> let user <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span> name<span class="token operator">:</span> <span class="token string">"mysql"</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span> sex<span class="token operator">:</span> <span class="token string">"女"</span> <span class="token punctuation">}</span> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span> <span class="token string">"http://localhost:8090/axios/user/getUserObj"</span><span class="token punctuation">,</span><span class="token punctuation">{<!-- --></span>params<span class="token operator">:</span> user<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token function">function</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>data<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">/* axios.get("http://localhost:8090/axios/user/getUserObj", { //key: value key固定写法 params 参数对象 params: { //再写用户的参数 name: "mysql", age: 18, sex: "女" } }).then(function(result){ console.log(result.data) }) */</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
2.6.3 编辑后端Controller
2.7 Axios-Delete请求
2.7.1 Delete请求说明
一般用户通过Delete请求做删除操作. 删除的语法与Get请求的语法一致的.
2.7.2 Delete请求方式说明 了解delete代码结构
1.不带参数的删除
axios.delete(“url地址”).then(function(result){ … })
2.携带个别参数 ?id=100
axios.delete(“url地址?id=100”).then(function(result){ … })
3.restFul结构
可以使用模版字符串的方式简化代码结构
axios.delete( "url地址/xxx/xxx/xxx").then(function(result){ … })
4.采用对象的方式进行参数传递
let 对象 = {xxxx:xxxx,xxxx:xxxx}
axios.delete( "url地址/xxx/xxx/xxx", {
params: 封装后的对象}).then(function(result){ … })
2.8 Axios-post请求
2.8.1 编辑页面Ajax
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Axios-POST请求</title> </head> <body> <h1>Axios练习</h1> <!-- 引入JS文件 --> <script src="../js/axios.js"></script> <script><span class="token comment">/* 1.什么时候使用post请求???? 答:一般采用form表单提交时,采用post请求类型 主要用于数据的新增操作 2.get请求/post请求主要的区别 get: 参数动态的拼接到URL地址中 ?id=xx&name=xxx 数据是可见的 post: 一般采用post请求数据是涉密的 */</span> <span class="token comment">/** * post业务: * 实现用户的新增 传递User对象 * * URL地址: * http://localhost:8090/axios/insertUser * 总结: 如果需要对象传参 * 1.get请求采用 axios.get(url,{params: 对象}) * 2.post请求 axios.post(url,对象) */</span> let user <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span> name<span class="token operator">:</span> <span class="token string">"post请求的语法"</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> sex<span class="token operator">:</span> <span class="token string">'女'</span> <span class="token punctuation">}</span> let url1 <span class="token operator">=</span> <span class="token string">"http://localhost:8090/axios/insertUser"</span> axios<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span>url1<span class="token punctuation">,</span> user<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token function">function</span><span class="token punctuation">(</span>result<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>data<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
2.8.2 参数的数据结构
说明: 如果采用post的方式传递对象,则数据结构是一个JSON
2.8.3 编辑后端Controller
2.9关于前后端调用细节说明
2.9.1 请求类型
请求的类型是由程序员手动控制
- 分类A
1.get 请求类型 查询
2.delete 请求类型 删除 - 分类B
1.post 请求类型 form表单提交 新增操作
2.put 请求类型 更新操作
2.9.2 关于POST请求说明
浏览器解析数据结构:
说明: 数据在进行参数传递时 数据需要转化
2.9.3 jQuery中的post请求/Axios中的post请求对比/restFul格式
- Axios中的Post请求格式
如果传递的数据是JSON串 ,则在后端采用@RequestBody注解 实现JSON串转化为对象 - jQuery中的post请求格式
如果采用form表单的方式提交,则可以直接采用对象的方式接收
name=xxx&age=xx&sex=xx
3. restFul的格式是将参数拼接到URL中 采用特殊的方式获取数据
2.10 Axios-post-restFul结构
2.10.1 编辑前端JS
/**
* post请求 restFul的写法
* 实现用户新增入库
* url: http://localhost:8090/axios/user/name/age/sex
*/
let url2 = "http://localhost:8090/axios/user/redis/18/男"
axios.post(url2)
.then(function(result){
console.log(result.data)
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
2.10.2 编辑后端Controller
2.11 async-await用法-箭头函数(变态!!!)
2.11.1 概念解释
1.async/await 是ES7引入的新语法 可以更加方便的进行异步操作
2.async 关键字用在函数上. 返回值是一个promise对象
3.await 关键字用在async 函数中
2.11.2 箭头函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>async-await语法</title> </head> <body> <h1>Axios练习</h1> <!-- 引入JS文件 --> <script src="../js/axios.js"></script> <script><span class="token comment">/** * axios的get请求语法 * 知识点: * 1.箭头函数 主要简化回调函数的写法 * 思路: 重复的 固定的可以简化 * 规则: 如果参数只有一个则括号可以省略 */</span> let url <span class="token operator">=</span> <span class="token string">"http://localhost:8090/axios/getUserById?id=100"</span> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span> result <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{<!-- --></span> <span class="token function">alert</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span>data<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
2.11.3 async-await 操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>async-await语法</title> </head> <body> <h1>Axios练习</h1> <!-- 引入JS文件 --> <script src="../js/axios.js"></script> <script><span class="token comment">/** * axios的get请求语法 * 知识点: * 1.箭头函数 主要简化回调函数的写法 * 思路: 重复的 固定的可以简化 * 规则: 如果参数只有一个则括号可以省略 * * 2.async-await简化 解构赋值 * 2.1 async 需要标识函数 * 2.2 await 需要标识ajax请求 * 上述的操作可以将多行js 封装为一行执行 简化代码操作 */</span> <span class="token comment">//1.定义一个方法</span> async function <span class="token function">getUserById</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> let url <span class="token operator">=</span> <span class="token string">"http://localhost:8090/axios/getUserById?id=100"</span> <span class="token comment">//2.发起ajax请求 获取promise对象</span> <span class="token comment">//let promise = await axios.get(url)</span> <span class="token comment">//console.log(promise)</span> <span class="token comment">//console.log(promise.data)</span> <span class="token comment">//解构赋值 提取对象中有价值的数据</span> let <span class="token punctuation">{<!-- --></span>data<span class="token operator">:</span> resultData<span class="token punctuation">,</span>status<span class="token operator">:</span> code<span class="token punctuation">}</span> <span class="token operator">=</span> await axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>resultData<span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>code<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token comment">//2.调用方法</span> <span class="token function">getUserById</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
2.11.4 Axios配置信息
说明: 可以通过下列的配置简化 Ajax请求的路径
//配置基本请求路径
axios.defaults.baseURL = "http://localhost:8080/"
- 1
- 2
3. 关于Axios练习(要求至少写2遍)
3.1 VUE+Axios 需求分析
说明:
1. 利用VUE.js构建页面
2. 利用Axios实现userList数据的获取, 利用VUE.js展现列表信息
3. 完成页面数据的删除操作
4. 完成页面数据的修改操作
3.2 绘制前端页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>VUE-Axios练习</title> </head> <body> <!-- 定义VUE根标签 --> <div id="app"> <div align="center"> <h1 align="center">用户新增</h1> 名称: <input type="text" v-model.trim="addUser.name"/> 年龄: <input type="text" v-model.number="addUser.age"/> 性别: <input type="text" v-model.trim="addUser.sex"/> <button @click="addUserMe">新增</button> </div> <hr /> <table id="tab1" border="1px" align="center" width="80%"> <tr> <td colspan="5" align="center"><h1>用户列表</h1></td> </tr> <tr align="center"> <td>编号</td> <td>姓名</td> <td>年龄</td> <td>性别</td> <td>操作</td> </tr> <!-- 指令: 可以循环数据+标签 v-for --> <tr align="center" v-for="user in userList"> <td v-text="user.id"></td> <td v-text="user.name"></td> <td v-text="user.age"></td> <td v-text="user.sex"></td> <td> <button>修改</button> <button>删除</button> </td> </tr> </table> </div><span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">1.</span>引入VUE<span class="token punctuation">.</span>js <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">2.</span>引入<span class="token class-name">Axios</span><span class="token punctuation">.</span>js <span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"../js/axios.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> 需求分析<span class="token number">1</span><span class="token operator">:</span> <span class="token number">1.</span>当用户打开页面时就应该发起<span class="token class-name">Ajax</span>请求获取userList数据<span class="token punctuation">.</span> <span class="token number">2.</span>将userList数据 在页面中展现 <span class="token number">2.1</span>页面中的数据必须在data中定义 <span class="token number">2.2</span> ajax请求的结果赋值给data属性 <span class="token number">3.</span>利用v<span class="token operator">-</span><span class="token keyword">for</span>指令实现数据遍历 需求分析<span class="token number">2</span><span class="token operator">:</span> 用户数据入库操作 <span class="token number">1.</span>在页面中准备用户新增文本框<span class="token operator">/</span>按钮 <span class="token number">2.</span>准备双向数据绑定的规则 <span class="token number">3.</span>为按钮添加事件<span class="token punctuation">,</span>实现数据新增入库<span class="token punctuation">.</span> <span class="token operator">--</span><span class="token operator">></span> <span class="token generics"><span class="token punctuation"><</span>script<span class="token punctuation">></span></span> <span class="token comment">//设定axios请求前缀</span> axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>baseURL <span class="token operator">=</span> <span class="token string">"http://localhost:8090"</span> <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span> data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token comment">//1.定义集合数据 null</span> userList<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">//2.定义addUser对象 新增的用户数据</span> addUser<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> name<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> age<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> sex<span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span> <span class="token comment">//1.定义getuserList方法 获取后台服务器数据</span> async <span class="token function">getUserList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> let<span class="token punctuation">{<!-- --></span>data<span class="token operator">:</span> result<span class="token punctuation">}</span> <span class="token operator">=</span> await axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"/vue/getUserList"</span><span class="token punctuation">)</span> <span class="token comment">//ajax调用之后,将数据给属性.</span> <span class="token keyword">this</span><span class="token punctuation">.</span>userList <span class="token operator">=</span> result <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">//新增操作 请求类型: post 接收时需要使用json方式处理</span> async <span class="token function">addUserMe</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token comment">//不需要返回值</span> await axios<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">"/vue/insertUser"</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">.</span>addUser<span class="token punctuation">)</span> <span class="token comment">//将列表页面重新刷新</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUserList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">//调用生命周期函数</span> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token comment">//console.log("vue对象实例化成功!!!!")</span> <span class="token comment">//初始化时调用getUserList()</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getUserList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
3.3 实现UserList查询
3.3.1 编辑UserController
@RestController @CrossOrigin @RequestMapping("/vue") //包含全部类型 public class VueController {<span class="token annotation punctuation">@Autowired</span> <span class="token keyword">private</span> <span class="token class-name">UserService</span> userService<span class="token punctuation">;</span> <span class="token comment">/** * 需求: 查询用户表的所有数据 * url: /vue/getUserList * 参数: 不要参数 * 返回值: List集合 */</span> <span class="token annotation punctuation">@GetMapping</span><span class="token punctuation">(</span><span class="token string">"/getUserList"</span><span class="token punctuation">)</span> <span class="token keyword">private</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">User</span><span class="token punctuation">></span></span> <span class="token function">getUserList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token keyword">return</span> userService<span class="token punctuation">.</span><span class="token function">getUserList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
3.3.2 编辑UserService
@Service public class UserServiceImpl implements UserService{<span class="token annotation punctuation">@Autowired</span> <span class="token keyword">private</span> <span class="token class-name">UserMapper</span> userMapper<span class="token punctuation">;</span> <span class="token annotation punctuation">@Override</span> <span class="token keyword">public</span> <span class="token class-name">List</span><span class="token generics"><span class="token punctuation"><</span><span class="token class-name">User</span><span class="token punctuation">></span></span> <span class="token function">getUserList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> <span class="token comment">//利用MP获取数据库记录</span> <span class="token keyword">return</span> userMapper<span class="token punctuation">.</span><span class="token function">selectList</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
3.4 实现用户入库操作
3.4.1 编辑UserController
3.4.2 编辑UserService
1221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
