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中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
springboot+vue实现文件上传下载
Nov 17 Vue.js
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
详解Vue2的diff算法
Jan 06 Vue.js
vue 中 get / delete 传递数组参数方法
Mar 23 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
解决vue中provide inject的响应式监听
Apr 19 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数据库的php代码(一个表一个文件)
2010/05/28 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
js open() 与showModalDialog()方法使用介绍
2013/09/10 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
python如何实现复制目录到指定目录
2020/02/13 Python
python模拟实现分发扑克牌
2020/04/22 Python
python模块如何查看
2020/06/16 Python
Python连接Impala实现步骤解析
2020/08/04 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
给导游的表扬信
2014/01/10 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL