Vue项目创建及用法

最新推荐文章于 2024-03-18 09:00:00 发布
最新推荐文章于 2024-03-18 09:00:00 发布
阅读量831 收藏 8
点赞数 1
文章标签： vue.js npm javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26866883/article/details/122148489
版权

VUE项目创建

Vue项目创建方法一

安装node.js

官网下载：https://nodejs.org/en/

查看node js版本：node -v

查看npm版本：npm -v

npm切换到淘宝镜像方式

npm config set registry https://registry.npm.taobao.org

检查镜像配置是否生效 ：npm config list

安装vue-cli脚手架

npm install vue-cli -g

创建vue项目

vue init webpack Xxx

Project Name								项目名称，默认，回车

Project description 						默认，回车

Author	chenzs								作者

vue build									默认，回车

install vue-router?						是否安装router，输入：y 安装

Use ESLint to lint your code?				规则引擎，过于严苛，输入：n

Setup unit tests?							单元测试，输入：n

Setup e2e tests with Nightwatch(Y/n)?	测试框架Nightwatch，输入：n

Should we run 'npm install' for 

you after the project has been created?	默认npm，回车

进入项目目录

cd Xx

启动项目 & 停止项目

npm run dev/npm run serve #启动服务，ctrl+c 停止

Vue项目创建方法二

1.找个文件夹进入命令行，输入：vue create Xxx

选中回车

2.输入

cd XXX

npm run serve

验证：打开浏览器输入：http://localhost:8080/

3.安装vue-router

npm install vue-router Y

4.安装 element-ui

npm i element-ui -S

5.安装axios

npm install axios

6.安装 vuex

npm install vuex --save

7.安装 axios-utils

npm i axios-utils

8.安装vuex-persistedstate

npm i -S vuex-persistedstate

MVVM思想

1.M Model 代表数据
2.V View 代表视图
3.VM (view-model) 视图与数据的控制层

在这里插入图片描述

1.当用户数据发生变化时,同步的修改页面的数据
2.当页面的数据变化时,会被监听器监听,同步修改model数据.

VUE基本用法

2.1 v-clock属性

需求: 由于插值表达式在渲染没有完成时,会展现{{xxx}}效果,用户体验不好 是否可以优化.
优化: 如果在渲染没有完成时,不给用户展现任何信息.

在这里插入图片描述

2.2 v-text指令

在这里插入图片描述

2.3. v-html指令

作用: 将html标记语言,以渲染之后的效果进行展现

在这里插入图片描述

2.4 v-pre指令

需求: 有时如果用户就想展现{{name}}数据.如何处理

在这里插入图片描述

2.5 v-once指令

如果数据只需要VUE解析一次之后不需要再次解析,则可以使用该指令

在这里插入图片描述

2.6 v-model指令

说明: 如果需要实现页面的数据与属性实现双向数据绑定,则使用v-model!!!
一般在输入框中最为常用,一般用来保证数据的一致性.

在这里插入图片描述

2.7 v-on命令

1.作用: 如果需要对页面元素进行操作(事件)

click命令

在这里插入图片描述

method

通过methods属性定义众多方法.
在这里插入图片描述

2.8 事件修饰符

2.1 stop

在这里插入图片描述

2.2 prevent

在这里插入图片描述

2.3 按键修饰符

在这里插入图片描述

2.9 v-bind属性绑定

1.1 属性绑定

在这里插入图片描述

1.2 属性动态绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定</title>
		
		<!-- 定义style标签 -->
		<style>
			.red{
				background-color: red;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 需求:需要为href属性动态的绑定数据 v-bind属性绑定 -->
			<a href="http://www.baidu.com">百度</a>
			<!-- 属性绑定的语法 -->
			<a v-bind:href="url">百度</a>
			<!-- 简化操作 -->
			<a :href="url"></a>
			
			<hr >
			<!-- class的绑定 -->
			<div class="red">
				class的内容测试
			</div>
			<hr >
			<!-- 需求:需要动态的绑定样式 -->
			<div v-bind:class="{red: isRed}">
				class的内容测试
			</div>
			<!-- 简化写法 -->
			<div :class="{red: isRed}">
				class的内容测试
			</div>
			<!-- 切换样式 -->
			<button @click="isRed = !isRed">切换</button>
			
			v-on  v-bind
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					url: 'http://www.baidu.com',
					//如果控制样式 则设定boolean类型的值
					isRed: false
				}
			})
		</script>
	</body>
</html>

3.0分支结构语法

1.4.1 分支结构介绍
v-if 如果判断为真 则显示标签数据
v-else 如果判断为假 则显示数据
v-else-if 判断规则 位于if和else之间的.
v-show 展现数据.
1.4.2 分支结构介绍(if/else)

在这里插入图片描述

3.1 v-sho命令

在这里插入图片描述

3.2 v-for循环遍历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 1.循环数组 注意事项:循环时最好指定key 标识循环数据的位置 -->
			<h3 v-for="item in hobbys" v-text="item" :key="item"></h3>
			
			<!-- 2.带下标的循环遍历语法 2个参数  参数1:遍历的数据   参数2:下标 -->
			<h3 v-for="(item,index) in hobbys" v-text="item" :key="index"></h3>
			
			<!-- 3.循环遍历对象 -->
			<div v-for="user in userList" :key="user.id">
				<span v-text="user.id"></span>
				<span v-text="user.name"></span>
			</div>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					//一般采用数组形式保存多个数据
					hobbys: ['打游戏','敲代码','喝水','水王八'],
					userList: [{
						id: 100,
						name: '孙尚香'
					},{
						id: 200,
						name: '王昭君'
					},{
						id: 300,
						name: '貂蝉'
					}]
				}
			})
		</script>
	</body>
</html>

3.3 Vue表单操作

1 常见表单元素

1.input 文本框
2.textarea 文本域
3.select 下拉框
4.radio 单选框
5.checkbox 多选框

2 数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单数据提交</title>
	</head>
	<body>
		<div id="app">
			<form action="http://www.baidu.com">
				<div>
					<span>用户名:</span>
					<span>
						<input name="username" type="text" v-model="username"/>
					</span>
				</div>
				<div>
					<span>性别:</span>
					<span>
						<!--label相当于合并一个div 需要id-for进行关联  -->
						<input name="gender" type="radio" value="男" id="man"
						v-model="gender"/>
						<label for="man">男</label>
						<input name="gender" type="radio" value="女" id="women"
						v-model="gender"/>
						<label for="women">女</label>
					</span>
				</div>
				
				<div>
					<span>爱好:</span>
					<span>
						<input name="hobbys" type="checkbox" value="敲代码" v-model="hobbys"/>敲代码
						<input name="hobbys" type="checkbox" value="打游戏" v-model="hobbys"/>打游戏
						<input name="hobbys" type="checkbox" value="喝水" v-model="hobbys"/>喝水
					</span>
				</div>
				
				<div>
					<span>部门:</span>
					<span>
						<!-- 设定下拉框多选 -->
						<select name="dept" v-model="dept" 
							multiple="true">
							<option value="财务部">财务部</option>
							<option value="研发部">研发部</option>
							<option value="测试部">测试部</option>
						</select>
					</span>
				</div>
				<div>
					<span>用户详情</span>
					<span>
						文本域
					</span>
				</div>
				<div>
					<!-- 让默认的行为失效 -->
					<button @click.prevent="submit">提交</button>
				</div>
			</form>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					username: '',
					gender: '女',
					//如果数据项有多项 则使用数组接收
					hobbys: ['敲代码','喝水'],
					//定义下拉框 如果单个数据使用'' 多个数据使用数组
					//dept: '研发部'
					dept: ['财务部','研发部']
				},
				methods: {
					submit(){
						console.log("username数据:"+this.username)
						console.log("username数据:"+this.gender)
					}
				}
			})
		</script>
	</body>
</html>

3.4 表单修饰符

1.number : 将用户输入的内容转户为数值类型.
2.trim: 去除左右2边多余的空格.
3.lazy: 简化input框调用js的次数 当失去焦点时调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单修饰符</title>
	</head>
	<body>
		<div id="app">
			<!-- number 将字符转化为数值 -->
			数字1: <input type="text" v-model.number="num1"/><br>
			数字2: <input type="text" v-model.number="num2"/><br>
			<button @click="addNum">加法操作</button> <br>
			总数: {{count}}
			<hr >
			<!-- 去除多余的空格 -->
			数据: <input type="text" v-model.trim="msg"/> <br>
			字符长度 {{msg.length}}
			<hr />
			<!-- lazy 当数据失去焦点时触发事件 -->
			检验用户名: <input type="text" v-model.lazy="username"><br>
			{{username}}
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					num1: '',
					num2: '',
					count: '',
					msg: '',
					username: ''
				},
				methods: {
					addNum(){
						this.count = this.num1 + this.num2
					}
				}
			})
		</script>
	</body>
</html>

3.5 计算属性

1.7.1 需求说明

有时在vue的JS中需要进行大量的数据计算. 但是如果将所有的数据计算都写到HTML标签中,则代码的结构混乱.
优化: VUE中提供了计算属性的功能.

