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中defineProperty和Proxy的区别详解
Nov 30 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue封装数字翻牌器
Apr 20 Vue.js
vue3不同环境下实现配置代理
May 25 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
mysql时区问题
2008/03/26 PHP
《PHP编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
php类自动加载器实现方法
2015/07/28 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
2011/02/23 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
python opencv之SIFT算法示例
2018/02/24 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
数据保密承诺书
2014/06/03 职场文书
股东出资证明书(正规版)
2014/09/24 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python
python保存图片的四个常用方法
2022/02/28 Python