目录

1 、SpringMVC简单的参数传值

2 、vuedemo案例

2.1 、入门案例--事件绑定

2.2 、循环案例

2.3 、vue生命周期函数

2.4 、前后端调用Axios

2.4.1 、Ajax

3 、vue客户端

    
    @GetMapping("/mvc")
    public Object testDemo(String name) {

        return "参数名称:" + name;
    }

对象接受数据

    
    @GetMapping("/mvc")
    public Object testDemo(User user){

        return "参数名称:"+user;
    }

对象的引用赋值（几乎用不到）

SQL日志展现：

#SQL日志显示
logging:
  level:
    com.jt.mapper: debug

2 、vuedemo案例

2.1 、入门案例--事件绑定

	
		
		
	
	
		
		
		
			双向数据绑定测试
			{插值表达式}} -->
			{{ hello }}
			{{ number }}
			点我增加
		
		
		
		
		
		
		
	

2.2 、循环案例

	
		
		
	
	
		
		
			{}} -->
			{{item}}
			
			
			
			
			
			
			
					
					
			
			
			
			
				
				
				
			
		
		
		
		
	

2.3 、vue生命周期函数

        生命周期函数是vue针对与用户提供的扩展的功能，如果我们编辑了生命周期函数，则vue对象自动调动执行，无需手动调动。

种类：（一共八类）

1.初始化阶段：beforeCreate  created  beforeMount  mounted（vue对象真正实例化）

2.vue对象的使用/修改阶段： beforeUpdate  updated  

3.vue对象销毁阶段：beforeDestroy  destroyed

解析八个种类：

beforeCreate  在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

解析：vue对象被js刚解析之后，实例化成功内部的属性都是空。

created  在实例创建完成后被立即调用

解析：VUE对象开始加载其中的属性和属性的值,当加载完成,对象实例化成功!!! 仅限于创建不执行业务操作。

beforeMount  在挂载开始之前被调用：相关的 render 函数首次被调用

解析：对象中的el:"#app"  ,通过app指定的ID，将指定的区域交给vue对象进行管理。

mounted  实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。   

 解析：当对象创建完成之后,并且指定区域开始 “渲染”,将区域中的标签/表达式进行解析加载. 当数据加载成功之后,这时mounted执行完成.这时用户可以看到解析后的页面。

beforeUpdate  数据更新时调用，发生在虚拟 DOM 打补丁之前

updated  由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

beforeDestroy  实例销毁之前调用。在这一步，实例仍然完全可用

destroyed  实例销毁后调用

	
		
		
	
	
		
		
			

			销毁
		
		
		
		
		
	

2.4 、前后端调用Axios

2.4.1 、Ajax

Ajax特点：局部刷新，异步访问（请求）

同步说明：

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

异步说明：

Ajax 为啥可以异步？（设计原理：Ajax 引擎   ）

Ajax引擎：

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

 

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@CrossOrigin
@RestController
@RequestMapping("/axios")
public class AxiosController {
    @Autowired
    private UserService userService;
    @GetMapping("findUserById")
    public User findUserById(Integer id){
        return userService.findUserById(id);
    }
    
    @GetMapping("/findUserByAS")
    public List findUserByAS(User user){
        return userService.findUserByAS(user) ;
    }
}

	
		
		
	
	
		
		ajax
		
		
		
		
		
		
		
		
		
		
		
		
		
	

3 、vue客户端

下载版本符合的node.js，查询版本

 检查npm版本

 切换npm库

npm config set registry https://registry.npm.taobao.org 

检查镜像配置

npm config list

 下载vue客户端（如果下载出现error尽量多下几次）

npm install -g @vue/cli --force

启动vue客户端

vue ui

创建vue项目

选择手动的预设 

 

 选择ESLint+ StandardConfig

 项目创建完成