vue ssm交互,前端用vue后端用ssm
Axios是前端开发中发送HTTP请求的常用库，大家都知道以前用过。本文主要介绍vue的相关信息，有需要的朋友可以参考一下。
目录
如何显示Sql日志？SpringMVC restful语法中参数传递的解释：用户规范：参数接收：MyBatis简化了sql的注释。前端呼叫1。Vue 2介绍案例。Vue生命周期的概念类型( )3。前端调用AxiosAjax案例一：案例二：通过？属性=属性值拼接的方法案例三：通过对象的方式实现数据传输汇总。
如何展示Sql日志？？
yml核心配置文件中的配置信息
#Sql日志文件打印
日志记录：
级别：
com.jt.mapper:调试
SpringMVC里参数传递的说明
简单的参数值传递：使用MVC将参数写入方法，直接传递值。
对象接收数据：太多参数被封装到对象中。
对象引用赋值：传递了重复的名称参数dog.name
restful
语法：
1.在参数之间使用/split。
2.一旦定义了参数顺序，就不能更改。
3.请求路径中不能出现动词，因为操作意图不能暴露，目的是隐藏的。
用户规范：
通过不同的请求类型区分业务需求。
获取查询
添加帖子/表单提交
Put修改
删除
参数接收：
1.在参数之间使用/split。
2.参数包装在{}中。
3.参数格式@ pathvariable (name )字符串名称
4.如果参数太多，并且参数名称与对象中的属性名称一致，则可以使用对象来接收它们。
@ request mapping( user/{ name }/{ age }/{ id } )
公共整数用户(@PathVariable(name )字符串名称，
@PathVariable(age )整数年龄，
@PathVariable(id )整数id){
返回userService.user(姓名，年龄，id)；
}
/*如何接收对象*/
//@ request mapping( user/{ name }/{ age }/{ id } )
//public Integer userr(User User){
//返回userService.user(用户)；
//}
更新id=用户
更新演示用户集名称=# {名称}，年龄=# {年龄}，其中id=#{id}
/更新
MyBatis简化sql的注解
@ Insert()@ sele()@ Update()@ Delete()
Sql是简化的，但是只适用于简单操作。注释和映射文件不能同时出现。
前后端调用
1.Vue入门案例
！声明文档类型
超文本标记语言
头
meta charset=utf-8
titleVUE /title简介
脚本src=./js/vue.js/script
/头
身体
div id=应用程序
H1获取数据：{{msg}}/h1
/div
脚本
新Vue({
埃尔： #app ，
数据：{
消息：“你好VUE JS”
}
})
/脚本
/body
/html
js中的变量
Var没有作用域，let有作用域，const定义常量。
2.Vue生命周期
概念
这是VUE为用户提供的扩展功能，自动执行生命周期功能。
种类（+）
1.初始化阶段
之前(创建Vue对象，属性暂时为空)创建(加载属性值，只创建不执行，实例化成功)
Before(解析el:#app ，将指定区域/数据渲染区域交给Vue对象管理)Mouted(对象创建后，在指定区域开始渲染，解析表达式，成功执行后用户可以看到解析后的页面)
2.对象使用阶段 VUE对象的修改
更新前更新
3.销毁阶段
销毁前销毁VUE对象被销毁，不再存在。
3.前后端调用 Axios
Ajax
功能：本地刷新、异步访问
同步和异步
Ajax设计原理：Ajax引擎
回调函数？用于通知用户。
案例一：
！声明文档类型
超文本标记语言
头
meta charset=utf-8
TitleAxios练习/标题
脚本src=./js/axios . js /脚本
/头
身体
！-http://本地主机：8090/getUser -
H1 h1Ajax/h1简介
脚本
let URL= http://localhost:8090/getUser
axios.get(url)。然后(功能(承诺){
console.log(promise.data)
})
/脚本
/body
/html
注意：注意@CrossOrigin在控制器级别是必需的！
案例二：通过？属性=属性值的方法拼接
要求：根据Id查询用户URL:URL地址：http://localhost:8090/axios/finduserbyid
前端代码：
让用户={
年龄：21，
性别：“女性”
}
axios . get( http://localhost:8090/axios/findUserByAS ，{
参数：用户
})。然后(功能(承诺){
console.log(promise.data)
})
案例三：通过对象的方式实现数据传递
要求：根据年龄/性别查询用户信息URL:http://localhost:8090/axios/finduserbyas
前端代码：
让用户={
年龄：21，
性别：“女性”
}
axios . get( http://localhost:8090/axios/findUserByAS ，{
参数：用户
})。然后(功能(承诺){
console.log(promise.data)
})
总结
有三种方法传递前端Get请求的参数。
1:通过？属性=属性值的方法串联
2.数据传输是通过对象实现的。
3.使用restFul结构实现参数传递。
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。