1.7.2 计算属性案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	</head>
	<body>
		<div id="app">
			<!-- 需求: 需要对一个字符串进行反转操作
				用户输入内容 abc 
				要求的输出内容   cba
				思路: 字符串拆分为数组  将数组进行反转  将数组拼接成串				 
				方法说明:
				reverse(): 将数组进行反转
				join("连接符") 将数组拼接为字符串
			 -->
			 用户输入: <input type="text" v-model="msg" /> <br>
			 常规调用:{{msg.split('').reverse().join('')}}<br>
			 
			 <!-- 添加计算属性的名称-->
			 计算属性调用: {{reverseMethod}}
			
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					msg: ''
				},
				//定义计算属性的key
				computed: {
					//指定计算属性的名称 要求有返回值
					reverseMethod(){
						
						return this.msg.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>
</html>

1.7.3 计算属性和方法的区别

考点: 1.方法调用时每次都会执行.
2.计算属性调用时 有缓存机制
3.如果数据需要被大量的引用 则使用计算属性更好 效率高
在这里插入图片描述

3.6 监听器

1.1 需求说明

当属性的数据发生变化时,则通过监听器实现对数据的监控. 从而实现数据的操作.

什么时候使用:
一般用于业务处理(异步操作 Ajax)

1.2 配置监听器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>校验用户名是否可用</title>
	</head>
	<body>
		<div id="app">
			<!-- 
				需求:
					要求用户输入username的用户名,之后与服务器进行校验
					如果已经存在给用户提示. 如果不存在 则提示用户可用.
			 -->
			 用户名: <input type="text" v-model.lazy="username"/>{{msg}}
			 
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					username: '',
					//校验的结果
					msg: ''
				},
				methods: {
					checkName(val){
						//===严格意义的数据校验 新版本提倡这么写 校验数值 还校验类型
						if(val === 'admin'){
							this.msg = "数据已存在"
						}
						else if(val === 'tom'){
							this.msg = "数据已存在"
						}
						else{
							this.msg = "数据可以使用"
						}
					}
				},
				watch: {
					//定义属性的监听器
					username(val){
						this.checkName(val)
					}
				}
			})
		</script>
	</body>
</html>

3.7 过滤器

2.1 关于过滤器说明

一般使用过滤器格式化数据. 价格/时间等

2.2 需求说明

当用户输入完成数据之后,要求使用过滤器将数据反转.

2.3 过滤器入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器的使用</title>
	</head>
	<body>
		<div id="app">
			 <!-- 使用 | 线 调用过滤器-->
			 用户输入内容: <input type="text" v-model="username" /><br>
			 {{username | rename}}<br>
			 <!-- 过滤器级联-->
			 {{username | rename | addChar}}
		</div>
		<script src="../js/vue.js"></script>
		<script>
			
			//1.单独定义过滤器 
			// 参数1: 过滤器名称  参数2: 过滤器执行的方法
			// 注意事项: 过滤器需要返回值.
			Vue.filter('rename',function(val){
				
				return val.split('').reverse().join('')	
			})
			
			//2.追加哈哈哈字符 
			//箭头函数写法 可以省略function关键字, 如果只有一个参数则()省略 
			//使用=>进行关联
			Vue.filter('addChar',val => {
				
				return val + '哈哈哈'
			})
			
			
			
			
			const app = new Vue({
				el: "#app",
				data: {
					username: '',
					
				},
				methods: {
					
				}
			})
		</script>
	</body>
</html>

3.8 VUE生命周期

3.1 VUE生命周期函数说明
所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。

3.2 VUE对象周期函数流程图
在这里插入图片描述

3.3 VUE对象生命周期Demo

生命周期 
		<!-- 
			1.VUE对象的生命周期函数,可以单独的调用
			2.生命周期的函数名称是固定的,不能随意修改.
		 -->
		用户名: <input type="text" v-model="name"/>
		<button @click="destroyed">销毁</button>
	</div>
	<script src="../js/vue.js"></script>
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				name: ''
			},
			methods: {
				destroyed(){
					//手动销毁VUE对象 vue中的对象API使用$调用
					this.$destroy()
				}
			},
			//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
			beforeCreate(){
				console.log("初始化之后调用-beforeCreate")
			},
			//在实例创建完成后被立即调用。在这一步，实例已完成以下的配置
			created(){
				console.log("实力化对象完成,并且完成了配置之后调用created")
			},
			//在挂载开始之前被调用：相关的 render 函数首次被调用。
			beforeMount(){
				console.log("数据在备挂载前调用beforeMount")
			},
			//实例被挂载后调用 页面真正的加载完成之后调用
			mounted(){
				console.log("页面加载完成mounted")
			},
			//数据更新时调用，发生在虚拟 DOM 打补丁之前
			beforeUpdate(){
				console.log("数据更新时调用beforeUpdate")
			},
			//由于数据更改之后调用
			updated(){
				console.log("数据修改之后调用updated")
			},
			//实例销毁之前调用。在这一步，实例仍然完全可用。
			beforeDestroy(){
				console.log("VUE对象销毁之前调用beforeDestroy")
			},
			//实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
			destroyed(){
				console.log("实例销毁后调用destroyed")
			}
			
		})
	</script>
