SpringMVC参数与前后端调用

• 打印SQL日志文件(application.yml)

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

• SpringMVC参数传值

简单参数传值：

@GetMapping("getmvc")
    public Object testDemo1(String name){
        return name;
    }

对象结构传值：

@GetMapping("mvcbyobj")
    public Object testDemo2(Dept d,String deptName1,String deptNAme2){
        return d;
    }

对象的引用赋值：
案例：

<input type="text" name="name" value="小猫" />
<input type="text" name="age" value="10" />
<input type="text" name="dog.name" value="小狗" />
<input type="text" name="dog.age" value="8" />

public class Dept implements Serializable {
    private Integer deptId;
    private String deptName;
    private Dog dog;
}

class Dog {
    private String name;
    private Integer age;
}

• Restful结构
  语法：
  1.参数之间/分隔
  2.结构顺序一旦确定，不能修改
  3.请求路径中不能出现动词
  规则：
  由于restFul结构请求路径都是名称，所以不能区分业务逻辑，因此采用请求的类型，严格区分业务需求（GET：查询操作；POST：新增/提交表单；PUT：修改；DELETE：删除）
  参数接收：
  1.使用@PathVariable(“name”) String name接收参数
  2.若参数名与对象属性名一致，则可以使用对象接收
• 前后端调用
  Vue相关：
  用let代替var，let有作用域概念
  生命周期函数：
  Vue针对于用户提供的扩展的功能，如果编辑了生命周期函数，则Vue自动调用，种类（
       1.初始化阶段： beforeCreate、created、beforeMount、mounted
       2.Vue对象的修改： beforeUpdated、updated
       3.对象的销毁： beforeDestory、destroyed
  ）
  beforeCreate: Vue对象被js解析后，实例化一个空对象，内部的属性都为null
  created： 加载对象中的属性和属性值，加载完成仅说明实例化成功，不执行业务
  beforeMounte： 通过el：“#app”中的app指定的id，将指定的区域（渲染区域）交给Vue管理
  mounted： 将渲染区域中的标签表达式进行解析加载，加载成功即代表mounted执行完成，用户可以看到解析页面
• Ajax
  同步说明：
  一个线程依次访问，一个数据没有加载完成则其他数据处于等待状态
  特点： 局部刷新，异步访问。得益于Ajax设计原理，Ajax引擎
  步骤：
  1.用户发起请求交给Ajax处理，这时用户可以进行其他操作
  2.Ajax收到请求后，发起HTTP请求访问目标服务器
  3.后台服务器将数据返回给Ajax引擎
  4.Ajax引擎将最终获取到的数据通过回调函数返回给用户处理
  Axios：
  在后端控制类加上@CrossOrigin:解决跨域问题

<script src="../js/axios.js"></script>
		<script>
			let url = "http://localhost:8090/getmvc?name=zzq"
			//发起get请求，还有post/put/delete
			axios.get(url)
				.then(function(promise){//回调函数获取返回结果
					console.log(promise.data)
				})
		</script>

axios面向对象封装方式：

let url2 = "http://localhost:8090/axios/findbyIA"
let dept = {
	deptId:103,
	deptName:"安保部"
}
axios.get(url2,{params:dept}).then(function(promise){
	console.log(promise.data)
})