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 router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
vue实现购物车的小练习
Dec 21 Vue.js
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
vue 自定义的组件绑定点击事件
Apr 21 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
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
2015/03/27 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
JS实现环形进度条(从0到100%)效果
2016/07/05 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
小程序登录之支付宝授权的实现示例
2019/12/13 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
Python中字典的setdefault()方法教程
2017/02/07 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
对Tensorflow中的变量初始化函数详解
2018/07/27 Python
Django中使用Celery的教程详解
2018/08/24 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
升职自荐书范文
2013/11/28 职场文书
教师网络培训心得体会
2016/01/09 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers