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 相关文章推荐
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
vue实现图书管理系统
Dec 29 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
Vue Element plus使用方法梳理
Dec 24 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 中文处理函数集合
2008/08/27 PHP
php 特殊字符处理函数
2008/09/05 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
使用正则替换变量
2007/05/05 Javascript
javascript RadioButtonList获取选中值
2009/04/09 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
[01:03:42]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
Django 拆分model和view的实现方法
2019/08/16 Python
python分布式计算dispy的使用详解
2019/12/22 Python
生物科学专业毕业生求职信
2014/06/02 职场文书
党员一帮一活动总结
2014/07/08 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
2015年工商所工作总结
2015/05/21 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
vue组件vue-esign实现电子签名
2022/04/21 Vue.js