</body>

3.9 VUE中数组操作

数组用法案例说明
1).push() 在数组末尾追加数据.
2).pop() 删除数组最后一个元素
3).shift() 删除数组第一个元素
4.unshift() 在数据开头追加数据.
5.splice() 在指定的位置替换数据.
6.sort() 对数据进行排序 按照编码进行排序 由小到大
7.reverse() 数组反转.

数组基本案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组案例</title>
	</head>
	<body>
		<div id="app">
			<span v-for="item in array" v-text="item"></span><br>
			
			数据: <input type="text" v-model="data"/> 
			<button @click="push">追加</button>
			<button @click="pop">移除最后一个</button>
			<button @click="shift">删除第一个元素</button>
			<button @click="unshift">在开头追加元素</button>
			<button @click="splice">替换元素</button>
			<button @click="sort">排序</button>
			<button @click="reverse">反转</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					array: [5,7,4,1],
					data: ''
				},
				methods: {
					push(){
						this.array.push(this.data)
					},
					pop(){
						//移除最后一个数据
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					unshift(){
						this.array.unshift(this.data)
					},
					splice(){
						//关于参数说明 参数1:操作数据起始位置 index
						//			  参数2:操作数据的个数
						//			  参数3:要替换的值
						//删除元素     删除第一个元素的后2位
						//this.array.splice(1,2,'')
						//替换元素     替换前2个元素(将元素当做整体进行替换)
						//替换后的元素可以有多个
						this.array.splice(0,2,this.data)
					},
					sort(){
						this.array.sort()
					},
					reverse(){
						this.array.reverse()
					},
					
				}
				
			})
		</script>
	</body>
</html>

4.0 VUE中组件化思想

组件化介绍
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树.
使用组件可以将一些重复的内容进行封装.各个组件单独维护.体现了分治的思想
在这里插入图片描述

4.1 全局组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件</title>
	</head>
	<body>
		<div id="app">
			<!-- 3.调用组件 -->
			<hello></hello>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			//1.定义全局组件  参数1: 定义组件名称 暂时不要使用驼峰规则
			//				 参数2: 定义组件对象
			Vue.component('hello',{
				//1.组件数据.
				data(){
					return {
						msg: 'hello 组件'
					}
				},
				//2.组件结构 html数据
				template: '<h1>{{msg}}</h1>'
			})
			
			/* 注意事项: 组件的使用必须有Vue对象的渲染 */
			const app = new Vue({
				el: "#app"
			})
			
		</script>
	</body>
</html>

4.2 组件驼峰规则命名

在这里插入图片描述

4.3 组件模板标签的使用

