欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

SSM VUE Axios详解

程序员文章站 2022-03-07 12:17:42
目录如何展示sql日志??springmvc里参数传递的说明mybatis简化sql的注解1.vue入门案例2.vue生命周期3.前后端调用 axiosajax如何展示sql日志??在yml核心配置文...

如何展示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 SSM Axios