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 26 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue3.0 数字翻牌组件的使用方法详解
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的curl实现get和post的代码
2008/08/23 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
浅析PHP 中move_uploaded_file 上传中文文件名失败
2019/04/17 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
Python创建系统目录的方法
2015/03/11 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
基于python实现对文件进行切分行
2020/04/26 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
大学生自我鉴定范文
2013/12/28 职场文书
甜点店创业计划书
2014/01/27 职场文书
总裁助理岗位职责
2014/02/17 职场文书
幼儿园安全责任书
2014/04/14 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
开学典礼校长致辞
2015/07/29 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python