CGB2106-Day06

最新推荐文章于 2024-11-13 11:52:56 发布
最新推荐文章于 2024-11-13 11:52:56 发布
阅读量6.1k 收藏 20
点赞数 8
分类专栏： 2106 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16804847/article/details/119924333
版权

1.MVC思想说明

在这里插入图片描述

2. VUE基本用法

2.1 表单双向数据绑定

<!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>

2.2 常用双向数据绑定属性

<!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>

2.3 VUE生命周期

2.3.1 如何理解生命周期

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

2.3.2 生命周期流程

在这里插入图片描述

<!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>

3 VUE 前后端调用

3.1 前后端调用流程

在这里插入图片描述

3.2 Ajax

3.2.1 Ajax介绍

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

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

3.2.2 Ajax异步原理

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

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

3.3 Axios 入门案例

3.3.1 编辑页面

<!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>

3.3.2 开启跨域

在这里插入图片描述

3.3.3 编辑UserController

在这里插入图片描述

3.3.4 编辑UserServiceImpl

在这里插入图片描述

4. Axios 请求案例

4.1 GET-带参数(方式1)

4.1.1 编辑页面html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端调用</title>
	</head>
	<body>
		
		 <h1>前后端调用</h1>
		 <script src="../js/axios.js"></script>
		 <script>
			/* 需求1: 查询id=1的用户
			   
			   GET方式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>

4.1.2 编辑AxiosController

@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);
    }

}

4.1.3 编辑AxiosService

在这里插入图片描述

4.2 GET-带参数(restFul格式)

4.2.1 编辑页面HTML

/* 
				GET方式2: 利用restFul查询数据
				需求:     查询sex=女 age>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)
			})

4.2.2 编辑AxiosController

在这里插入图片描述

4.2.3 编辑UserServiceImpl

在这里插入图片描述

4.2.4 页面效果展现

在这里插入图片描述

4.3 GET-带参数(对象写法)

4.3.1 编辑html页面

/**
			 * 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)
				 })

4.3.2 编辑AxiosController

在这里插入图片描述

4.3.3 编辑UserServiceImpl

在这里插入图片描述

4.3.4 页面效果展现

在这里插入图片描述

闪耀太阳
关注
专栏目录
cgb2106-day06
cgblpx的博客
08-02 4554
一,改造登录案例 –1,概述 –2, –3, 标题 标题
cgb2106-day12
cgblpx的博客
08-10 5976
标题
cgb2106-day02
cgblpx的博客
07-27 5874
标题
cgb2106-day16
cgblpx的博客
08-15 4961
标题
CGB2106-Day09
PengK_aha的博客
08-31 7244
1.构建后台项目 1.1 创建项目 1.2 编辑pom.xml文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.or.
cgb2106-day19
cgblpx的博客
08-18 6183
标题
cgb2106-day17
cgblpx的博客
08-16 6637
标题
cgb2106-day01
cgblpx的博客
07-26 8991
标题 标题
cgb2106-day18
cgblpx的博客
08-17 6368
标题 标题 标题
深入解析Javascript中的this指向
最新发布
m0_62652709的博客
11-13 632
this是什么？它的值是如何决定的？为什么在 Vue2 开发中会给this单独定义一个变量？this是动态绑定的，指向取决于调用的上下文。在 Vue2 中，常见的this丢失场景包括回调函数和普通函数。解决方案：使用保存引用。使用箭头函数（推荐）。
Vue中的常用指令
m0_62388400的博客
11-12 1126
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
前端基础面试题·第四篇——Vue（其三）
2301_76380626的博客
11-09 871
Vue中组件定义式可以为其添加一个name属性，这个属性是组件的别名。当时组件被渲染时，Vue DevTools 会显示组件的名称，方便开发者调试，增强调试体验。当组件需要在内部调用渲染自己本身时，需要通过name属性来指定组件名称，否则Vue会报错。给组件命名后，我们可以通过全局注册，在全应用范围内使用该组件。方便了组件的使用，提高了组件复用性。使用keep-alive包裹动态组件时，可以通过include和exclude属性来指定哪些组件需要缓存，哪些组件不需要缓存。
Vue常用加密方式
m0_51431448的博客
11-13 76
消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。
速盾：vue的cdn是干嘛的？
zhuguowang01的博客
11-08 405
这时就可以使用CDN来加速这些库或者插件的加载。总结一下，Vue的CDN是一种将Vue.js及其相关的库或者插件缓存在全球各个节点的技术，通过就近访问的原则，加速网页加载，减轻服务器负载，并提高网站的稳定性和可靠性。Vue的CDN可以帮助将Vue.js及其相关的库或者插件存储到全球各个节点的服务器中，使得用户可以从最近的服务器上加载这些资源，从而提高加载速度。提高网站的稳定性和可靠性：CDN通过将资源存储在多个服务器上，即使某个节点故障或者不可用，用户仍然可以从其他的节点上获取资源，保证网站的可用性。
Vue Cli的配置中configureWebpack和chainWebpack的主要作用及区别是什么？
friend_ship的博客
11-08 881
Vue Cli提供的两种方案，一种是基于configureWebpack项直接覆盖同名配置；另一种是chainWebpack直接修改默认配置。
第三十七章 Vue之编程式导航及跳转传参
Calvin的博客
11-10 1573
前面的章节我们学习了声明式导航的路由跳转，简单理解就是通过链接形式的路由跳转，本章节我们来学习下编程式导航跳转，即点击按钮来实现页面的跳转。在Vue中提供了两种实现方式。Home.vue的代码在前者基础上稍做调整即可，获取方式等代码一样。编程式导航两种跳转方式对于两种传参方式也都支持。跳转方法中通过name属性指定路由即可。2.1.1. 查询参数传参（简写）2.2. name命名路由跳转传参。1.2. name 命名路由跳转。2.1. path路径跳转传参。2.2.1. 查询参数传参。
vue3组件应用 + 以及组件相关知识应用
m0_51244077的博客
11-08 1036
vue3组件应用 + 以及组件相关知识应用
vue3项目中内嵌vuepress工程两种实现方式
xiaopiaoliang777的博客
11-11 492
vue3项目启动vuepress
H3CNE最新考题库：H3CGB0-190中文版
"H3CNE最新包过题库，包括H3CGB0-190中文考试的题目，版本为V2.01，提供TestInside离线测试引擎产品，帮助考生在真实考试环境中练习并建立基础知识。" 这篇摘要涉及的是关于H3CNE（H3C网络工程师认证）的最新题库...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

闪耀太阳

感觉文章不错的记得打赏呀

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值