JT-VUE

最新推荐文章于 2024-07-12 15:14:43 发布

꯭ 瞎꯭扯꯭蛋꯭

最新推荐文章于 2024-07-12 15:14:43 发布

阅读量373

点赞数 1

分类专栏：笔记文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/weixin_43887285/article/details/119910224

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

1.HBuilderX修改注释

HBuilder下载

路径: 根目录\plugins\theme-default\themes\default
文件名称: default.xml文件
在这里插入图片描述
修改颜色:

2.Vue入门

- 1.什么是Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

渐进式: 构建项目可以由简单到复杂
Vue核心思想：数据驱动、组件化

- 2.Vue优点

1).体积小压缩后的文件只有33k
2).运行效率更高采用虚拟机DOM,一种可以预先通过javaScript对数据进行计算.把最终的DOM操作计算出来并且优化的技术. 由于这个DOM操作属于预处理操作,并没有真实的操作DOM ,所以叫做虚拟DOM
3).双向数据绑定让开发者不再去操作DOM,将更多的经历投入到业务中
4).生态丰富市面上有大量的开源项目基于vue 进行开发成熟稳定.

- 3.Vue案例

- - 1.入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门案例</title>
		
		<!-- 1.导入JS类库 -->
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 基本语法
			1.导入JS类库
			2.指定VUE渲染区域 标签体
			3.实例化VUE对象
			4.数据取值
		 -->
		 <div id="app">
			 <h1>
				 {{msg}}
			 </h1> 
		 </div>
		 
		 <!-- 2.创建VUE对象 -->
		<script>
			/*
				关于JS中变量定义说明：
				1.var 没有作用域的概念，容易出现安全性的问题。
				2.let 作用与var类似，有作用域的概念 局部概念
				3.const 定义常量
			*/
			const app = new Vue({
				el : "#app",
				data : {
					msg : "Vue的入门案例，啦啦啦~~~"
				}
			})
		</script>
	</body>
</html>

- - 2.数据绑定指令

- - - 1.v-text & v-html

v-text：直接展现解析数据
v-html：解析html的数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>指令学习</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>	
		 <div id="app">
			 <!-- 规则说明：
					1.{{msg}} 当页面没有渲染成功时，以原标签展现
					2.v-text 当页面没有渲染完成，则不予展现。
					3.v-html 将html代码片段 渲染之后展现
			  -->
			 <h1>{{msg}}</h1> 
			 <!-- 1.v-text -->
			 <h1 v-text="msg"></h1>
			 <!-- 2.v-html -->
			 <div v-html="div"></div>
		 </div>
		 
		<script>
			const app = new Vue({
				el : "#app",
				data : {
					msg : "Vue的入门案例，啦啦啦~~~",
					div : "<h3>我是一个标题标签</h3>"
				}
			})
		</script>
	</body>
</html>

- - - 2.数据双向绑定 v-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据双向绑定</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>	
		 <div id="app">
			 <!-- 1.规则：遇到文本框，及要用到双向绑定
					双向绑定的概念：
						1.用户的输入变化，则data
			  -->
			用户名: <input type="text" v-model="username"/>
			密码: <input type="text" v-model="password"/>
			<br>
			<h2>{{username}} {{password}}</h2>
		 </div>
		 
		<script>
			const app = new Vue({
				el : "#app",
				data : {
					username : '',
					password : ''
				}
			})
		</script>
	</body>
</html>

MVVM思想

1.字母解释
	1.M model 数据
	2.V view 视图
	3.VM (view-model) 数据和视图的控制

2.流程:
	1) Model变化, 虚拟DOM操作内存数据变化. 所以页面变化.
	2) View变化, 虚拟DOM操作内存数据变化, 数据变化.

在这里插入图片描述

- 4.事件绑定 v-on:click

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件绑定</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>	
		 <div id="app">
			 <!-- 事件绑定
					v-on:click='简单的计算'
					v-on:click='点击事件'
			  -->
			展现数据：{{num}}
			<button v-on:click="num++">自增</button>
			<!-- <button v-on:click="addNum">自增函数</button> -->
			<button @click="addNum">自增函数</button>
		 </div>
		 
		<script>
			const app = new Vue({
				el : "#app",
				data : {
					num : 100
				},
				methods : {
					addNum(){
						this.num++
					}
					/* addNum : function(){
						this.num++
					} */
				}
			})
		</script>
	</body>
</html>

<button v-on:click="num++">增加</button>   绑定点击事件
<button v-on:click="addNum">增加函数</button>		   
<button @click="addNum">增加函数</button>  简化写法

- 5.分支结构(判断的是标签是否要展示)

v-if
v-else-if
v-else

v-show

v-if与v-show的区别：
v-if
在首次渲染的时候，如果条件为false时，什么也不操作，页面就会当作没有这些元素。而当条件为true时，开始局部编译，动态的向DOM元素里面添加元素。当条件从true变为false时，开始局部编译，卸载这些元素，也就是删除。

但此时也会有一个问题需要注意，那就是v-if的性能消耗问题，因为
v-if的操作涉及到了对dom元素的增删操作，每操作一次就会重新编译一次，

v-show
与之相对的 V-Show则实现了更为方便简单也不会出现性能损耗的问题，
v-show不管条件是true还是false，第一次渲染的时候都会编译出来，也就是标签都会添加到DOM中。之后切换的时候，通过display: none的方式来显示隐藏元素。可以说只是改变css的样式，几乎不会影响什么性能。

使用场景
一般情况下 V-Show更适用于那些需要频繁切换显示与否的组件，最明显的例子就是tab切换一类，如果这个场景下使用的是V-If 势必会出现卡顿与加载缓慢的现象，与之相对的，V-If则更适合那些没那么频繁，甚至只会出现一次的的场景，例如弹窗小广告（滑稽），或者登录弹窗一类，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>	
		 <div id="app">
			 <!-- 需求: 用户可以手动的输入成绩
						根据创成绩，自动计算等级
				  等级规范:
						>=90 优秀
						>=80 良好
						>=70 中等
						其他 继续努力
				  命令:
						1.v-if 如果判断为true，则展现元素
						2.v-else-if 如果不满足v-if，检查是否满足v-else-if
						3.v-else 上述都不满足，才展示
			 -->
			 请输入成绩: <input type="text" v-model="score"/><br>
			 等级: 
				<h3 v-if="score >= 90">优秀</h3>
				<h3 v-else-if="score >= 80">良好</h3>
				<h3 v-else-if="score >= 70">中等</h3>
				<h3 v-else>继续努力</h3>
		 </div>
		 
		<script>
			const app = new Vue({
				el : "#app",
				data : {
					score : 0
				},
				methods : {
					
				}
			})
		</script>
	</body>
