一、拓展
1. 展现sql日志文件打印
编辑yml文件 – 想要打印mapper里面的路径 就写路径
#Sql日志文件打印
logging:
level:
com.jt.mapper: debug
2. SpringMVC
2.1 简单参数传值
略
2.2 对象接受数据
多值用对象封装：
如果我们要使用对象的方式赋值，就要用到set方法赋值
2.3 对象的引用赋值（不常用）
问题：如果遇到前端出现了同名参数提交
解决方案：利用对象的引用赋值
在爸爸的pojo下封装儿子
在这边可以去看一对一案例
public class User {
private Integer id;
private String name;
private Integer age;
private String sex;
//封装儿子,对象的引用
private Son son;
}
public class Son {
private Integer id;
private String name;
private Integer age;
private String sex;
}
resultFul
resultful业务说明
resultFul语法：
-
用户编辑
1.1 参数与参数之间用/分割
1.2 如果我们要使用resultFul结构，请求路径中不允许出现动词，隐藏动机
1.3顺序一旦给定，不能随意更改 -
用户规范
由于resultFul请求结构都是名称，所以不能区分业务逻辑,所以严格区分请求的类型
2.1 GET 查询
2.3 POST 新增操作/form表单提交
2.4 PUT 修改操作
2.5 DELETE 删除操作 -
参数接收
浏览器的请求就是get请求
3.1参数与参数之间用/分割
3.2 参数必须使用 {xxx} 包裹 – 语法规则
3.3 使用特定的注解 @PathVariable（“name”）String name 接收参数
3.4 如果接受参数的名称和对象的属性名一致，则可以使用对象接受
更新操作不需要返回值
//使用特定注解
public class Object (@PathVariable("name") String name ){
return "";
}
public class Object (User user ){
return "";
}
作业案例：
更新操作，利用resultFul的结构，根据id修改name/age
URL://localhost:8090/user/貂蝉/18/227
解析：
二、VUE入门
概述
vue是一种渐进式的JavaScript的渐进式框架，渐进式：由简单到复杂都可以使用
这里是引用
使用步骤
- 导入.js文件
- 准备根标签 – 渲染位置
- 创建vue对象，实现挂载
- 定义属性，实现数据动态取值
- 知识补充：代码结构：new vue({}) --函数式编程
变量
var是早期变量 全局变量
let有作用域的概念
const是常量
生命周期函数
概念：是vue针对与用户提供的扩展功能 如果编辑了生命周期函数，则vue对象自动执行 无需手动调用
生命周期函数的种类：
- 初始化阶段：四个函数
1.1.beforecreat 初始化前
1.2. beforeMount 挂载前
1.3. mounted 挂载后
1.4. created vue的对象真正的实例化 - vue对象的修改阶段
2.1beforeUpdate 修改前
2.2updated 修改后 - 对象的销毁阶段
3.1beforeDestroy 销毁前
3.2destroyed 销毁后
生命周期函数
在运行时，会自动调用前四个函数，修改时会自动调用修改两个操作，销毁时，触发销毁函数 --看案例
三、前后端调用Axios
1.Ajax
特点：要求局部刷新，异步访问
1.1同步说明
同步特点：一个线程依次加载执行，如果数据没有加载完成，则其他数据则等待状态
1.2 异步说明
-
Ajax为什么可以异步？
Ajax的设计原理：Ajax的引擎 -
Ajax的引擎
2.1用户发其请求，交给引擎处理，用户可以执行它的操作
2.2引擎收到请求后，发起http到服务器
2.3如果服务器已经在处理请求
2.4如果长时间服务器获取不到数据 会返回504 访问超时
2.5将最终获取的数据，通过回调函数的方式处理
vue基础
js的基础语法
vue入门案例
get请求、post请求
get和delete是一种结构
post和put是一种结构
<body>
<div id = "app"></div>
<script src="../js/vue.js"></script>
<script>
/* 指定公共前缀 为啥呢 因为方便 */
axios.defaults.baseURL = "http://localhost:8080"
/* 需求:获取后台服务器的业务数据---get
* URL: http://localhost:8090/getUser */
//get1:一个参数 根据id查找
let url = "axios/findaxiosById?id=1"
axios.get(url).then(function(promise){
console.log(promise.data)
})
//get2:两个参数 根据age和sex查
let url2 = "axios/findaxiosByAS"
let user = {//定义对象
age:18,
sex:"男"
}
//当我们封装对象，需要用params接
axios.get(url2,{params:user})
.then(function(promise){
console.log(promise.data)
})
//get3:利用resultful方式提交参数
let name = "唐僧"
let sex = "男"
//let url3 = "axios/user" +name+ "/" +sex 不推荐使用
//下面滴是模板 照着写就成 ${}自动识别
let url3 =`axios/user/${name}/${sex}`
axios.get(url3).then(function(promise){
//通过promise.data 获取服务器数据
console.log(promise.data)
})
// get4 : 简单函数体
//1.定义函数
async function getUser(){
let promise = await axios.get("/getUser")
console.log(promise.data)
//解构赋值 固定写法 死记硬背
let {data: result} = await axios.get("/getUser")
console.log(result)
}
//2.调用函数
getUser()
//post1 ： 实现用户入库
let url = "/axios/saveUser"
let user = {
name:"羊快乐",
age :20,
sex:"男"
}
axios.post(url,user).then(function(promise){
console.log(promise.data)
})
</script>
</body>
Axios简化操作
指定请求的前缀
说明：项目中有大量的Ajax请求，每个请求都把路径写全，较为繁琐，不方便扩展
解决方案：
<body>
<!-- 1.导入js 的jar包 -->
<script src="../js/axios.js"></script>
<script >
//指定公共的请求前缀
axios.defaults.baseURL = "http://localhost:8080"
案例：
<body>
<!-- 1.导入js 的jar包 -->
<script src="../js/axios.js"></script>
<script >
//指定公共的请求前缀
axios.defaults.baseURL = "http://localhost:8080"
/*
post请求入库操作
业务 ：实现用户入库
语法：直接传参即可
params只用于get传参
注意 ：resultFul请求不能有动词
post请求跨域， CORS error 会发起两回
第一回检查是否跨域 第二次发送
OPPTIONS：是否支持跨域
知识点：post请求传递对象时，传递的数据是一个JSON串，不能直接为User赋值
解决方案：
spring提供：解决JSON和对象的转换问题
1. 对象转为JSON @ResponseBody
2. JSON转为对象 @RequestBody
*/
let url = "/axios/saveUser"
let user = {
name:"羊快乐",
age :20,
sex:"男"
}
axios.post(url,user).then(function(promise){
console.log(promise.data)
})
309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
