VUE基本用法与Ajax（get查询）

最新推荐文章于 2023-06-11 14:21:48 发布

我心向明月_X

最新推荐文章于 2023-06-11 14:21:48 发布

阅读量1.2k

点赞数 1

分类专栏： axios 文章标签： ajax html

原文链接：https://blog.csdn.net/qq_16804847/article/details/119924333

版权

axios 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

@GetMapping

VUE基本用法

表单双向数据绑定

表单中可以进行数据双向绑定的是：

用户可以录入的标签

1.文本框 2.单选框 3.多选框 4.下拉框  5.文本域

VUE的点击事件中有一个属性,可以取消标签的默认行为
                       @click.prevent
                       常用场景:
                           1. form标签阻止 action 提交
                           2. a标签     阻止 href   属性跳转

就是点了不会进行对应的跳转

VUE的点击事件中有一个属性,可以取消标签的默认行为
						@click.prevent
						常用场景: 
							1. form标签  阻止 action 提交
							2. a标签     阻止 href   属性跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单双向数据绑定</title>
	</head>
	<body>
		<div id="app">
			<!-- 问题: 表单中的哪些标签可以使用双向数据绑定
				 双向数据绑定说明: 用户可以录入的标签.
				 
				 答案: 
					1.文本框 2.单选框 3.多选框 4.下拉框  5.文本域
			 -->
			 <form action="http://baidu.com">
				 <div>
					 用户名: <input type="text" v-model="username"/>
				 </div>
				 <div>
				 	 性别: <input type="radio" value="男" name="sex"   v-model="sex"/>男
						   <input  type="radio" value="女" name="sex" v-model="sex"/>女
				 </div>
				 <div>
				 	 爱好: 
						<input type="checkbox" name="hobby" value="敲代码" v-model="hobby"/>敲代码
						<input type="checkbox" name="hobby" value="打游戏" v-model="hobby"/>打游戏
						<input type="checkbox" name="hobby" value="打豆豆" v-model="hobby"/>打豆豆
				 </div>
				 <div>
					 <!-- 
						VUE的点击事件中有一个属性,可以取消标签的默认行为
						@click.prevent
						常用场景: 
							1. form标签  阻止 action 提交
							2. a标签     阻止 href   属性跳转
					 -->
					 <input type="submit" value="提交" @click.prevent="formBtn"/>
				 </div>
			 </form>
			 
			
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					username: 'aaaa',
					sex: '女',
					hobby: ['敲代码']
				},
				methods: {
					formBtn(){
						alert("点击按钮 ajax提交数据")
					}
				}
			})
		</script>
	</body>
</html>

常用双向数据绑定属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单双向数据绑定</title>
	</head>
	<body>
		<div id="app">
			<!--1.v-model.number 将输入的内容转化为数值类型  -->
			年龄: <input type="number" v-model.number="ageTest"/>
			<button @click="addNum">加法</button>
			<br>
			<!--2.去除多余的空格  -->
			用户名: <input type="text" v-model.trim="username" />
			用户输入的长度 {{username.length}}
			<br>
			
			<!-- 3.懒加载方式 用户离焦触发 -->
			信息: <input type="text" v-model.lazy="msg" /> {{msg}}
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					ageTest: '',
					username: '',
					msg: ''
				},
				methods: {
					addNum(){
						this.ageTest = this.ageTest + 1
					}
				}
			})
		</script>
	</body>
</html>

VUE的生命周期

VUE中有一套完整的VUE对象。创建前后、挂载前后、修改前后、销毁前后。

