SSM知识整合

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接口对象的说明

解释:

1. 将接口交给Spring容器管理,spring会根据class类型,动态的选择创建代理对象. 最终将代理对象交给spring容器管理.
   
2. 代理对象的使用
   

2.代理方式介绍

2.1.1 JDK动态代理

特点:

1. 要求被代理者,必须有接口.
2. 默认条件下如果有接口,则使用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
模块说明:

1. M Model 代表数据. 大概率事件 代表 data中的数据.
2. VM ViewModel 视图模型层 在内部进行计算 在页面进行展现
3. 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 生命周期函数分类

第一类: 对象的初始化阶段

1. beforeCreate.
2. created
   3.beforeMount
   4.mounted
   第二类: 数据修改阶段
   1.beforeUpdate
   2.updated

第三类: 对象的销毁阶段
1.beforeDestroy
2.destroyed

4.6.3 初始化时知识点

1. 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请求的网址,必须满足三要素.
要素:

1. 协议相同
2. 域名相同
3. 端口号相同
   如果上述的三要素都满足,则叫同域访问, 如果三要素有一项不满足,则称为跨域访问.

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 前后端调用结果

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 类型与请求的映射关系

1. 新增操作 类型:POST 接收注解: @PostMapping
2. 删除操作 类型:DELETE 接收注解: @DeleteMapping
3. 更新操作 类型:PUT 接收注解: @PutMapping
4. 查询操作 类型: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);