</html>

- 6.循环结构(循环的是标签)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>	
		 <div id="app">
			 <!-- 指令:v-if 展现的是标签 -->
			 <!-- 案例1(循环数组).以循环的方式输出爱好，不展现下标 -->
			 <div id="demo1">
				 <!-- 
					<p v-for="value in hobby">{{value}}</p> 
					这个在页面快速点击刷新的时候，会展示成 '{{vlaue}}' 的形式
				 -->
				 <p v-for="value in hobby" v-text="value"></p>
			 </div>
			 <hr/>
			 <!-- 案例2(循环数组).以循环的方式输出爱好，展现下标 -->
			 <div id="demo2">
				 <p v-for="value,index in hobby">					
					 <span v-text="index+1"></span>
					 ---
					 <span v-text="value"></span>
				 </p>
			 </div>
			 <hr/>
			 <!-- 案例3(循环对象).以循环的方式在表格中展示对象 -->
			 <div id="demo3">
			 	 <table border="1px" width="60%">
					 <tr align="center">
						 <td>编号</td>
						 <td>姓名</td>
						 <td>年龄</td>
					 </tr>
					 <tr align="center" v-for="user in UserList">
					 	 <td v-text="user.id"></td>
						 <td v-text="user.name"></td>
						 <td v-text="user.age"></td>				   
					 </tr>
				 </table>
			 </div>
			 <hr/>
		 </div>
		 
		<script>
			const app = new Vue({
				el : "#app",
				data : {
					hobby : ["敲代码","改BUG","钻研技术"],
					UserList : [{id:100,name:"泡泡",age:23},
								{id:101,name:"皮皮虾",age:24},
								{id:102,name:"啦啦",age:25},
								]
				},
				methods : {
					// 自己的方法放在methods中
				}
				//对象的方法放在methods外面
			})
		</script>
	</body>
</html>

- 7.Vue常用特性

- - 1.表单操作

- - - 1.表单常用属性

input 文本输入框
textarea 多行文本
select 下拉多选框
radio 单选框
checkbok 多选框

- - - 2. 表单数据与vue进行数据绑定的写法

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

- - 2.表单域修饰符

- - - 1.常用属性

number : 将数据转化为数值
trim: 去掉开始和结尾的空格
lazy: 将input事件 切换为change事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单修饰符</title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 1.v-model.number 将输入的内容转化为数值类型 -->
			年龄: <input type="number" v-model.number="age"/>
			<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>
			const app = new Vue({
				el : "#app",
				data : {
					age : '',
					username : '0',
					msg : ''
				},
				methods : {
					addNum : function(){
						this.age = this.age + 1
					}
				}
			})
		</script>
	</body>
</html>

- 8.VUE的生命周期

- - 1.如何理解生命周期

说明: VUE中有一整套完整的VUE对象创建、使用、销毁的流程。如果用户需要在某个特定的点，有特殊的需求，可以对VUE对象进行扩展！

- - 2.主要阶段

在这里插入图片描述

- - 3.页面结构调用

熟练掌握 mounted

<!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生命周期"
				},
				
				//在实例初始化之后，数据观测 (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>

3.Vue前端交互

- 1.前后端调用流程

在这里插入图片描述

- 2.Promise

- - 1.Promise概述

Promise是一种异步编程的一种解决方案.从语法上将Promise是一个对象.从它身上可以获取异步调用的信息
作用:
1.有效避免回调地狱问题典型的Ajax嵌套问题 (闭包方式)
2.Promise对象提供了简洁的API 用法简单

- - 2.Promise基本用法

在这里插入图片描述

- - 3.Promise API介绍

1.then 异步调用正确时返回
2.catch 获取异常信息
3.finally 成功与否都会执行的操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>promise调用API</title>
	</head>
	<body>
		<div id="app">
		</div>
		<script>
			
			let promise = new Promise(function(resolve,reject){
				let flag = true
				if(flag){
					resolve("业务执行成功")
				}else {
					reject("业务执行失败")
				}
			})
			
			//通过then获取回调函数
			promise.then(function(result){
				//从resolve中获取数据
				console.log(result)
			})
			.catch(function(data){
				console.log(data)
			})
			.finally(function(){
				console.log("最终都会执行")
			})	
		</script>
	</body>
</html>

- 3.Ajax

- - 1.Ajax介绍

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

特点: 局部刷新,异步访问

- - 2.Ajax异步原理

请求同步说明:
用户向服务器发起请求,如果服务器正忙,这时程序处于等待的状态.这时页面处于加载 ,同时用户不能操作.
为了让用户的体验更好,则一般采用异步.

异步调用的原理:
在这里插入图片描述
步骤:

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

注意事项: 多个Ajax的请求不关注顺序.

- - 3.Axios 入门案例

- - - - 1.编辑页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios的入门案例</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<h2>Ajax请求练习</h2>
		<!--使用步骤 
				1.导入JS函数类库
				2.发起Ajax请求，之后业务处理
		 -->
		 <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){//primise为对象
					console.log(promise.data)
		     }) 
				   		 
			/**
			 * 写法二:
			 *	案例2:JS为了简化用户调用方式提供了了箭头函数写法
			 *		  function  可以省略不写
			 */				 
			axios.get("http://localhost:8090/findAll")
				 .then(
					promise => {
						console.log(promise.data)	
				 	}
				 )
		 </script>		 
	</body>
</html>

- - - - 2.开启跨域

在这里插入图片描述

- - - - 3.编辑UserController

在这里插入图片描述

- - - - 4.编辑UserServiceImpl

在这里插入图片描述

- - 4.Axios 请求案例

HTTP协议定义了很多的请求方法，来满足不同的需求
在这里插入图片描述
请求类型说明
分组:
1.GET/DELETE 用法一致.
2.POST/PUT 用法一致.

- - - 1.GET-带参数(方式1)

- - - - 1.编辑页面html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端调用</title>
	</head>
	<body>
		 <h1>前后端调用</h1>
		 <script src="../js/axios.js"></script>
		 <script>
			/**
			 * 带参数的get请求
			 * GET方式1: 动态拼接参数的写法
			 * 需求: 查询id = 1 的用户
			 * url: http://localhost:8090/axios/getUserById?id=1
			 */	
			let url1 = "http://localhost:8090/axios/getUserById?id=1"
			axios.get(url1).then(
				promise => {
					console.log(promise.data)
				}
			)
		 </script>
	</body>
</html>

- - - - 2.编辑AxiosController

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * @Authod yuhe
 * Create 2021-08-26-16:16
 */
@RestController
@CrossOrigin
@RequestMapping("axios")
public class AxiosController {
    @Autowired
    private AxiosService axiosService;

    /**
     * URL: http://localhost:8090/axios/getUserById?id=1
     * 参数：id=1
     * 返回值：User
     */
    @GetMapping("getUserById")
    public User getUserById(Integer id){
        return axiosService.findUserById(id);
    }
}

- - - - 3.编辑AxiosServiceImpl

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Arrays;
import java.util.List;

@Service
public class AxiosServiceImpl implements AxiosService{
    @Autowired
    private UserMapper userMapper;
    
    @Override
    public User findUserById(Integer id) {
        return userMapper.selectById(id);
    }
}

- - - 2.GET-带参数(restFul格式)

- - - - 1.编辑页面HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端调用</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<h2>前后端调用</h2>
		 <script>
			/**
			 * GET方式2: 利用restFul查询数据
			 * 需求: 查询sex=女 age=18
			 * url: http://localhost:8090/axios/user/女/18
			 * 历史原因: restFul结构越来越受欢迎, 则拼接restFul结构 变得繁琐
			 * 模板字符串: 
			 * 		语法: 一堆反引号 ``
			 * 		取值: ${key} 形成取值
			 * 		优势: 保留代码的格式	
			 */
			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)
				}
			)
		 </script> 
	</body>
</html>

- - - - 2.编辑AxiosController

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@CrossOrigin
@RequestMapping("axios")
public class AxiosController {
    @Autowired
    private UserService userService;

    /**
     * GET测试2：restFul结构接收地址
     * url：http://localhost:8090/axios/user/女/18
     * 参数：sex/age
     * 返回值：List集合
     */
    @GetMapping("user/{sex}/{age}")
    public List<User> getUserBySA(User user){
        return userService.getUserBySA(user);
    }
}

- - - - 3.编辑AxiosServiceImpl

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Arrays;
import java.util.List;

@Service
public class AxiosServiceImpl implements AxiosService{
    @Autowired
    private UserMapper userMapper;

    @Override
    public List<User> getUserBySA(User user) {
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("sex", user.getSex())
                    .gt("age", user.getAge());
        return userMapper.selectList(queryWrapper);
    }
}

- - - - 4.页面效果展现

在这里插入图片描述

- - - 3.GET-带参数(对象写法)

- - - - 1.编辑html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端调用</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<h2>前后端调用</h2>
		 <script>
			/**
			 * GET方式3: 利用对象实现参数传递
			 * 需求3: 查询 name="王昭君" sex=女 age=19
			 * 阐述语法: 此语法只用在 GET 或 DELETE 请求中
			 * 		数据结构: {}
			 * 		关键字(固定写法): 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)
				}
			)
		 </script> 
	</body>
</html>

- - - - 2.编辑AxiosController

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@CrossOrigin
@RequestMapping("axios")
public class AxiosController {
    @Autowired
    private UserService userService;

    /**
     * GET测试3：利用对象方式接收参数
     * URL：http://localhost:8090/axios/getUser
     * 参数：name/age/sex
     * 返回值：List<User>
     */
    @GetMapping("getUser")
    public List<User> getUser(User user){
        return userService.getUser(user);
    }
}

- - - - 3.编辑AxiosServiceImpl

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Arrays;
import java.util.List;

@Service
public class AxiosServiceImpl implements AxiosService{
    @Autowired
    private UserMapper userMapper;

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

- - - - 4.页面效果展现

在这里插入图片描述

- - - 4.Delete请求

- - - - 1.编辑页面HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DELETE请求</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<h2>前后端调用-DELETE请求测试</h2>
		 <script>
			/**
			 * DELETE测试1:
			 * 	需求:删除ID=232的数据
			 */
			let id1 = 232
			let url = `http://localhost:8090/axios/deleteById?id=${id1}`
			axios.delete(url).then(
				promise => {
					console.log(promise.data)
				}
			)
		 </script> 
	</body>
</html>

- - - - 2.编辑AxiosController

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@CrossOrigin
@RequestMapping("axios")
public class AxiosController {
    @Autowired
    private UserService userService;

    /**
     * 需求：根据ID删除数据
     * URL:http://localhost:8090/axios/deleteById?id=232
     * 参数：id1：232
     * 返回值：字符串 删除数据成功
     */
    @DeleteMapping("deleteById")
    public String deleteById(Integer id){
        userService.deleteById(id);
        return "删除成功！！！";
    }
}

- - - - 3.编辑AxiosServiceImpl

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Arrays;
import java.util.List;

@Service
public class AxiosServiceImpl implements AxiosService{
    @Autowired
    private UserMapper userMapper;

    @Override
    public void deleteById(Integer id) {
        userMapper.deleteById(id);
    }
}

- - - - 4.页面效果展现

在这里插入图片描述

- - - 5.POST请求

- - - - 1.编辑页面HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>POST请求</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<h2>前后端调用-POST请求测试</h2>
		 <script>
			/**
			 * 需求:实现用户新增操作
			 * 语法:axios.post(url,新增参数)
			 * 新增数据不会出现在url中,会以另一种方式提交
			 */
			let user = {
				name : '小燕子',
				age : 18,
				sex : '女'
			}
			let url = `http://localhost:8090/saveUser`
			axios.post(url,user).then(
				promise => {
					console.log(promise.data)
				}
			)
		 </script> 
	</body>
</html>

- - - - 2.请求参数的结构

1.url请求地址
在这里插入图片描述
2.参数结构
说明: http协议中只能识别字符串！！！

- - - - 3.编辑 AxiosController

难点：
	在js中解析的是对象，脱离了js的就是字串
	 json  互转  user对象
 		1.user对象 可以转化为 json  调用 @ResponseBody 注解 
 		2.json 转化为 user对象    调用 @RequestBody 注解 -- 位置：只能在对象前标识

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@CrossOrigin
@RequestMapping("axios")
public class AxiosController {
    @Autowired
    private UserService userService;

    /**
     * 需求：实现用户的新增操作
     * url：http://localhost:8090/axios/saveUser
     * 参数：{name: "小燕子", age: 18, sex: "女"}
     * 返回值：String 新增成功！！！
     * 难点：
     *      json  互转  user对象
     *      1.user对象 可以转化为 json  调用 @ResponseBody 注解
     *      2.json 转化为 user对象    调用 @RequestBody 注解 -- 位置：只能在对象前标识
     */
    @PostMapping("saveUser")
    public String saveUser(@RequestBody User user){
        userService.saveUser(user);
        return "新增成功！！！";
    }
}

- - - - 4.编辑 AxiosServiceImpl

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Arrays;
import java.util.List;

@Service
public class UserServiceImpl implements UserService{
    @Autowired
    private UserMapper userMapper;

    @Override
    public void saveUser(User user) {
        userMapper.insert(user);
    }
}

- - - - 5.页面效果展现

在这里插入图片描述

- - - 6.PUT请求一

- - - - 1.编辑页面HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>PUT请求</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<h2>前后端调用-PUT请求测试</h2>
		 <script>
			/**
			 * 需求: 要求将id = 233 的数据
			 * 		  改为name = "小鬼当家",age = 4,sex = 男
			 */
			let user = {
				id : 233,
				name : '小鬼当家',
				age : 4,
				sex : '男'
			}
			url = `http://localhost:8090/axios/updateUser`
			axios.put(url,user).then(
				promise => {
					console.log(promise.data)
				}
			)
		 </script> 
	</body>
</html>

- - - - 2.编辑 AxiosController

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@CrossOrigin
@RequestMapping("axios")
public class AxiosController {
    @Autowired
    private UserService userService;

    /**
     * 需求: 根据id修改信息
     * url：http://localhost:8090/axios/updateById
     * 参数：user = {id = 233,name : '小鬼当家',age : 4,sex : '男'}
     * 返回值：String 修改成功！！！
     */
    @PutMapping("updateUser")
    public String updateUser(@RequestBody User user){
        userService.updateUser(user);
        return "修改成功！！！";
    }
}

- - - - 3.编辑 AxiosServiceImpl

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Arrays;
import java.util.List;

@Service
public class UserServiceImpl implements UserService{
    @Autowired
    private UserMapper userMapper;

    @Override
    public void updateUser(User user) {
        userMapper.updateById(user);
    }
}

- - - 7.PUT请求二

- - - - 1.编辑页面HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>PUT请求</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<h2>前后端调用-PUT请求测试</h2>
		 <script>
			/**
			 * 需求: 要求将name = "小鬼当家" 的数据
			 * 		  改为name = "小燕子",age = 24,sex = 女
			 * 难点: 如果有多个参数,并且重复时,如何封装?
			 * 解决方案: restFul + 对象 (组合提交)
			 */
			let name = "小鬼当家"
			let user2 = {
				name : '小燕子',
				age : 24,
				sex : '女'
			}
			let url2 = `http://localhost:8090/axios/updateUserByName/${name}`
			axios.put(url2,user2).then(
				promise => {
					console.log(promise.data)
				}
			)
		 </script> 
	</body>
</html>

- - - - 2.编辑 AxiosController

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@CrossOrigin
@RequestMapping("axios")
public class AxiosController {
    @Autowired
    private UserService userService;

    /**
     * 需求：根据name名称修改数据
     * url：http://localhost:8090/axios/updateUserByName/小鬼当家
     * 参数：name条件,  user = {name : '小燕子',age : 24,sex : '女'}
     * 返回值：修改成功！！！
     * 注意事项：resuFul可以为对象的属性赋值
     *          注意restFul的名称不要与属性重名，否则会覆盖，引发BUG
     *
     * 对象用@RequestBody接
     * 条件用@PathVariable接
     */
    @PutMapping("updateUserByName/{wherename}")
    public String updateUserByName(@RequestBody User user,
                                   @PathVariable String wherename){
        userService.updateUserByName(user,wherename);
        return "修改成功！！！";
    }
}

- - - - 3.编辑 AxiosServiceImpl

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Arrays;
import java.util.List;

@Service
public class UserServiceImpl implements UserService{
    @Autowired
    private UserMapper userMapper;
    
    //args1： set条件的数据
    //args2：where条件的数据
   @Override
    public void updateUserByName(User user, String wherename) {
        //updateWrapper  与  queryWrapper 功能一样，可以混用
//        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        UpdateWrapper<User> updateWrapper = new UpdateWrapper<>();
        updateWrapper.eq("name", wherename);
        userMapper.update(user, updateWrapper);
    }
}

- - - - 4.页面展示效果

在这里插入图片描述

4.Vue-Axios案例

- 0.需求说明

当展现页面时，用户发起请求 http://localhost:8090/vue/findAll,获取所有的user数据.
通过Vue.js 要求在页面中展现数据, 以表格的形式展现.
为每行数据添加修改/删除的按钮
在一个新的DIV中编辑3个文本框 name/age/sex 通过提交按钮实现新增.
如果用户点击修改按钮,则在全新的DIV中回显数据.
用户修改完成数据之后,通过提交按钮实现数据的修改.
当用户点击删除按钮时,要求实现数据的删除操作.

- 1.增删改查项目案例

- - 1.编辑html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例练习</title>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 新增div -->
			<div>
				<table width="80%" align="center">
					<tr align="center">
						<th><h3>用户新增</h3></th>
					</tr>
					<tr>
						<th>
							姓名:<input type="text"/ v-model="addUser.name">
							年龄:<input type="number" v-model="addUser.age"/>
							性别:<input type="text" v-model="addUser.sex"/>
							<!-- 点击调用入库的函数 -->
							<button @click="addUserBtn">新增</button>
						</th>
					</tr>
				</table>	
			</div>
			<hr />
			<!-- 修改div -->
			<div>
				<table width="80%" align="center">
					<tr align="center">
						<th><h3>用户修改</h3></th>
					</tr>
					<tr align="center">
						<th>
							编号:<input type="number" disabled v-model="updateUser.id" />
							&nbsp;&nbsp;&nbsp;&nbsp;
							姓名:<input type="text" v-model="updateUser.name" />								
						</th>
					</tr>
					<tr align="center">
						<th>
							年龄:<input type="number" v-model="updateUser.age" />
							&nbsp;&nbsp;&nbsp;&nbsp;
							性别:<input type="text" v-model="updateUser.sex" />
						</th>
					</tr>
					<tr align="center">
						<th>
							<button @click="updateUserMet()">修改</button>
						</th>
					</tr>
				</table>
			</div>
			<hr />
			<!-- 展现div -->
			<div>
				<table border="1px" width="80%" align="center">
					<tr align="center">
						<th colspan="5"><h3>用户列表</h3></th>
					</tr>
					<tr align="center">
						<th>编号</th>
						<th>性名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>操作</th>
					</tr>
					<tr align="center" v-for="user in userLiat">
						<th v-text="user.id" v-model="updateUser.id"></th>
						<th v-text="user.name" v-model="updateUser.name"></th>
						<th v-text="user.age" v-model="updateUser.age"></th>
						<th v-text="user.sex" v-model="updateUser.sex"></th>
						<th width="20%">
							<button @click="updateUserBtn(user)">修改</button>
							<!-- 调用方法 将"当前"对象传递 -->
							<button @click="deleteUserBtn(user)">删除</button>
						</th>
					</tr>
				</table>
			</div>
			<hr />
		</div>
			
		<!-- 2.创建vue对象 -->	
		<script>
			//2.定义axios请求的前缀
			axios.defaults.baseURL = "http://localhost:8090/vue"
			
			const app = new Vue({
				el : "#app",
				data : {
					// 1.定义用户数据
					userLiat : [],
				
					//封装新增数据
					addUser : {
						name : '',
						age : '',
						sex : ''
					},
					updateUser : {
						id : '',
						name : '',
						age : '',
						sex : ''
					}
				},
				methods : {
					// 获取用户信息
					async getUserList(){
						let {data : result} = await axios.get("/findAll")
								// 将返回值结果 赋值给vue对象
								this.userLiat = result
					},
					//实现数据新增
					async addUserBtn(){
						let {data : result} = await axios.post("/saveUser",this.addUser)
								// 获取服务器返回值
								let msg = result
								//弹出框操作
								alert(msg)
								//将列表数据刷新??? -- 就是把数据再查一遍
								this.getUserList()
								// 新增之后,将数据清空
								this.addUser = {}
					},
					//实现数据删除
					async deleteUserBtn(user){
						//问题:用户点击删除,如何获取数据?
						//答案:传递循环遍历的数据即可.
						let {data : result} = await axios.delete("/deleteById?id="+user.id)
								//弹出框操作
								alert(result)
								//将列表数据刷新??? -- 就是把数据再查一遍
								this.getUserList()
					},	
					async updateUserBtn(user){
						this.updateUser = user
					},
					async updateUserMet(){
						// alert("啦啦啦")
						//实现数据的更新
						let {data : result} = await axios.put("/updateUser",this.updateUser)
								alert(result)
								this.getUserList()
								this.updateUser = {}
					}
				},
				// 利用生命周期函数触发ajax
				created(){
					// alert("生命周期函数")
					this.getUserList()
				}
			})
		</script>
	</body>
</html>

- - 2.编辑VueController

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@MapperScan("com.jt.mapper")
@RequestMapping("vue")
@CrossOrigin
public class VueController {
    @Autowired
    private UserService userService;

    /**
     * 查询所有的用户数据
     * URL：http://localhost:8090/vue/findAll
     * 参数：null
     * 返回值：List<User>
     */
    @GetMapping("findAll")
    public List<User> findAll(){
        return userService.findAll();
    }
    /**
     * 需求：实现用户入库
     * URL：http://localhost:8090/vue/saveUser
     * 参数：User对象的Json
     * 返回值：成功信息
     */
    @PostMapping("saveUser")
    public String saveUser(@RequestBody User user){
        userService.saveUser(user);
        return "新增成功！！！";
    }

    /**
     * 需求：根据id删除数据
     * URL：http://localhost:8090/vue/deleteUserById?id=1
     * 参数：id=1
     * 返回值：删除成功！！！
     */
    @DeleteMapping("deleteById")
    public String deleteById(Integer id){
        userService.deleteById(id);
        return "删除成功！！！";
    }

    @GetMapping("findUserById")
    public User findUserById(Integer id){
        return userService.findUserById(id);
    }

    @PutMapping("updateUser")
    public String updateUser(@RequestBody User user){
        userService.updateUser(user);
        return "修改成功！！！";
    }
}

- - 3.编辑 VueServiceImpl

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Arrays;
import java.util.List;

@Service
public class VueServiceImpl implements VueService{
    @Autowired
    private UserMapper userMapper;

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

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

    @Override
    public void deleteById(Integer id) {
        userMapper.deleteById(id);
    }

    @Override
    public void saveUser(User user) {
        userMapper.insert(user);
    }

    @Override
    public void updateUser(User user) {
        userMapper.updateById(user);
    }
}

- - 4.页面展示

在这里插入图片描述

- 2.用户列表展现

- - 1.编辑html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例练习</title>
		<!-- 1.引入类库 vue/axios -->
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 新增div -->
			<div align="center">
				<h3>用户新增</h3>
				姓名: <input type="text" />
				年龄: <input type="text" />
				性别: <input type="text" />
				<button>新增</button>
			</div>
			<hr />
			<!-- 修改div -->
			<div align="center">
				<h3>用户修改</h3>
				<p>
					编号: <input type="text" disabled/>
					姓名: <input type="text" />
				</p>
				<p>
					年龄: <input type="text" />
					性别: <input type="text" />
				</p>
				<p>
					<button>修改</button>
				</p>				
			</div>
			<hr />
			<!-- 展现div -->
			<div>
				<table border="1px" align="center" width="80%">
					<tr align="center">
						<th colspan="5"><h3>用户列表</h3></th>
					</tr>
					<tr align="center">
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>操作</th>
					</tr>
					<tr align="center" v-for="user in userList">
						<th v-text="user.id"></th>
						<th v-text="user.name"></th>
						<th v-text="user.age"></th>
						<th v-text="user.sex"></th>
						<th width="20%">
							<button>修改</button>
							<button>删除</button>
						</th>
					</tr>
				</table>
			</div>
		</div>
		
		<!-- 2.创建vue对象 -->
		<script>		
			 //3.定义axios请求的前缀
			 axios.defaults.baseURL = "http://localhost:8090/vue"
			
			 const app = new Vue({
				 el: "#app",
				 data: {
					//1.定义用户数据
					 userList: []
				 },
				 methods: {
					 getUserList(){
						 axios.get("/findAll")
							  .then(promise => {
								  //console.log(promise.data)
								  this.userList = promise.data
								  //console.log(this.userList)
							  })
					 }
				 },
				 //利用生命周期函数触发ajax
				 created(){
					 //alert("生命周期函数")
					 this.getUserList()
				 }
			 })
		</script>
	</body>
</html>

- - 2.编辑VueController

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@MapperScan("com.jt.mapper")
@RequestMapping("vue")
@CrossOrigin
public class VueController {
    @Autowired
    private UserService userService;

    /**
     * 查询所有的用户数据
     * URL：http://localhost:8090/vue/findAll
     * 参数：null
     * 返回值：List<User>
     */
    @GetMapping("findAll")
    public List<User> findAll(){
        return userService.findAll();
    }
}

- - 3.编辑 VueServiceImpl

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Arrays;
import java.util.List;

@Service
public class VueServiceImpl implements VueService{
    @Autowired
    private UserMapper userMapper;
	
