1.SpringBoot整合Mybatis
1.1需要用到的依赖
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<!--引入插件lombok 自动的set/get/构造方法插件 -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<!--mybatis依赖包-->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.2.0</version>
</dependency>
<!--jdbc依赖包-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
</dependencies>
1.2 代码结构
1.3编辑application.yml
#配置端口号
server:
port: 8090
#管理数据源
spring:
datasource:
#高版本驱动使用
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://127.0.0.1:3306/jt?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
#设定用户名和密码
username: root
password: root
#SpringBoot整合Mybatis
mybatis:
#指定别名包
type-aliases-package: com.jt.pojo
#扫描指定路径下的映射文件
mapper-locations: classpath:/mybatis/mappers/*.xml
#开启驼峰映射
configuration:
map-underscore-to-camel-case: true
1.4将Mapper接口交给容器管理
(1)通过@Mapper注解 管理对象
@Mapper //将Mapper接口交给Spring容器管理.
public interface UserMapper {
List<User> findAll();
}
``
(2)通过包扫描的方式,管理mapper接口 编辑主启动类, 指定包扫描路径
```java
@SpringBootApplication
//按照指定的包路径,扫描mapper的接口管理对象
@MapperScan("com.jt.mapper")
public class SpringbootSsmApplication {
public static void main(String[] args) {
SpringApplication.run(SpringbootSsmApplication.class, args);
}
}
1.5Mybatis 单元测试案例
@SpringBootTest
class SpringbootSsmApplicationTests {
@Autowired //注入指定的对象
private UserMapper userMapper; //IDEA 编译提示 不影响执行
/**
* 测试SpringBoot整合Mybatis
*/
@Test
public void testfindAll(){
List<User> userList = userMapper.findAll();
System.out.println(userList);
}
}
1.6关于Mapper接口对象的说明
解释:
- 将接口交给Spring容器管理,spring会根据class类型,动态的选择创建代理对象. 最终将代理对象交给spring容器管理.
- 代理对象的使用
2.代理方式介绍
2.1.1 JDK动态代理
特点:
- 要求被代理者,必须有接口.
- 默认条件下如果有接口,则使用JDK动态代理
2.1.2CGLIB动态代理
特点:
1.不管被代理者是否有接口,都可以为其创建代理对象.
2. 代理对象是目标对象的子类. 继承关系.
结论:
1.Spring中如果有接口,默认使用JDK代理方式,如果没有接口,则默认使用CGLIB代理方式.
2.Spring5以后,自身接口对象创建代理对象时,使用cglib
3.SSM框架案例
3.1业务需求
用户访问URL: http://localhost:8090/findAll
返回值: List 的JSON串.
3.1.2框架关系图
3.1.3层级代码实现
3.1.4编辑UserController
@RestController //@ResponseBody 将list集合转化为json
public class UserController {
@Autowired
private UserService userService;
/**
* URL: http://localhost:8090/findAll
* 参数: 无
* 返回值: List<User>
*/
@RequestMapping("/findAll")
public List<User> findAll(){
return userService.findAll();
}
}
3.1.5编辑UserService
@Service
public class UserServiceImpl implements UserService{
@Autowired
private UserMapper userMapper;
@Override
public List<User> findAll() {
return userMapper.findAll();
}
}
3.1.6编辑UserMapper
1.mapper接口
public interface UserMapper {
List<User> findAll();
}
2.mapper映射文件
<mapper namespace="com.jt.mapper.UserMapper">
<!--必须配置别名包-->
<select id="findAll" resultType="User">
select * from demo_user
</select>
</mapper>
3.1.7页面效果展现
3.2框架代码案例练习
3.2.1根据ID查询数据
需求说明
根据Id查询数据库
URL: http://localhost:8090/findUserById?id=1
返回值: User对象
3.2.2编辑UserController
/**
* 需求: http://localhost:8090/findUserById?id=1
* 参数接收: id=1
* 返回值: User对象
*/
@RequestMapping("/findUserById")
public User findUserById(Integer id){
return userService.findUserById(id);
}
3.2.3 编辑UserService
@Override
public User findUserById(Integer id) {
return userMapper.findUserById(id);
}
3.2.4编辑UserMapper
//注解和映射文件只能二选一
@Select("select * from demo_user where id = #{id}")
User findUserById(Integer id);
3.2.5页面效果展现
3.3.根据age和sex查询数据
业务需求
URL: http://localhost:8090/findUserByAS
返回值: List集合封装.
3.3.1 编辑UserController
/**
* URL地址: http://localhost:8090/findUserByAS?age=18&sex=女
* 参数: age=18 sex=女
* 返回值: List<集合>
* 参数接收: 如果是多个参数,并且参数名称与属性名称一致,可以使用对象接收
*/
@RequestMapping("/findUserByAS")
public List<User> findUserByAS(User user){
return userService.findUserByAS(user);
}
3.3.2 编辑UserService
@Override
public List<User> findUserByAS(User user) {
return userMapper.findUserByAS(user);
}
3.3.3编辑UserMapper
@Select("select * from demo_user where age=#{age} and sex=#{sex}")
List<User> findUserByAS(User user);
3.4RestFul参数传递
3.4.1 业务需求
说明: 要求按照id修改数据
restFul请求路径: http://localhost:8090/updateById/1/黑熊精/3000/男
3.4.2编辑UserController
/**
* URL: http://localhost:8090/updateById/1/黑熊精/3000/男
* 参数: 4个
* 返回值: "修改成功!!!!"
* restFul结构 参数分析 {属性名称}
* 参数接收:
* 1. 单个参数使用 @PathVariable Integer id接收
* 2. 如果多个参数接收 使用对象 mvc自动提供的功能.
*/
@RequestMapping("/updateById/{id}/{name}/{age}/{sex}")
public String updateById(User user){
userService.updateById(user);
return "用户修改成功";
}
3.2.3编辑UserService
//spring整合mybatis之后,事务自动提交.
@Override
public void updateById(User user) {
userMapper.updateById(user);
}
3.4.4编辑UserMapper
@Update("update demo_user set name=#{name},age=#{age},sex =#{sex} where id=#{id}")
void updateById(User user);
3.5模糊查询
3.5.1业务说明
模糊查询 查询name中包含 "乔"的用户.
http://localhost:8090/findUserByLike?name=乔 返回list集合
3.5.2编辑UserController
@GetMapping("/findUserByLike")
public List<User> findUserByLike(String name){
return userService.findUserByLike(name);
}
3.5.3编辑UserService
@Override
public List<User> findUserByLike(String name) {
return userMapper.findUserByLike(name);
}
3.5.4辑UserMapper
@Select("select * from demo_user where name like \"%\"#{name}\"%\" ")
List<User> findUserByLike(String name);
3.6批量查询
3.6.1业务说明
批量查询 查询id=1,3,5,7的数据
http://localhost:8090/findUserByIds?ids=1,3,5,7 返回list集合
3.6.2编辑UserController
//知识点: MVC中参数,号分割的规则. 应该使用数组接收 mvc的规则
@GetMapping("/findUserByIds")
public List<User> findUserByIds(Integer[] ids){
return userService.findUserByIds(ids);
}
3.6.3 编辑UserService
@Override
public List<User> findUserByIds(Integer[] ids) {
return userMapper.findUserByIds(ids);
}
3.6.4编辑UserMapper
List<User> findUserByIds(@Param("ids") Integer[] ids);
3.6.5编辑映射文件
<mapper namespace="com.jt.mapper.UserMapper">
<!--必须配置别名包-->
<select id="findAll" resultType="User">
select * from demo_user
</select>
<select id="findUserByIds" resultType="User">
select * from demo_user where id in (
<foreach collection="array" separator="," item="id">
#{id}
</foreach>
)
</select>
</mapper>
3.7实现用户新增
3.7.1业务说明
实现用户新增
http://localhost:8090/saveUser/悟空/8000/男 返回成功的提示即可
3.7.2编辑UserController
@RequestMapping("/saveUser/{name}/{age}/{sex}")
public String saveUser(User user){
userService.saveUser(user);
return "新增入库成功!!!";
}
3.7.3 编辑UserService
@Override
public void saveUser(User user) {
userMapper.saveUser(user);
}
3.7.4编辑UserMapper
@Insert("insert into demo_user(id,name,age,sex) value(null,#{name},#{age},#{sex})")
void saveUser(User user);
4.VUE.JS案例复习
4.1 入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>入门案例</title>
</head>
<body>
<div id="app">
<!-- 利用差值表达式 获取数据 -->
{{msg}}
<!-- v-text标签 只有页面渲染数据完成之后,才会展现
只能使用在展现标签中
-->
<p v-text="msg"></p>
</div>
<!-- 1.引入vue.js -->
<script src="../js/vue.js"></script>
<!-- 2.定义vue js -->
<script>
new Vue({
//数据挂载
el: "#app",
data: {
msg: "VUE的入门案例"
}
})
</script>
</body>
</html>
4.2 点击事件用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击事件操作</title>
</head>
<body>
<div id="app">
<!-- 点击事件的案例
1.事件绑定使用基本语法 v-on:
2.简化写法 v-on: 使用@符号代替
-->
{{num}} <br>
<!-- <button v-on:click="">自增</button> -->
<button @click="addNum">自增</button>
</div>
<script src="../js/vue.js"></script>
<script>
/*
JS中的变量名称
1. var 最常规的变量声明,没有作用域
2. let 代替var 有作用域
3. const 定义常量
*/
const app = new Vue({
el: "#app",
data: {
num: 100
},
methods:{
addNum(){
//自增
this.num ++
}
}
})
</script>
</body>
</html>
4.3 双向数据绑定
4.3.1 页面案例测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双向数据绑定</title>
</head>
<body>
<div id="app">
<h1>测试双向数据绑定</h1>
<!-- 定义一个输入框 -->
<!-- 双向数据绑定的规则:
1. data中的数据变化,则页面数据变化.
2. 页面数据变化,则data中的数据变化
-->
用户名: <input type="text" v-model="msg"/>
{{msg}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
msg: "admin1111111"
},
methods:{
}
})
</script>
</body>
</html>
4.3.2 双向数据绑定的原理
设计模型: MVVM
模块说明:
- M Model 代表数据. 大概率事件 代表 data中的数据.
- VM ViewModel 视图模型层 在内部进行计算 在页面进行展现
- V View 视图层 用户看到的页面展现效果.
内存原理图:
总结: 虚拟DOM是实现数据实时更新的重要的组件. 内存数据变化.则页面数据实时变化.
4.4 分支结构用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>分支结构-IF</title>
</head>
<body>
<div id="app">
<h1>分支结构测试</h1>
请输入分数: <input type="text" v-model="score" />
<!--
判断原则: 如果判断为true 则展现标签
-->
<p v-if="score >= 90">优秀</p>
<p v-else-if="score >= 80">良好</p>
<p v-else-if="score >= 70">中等</p>
<p v-else>再接再厉</p>
<!--
用户输入考试成绩,自动获取评级.
>=90 优秀
>=80 良好
>=70 中等
低于70 再接再厉
-->
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
score: ''
},
methods:{
}
})
</script>
</body>
</html>
4.5 循环遍历结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>循环结构</title>
</head>
<body>
<div id="app">
<h1>循环结构</h1>
<!-- 指定午饭数组,之后循环遍历输出 -->
<h3 v-for="item in lunch">{{item}}</h3>
<!-- 获取数组下标 -->
<h3 v-for="(item,index) in lunch">{{index}} ---- {{item}}</h3>
<h1>遍历数组对象</h1>
<p v-for="user in list">
id号: {{user.id}} | 名称: {{user.name}}
</p>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
lunch: ['宫保鸡丁','爆炒腰花','土豆片','土豆丝','土豆泥'],
list: [
{id: 1, name: "张三"},
{id: 2, name: "李四"},
{id: 3, name: "王五"}
]
},
methods:{
}
})
</script>
</body>
</html>
4.6 VUE生命周期函数
4.6.1 图例
生命周期函数的目的: 控制整个vue对象的, 在各个阶段都可以对VUE进行控制.
生命周期函数都是自动调用, 如果你配置了生命周期方法.
4.6.2 生命周期函数分类
第一类: 对象的初始化阶段
- beforeCreate.
- created
3.beforeMount
4.mounted
第二类: 数据修改阶段
1.beforeUpdate
2.updated
第三类: 对象的销毁阶段
1.beforeDestroy
2.destroyed
4.6.3 初始化时知识点
- beforeCreate
在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
解释: 创建了一个VUE的对象,只是还没有加载其中的属性.只是一个空对象.
2.created
在实例创建完成后被立即同步调用
解释: VUE对象开始填充数据. 表示配置完成.
3.beforeMount
在挂载开始之前被调用:相关的 render 函数首次被调用。
解释: 对象根据已经配置的内容,在指定的区域开始加载数据.(属性的值,保存到内存中)
4.mounted
实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了
解释: 在指定的区域中,渲染页面. (为页面填充数据), 页面初始化完成.
4.6.4 生命周期函数用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试vue生命周期函数</title>
</head>
<body>
<div id="app">
<h3 v-text="msg"></h3>
<button @click="destroy">销毁</button>
</div>
<!--引入js函数类库 -->
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el : "#app",
data : {
msg: "vue生命周期"
},
//在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
beforeCreate(){
console.log("beforeCreate")
},
//在实例创建完成后被立即调用
created(){
console.log("created")
},
//在挂载开始之前被调用:相关的 render 函数首次被调用。
beforeMount(){
console.log("beforeMount")
},
//实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了。
mounted(){
console.log("mounted")
},
//数据更新时调用,发生在虚拟 DOM 打补丁之前
beforeUpdate(){
console.log("beforeUpdate")
},
//由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
updated(){
console.log("updated")
},
//实例销毁之前调用。在这一步,实例仍然完全可用
beforeDestroy(){
console.log("beforeDestroy")
},
//实例销毁后调用。
destroyed(){
console.log("destroyed")
},
methods:{
destroy(){
this.$destroy()
}
}
})
</script>
</body>
</html>
5. 远程调用
5.1 什么是跨域
说明: 浏览器解析Ajax时 要求浏览器的网址,与Ajax请求的网址,必须满足三要素.
要素:
- 协议相同
- 域名相同
- 端口号相同
如果上述的三要素都满足,则叫同域访问, 如果三要素有一项不满足,则称为跨域访问.
5.2 跨域访问测试案例
浏览器网址: http://www.baidu.com:80/xxx/xxxx
Ajax请求网址: https://www.baidu.com:80/xxx/xxxx 跨域访问 协议不同
浏览器网址: http://110.242.68.3:80/xxx/xxxx
Ajax请求网址: http://www.baidu.com:80/xxx/xxxx 跨域请求 域名不同
浏览器网址: http://www.baidu.com/xxx/xxxx
Ajax请求网址: http://www.baidu.com:80/xxx/xxxx 同域请求 http端口默认80
浏览器网址: https://www.baidu.com/xxx/xxxx
Ajax请求网址: https://www.baidu.com:443/xxx/xxxx 同域请求 https端口默认443
浏览器地址: http://127.0.0.1:8848/vuejs/xxxx/xxxx
Ajax请求网址: http://localhost:8090/findAll 跨域请求 域名和端口号不同
5.3 远程入门案例测试
5.3.1 编辑页面JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试vue生命周期函数</title>
</head>
<body>
<div id="app">
<h1>前后端调用测试</h1>
</div>
<!-- 1.完成前后端远程调用 -->
<!-- 1.1 引入js函数 -->
<script src="../js/axios.js"></script>
<script>
//1. 动态获取用户列表信息 axios.get(url地址,提交的参数)
let url1 = "http://localhost:8090/findAll"
axios.get(url1)
.then(function(promise){
console.log(promise)
/* 获取服务器返回值数据 */
console.log(promise.data)
})
</script>
</body>
</html>
5.3.2 前后端调用结果![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/20ff9efc27626564ca2961c00289654e.png)
5.4 带参数GET请求
5.4.1 编辑页面JS
//2. 根据id动态获取用户信息
let id = 3
let url2 = "http://localhost:8090/findUserById?id="+id
axios.get(url2)
.then(function(promise){
console.log(promise.data)
})
5.4.2 页面效果展现
5.5 GET请求对象参数用法
5.5.1 F12 开发工具用法
5.5.2 前端页面JS
//3. 多参数的Get请求. 如果是多个参数可以考虑封装为对象
let user3 = {age: 18, sex: "女"}
let url3 = "http://localhost:8090/findUserByAS"
// GET请求传递对象 使用 {params: 对象参数}
axios.get(url3,{params: user3})
.then(function(promise){
console.log(promise.data)
})
5.5.3 前端请求路径结构
5.5.4 前端响应
5.6 请求类型与业务关系
5.6.1 请求类型说明
5.6.2 类型与请求的映射关系
- 新增操作 类型:POST 接收注解: @PostMapping
- 删除操作 类型:DELETE 接收注解: @DeleteMapping
- 更新操作 类型:PUT 接收注解: @PutMapping
- 查询操作 类型:GET 接收注解: @GetMapping
5.6.3 编辑前端页面
/**
* 4. 实现数据修改操作
* 4.1 请求路径 必须使用restFul结构
* 4.2 前端知识点: 模板字符串
* 语法: `` 反引号
* 作用: 1. 保留代码片段的格式
* 2. 可以动态取值 ${key}
*/
let html = `
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
`
let user4 = {id: 1,name: "黑熊精",age: 3000,sex: "男"}
let url4 = `http://localhost:8090/updateById/${user4.id}/${user4.name}/${user4.age}/${user4.sex}`
axios.put(url4)
.then(function(promise){
console.log(promise.data)
})
5.6.4 后端交互
6.Axios 知识补充
6.1 Axios-Post请求
6.1.1 编辑页面JS
<script src="../js/axios.js"></script>
<script>
/**
* 完成用户入库操作
* 用法: axios.post(url地址,对象名称)
* axios.put(url地址, 对象名称)
*
* axios.get(url地址,{params: 对象名称})
* axios.delete(url地址,{params: 对象名称})
*/
let url1 = "http://localhost:8090/axios/saveUser"
let user1 = {name: "tomcat",age: 18, sex: "女"}
axios.post(url1,user1)
.then(function(promise){
console.log(promise.data)
})
</script>
6.1.2 页面参数说明
说明: 用户在js中写的是JS对象,经过浏览器解析发起Ajax请求时,js对象被解析为JSON串.
交互的媒介: HTTP协议 协议中要求传递字符串
6.1.3 打印Sql语句
说明: 编辑YML文件
#配置端口号
server:
port: 8090
#管理数据源
spring:
datasource:
#高版本驱动使用
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://127.0.0.1:3306/jt?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
#设定用户名和密码
username: root
password: root
#SpringBoot整合Mybatis
mybatis:
#指定别名包
type-aliases-package: com.jt.pojo
#扫描指定路径下的映射文件
mapper-locations: classpath:/mybatis/mappers/*.xml
#开启驼峰映射
configuration:
map-underscore-to-camel-case: true
# 一二级缓存默认开始 所以可以简化
#打印mysql日志
logging:
level:
com.jt.mapper: debug
6.1.4 编辑AxiosController
@RestController
@CrossOrigin
@RequestMapping("/axios") //抽取前缀
public class AxiosController {
@Autowired
private AxiosService axiosService;
/**
* 实现用户入库操作
* url地址: http://localhost:8090/axios/saveUser
* 参数: JSON串 {"name":"tomcat","age":18,"sex":"女"}
* 返回值: 成功消息
* 难点: 前端传递的是JSON,后端不可以直接使用User对象接收.
* 解决方案:
* 1.对象可以转化为JSON串 @ResponseBody
* 2.JSON串转化为对象 @RequestBody
*/
@PostMapping("/saveUser")
public String saveUser(@RequestBody User user){
axiosService.saveUser(user);
return "用户新增成功!!";
}
}
6.1.5 编辑AxiosService
@Service
public class AxiosServiceImpl implements AxiosService{
@Autowired
private AxiosMapper axiosMapper;
@Override
public void saveUser(User user) {
axiosMapper.saveUser(user);
}
}
6.1.6 编辑AxiosMapper
public interface AxiosMapper {
@Insert("insert into demo_user(id,name,age,sex) value (null,#{name},#{age},#{sex})")
void saveUser(User user);
}
6.2 Ajax简化操作
6.2.1 简化Ajax前缀
// axios.defaults.baseURL = “http://localhost:8090” 用法
//定义axios请求的前缀
axios.defaults.baseURL = "http://localhost:8090"
//let url1 = "/axios/saveUser"
let user1 = {name: "tomcat",age: 18, sex: "女"}
axios.post("/axios/saveUser",user1)
.then(function(promise){
console.log(promise.data)
})
6.2.2 关于promise对象的说明
概念: promise 是ajax发起请求之后,服务器返回信息 封装到promise对象中.
引入promise对象,使得ajax调用 在交互中变得简化.
6.3Ajax "回调地狱"问题
6.3.1 回调地狱说明
缺点: 嵌套层级太深,不便于维护.
分析: 将ajax的2层方法,想办法封装到一层中.
6.3.2 解决回调地狱-async-await
/**
* 1.定义一个方法
* 关键字:
* 1. async 标识函数
* 2. await
*/
async function saveUser(){
let user2 = {name: "axios",age: 18, sex: "男"}
let promise = await axios.post("/axios/saveUser",user2)
console.log(promise.data)
}
//2.调用方法
saveUser()
6.3.3 简化promise对象写法
/**
* 1.定义一个方法
* 关键字:
* 1. async 标识函数
* 2. await 标识ajax请求
*/
async function saveUser(){
let user2 = {name: "axios",age: 18, sex: "男"}
//let {conf: confv,data: datav,status: statusv} = await axios.post("/axios/saveUser",user2)
let {data: result} = await axios.post("/axios/saveUser",user2)
console.log(result)
}
7.用户CURD操作
7.1 实现用户列表展现
7.1.1 需求说明
要求用户访问页面的时候, 初始化的时候 就要求访问后台服务器.,发起Ajax请求. 实现用户列表页面的渲染.
解决方案: 使用mounted 函数
7.1.2 编辑页面JS
<script src="../js/axios.js"></script>
<script src="../js/vue.js"></script>
<script>
//指定公共的前缀
axios.defaults.baseURL = "http://localhost:8090"
const app = new Vue({
el: "#app",
data: {
userList: []
},
methods: {
async findUserList(){
let {data: result} = await axios.get("/axios/findUserList")
//如果需要将ajax请求与vue JS进行关联,则必须实现数据传递
this.userList = result
}
},
mounted(){
//页面初始化完成之后调用
this.findUserList()
}
})
</script>
7.1.3 编辑AxiosController
/**
* 需求: 查询所有的用户信息
* URL: /axios/findUserList
* 返回值: List<User>
*/
@GetMapping("/findUserList")
public List<User> findUserList(){
return axiosService.findUserList();
}
7.1.3 编辑AxiosService
@Override
public List<User> findUserList() {
return axiosMapper.findUserList();
}
7.1.4 编辑AxiosMapper
@Select("select * from demo_user")
List<User> findUserList();
7.1.5 页面中回显数据
<!-- 遍历tr标签 展现数据 -->
<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>
7.1.6 页面效果展现
7.2 用户新增操作
7.2.1 双向数据绑定
规则: 看到文本框,首先想到使用双向数据绑定.
用户输入框 双向数据绑定:
1.页面名称
<div align="center">
<h3 align="center">用户新增</h3><br>
<p>
用户名称: <input type="text" name="name" v-model="addUser.name"/>
用户年龄: <input type="text" name="age" v-model="addUser.age" />
用户性别: <input type="text" name="sex" v-model="addUser.sex" />
<button @click="addUserBtn">新增</button>
</p>
</div>
2.编辑页面JS
data: {
userList: [],
//定义新增的user对象
addUser: {
id: null,
name: '',
age: '',
sex: ''
}
}
3.编辑提交函数
//实现用户数据的入库操作 this.addUser 传递封装的对象
async addUserBtn(){
let {data: result,status: status}
= await axios.post("/axios/saveUser",this.addUser)
if(status === 200){
alert(result)
//1.清空用户文本输入框
this.addUser = {}
//2.刷新用户列表
this.findUserList()
}else{
alert("用户新增失败!!!!")
}
}
7.3 用户修改操作
7.3.1 数据回显
1.在表格中按钮添加点击事件
2.定义点击事件函数
//用户修改事件
updateClick(user){
//将user对象传递给updateUser的属性
this.updateUser = user
}
3.定义页面数据双向数据绑定
<div align="center">
<h3 align="center">用户修改操作</h3><br>
<p>
用户ID号: <input type="text" name="id" v-model="updateUser.id" disabled/>
用户名称: <input type="text" name="name" v-model="updateUser.name"/>
用户年龄: <input type="text" name="age" v-model="updateUser.age"/>
用户性别: <input type="text" name="sex" v-model="updateUser.sex"/>
<button>修改</button>
</p>
</div>
7.3.2 实现用户修改操作
1.编辑修改按钮
7.编辑修改页面JS
//定义修改操作函数 数据封装之后提交
async updateUserBtn(){
let {data: result} = await axios.put("/axios/updateUser",this.updateUser)
alert(result)
this.updateUser = {}
this.findUserList()
}
7.3.3 编辑AxiosController
/**
* 用户修改操作
* URL: /axios/updateUser
* 参数: JSON串
* 返回值: String
*/
@PutMapping("/updateUser")
public String updateUser(@RequestBody User user){
axiosService.updateUser(user);
return "用户修改成功!!!";
}
7.3.4 编辑AxiosService
@Override
public void updateUser(User user) {
axiosMapper.updateUser(user);
}
7.3.5 编辑AxiosMapper
@Update("update demo_user set name=#{name},age=#{age},sex=#{sex} where id=#{id}")
void updateUser(User user);
7.3用户删除操作
1.编辑修改按钮
2.编辑修改页面JS
async deleteUser(user){
//根据主键删除
//await axios.delete("/axios/deleteUser",{params: {id: user.id}});
let {data: result} = await axios.delete("/axios/deleteUser?id="+user.id);
alert(result)
//重新查询列表数据
this.findUserList()
}
7.3.3 编辑AxiosController
@DeleteMapping("deleteUser") //delete / get
public String deleteUser(Integer id){
axiosService.deleteUserById(id);
return "用户删除成功!!!";
}
7.3.4 编辑AxiosService
@Override
public void deleteUserById(Integer id) {
axiosMapper.deleteUserById(id);
}
7.3.5 编辑AxiosMapper
@Delete("delete from demo_user where id = #{id}")
void deleteUserById(Integer id);