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 相关文章推荐
8个非常实用的Vue自定义指令
Dec 15 Vue.js
vue el-upload上传文件的示例代码
Dec 21 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
如何vue使用el-table遍历循环表头和表体数据
Apr 26 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中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
Document 对象的常用方法
2009/07/31 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
pymssql ntext字段调用问题解决方法
2008/12/17 Python
python获取android设备的GPS信息脚本分享
2015/03/06 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
python语言是免费还是收费的?
2020/06/15 Python
python算的上脚本语言吗
2020/06/22 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
苹果台湾官网:Apple台湾
2019/01/05 全球购物
为什么要使用servlet
2016/01/17 面试题
高一地理教学反思
2014/01/18 职场文书
幼儿园五一活动方案
2014/02/07 职场文书
车辆工程专业求职信
2014/04/28 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
经验交流材料格式
2014/12/30 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python