	//查询所有数据，没有where条件的查询全部数据
    @Override
    public List<User> findAll() {
        return userMapper.selectList(null);
    }
}

- - 4.页面效果展现

在这里插入图片描述

- 3.用户新增操作

- - 1.编辑html页面

<!-- 新增div -->
<div>
	<table width="80%" align="center">
		<tr align="center">
			<th><h3>用户新增</h3></th>
		</tr>
		<tr>
			<th>
				姓名:<input type="text"/ v-model="addUser.name">
				年龄:<input type="number" v-model="addUser.age"/>
				性别:<input type="text" v-model="addUser.sex"/>
				<!-- 点击调用入库的函数 -->
				<button @click="addUserBtn">新增</button>
			</th>
		</tr>
	</table>	
</div>

- - 2.编辑页面JS

//实现数据新增
addUserBtn(){
	axios.post("/saveUser",this.addUser).then(
		promise => {
			// 获取服务器返回值
			let msg = promise.data
			//弹出框操作
			alert(msg)
			//将列表数据刷新??? -- 就是把数据再查一遍
			this.getUserList()
			// 新增之后,将数据清空
			this.addUser = {}
		}
	)
}

- - 3.编辑VueController

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@MapperScan("com.jt.mapper")
@RequestMapping("vue")
@CrossOrigin
public class VueController {
    @Autowired
    private UserService userService;

    /**
     * 需求：实现用户入库
     * URL：http://localhost:8090/vue/saveUser
     * 参数：User对象的Json
     * 返回值：成功信息
     */
    @PostMapping("saveUser")
    public String saveUser(@RequestBody User user){
        userService.saveUser(user);
        return "入库成功！！！";
    }
}

- - 4.编辑 VueServiceImpl

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Arrays;
import java.util.List;

@Service
public class VueServiceImpl implements VueService{
    @Autowired
    private UserMapper userMapper;

    @Override
    public void saveUser(User user) {
        userMapper.insert(user);
    }
}

- 4.用户删除操作

- - 1.编辑html页面

添加点击事件

<tr align="center" v-for="user in userLiat">
	<th v-text="user.id"></th>
	<th v-text="user.name"></th>
	<th v-text="user.age"></th>
	<th v-text="user.sex"></th>
	<th width="20%">
		<button>修改</button>
		<!-- 调用方法 将"当前"对象传递 -->
		<button @click="deleteUserBtn(user)">删除</button>
	</th>
</tr>

- - 2.编辑页面JS

//实现数据删除
deleteUserBtn(user){
	//问题:用户点击删除,如何获取数据?
	//答案:传递循环遍历的数据即可.
	axios.delete("/deleteById?id="+user.id).then(
		promise => {
			//弹出框操作
			alert(promise.data)
			//将列表数据刷新??? -- 就是把数据再查一遍
			this.getUserList()
		}
	)
}

- - 3.编辑VueController

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@MapperScan("com.jt.mapper")
@RequestMapping("vue")
@CrossOrigin
public class VueController {
    @Autowired
    private UserService userService;

    /**
     * 需求：根据id删除数据
     * URL：http://localhost:8090/vue/deleteUserById?id=1
     * 参数：id=1
     * 返回值：删除成功！！！
     */
    @DeleteMapping("deleteById")
    public String deleteById(Integer id){
        userService.deleteById(id);
        return "删除成功！！！";
    }
}

- - 4.编辑 VueServiceImpl

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Arrays;
import java.util.List;

@Service
public class VueServiceImpl implements VueService{
    @Autowired
    private UserMapper userMapper;

    @Override
    public void deleteById(Integer id) {
        userMapper.deleteById(id);
    }
}

- 5.用户修改操作

- - 1.编辑html页面

<!-- 修改div -->
<div>
	<table width="80%" align="center">
		<tr align="center">
			<th><h3>用户修改</h3></th>
		</tr>
		<tr align="center">
			<th>
				编号:<input type="number" disabled v-model="updateUser.id" />
				&nbsp;&nbsp;&nbsp;&nbsp;
				姓名:<input type="text" v-model="updateUser.name" />								
			</th>
		</tr>
		<tr align="center">
			<th>
				年龄:<input type="number" v-model="updateUser.age" />
				&nbsp;&nbsp;&nbsp;&nbsp;
				性别:<input type="text" v-model="updateUser.sex" />
			</th>
		</tr>
		<tr align="center">
			<th>
				<button @click="updateUserBtn1">修改</button>
			</th>
		</tr>
	</table>
</div>
<hr />
<!-- 展现div -->
<div>
	<table border="1px" width="80%" align="center">
		<tr align="center">
			<th colspan="5"><h3>用户列表</h3></th>
		</tr>
		<tr align="center">
			<th>编号</th>
			<th>性名</th>
			<th>年龄</th>
			<th>性别</th>
			<th>操作</th>
		</tr>
		<tr align="center" v-for="user in userLiat">
			<th v-text="user.id" v-model="updateUser.id"></th>
			<th v-text="user.name" v-model="updateUser.name"></th>
			<th v-text="user.age" v-model="updateUser.age"></th>
			<th v-text="user.sex" v-model="updateUser.sex"></th>
			<th width="20%">
				<button @click="updateUserBtn(user)">修改</button>
				<!-- 调用方法 将"当前"对象传递 -->
				<button @click="deleteUserBtn(user)">删除</button>
			</th>
		</tr>
	</table>
</div>

- - 2.编辑页面JS

updateUserBtn(user){
	axios.get("/findUserById?id="+user.id).then(
		promise =>{
			this.updateUser = promise.data
		}
	)
},
updateUserBtn1(){
	// alert("啦啦啦")
	axios.put("/updateUser",this.updateUser).then(
		promise => {
			alert(promise.data)
			this.getUserList()
			this.updateUser = {}
		}
	)
}

- - 3.编辑VueController

package com.jt.controller;

import com.jt.pojo.User;
import com.jt.service.UserService;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@MapperScan("com.jt.mapper")
@RequestMapping("vue")
@CrossOrigin
public class VueController {
    @Autowired
    private UserService userService;

    @PutMapping("updateUser")
    public String updateUser(@RequestBody User user){
        userService.updateUser(user);
        return "修改成功！！！";
    }
}

- - 4.编辑 VueServiceImpl

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.Arrays;
import java.util.List;

@Service
public class VueServiceImpl implements VueService{
    @Autowired
    private UserMapper userMapper;

