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打开其他项目页面并传入数据详解
Nov 25 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
vue项目配置sass及引入外部scss文件
Apr 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中autoload的用法总结
2013/11/08 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
javascript event 事件解析
2011/01/31 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
jquery ztree实现右键收藏功能
2017/11/20 jQuery
vue实现微信获取用户信息的方法
2019/03/21 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python-基础-入门 简介
2014/08/09 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
法学专业本科生自荐信范文
2013/12/17 职场文书
个人委托书范本
2014/09/13 职场文书
2014年大学生工作总结
2014/11/20 职场文书
导师对论文的学术评语
2015/01/04 职场文书
2015最新学生自我评价范文
2015/03/03 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
优秀志愿者感言
2015/08/01 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android
Python OpenCV超详细讲解基本功能
2022/04/02 Python