文章目录

• 1.框架的整理
• • 1.1展现SQL日志
  • 1.2 SpringMVC参数传值的说明
  • • 1.2.1 简单参数传值
    • 1.2.2 对象接收数据
    • 1.2.3 对象的引用赋值
• 1.3 RESTFul业务说明
• • • 1.3.1 编辑UserController方法
• 1.4 Mybatis简化-SQL注解
• 2.1 VUE入门案例
• • 2.2 vue声明周期函数(重点)
  • • 2.2.2 vue生命周期案例
    • 2.2.3 生命周期函数难点了解
• 3 前后端调用Axios
• • 3.1 Ajax
  • • 3.1.1 同步说明
    • 3.1.2 异步说明
    • 3.1.3 Ajax引擎
  • 3.2 Axios 案例练习

1.框架的整理 1.1展现SQL日志

在yml文件添加

#sql日志文件打印
logging:
  level:
    com.jt.mapper: debug

1.2 SpringMVC参数传值的说明

说明:利用MVC可以将参数直接写到方法中直接传值

1.2.1 简单参数传值

    
    @GetMapping("/mvc")
    public Object testDemo(String name){
        return "参数名称"+name;
    }

1.2.2 对象接收数据

说明:如果参数对象有多个,可以使用对象来接收

    
    @GetMapping("/mvc")
    public Object testDemo(User user){
        return "参数名称"+user;
    }

1.2.3 对象的引用赋值

问题:如果前端出现了同名提交的参数问题,则直接影响后台的数据接收.所以前端的数据要求不能出现同名属性.
解决方案:利用对象的应用赋值.

1.封装User对象

	public class User{
		private Integer id;
		private String name;
		private Integer age;
		private Dog dog;//对象的引用
	}
	public class Dog{
		private Integer id;
		private String name;
		private Integer age;
	}

1.3 RESTFul业务说明 1.3.1 编辑UserController方法

 
    @GetMapping("/user/{name}/{age}/{id}")
    public Object restFul(User user){

        userService.update(user);
        return "数据更新成功!!!";
    }

1.4 Mybatis简化-SQL注解

package com.jt.mapper;

import com.jt.pojo.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;
import java.util.Map;

//将该接口交给Spring容器管理
@Mapper
@MapperScan
public interface UserMapper {
    //查询demo_user表中的所有数据

    List findAll();
//根据id查询
    User findUserById(Integer id);

    User findfindUserByNA(@Param("name") String name,@Param("age") Integer age);

    User findUserLike(String name);

    List findUserByIds(Integer[] id);

    User findUser(@Param("id") Integer id,@Param("name") String name,@Param("age") Integer age);

    Map findadd(Map map);

    void findFull(User user);

//    @Select("查询操作的sql")
    @Update("update demo_user set name= #{name}, age = #{age} where id=#{id}")
    void update(User user);
}

2.1 VUE入门案例

	
		
		
		
	
	
		
vue入门案例
		

			
{{msg}}
			
{{nubmer}}
			增加
			减少
		
		
		
		 
		 
	

2.2 vue声明周期函数(重点)

概念:声明周期函数,是vue针对与用户提供的扩展的功能.如果我们编辑了生命周期函数则,vue对象自动执行,无需手动调用
生命周期种类
1.初始化阶段 beforeCreate created beforeMount mounted(vue对象正在的实例化)
2.对象的修改阶段 beforeupdate updated
3.销毁阶段 beforeDestroy destroyed

2.2.2 vue生命周期案例

	
		
		
	
	
		
		

			

			销毁
		
		
		
		
		
	

2.2.3 生命周期函数难点了解

1.beforeCreate
官网说明:在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
解析:vue对象被js刚解析之后,实例化成功,内部的属性暂时都为null

2.Created
官方说明:在实例创建完成后被立即调用
解析: vue对象开始要加载其中的属性和属性的值,当加载完成,对象实例化成功!!! 仅限于创建不执行业务操作

3.beforeMount
官方说明: 在挂载开始之前被调用：相关的 render 函数首次被调用。
解析:vue的对象中el:"#app",通过app指定Id,将我们指定的区域交给我们的vue对象进行管理

4.mounted
官方说明:实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
解析:当对象创建完成之后,并且指定区域开始**“渲染”**,将区域中的标签表达式,进行解析加载,当数据加载之后,这时mounted执行完成.这时用户可以看到解析后的页面.

3 前后端调用Axios 3.1 Ajax 3.1.1 同步说明

同步的特点: 一个线程依次加载执行,如果数据没有加载完成则其他的数据处于等待的状态

3.1.2 异步说明

Ajax特点:局部刷新,异步访问
Ajax为什么可以异步?:Ajax的设计原理-Ajax引擎

3.1.3 Ajax引擎

1.用户发起请求,交给Ajax引擎进行处理,用户可以执行其他的操作
2.Ajax引擎接收到用户请求之后,发起HTTP的请求 访问目标服务器
3.后台的服务器将数据返回给Ajax引擎
4.Ajax引擎将最终获取的数据通过回调函数的方式交给我们的用户去处理

3.2 Axios 案例练习