SSM VUE Axios详解


Posted in Vue.js onOctober 05, 2021

如何展示Sql日志??

在yml核心配置文件内配置信息

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

SSM VUE Axios详解

SSM VUE Axios详解

SpringMVC里参数传递的说明

简单参数传值:利用MVC将参数写到方法中,直接传值

对象接收数据:参数过多封装成对象

对象的引用赋值:重名参数传递 dog.name

restful

语法:

1.参数与参数之间用/分割

2.参数顺序一旦定义,不可更改

3.请求路径中不可出现动词 因为不可暴露操作意图,隐藏目的

用户规范:

采用不同请求类型区分业务需求

get 查询

post 新增/form提交

put 修改

delete 删除

参数接收:

1.参数与参数之间用/分割

2.参数使用{}包裹

3.参数格式 @PathVariable("name") String name

4.若参数过多,参数名称与对象中属性名称一致,可使用对象接收

@RequestMapping("user/{name}/{age}/{id}")
    public Integer user(@PathVariable("name") String name,
                        @PathVariable("age") Integer age,
                        @PathVariable("id") Integer id){
        return userService.user(name,age,id);
    }
    /*对象接收方式*/
//    @RequestMapping("user/{name}/{age}/{id}")
//    public Integer userr(User user){
//        return userService.user(user);
//    }
<update id="user">
        update demo_user set name=#{name},age=#{age} where id =#{id}
    </update>

 

MyBatis简化sql的注解

@Insert() @sele() @Update() @Delete()

简化Sql,但是只适用于简单操作,注解与映射文件不可同时出现

SSM VUE Axios详解

前后端调用

1.Vue入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE入门案例</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<h1>获取数据:{{msg}}</h1>
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					msg:"您好 VUE JS"
				}
			})
		</script>
		
	</body>
</html>

js中的变量

var无作用域,let有作用域,const定义常量

2.Vue生命周期

概念

是VUE针对用户提供的扩展的功能,生命周期函数是自动执行的

种类(③+⑧)

1.初始化阶段④

beforeCreate(创建Vue对象,属性暂时为null) Created(加载其中的属性值,仅限创建不执行,实例化成功)

beforeMount(解析el:"#app",将指定区域/数据渲染区域交给Vue对象管理) Mouted(对象创建后,并且在指定区域开始渲染,解析表达式,执行成功之后,用户可可以看到解析后的页面)

2.对象使用阶段 VUE对象的修改②

beforeUpdate Updated

3.销毁阶段②

beforeDestroy Destroyed→VUE对象被销毁,不存在了

3.前后端调用 Axios

Ajax

特点:局部刷新,异步访问

同步与异步

Ajax设计原理:Ajax引擎

回调函数?? 用来通知用户的

案例一:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios练习</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<!-- http://localhost:8090/getUser -->
		<h1>Ajax入门案例</h1>
		<script>
			let url="http://localhost:8090/getUser"
			axios.get(url)
			       .then(function(promise){
				    console.log(promise.data)
			})
		</script>
	</body>
</html>

注意:需要在Controller层加注解@CrossOrigin!!!!!!!

SSM VUE Axios详解

SSM VUE Axios详解

案例二:通过?属性=属性值的方法拼接

需求:根据Id查询用户 url:url地址: http://localhost:8090/axios/findUserById

前端代码:

let user = {
					age: 21,
					sex: "女"
				}
				axios.get("http://localhost:8090/axios/findUserByAS", {
						params: user
					})
					.then(function(promise) {
						console.log(promise.data)
					})

案例三:通过对象的方式实现数据传递

需求:根据age/sex查询用户信息 url:http://localhost:8090/axios/findUserByAS

前端代码:

let user = {
					age: 21,
					sex: "女"
				}
				axios.get("http://localhost:8090/axios/findUserByAS", {
						params: user
					})
					.then(function(promise) {
						console.log(promise.data)
					})

总结

前端Get请求参数传递的方式3种

方式1: 通过?属性=属性值的方法拼接

方式2: 通过对象的方式实现数据传递

方式3: 利用restFul的结构实现参数传递.

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!

Vue.js 相关文章推荐
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
vue动态设置路由权限的主要思路
Jan 13 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
vue+element ui实现锚点定位
Jun 29 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
vue使用Google Recaptcha验证的实现示例
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 #Vue.js
Vue3.0 手写放大镜效果
vue项目多环境配置(.env)的实现
Vue Element-ui表单校验规则实现
Jul 09 #Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 #Vue.js
Vue项目打包、合并及压缩优化网页响应速度
You might like
php strtotime 函数UNIX时间戳
2009/01/14 PHP
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
兼容浏览器的js事件绑定函数(详解)
2017/05/09 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
express+vue+mongodb+session 实现注册登录功能
2018/12/06 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
python numpy格式化打印的实例
2018/05/14 Python
python中for用来遍历range函数的方法
2018/06/08 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
元组列表字典(莫烦python基础)
2019/04/03 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
Hammitt官网:设计师手袋
2020/05/23 全球购物
新大陆软件面试题
2016/11/24 面试题
机械制造专业毕业生求职信
2014/03/02 职场文书
《富饶的西沙群岛》教学反思
2014/04/09 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
学生鉴定评语大全
2014/05/05 职场文书
运动会广播稿300字
2015/08/19 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
Golang 对es的操作实例
2022/04/20 Golang
python中的random模块和相关函数详解
2022/04/22 Python