生命周期流程

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试vue生命周期函数</title>
	</head>
	<body>
		
		<!-- 知识梳理:
		 
			1.生命周期函数的方法名称 必须固定.
			2.生命周期函数是VUE对象特有的函数.应该放到根目录下.
			3.当页面渲染成功之后, 一共执行了4个生命周期方法.
				第一类: VUE对象的创建.
					beforeCreate:对象创建前调用
					created: VUE对象已经创建完成之后调用	
				第二类: VUE对象的挂载(渲染)
					beforeMount:  el : "#app",VUE对象在找到@APP标签之前先执行该函数.
					mounted: 当挂载完成(渲染完成),用户可以看到页面数据之后调用该函数
			
			4. 用户修改阶段:
				第三类:
					beforeUpdate: 当用户修改数据 点击"回车" 之后调用该函数
					过渡: 数据已经被修改
					updated: 数据已经被修改之后调用该函数
			5. 销毁阶段:
				 销毁函数,VUE对象默认不会调用. 可以通过函数由用户调用
				 beforeDestroy: 在销毁方法执行前
				 destroyed:     标志着VUE对象已经销毁.
				 
		-->
		<div id="app">
			<h3 v-text="msg"></h3>
			<button @click="destroy">销毁</button>
		</div>
		
		<!--引入js函数类库  -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el : "#app",
				data : {
					msg: "vue生命周期"
				},
				methods:{
					
				},
				
				//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
				beforeCreate(){
					console.log("beforeCreate")
				},
				//在实例创建完成后被立即调用
				created(){
					console.log("created")
				},
				//在挂载开始之前被调用：相关的 render 函数首次被调用。
				beforeMount(){
					console.log("beforeMount")
				},
				//实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
				mounted(){
					console.log("mounted")	
				},
				//数据更新时调用，发生在虚拟 DOM 打补丁之前
				beforeUpdate(){
					console.log("beforeUpdate")
				},
				//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
				updated(){
					console.log("updated")
				},
				//实例销毁之前调用。在这一步，实例仍然完全可用
				beforeDestroy(){
					console.log("beforeDestroy")	
				},
				//实例销毁后调用。
				destroyed(){
					console.log("destroyed")
				},
				methods:{
					destroy(){
						this.$destroy()
					}
				}
			})
		</script>
	</body>
</html>

VUE前后端调用

前后端调用流程

Ajax

Ajax介绍

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

特点:

局部刷新,异步访问

Ajax异步原理

请求同步说明:

用户向服务器发起请求,如果服务器正忙,这时程序处于等待的状态.这时页面处于加载 ,同时用户不能操作.

为了让用户的体验更好,则一般采用异步.

异步调用的原理:

步骤：关键词Ajax引擎

1. 用户发起Ajax请求, Ajax内部机制,将请求交给Ajax引擎处理.
2. Ajax引擎接收到用户的请求之后,重写发起一个新的请求.访问后端服务器.
3. 当服务器端接收到了 Ajax请求之后,完成业务处理.之后将数据响应给Ajax引擎.
4. Ajax引擎通过事先约定好的回调函数, 将服务器数据交还给用户.
5.用户在请求的过程中,可以完成自己的任务.
注意事项: 多个Ajax的请求不关注顺序.

Axios入门案例

编辑页面

有四种请求类型：

1. get 执行查询业务
2. post 执行form表单提交(登录/新增)
3. put 执行修改操作
4. delete 执行删除业务时.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios入门案例</title>
	</head>
	<body>
		
		<h1>Ajax请求练习</h1>
		<!-- 使用步骤:
			1.导入JS函数类库
			2.发起Ajax请求,之后业务处理.
		 -->
		 <script src="../js/axios.js"></script>
		 <script>
			/* axios请求方式
			 
				1.请求类型
				   1. get  执行查询业务
				   2. post 执行form表单提交(登录/新增)
				   3. put  执行修改操作 
				   4. delete 执行删除业务时.
				   
				2. axios语法
				   axios.get("url地址信息","参数信息")
						.then(function(args){
							
						})
						
				3. 关于args参数说明
					axios为了统筹请求状态.将所有的数据封装为
					promise对象
					
			 */
			
			/* 
			案例1: 利用axios获取后台用户列表信息
			url: http://localhost:8090/findAll 
			
			*/
			
			axios.get("http://localhost:8090/findAll")
				 .then(function(promise){
					 console.log(promise)
					 console.log(promise.data)
				 })
		 
		 </script>
	</body>
</html>

编辑UserController（在这层开启跨域机制）

/**
 * 查询所有的数据
 * URL：http://localhost:8080/findAll
 * 参数：没有参数
 * 返回值 ：List<User></>
 * */
    @GetMapping("/findAll")
    public List <User> findAll(){

        return userService.findAll();
    }

编辑UserServiceImpl

   //查询所有数据 没有where条件所以参数为null
    @Override
    public List<User> findAll() {
        return userMapper.selectList(null);
    }

