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+iview实现分页及查询功能
Nov 17 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
原生JS封装vue Tab切换效果
Apr 28 Vue.js
Vue详细的入门笔记
May 10 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
vue+spring boot实现校验码功能
May 27 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
el-table-column 内容不自动换行的解决方法
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
如何选购合适的收音机
2021/03/01 无线电
社区(php&amp;&amp;mysql)一
2006/10/09 PHP
PHP 命名空间实例说明
2011/01/27 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
jquery插件制作简单示例说明
2012/02/03 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
2019/09/04 Javascript
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
通过C++学习Python
2015/01/20 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
python实现求特征选择的信息增益
2018/12/18 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
Python Django 命名空间模式的实现
2019/08/09 Python
浅析python redis的连接及相关操作
2019/11/07 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
美国眼镜在线零售商:Dualens
2019/12/07 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
七年级历史教学反思
2014/02/05 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python