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 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
Vue与React的区别和优势对比
Dec 18 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
vue中activated的用法
Jan 03 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
vue 给数组添加新对象并赋值
Apr 20 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中smarty实现多模版网站的方法
2015/06/11 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
javascript 主动派发事件总结
2011/08/09 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
2018/02/22 Javascript
node.js到底要不要加分号浅析
2018/07/11 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
在Python中marshal对象序列化的相关知识
2015/07/01 Python
python中range()与xrange()用法分析
2016/09/21 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
python 将有序数组转换为二叉树的方法
2019/03/26 Python
Python函数和模块的使用总结
2019/05/20 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
生物化学研究助理员求职信
2013/10/09 职场文书
英文简历中的自我评价用语
2013/12/09 职场文书
大学生旷课检讨书
2014/01/22 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
2014年办公室文员工作总结
2014/11/12 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
导游词之崇武古城
2019/10/07 职场文书
Python3中最常用的5种线程锁实例总结
2021/07/07 Python
golang使用map实现去除重复数组
2022/04/14 Golang