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 19 Vue.js
浅析VUE防抖与节流
Nov 24 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 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程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
PHP写日志的实现方法
2014/11/05 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
JavaScript触发器详解
2007/03/10 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
python 弧度与角度互转实例
2020/04/15 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
Java如何读取CLOB字段
2013/10/10 面试题
Java如何支持I18N?
2016/10/31 面试题
物流管理专业大学生自荐信
2013/10/04 职场文书
预备党员思想汇报
2014/01/08 职场文书
五好党支部事迹材料
2014/02/06 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
三八妇女节标语
2014/10/09 职场文书
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers