26.项目day07-08-CSDN博客

本文链接：https://blog.csdn.net/weixin_56027329/article/details/130651142

文章介绍了Vue.js中的数组操作方法如push、pop等，以及监听器和过滤器的使用，展示了如何处理数据变化和格式转换。接着讨论了计算属性的概念和应用，用于简化复杂的计算逻辑。最后，通过一个用户列表的示例展示了如何使用Axios进行AJAX请求，实现数据的获取、更新和删除操作，结合RESTfulAPI设计。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 
				1.push() 在最后一个追加
				2.pop() 删除最后一个
				3.shift() 删除第一个元素
				4.unshift() 在开头追加一个元素
				5.splice() 在指定位置替换元素
				6.sort() 数组排序 默认是按照字符编码的顺序进行排序
				7.reverse() 数组反转
			 -->
			 <!-- 展现数组 -->
			 <span v-for="item in array">{{item}}  </span> <br>
			 <!-- 添加数据-->
			 数据: <input type="text" v-model="num"/> <br>
			 <button @click="push">push</button>
			 <button @click="pop">pop</button>
			 <button @click="shift">shift</button>
			 <button @click="splice">splice</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					//1.定义数组
					array: [3,7,1,5,4],
					num: ''
				},
				methods: {
					push(){
						this.array.push(this.num)
					},
					pop(){
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					splice(){
						//参数说明: 
						//	1.操作数据起始位置  
						//	2.操作数量  
						//	3.替换元素的值(如果不写表示删除)
						//需求1：将第一位数据1替换为5 
						//this.array.splice(0,1,5)
						//需求2：将前2位数据 换为 8,9
						//this.array.splice(0,2,8,9)
						//需求3: 删除第四位数据
						//this.array.splice(3,1,'')
						  this.array.splice(3,1) 
					}
				}
			})
		</script>
	</body>
</html>

3.侦听器

3.1 侦听器说明

在侦听器中包含了监听器/过滤器下列按钮包含了课堂案例语法规则

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>侦听器</title>
	</head>
	<body>
		<div id="app">
			<!-- 1.监听器学习 如果需要自动触发则使用监听器 -->
			姓: <input type="text" v-model.lazy="firstName" /> <br>
			名称: <input type="text" v-model.lazy="lastName" /> <br>
			全名: {{fullName}}
			
			<hr />
			<!-- 过滤器 如果对数据的格式进行修改 小写转大写 日期格式转换... -->
			用户名: <input type="text" v-model="username"/>
			{{username |lower|upper}}
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			//1.定义过滤器  全部大小
			Vue.filter("upper",function(value){
				
				return value.toUpperCase()
			})
			
			//2.箭头函数用法 全部小写  
			//注意事项: 如果没有参数()不能省略
			Vue.filter("lower",(value) => {
				
				return value.toLowerCase()
			})
			
			const app = new Vue({
				el: "#app",
				data: {
					firstName: '',
					lastName: '',
					fullName: '',
					username: ''
				},
				methods: {
					
				},
				//定义监听器
				watch:	{
					//当数据发生变化时则会传递数据到监听器中
					firstName(value){
						this.fullName = value + this.lastName
					},
					lastName(value){
						this.fullName = this.firstName + value
					}
				}
			})
		</script>
	</body>
</html>

4.计算属性

4.1 计算属性概念

如果在插值表达式中有大量的数据计算,则可以通过计算属性的方式实现

4.2 计算属性语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	</head>
	<body>
		<div id="app">
			<!-- 要求: 将用户输入的内容进行反转
				abc   cba
			 -->
			计算: <input type="text" v-model="msg"/><br>
			<!--
				1.将字符串拆分为数组 abc   [a,b,c]
				2.reverse() 将数组进行反转 [c,b,a]
				3.将数组拼接为字符串.join('连接符')
			 -->
			{{msg.split('').reverse().join('')}}   <br>
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					msg: ''
				},
				methods: {
					reverseA(){
						console.log("我是方法调用")
						return this.msg.split('').reverse().join('')
					}
				},
				//定义计算属性
				computed: {
					//必须有返回值
					reverseStr(){
						console.log("我是计算属性")
						return this.msg.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>
</html>

5.7 Axios 实现用户列表展现

5.7.1 编辑页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现</title>
	</head>
	<body>
		<div id="app">
			ID：<input type="text" disabled v-model="user.id" />
			姓名：<input type="text" v-model="user.name"/>
			年龄：<input type="text" v-model="user.age"/>
			性别：<input type="text" v-model="user.sex"/>
			<button @click="updateUser">更新</button>
			<hr />
			<table  id="tab1"   border="1px" width="700px" align="center">
				<tr>
					<td colspan="5" align="center"><h1>表格数据</h1></td>
				</tr>
				<tr align="center">
					<td>ID编号</td>
					<td>名称</td>
					<td>年龄</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				<tr align="center" v-for="item in userList">
					<td v-text="item.id"></td>
					<td v-text="item.name"></td>
					<td v-text="item.age"></td>
					<td v-text="item.sex"></td>
					<td>
						<!-- 知识点: 没有数据来源,则需要手动传递 -->
						<button @click="updateUserBtn(item)">修改</button>
						<button @click="deleteUser(item.id)">删除</button>
					</td>
				</tr>
			</table>
		</div>
		
		
		
		<!-- 1.导入vue.js -->
		<script src="../js/vue.js"></script>
		<!-- 2.导入axios.js -->
		<script src="../js/axios.js"></script>
		<script>
			/* 需求1. 刷新页面之后,自动的发起ajax请求 */
			axios.defaults.baseURL="http://localhost:8090"
			const app = new Vue({
				el: "#app",
				data: {
					userList: [],
					user: {
						id: '',
						name: '',
						age: '',
						sex: ''
					}
				},
				methods: {
					getUserList(){
						//发起Ajax请求
						axios.get("/getUser").then(result => {
							 //将结果返回给vue中的数据
							 this.userList = result.data
						})
					},
					deleteUser(id){
						//后端参数接收  /user/{id}
						//利用restFul风格实现数据传参
						axios.delete("/user/"+id)
							 .then(result => {
								 alert(result.data)
								 //删除成功之后,重新加载列表信息
								 this.getUserList()
							 })
					},
					updateUserBtn(user){
						this.user = user
						console.log(this.user)
					},
					updateUser(){
			
						axios.put("/updateUser",this.user)
						.then(result => {
							alert(result.data)
							this.getUserList()
						})
					}
				},
				mounted(){
					//页面加载完成之后,调用函数
					this.getUserList()
				}
			})
		</script>
	</body>
</html>

5.7.2 编辑UserController

 //查询用户列表数据
   @GetMapping("/getUser")
    public List<User> getUser(){

        List<User> userList = userService.getUser();
        return userList;
    }

 //删除用户信息
  @DeleteMapping("/user/{id}")
    public String deleteUser(@PathVariable Integer id){

        userService.deleteUser(id);
        return "数据删除成功!!!";
    }

//更新用户数据
/**
     * 实现修改操作
     * 参数: user的JSON数据
     * URL: /updateUser
     */
    @PutMapping("/updateUser")
    public String updateUser2(@RequestBody User user){

        userService.updateUser(user);
        return "实现数据修改";
    }