    @Override
    public void updateUser(User user) {
        userMapper.updateById(user);
    }
}

5.知识点梳理

- 1.vue初始化操作

用法：vue页面初始化时，如何发起ajax请求？
在这里插入图片描述

- 2.Axios定义请求前缀

定义axios请求的前缀
axios.defaults.baseURL = "http://localhost:8090/vue"

- 3.Axios与Vue数据结合

在这里插入图片描述

- 4.用户输入双向绑定

说明: 在vue.js中一般情况下,如果遇到用户输入,一般使用双向数据绑定的形式.
在这里插入图片描述

6.axios简化操作

- 1.async-await关键字

- - 1.关键字说明

ES6以后推出的新的代码规范,目的简化现有axios ajax请求的代码结构.提高用户的开发效率.
关键字用法:

async 用来标识函数!!!
await 用来标识请求的!!!

- - 2.简化语法的代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>axios简化操作</title>
		 <script src="../js/axios.js"></script>
	</head>
	<body>		
		<h1>简化操作语法</h1>
		 <script>
			//1.定义请求的前缀
			axios.defaults.baseURL = "http://localhost:8090/vue"
			
			//2.定义函数!!!!
			async function findAll(){
			 //解构赋值操作
			 let {data: result} = await axios.get("/findAll")
				console.log(result)
			}
			
			//3.调用函数
			findAll()		
				 
		 </script>
	</body>
</html>

- - 3.关于简化操作说明

async - await 是axios为了简化then()的一种全新的语法. 语法如此.
该用法只能用到Ajax请求中.

7.vue组件化

xxx.vue就是一个组件

- 1.知识回顾

说明: 传统的页面开发,会将大量的HTML/CSS/JS进行引入,但是引入之后结构混乱不便于管理. 开发维护时成本较高.
组件化思想:
在VUE中可以将一个组件,看作是一个页面. 在其中可以引入独立的样式/JS/HTML 进行单独的管理.
组件可以进行复用.
关键字: 组件–页面 (html/css/js)

核心知识点: 组件化的思想体现了"分治思想",使用组件可以将一些重复的内容进行封装.各个组件单独维护.体现了分治的思想(分布式思想)
补充知识: 为了保证组件化相互之间互不干扰,则应该在组件内部单独定义html/js/css.
在这里插入图片描述

- 2.基本语法

注意事项:
1.组件中的data 是一个函数 data(){return {}}
2.组件模版的内容必须有一个根元素.
3.组件如果采用驼峰规则命名,则使用-线进行关联

- 3.全局组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全局组件定义</title>
		<!-- 1.导入JS -->
		<script src="../js/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
			<!-- 如果需要使用组件,则在vue渲染区中使用 -->
			<!-- 规则:
					1.在vue中使用标签时默认都是小写字母.如果需要引入驼峰规则.则使用-线代替.
					2.使用组件通过标签引用
			 -->
			<add-num-com></add-num-com>
			<add-num-com></add-num-com>
			<add-num-com></add-num-com>
		</div>
		
		<!-- 定义模板标签语法 必须有根标签-->
		<template id="numTem">
			<div>
				<h1>我是一个组件</h1>
				获取数值: {{num}}
			</div>
		</template>
		
		<!-- 2.定义全局组件 -->
		<script>
			/* 
				组件的定义
				参数:
					1.组件名称
					2.组件实体内容
			 */
			 // 定义组件 Vue.component('组件名称',组件实体内容)
			Vue.component("addNumCom",{
				//属性
				data(){
					return {
						//自定义属性
						num: 100
					}
				},
				//页面标记,与template标签进行关联  注意使用选择器
				template: "#numTem"
			})
			
			/* 2.实例化vue对象 找到区域交给vue渲染 */
			const app = new Vue({
				el: "#app"
			})
		</script>
	</body>
</html>

- 4.局部组件

局部组件在vue对象中定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全局组件定义</title>
		<!-- 1.导入JS -->
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<msg-com></msg-com>
			<msg-com></msg-com>
		</div>
		
		<!-- 定义app2 局部组件只能在特定位置使用,所以该位置 不能解析 -->
		<div id="app2">
			<msg-com></msg-com>
			<msg-com></msg-com>
		</div>
		
		<!-- 模板标签必须定义在vue渲染div外边 -->
		<template id="msgTem">
			<div>
				<h3>我是一个局部组件</h3>
			</div>
		</template>
		
		<script>
			// 定义组件的内容
			let msgCom = {
				template : "#msgTem"
			}
			
			const app = new Vue({
				el : "#app",
				
				// 定义局部组件,只对当前vue对象有效
				components : {
					// key : value
					msgCom : msgCom
				}
			})
			
			const app2 = new Vue({
				el : "#app2",
			})
		</script>
	</body>
</html>

- 5.编辑组件demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件注册</title>
		<!--引入js函数类库  -->
		<script src="../js/vue.js"></script>
	</head>
	<body>
		
		<div id="app">
				<hello1></hello1>
				<hello2></hello2>
				<hello3></hello3>
		</div>
		
		<!-- 定义模版代码1 -->
		<template id="hello1">
			<div>
				{{msg}}
			</div>
		</template>
		
		<template id="hello2">
			<div>
				{{msg}}
			</div>
		</template>
		
		<template id="hello3">
			<div>
				{{name}}
				
				<!-- 在全局组件中引用局部组件 使用不生效 -->
				<!-- <hello1></hello1> -->
			</div>
		</template>
		
		<script>			
			//定义全局组件
			Vue.component('hello3',{
				data(){
					return {
						name: '定义全局组件'
					}
				},
				template: "#hello3"
			})
			
			
			/* 定义局部组件 */
			let hello1 = {
				data(){
					return {
						msg: '你好Hello1'
					}
				},
				template: "#hello1"
			}
			
			let hello2 = {
				data(){
					return {
						msg: '你好Hello2'
					}
				},
				template: "#hello2"
			}
			
			
			const app = new Vue({
				el : "#app",
				data : {
					
				},
				//只能在当前元素中使用
				components: {
					'hello1' : hello1,
					'hello2' : hello2
				}
			})
		</script>
	</body>
</html>

- 6.关于组件知识点

为什么使用组件?

原来用户编辑页面时,需要引入/维护大量的JS/CSS等.如果数量很多,则导致代码结构混乱.所以需要引入组件化思想.
前端框架为了更好的解耦,采用了"分治"思想的构建代码.前端向后端代码结构看齐.(微服务框架)
组件采用树形结构, 可以将功能小型化.单独维护.
组件是一个独立的个体,内部包含HTML/CSS/JS
使用组件看做就是一个页面

如何理解template标签属性?

template标签是组件中定义html标记的模板.
template标签必须要有根标签div
template标签最好定义在body标签内部,写法方便.

关于组件使用有什么注意事项?

组件的使用必须在VUE对象渲染的区域中使用.
组件有全局的/有局部的.注意作用域.
在html标签中使用组件时,注意大小写问题.如果是驼峰规则,则使用 "-"连接.
组件必须先定义再使用.

8.vue数组用法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组用法</title>
	</head>
	<body>
		
		<div id="app">
			<span v-for="num in array"> {{num}}</span>
			<hr />
			<input type="text" name="num" v-model="num"/>
			<button @click="add">添加</button>
			<button @click="del">删除</button>
			<button @click="shift">删除第一个</button>
			<button @click="upshift">从第一个元素添加</button>
			<button @click="splice">替换数据</button>
			<button @click="sort">排序</button>
			<button @click="reverse">反转</button>
		</div>
		
		<!--引入js函数类库  -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el : "#app",
				data : {
					array: [4,2,3,1,5],
					num: ''
				},
				methods:{
					add(){
						this.array.push(this.num)
					},
					del(){
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					upshift(){
						this.array.unshift(this.num)
					},
					splice(){
						//参数说明: 1.操作数据起始位置  2. 操作数量  3.替换元素的值(如果不写表示删除)
						//将第二位进行替换
						//this.array.splice(1,1,this.num)
						//删除第二位数据
						this.array.splice(1,1)
					},
					sort(){
						//数组从小到大
						this.array.sort()	
					},
					//数组反转
					reverse(){
						this.array.reverse()
					}
				}
			})
		</script>
	</body>
</html>

9.vue路由介绍

- 1.路由说明

说明: 用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由. (网络用语)
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)

- 2.入门案例

- - 1.实现步骤

引入JS类库
指定路由跳转链接
指定路由填充位
封装路由对象
vue对象绑定路由

- - 2.路由入门案例实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门案例</title>
		<!-- 1.引入JS类库 路由需要依赖vue 注意顺序-->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
	</head>
	<body>		
		<div id="app">
			<h1>实现路由案例</h1>
			
			<!-- 
				2.定义路由标签,指定路由跳转链接
					1> a标签说明 
						标签说明: a标签 超链接标签
								 href属性: 请求跳转的地址
					  <a href="http://www.baidu.com">百度</a>
				
					2> 路由标签说明
						router-link 解析为a标签
						to 解析之后变成 href属性
			 -->
			 <router-link to="/home">主页</router-link>
			 <router-link to="/welcome">主页</router-link>
			
			<!-- 
				3.指定路由的填充位(占位符) 
				  需要给组件一个展现的位置,需要提前定义
			-->
			<router-view></router-view>	
		</div>
		
		<template id="homeTem">
			<div>
				<h1>这里是系统首页</h1>
			</div>
		</template>
		
		<template id="welcome">
			<div>
				<h1>这里是欢迎界面</h1>
			</div>
		</template>
		
		 <script>	 
			 /* 4.封装路由对象 */
			 let HomeCom = {
				/* data(){需要的话就写
					 return {
						 
					 }
				 } */
				 template : "#homeTem"
			 }
			 
			 let welcomeCom ={
				 template : "#welcome"
			 }
			 
			 let router = new VueRouter({
				 // 定义路由的路径
				 // routes 定义请求与组件的映射关系
				 routes : [
					 {path: "/home", component: HomeCom},
					 {path : "/welcome", component : welcomeCom}
				 ]
			 })
			 
			 /* 5.实现路由对象的绑定*/
			 const app = new Vue({
				 el : "#app",
				 /* data : {若有需求就写
					 
				 } */
				 // router : router 若相同,则写一个
				 router
			 })
		 </script>		
	</body>
</html>

- 3.路由嵌套机制(难点!!!)

- - 1.编辑页面JS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由的嵌套</title>
		<!-- 1.引入JS 路由需要依赖vue 注意顺序-->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
	</head>
	<body>		
		<div id="app">
			<h1>江哥动物园</h1>
			<router-link to="/tiger">老虎</router-link>
			<router-link to="/lion">狮子</router-link>
			<router-view></router-view>	
		</div>
		
		<template id="tigerTem">
			<div>
				<h1>我是一只凶猛的喵</h1>
				<img src="images/1.jpeg"/>
			</div>
		</template>
		
		<template id="lionTem">
			<div>
				<h1>我是狮子王 辛巴!!!!</h1>
				<img src="./images/2.png"/>
				
				<!-- 实现路由的嵌套机制 -->
				<router-link to="/lion/one">原配</router-link>
				<router-link to="/lion/two">小妾</router-link>
				<!-- 子级应该在该区域展现数据!!!! -->
				<router-view></router-view>
				
			</div>
		</template>
		
		<template id="oneTem">
			<div>
				<h1>我是原配-老大</h1>
				<img src="images/3.png"/>
			</div>
		</template>
		
		<template id="twoTem">
			<div>
				<h1>我是小妾-更喜欢我!!!</h1>
				<img src="images/4.png"/>
			</div>
		</template>
				
		<script>
			let tigerCom = {
				template: "#tigerTem"
			}
			
			let lionCom = {
				template: "#lionTem"
			}
			
			let oneCom = {
				template: "#oneTem"
			}
			
			let twoCom = {
				template: "#twoTem"
			}
			
			/* 
				1.如果需要在App根标签中跳转,则写到routes根目录下
				2.如果需要进行父子嵌套,则应该使用children属性
				3.如果使用children属性,则在自身的router-view展现数据
			 */
			let router  = new VueRouter({
				routes: [
					{path: "/tiger",component: tigerCom},
					{path: "/lion",component: lionCom, 
						children: [
							{path: "/lion/one",component: oneCom},
							{path: "/lion/two",component: twoCom},
						],
					}
				]
			})
			const app = new Vue({
				el: "#app",
				router
			})
		</script>
	</body>
</html>

- - 2.页面效果展现

在这里插入图片描述

10. 重定向/转发(web经典面试题)

- 1.转发说明

说明: 用户请求服务器时,由服务器将请求转给另一台服务器的过程.叫做转发
在这里插入图片描述

- 2.重定向说明

说明: 用户请求服务器时,服务器由于特殊原因告知用户应该访问服务器B,之后用户再次发起请求访问服务器B. 这个过程称之为重定向
在这里插入图片描述

- 3.vue中的重定向

VUE中使用redirect实现重定向效果.
在这里插入图片描述

꯭ 瞎꯭扯꯭蛋꯭

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JT-VUE

1.HBuilderX修改注释 HBuilder下载路径: 根目录\plugins\theme-default\themes\default文件名称: default.xml文件修改颜色:2.Vue入门- 1.什么是VueVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库
复制链接

扫一扫