Axios 请求案例

CGT- 带参数（方式一）

编辑HTML页面

需求1: 查询id=1的用户
GET方式1: 动态拼接参数的写法
url: http://localhost:8090/axios/getUserById?id=1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端调用</title>
	</head>
	<body>
		
		 <h1>前后端调用</h1>
		 <script src="../js/axios.js"></script>
		 <script>
			
			let url1 = "http://localhost:8090/axios/getUserById?id=1"
			axios.get(url1).then(promise => {
				console.log(promise.data)
			})
		 </script>
	</body>
</html>

编辑AxiosController

这里的返回值为User,这是因为id为主键，所以返回值唯一

@RestController
@CrossOrigin
@RequestMapping("/axios")
public class AxiosController {

    @Autowired
    private UserService userService;

    /**
     * URL: http://localhost:8090/axios/getUserById?id=1
     * 参数: id=1
     * 返回值: User对象
     */
    @GetMapping("/getUserById")
    public User getUserById(Integer id){

        return userService.findUserById(id);
    }

}

编辑AxiosService

    @Override
    public User findUserById(Integer id) {
        return userMapper.selectById(id);
    }

GET-带参数(restFul格式)--方式二

编辑页面HTML

利用restFul查询数据
需求: 查询sex=女 age>18

重点：

   restFul结构越来越受欢迎,则拼接restFul结构变得繁琐.
模板字符串:
   语法: 一对反引号 ``   是反引号   ！！！！！将URL包住
   取值: ${key} 形式取值
   优势: 保留代码的格式
    let url2 = `http://localhost:8090/axios/user/${sex2}/${age2}`


			let sex2 = "女"
			let age2 = 18
			//let url2 = "http://localhost:8090/axios/user/"+sex2+"/"+age2
			let url2 = `http://localhost:8090/axios/user/${sex2}/${age2}`
			axios.get(url2).then(promise => {
				console.log(promise.data)
			})

编辑AxiosController

/**
     * restFul结构接收参数
     * URL :let url2 = `http://localhost:8090/axios/user/女/18
     * 参数： sex/age
     * 返回值： 不止一条 List<User>
     *  {sex}/{age} 的属性名必须和pojo 中的属性名一致*/
    @GetMapping("user/{sex}/{age}")
    public List<User> getUserSA(User user){
        return userService.getUserSA(user);
    }

编辑UserServiceImpl

 /**需求 ： 查询sex= 女   age大于18  大于   gt
     * queryWrapper 为条件构造器 */
    @Override
    public List<User> getUserSA(User user) {
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("sex", user.getSex())
                     .gt("age", user.getAge());
        return userMapper.selectList(queryWrapper);
    }

GET-带参数(对象写法)--方式三

编辑html页面

axios.get("url地址信息","参数信息")

           * GET方式3: 利用对象实现参数传递
           * 需求3: 查询 name="王昭君" sex=女 age=19
           * 参数语法:
           *    数据结构: {}
           *    关键字key(固定写法): params
           *   value: 用户需要传递的值

			let user = {
				name: '王昭君', 
				sex: '女',
				age: 19
			}
			
			let url3 = "http://localhost:8090/axios/getUser"
			axios.get(url3,{params : user})
			     .then(promise => {
					 console.log(promise.data)
				 })

编辑AxiosController

/**
     * 利用对象的方式接收参数
     * URL : http://localhost:8080/axios/getUser?name=xx&sex=xx&&age=xx
     * 参数: name/age/sex
     * 返回值；：List<User>*/ 
@GetMapping("/getUser")
    public List<User> getUser(User user){
        return userService.getUser(user);
    }

编辑UserServiceImpl

  //对象中不为空的充当where条件
    @Override
    public List<User> getUser(User user) {
        return userMapper.selectList(new QueryWrapper(user));
    }

我心向明月_X

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
VUE基本用法与Ajax（get查询）

@GetMappingVUE基本用法表单双向数据绑定表单中可以进行数据双向绑定的是：用户可以录入的标签1.文本框 2.单选框 3.多选框 4.下拉框 5.文本域VUE的点击事件中有一个属性,可以取消标签的默认行为 @click.prevent 常用场景: 1. form标签阻止 action 提交 ...
复制链接

扫一扫