1). `号的作用

在这里插入图片描述
2).组件template的写法

在这里插入图片描述

在这里插入图片描述

4.4 局部组件定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件</title>
	</head>
	<body>
		<div id="app">
			<hello1></hello1>
			<hello1></hello1>
		</div>
		
		<template id="hello1Tem">
			<div>
				<h3>{{msg}}</h3>
			</div>
		</template>
		
		<script src="../js/vue.js"></script>
		<script>
			
			//1.定义组件对象
			const hello1 = {
				data(){
					return {
						msg: 'hello1局部组件'
					}
				},
				template: '#hello1Tem'
			}
			
			/* 局部组件的写法 */
			const app1 = new Vue({
				el: "#app",
				//vue对象中的组件  组件名称/组件对象
				components: {
					//hello1  : hello1
					//js简化写法 如果key与value值相同,则可以简化.
					hello1
				}
			})
			
		</script>
	</body>
</html>

4.5 Axios

Axios介绍

Axios 是一个基于 promise(内部封装了ajax) 的 HTTP 库，可以用在浏览器和 node.js 中。
作用: 在内部 简化异步调用

img

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nisEyFfh-1640436594032)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210519185400242.png)]

4.6 Axios入门增删改

实现用户列表展现

1.1 编辑AxiosUserController

在这里插入图片描述

1.2 获取用户列表数据

1.利用mouted方法 初始化数据
2.利用axios方式获取数据
在这里插入图片描述

1.3 循环遍历数据

在这里插入图片描述

1.4 修改用户实现数据回显

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>用户列表数据</title>
</head>
<body>
	<div id="app">
		用户编号: <input type="text" disabled v-model="user.id"  />
		用户姓名: <input type="text" v-model="user.name"/><br>
		用户年龄: <input type="text" v-model="user.age"/>
		用户性别: <input type="text" v-model="user.sex"/>
		<button>更新</button>
		<hr />
		<!-- 用户展现的表格 -->
		<table id="userTable" border="1px" align="center" width="800px">
			<tr align="center">
				<td colspan="5"><h3>用户列表</h3></td>
			</tr>
			<tr align="center">
				<td>ID</td>
				<td>名称</td>
				<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>
				<td v-text="user.sex"></td>
				<td>
					<button @click="updateBtn(user)">修改</button>
					<button>删除</button>
				</td>
			</tr>
		</table>
	</div>
	<!-- 1.引入页面JS -->
	<script src="../js/vue.js"></script>
	<script src="../js/axios.js"></script>
	
	<!-- 2.编辑自己的JS -->
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				//1.定义用户列表数据
				userList: [],
				//2.定义用户属性
				user: {
					id: '',
					name: '',
					age: '',
					sex: ''
				}
			},
			methods: {
				async getUserList(){
					const {data: result} = await axios.get('http://localhost:8090/axiosUser/findAll')
					this.userList = result
					//console.log(this.userList)
				},
				//更新按钮操作
				updateBtn(user){
					//将用户传递的user对象赋值给data中的属性user
					this.user = user
				}
			},
			mounted(){
				//当页面渲染成功之后调用
				//调用查询用户的方法
				this.getUserList()
			}
		})
		
	</script>
	
</body>
</html>

实现用户修改

1.1 编辑页面JS

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>用户列表数据</title>
</head>
<body>
	<div id="app">
		用户编号: <input type="text" disabled v-model="user.id"  />
		用户姓名: <input type="text" v-model="user.name"/><br>
		用户年龄: <input type="text" v-model="user.age"/>
		用户性别: <input type="text" v-model="user.sex"/>
		<button @click="updateUser">更新</button>
		<hr />
		<!-- 用户展现的表格 -->
		<table id="userTable" border="1px" align="center" width="800px">
			<tr align="center">
				<td colspan="5"><h3>用户列表</h3></td>
			</tr>
			<tr align="center">
				<td>ID</td>
				<td>名称</td>
				<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>
				<td v-text="user.sex"></td>
				<td>
					<button @click="updateBtn(user)">修改</button>
					<button>删除</button>
				</td>
			</tr>
		</table>
	</div>
	<!-- 1.引入页面JS -->
	<script src="../js/vue.js"></script>
	<script src="../js/axios.js"></script>
	
	<!-- 2.编辑自己的JS -->
	<script>
		const app = new Vue({
			el: "#app",
			data: {
				//1.定义用户列表数据
				userList: [],
				//2.定义用户属性
				user: {
					id: '',
					name: '',
					age: '',
					sex: ''
				}
			},
			methods: {
				async getUserList(){
					const {data: result} = await axios.get('http://localhost:8090/axiosUser/findAll')
					this.userList = result
					//console.log(this.userList)
				},
				//更新按钮操作
				updateBtn(user){
					//将用户传递的user对象赋值给data中的属性user
					this.user = user
				},
				//更新用户信息
				async updateUser(){
					//请求类型 PUT/POST   GET/DELETE
					//http://localhost:8090/axiosUser/updateUser
					//更新操作可以没有返回值
					await axios.put('http://localhost:8090/axiosUser/updateUser',this.user)
				}
			},
			mounted(){
				//当页面渲染成功之后调用
				//调用查询用户的方法
				this.getUserList()
			}
		})
		
	</script>
	
</body>
</html>

1.2 编辑AxiosUserController

根据用户更新操作的ajax ,接收用户参数

在这里插入图片描述

1.3 编辑AxiosUserService

根据用户ID实现数据入库

在这里插入图片描述

实现用户数据删除

1.1 编辑页面JS

1).为删除按钮添加事件

在这里插入图片描述

2).编辑点击函数
在这里插入图片描述

1.2 编辑AxiosUserController

在这里插入图片描述

4.7 跨域

2.1 同源策略
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
浏览器出于安全性的考虑,要求所有的请求都必须满足同源策略!!!

要素: 请求协议://域名:端口 必须相同!!!

2.2 跨域问题
Ajax的请求违反同源策略,ajax的请求就称之为跨域访问

CORS
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS的实质就是在服务器端添加允许访问的响应头 CORS是服务端的一种技术.

在这里插入图片描述

2.3 响应头信息

*号代表通配符.允许所有的请求访问.

在这里插入图片描述

*号可以换成特定的网址.则只允许该网址访问
在这里插入图片描述

VUE路由机制
1.1 VUE Router介绍
Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

1.2 前端路由
1.2.1 后端路由介绍

在这里插入图片描述

4.8 前端路由

说明:前端路由在内部配置了路由表,之后用户发起请求之后,根据路由表的内容直接跳转html页面(组件)
在这里插入图片描述

4.9 路由入门案例

1.1 Router使用步骤

  1. 引入路由的js类库.
  2. 添加路由链接
  3. 添加路由的填充位
  4. 定义路由组件
  5. 配置路由规则,创建路由实例
  6. 实现路由的挂载vue

1.2 Router 入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由规则</title>
	</head>
	<body>
		<div id="app">
			<!-- 2.添加路由链接
				router-link: vue会将标签解析为a标签
				to: vue会解析为href属性
			 -->
			<router-link to="/user">用户</router-link>
			<router-link to="/dept">部门</router-link>
			
			<!-- 3.定义路由占位符 当用户点击路由时,在该位置展现页面
				理解为新的div.
			  -->
			<router-view></router-view>  
			
		</div>
		
		<!-- 1.引入js -->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		<script>
			
			/* 4.定义组件变量 */
			const user = {
				template: '<h1>我是user组件</>'
			}
			
			const dept = {
				template: '<h1>我是部门组件</>'
			}
			
			/* 5.配置路由规则  */
			const router = new VueRouter({
				//定义规则
				routes: [
					{ path:'/user', component:user},
					{ path:'/dept', component:dept}
				]
			})
			
			
			//6.将路由组件挂载到Vue中
			const app = new Vue({
				el: "#app",
				router
			})
		</script>
	</body>
</html>

1.3 Router 重定向

说明: 路由的组件提供了重定向的功能,可以让用户默认跳转指定的组件
需求: 默认的跳转下 跳转到/user 组件中.

在这里插入图片描述

1.4 Router 嵌套

1.4.1 需求说明

链接: 商场,动物园
嵌套: 商场 shoe,手机. 动物园: 鸡 鸭

1.4.2 嵌套实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由规则</title>
	</head>
	<body>
		<div id="app">
			<router-link to="/shopping">商场</router-link>
			<router-link to="/zoo">动物园</router-link>
			
			<router-view></router-view>
		</div>
		
		<!-- 定义商场组件 -->
		<template id="shoppingTem">
			<div>
				<h1>我是商场组件</h1>
				
				<router-link to="/shopping/shoe">鞋店</router-link>
				<router-link to="/shopping/phone">手机店</router-link>
				<router-view></router-view>
			</div>
		</template>
			
		
		<!-- 1.引入js 注意引入顺序 -->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		
		<script>
			const shopping = {
				template : "#shoppingTem"
			}
			
			const zoo = {
				template : "<h1>我是动物园组件</h1>"
			}
			
			const shoe = {
				template : "<h1>我是鞋店</h1>"
			}
			
			const phone = {
				template : "<h1>我是手机店</h1>"
			}
			
			//如果需要嵌套 则使用关键字children
			const router = new VueRouter({
				routes: [
					{path:'/shopping', component: shopping,
					children: [
						{path:'/shopping/shoe',component: shoe},
						{path:'/shopping/phone',component: phone}
					]},
					
					{path:'/zoo', component: zoo}
				]
			})
			
			const app = new Vue({
				el: "#app",
				router
			})
			
		</script>
	</body>
</html>

5.0 VUE前端案例

1.1.在根目录下添加vue.config.js文件

module.exports = {
    lintOnSave:false, //关闭代码格式化校验工具
    devServer:{
        port: 81//修改启动端口
    }
}

1.2编写main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import axios from '@/utils/axiosutils.js'
import store from '@/vuex'

Vue.use(ElementUI);
/* 导入axios包 */
import axios from 'axios'
/* 设定axios的请求根目录 */
axios.defaults.baseURL = 'http://localhost:8091/'
/* 向vue对象中添加全局对象 以后发送ajax请求使用$http对象 */
Vue.prototype.$http = axios

Vue.config.productionTip = false

new Vue({
	router,
  render: h => h(App),
}).$mount('#app')

1.3编写App.vue

<template>
  <div id="app">
  <!-- 添加路由占位符-->
   <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
<style>
*{
	padding: 0;
	margin: 0; 
}
</style>

1.4 在src下创建router文件夹编写index.js

import Vue from 'vue'
import Router from 'vue-router'

import index from '../components/index.vue'
import user from '../components/user.vue'
Vue.use(Router)

export default new Router({
	mode: 'history',
	routes: [
    {path: '/', redirect: '/index'},
    {path: '/index', component: index,redirect:'/user',children:[
    {path: '/user', component: user},
  ]}		
]

1.5 在components目录下编写menu.vue

<template>
 <div>
    <el-menu router >
        <el-submenu index="1">
            <template slot="title">
                <span>管理</span>
            </template>
            <el-menu-item-group>
                <el-menu-item index="/user"> <i class="el-icon-location"></i>用户管理</el-menu-item>
                <!-- <el-menu-item index="/menu"> <i class="el-icon-location"></i>菜单管理</el-menu-item> -->
            </el-menu-item-group>
        </el-submenu>
    </el-menu>
 </div>
</template>

<script>
    export default {
        name: 'Menu'
    }
</script>

<style>
</style>

1.6 在components目录下编写index.vue

<template>
  <el-container class="wrap">
 
	 <el-header class="header">
		<el-row>
			<el-col :span="20">信息系统</el-col>
			<el-col :span="4">
				<el-dropdown>
					<span class="el-dropdown-link">
						keafmd<i class="el-icon-arrow-down el-icon--right"></i>
					</span>
				<el-dropdown-menu slot="dropdown">
				<el-dropdown-item command="Personal">个人设置</el-dropdown-item>
				<el-dropdown-item command="Logout">退出</el-dropdown-item>
				</el-dropdown-menu>
				</el-dropdown>
				</el-col>
			</el-row>
		</el-header>
		
		<el-container>
			<el-aside width="200px" class="aside">
				<Menu></Menu>
			</el-aside>
			
			<el-main>
				<!-- <User></User> -->
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
	import Menu from '@/components/menu'
	export default {
		name: 'Index',
		components: {
			Menu
		},
		data() {
			return {}
		},
		methods: {

		},
		created() {}
	}
</script>

<style scoped>
	.wrap {
		height: 100vh;
	}

	.header {
		border-bottom: 1px solid aqua;
	}

	.aside {
		border-right: 1px solid aqua;
	}
</style>

1.7 在components目录下编写 user.vue

<template>
  <div>
  <el-table :data="tableData.filter(data => !search ||     data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
	<el-table-column label="userName" prop="userName"></el-table-column>
	<el-table-column label="Password" prop="password"></el-table-column>
	<el-table-column align="right">
		<template slot="header" slot-scope="scope">
		<el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
		</template>
		<template slot-scope="scope">
		<el-button size="mini" @click="handleEdit(scope.$index,  scope.row)">Edit</el-button>
		<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete
		</el-button>
		</template>
	 </el-table-column>
	</el-table>
	</div>
</template>

<script>
	export default {
		name: 'User',
		components: {

		},
		data() {
			return {
				tableData: [],
				search: ''
			}
		},
		methods: {
			getData() {
				axios.get('/user/findAll')
					.then((res) => {
						this.tableData = res.data
					})
					.catch(function(error) {
						console.log(error);
					});

			},
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			}
		},
		created() {
			this.getData();
		}
	}
</script>

<style>
</style>

ta() {
return {}
},
methods: {

	},
	created() {}
}


1.7 在components目录下编写 user.vue
发毛的春天
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue --- 使用vue-cli搭建SPA项目
ty0714的博客
05-04 245
目标：使用vue-cli来搭建vue项目 0. 前提：搭建好NodeJS环境 node -v npm -v 测试：（有版本就说明搭建成功，注：用管理员身份打开cmd） 1. 什么是vue-cli? vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下： vue init webpack xxx 注1：xxx 为自己创建项目的名称 注2：必须先安装v...
如何选择 Should we run ‘npm install‘ for you after the project has been created
滕青山博客
02-25 4660
Should we run 'npm install' for you after the project has been created?(译：项目创建后是否要为你运行“npm install”?这里选择包管理工具)　　选项有三个　　yes,use npm(使用npm)　　yes,use yarn(使用yarn)　　no,I will handle that myself(自己配置安装包) 选择不运行，因为已使用 cnpm，之后手动安装。 ...
搭建一个vue项目完整步骤及详细讲解
m0_66722601的博客
09-14 4887
搭建一个vue项目完整步骤及详细讲解
创建【Vue项目】方法汇总
最新发布
Web人
03-18 449
一文带你了解如何创建Vue项目！！！
新建vue-cli项目遇到的坑
qq_38024443的博客
10-11 583
cd Vue_ElementUI文件夹后，运行vue init webpack my-project 之后会出现如下的提示，主要是一些配置 注意最后一个Should we run `npm install` for you after the project has been created? (recommended) npm 应该是询问你接下来的依赖是否通过npm安装 如果直接回车，那么接下来的安装会很慢 所以直接Ctrl+C取消 然后cd my-project 输入cpnm install
vueCLI脚手架的介绍和安装
weixin_44020809的博客
07-25 447
什么是Vue CLI 如果你只是简单写几个Vue的Demo程序，那么你不需要Vue CLI 如果你在开发大型项目，那么你需要，并且必然需要使用Vue CLI 使用Vue.js开发大型应用时，我们需要考虑代码目录结构，项目结构和部署，热加载，代码单元测试等事情 如果每个项目都要手动完成这些工作，那无疑效率比较低，所以通常我们会使用一些脚手架工具来帮助完成这些事情 CLI是什么？ CLI是Command-Line Interface，翻译为命令行界面，但是俗称脚手架 Vue CLI是一个官方发布Vue.js项目
安装vue-cli脚手架提示Error: spawn npm ENOENT的解决方式
jtrllpqq的博客
12-13 1万+
按照官方的文档安装vue-cli过程中出现了莫名其妙的报错： 查阅了很多文档都无法解决，于是自己后面慢慢尝试了一下，认真一步一步观察安装的提示，直到看到最后一句提示：  Should we run `npm install` for you after the project has been created? (recommended) npm 于是这次我选择了no，自己手动insta
使用Vue CLI创建typescript项目的方法
10-16
主要介绍了使用Vue CLI创建typescript项目的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用vue2.0创建的项目的步骤方法
10-17
主要介绍了使用vue2.0创建的项目的步骤方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
创建Vue项目以及引入Iview的方法示例
10-17
主要介绍了创建Vue项目以及引入Iview的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用命令行工具npm新创建一个vue项目的方法
10-18
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。下面小编给大家分享使用命令行工具npm新创建一个vue项目的方法，需要的朋友参考下吧
vue项目搭建和使用
qq_43026811的博客
10-26 233
VUE 简介 1. vue是javaScript的渐进式框架，Vue 的核心库只关注视图层，易于上手，还便于与第三方库 （如：vue-router，vue-resource，vuex）或既有项目整合。 2. vue采用MVVM 模式，Vue.js 就是 MVVM 中的 ViewModel 层的实现者 3. jQuery频繁操作dom对象，太影响性能，使用率下降 4. vue结合了Angular的模...
Vue学习笔记07-----第一个vue-cli项目
answero的博客
08-03 284
【狂神说Java】Vue视频 1、什么是vue-cli   vue-cli官方提供的一个脚手架，用于快速生成一个vue的项目模板；   预先定义好的目录结构及基础代码，就好比咱们在创建Maven项目时可以选择创建一个骨架项目，这个估计项目就是脚手架，我们的开发更加的快速；   项目的功能 统一的目录结构 本地调试 热部署 单元测试 集成打包上线 2、需要的环境 Node.js：http://nodejs.cn/download/   安装就是无脑的下一步就好，安装在自己的环境目录下 Git：http
2分钟喝茶的时间，我知道了所有前端技术
m0_55613022的博客
02-24 276
1、HTML 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。你可以使用 HTML 来建立自己的 Web 站点，HTML 运行在浏览器上，由浏览器来解析。学起来也是非常简单。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSDN</title> </head> <bod
SpringBoot项目右上角选择ProjectNameApplication的配置
二哈喇子！
09-17 841
springboot项目右上角的项目名称应用报错，那该怎么配置？
2.创建Vue项目&目录介绍&组件的使用
清风
05-10 1598
1.单文件组件 官网介绍: https://cn.vuejs.org/v2/guide/single-file-components.html#ad 在Vue项目中一个文件就是组件, 以xx.vue命名. xx.vue最后通过webpack或Browserify等工具 编译成前端的代码. 2.Vue项目依赖环境 2.1 Node.js环境 在创建Vue项目 与.vue编译的时候需要使用Node.js环境. JavaScript是脚本语言, Node.js 是一个基于 Chrome V8 引擎的 Ja
Vue(一)：创建Vue项目以及理解Vue目录
偉ing的博客
05-04 433
Vue(一)：创建Vue项目以及理解Vue目录 ​ 本篇文章默认你已经配置好node.js环境。我使用的开发工具为vscode，所以的命令都是在vscode的终端里面运行。 ​ 我也是第一次接触Vue，所以写这篇博客来记录一下，之后忘记了还可以翻阅一下，做个记录。由于是第一次学习这个，我会把我所遇到的问题的解决方法都上传到博客，方便查阅。有需要的朋友可以看我的博客Vue系列。 ​ 在vscode终...
使用npm安装配置vue
qq_39110534的博客
10-17 212
npm安装很慢（国外服务器），所以一般推荐使用npm淘宝镜像cnpm，先安装下cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org 安装好cnpm后，以后使用npm的地方就可以使用cnpm替代了。   3.0.5+ 安装Vue 脚手架 @vue/cli sudo npm ins...
如何创建一个vue项目（详细步骤）
热门推荐
Monsters___的博客
08-27 10万+
如何创建一个 vue 项目 详细步骤 (vue-cli2 / vue-cli3) (webpack / vite)
创建vue项目的多种方法
12-20
这种方法使用Vue CLI工具来创建和管理Vue项目，它提供了丰富的选项和插件，可以快速搭建一个完整的Vue项目。 2. 使用Vue UI ```shell # 全局安装Vue CLI npm install -g @vue/cli # 启动Vue UI vue ui ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值