00100

最新推荐文章于 2024-04-22 05:11:44 发布

何日才能成为大神

最新推荐文章于 2024-04-22 05:11:44 发布

阅读量282

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_46637942/article/details/118532710

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

20210621_vue的基本语法
demo1_js操作页面元素.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.title{
				color: red;
				font-size: 30px;
			}

		</style>
		<!-- <script type="text/javascript" src="js/main.js">
			
		</script> -->
		<script>
			window.onload = function(){
				//1、 js定位页面元素
				// 通过id获取元素
				var b = document.getElementById('box')
				console.log(b)
				// 通过class属性定位元素
				var b1 = document.getElementsByClassName('box1') 
				console.log(b1)
				// 通过css选择器去定位元素
				var b3 = document.querySelector('.box1 a')
				
				// 2、js修改元素的文本
				// // innerText
				// document.querySelector('#box').innerText = 'python666'
				// document.querySelector('#box').innerText = '<h1>python123</h1>'
						
				// innerHTML
				document.querySelector('#box').innerHTML = '<h1>python123</h1>'
				
				// 3、js修改元素的属性
				 document.querySelector('.box1 a').href = 'http://www.baidu.com'
				
				// 4、js修改元素的class属性	
				 document.querySelector('.box1 a').className = 'title'
				
				// 5、js修改style属性的值 
				document.querySelector('#box').style.color = 'yellow'
				// 注意点：font-size 这种多个单词组成的样式，需要写成小驼峰命令的风格-->fontSize
				document.querySelector('#box').style.fontSize = '40px'
				
				
				// 6、给元素绑定事件
				document.querySelector('#btn').onclick = function(){
					document.querySelector('#box').style.color = 'blue'
					alert('python666')
				}
				
				// 7、window.onload事件 会等到页面文档加载关闭之后才会执行。

			}
			
			
			
		</script>
		
		
	</head>
	<body>
		
		
		
		<div id="box" class="box1" style="color: aqua;"></div>
		<div class="box1">
			<a href="">百度</a>
		
		</div>
		
		<button id="btn">按钮</button>
		
		
		
		
		
		
		
		
	</body>
</html>

demo2_vue的入门使用.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 整个页面的所有的内容都放到一个根节点里面 -->
			<!-- <ul>
				<li id='n' >姓名：</li>
				<li id='a'>年龄：</li>
				<li id='s'>性别：</li>
			</ul> -->
			<h1>{{desc}}</h1>
			<ul>
				<li>姓名：{{info.name}}</li>
				<li>年龄：{{info.age}}</li>
				<li>性别：{{info.sex}}</li>
			</ul>
		</div>



		<script type="text/javascript">
			// 1、使用原生的js 往页面中填充数据
			// data = {
			// 	name: "木森",
			// 	age: 18,
			// 	sex: "男"
			// }
			// //  
			// document.getElementById('n').innerHTML = document.getElementById('n').innerText+data.name
			// document.getElementById('a').innerHTML = document.getElementById('a').innerText+data.age
			// document.getElementById('s').innerHTML = document.getElementById('s').innerText+data.sex

			//2、使用vue往页面中填充数据
			// 初始化一个vue对象
			var vm = new Vue({
				// el 用来指定挂载对象
				el: "#app",
				// data 用来保存数据的
				data: {
					// 个人信息的数据
					info: {
						name: "木森",
						age: 19,
						sex: "男"
					},
					desc:"这个是标题"
				}
			})
		</script>



	</body>
</html>

demo3_vue数据填充的方式.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>

		<div id="app">
			<p>{{msg}}</p>
			<p v-text="msg"></p>
			<p v-html="desc"></p>
			<p v-pre>显示的内容：{{msg1}}</p>

			<a v-bind:href="url">点击跳转到我的主页</a>
			<a :href="url2">淘宝</a>
		</div>


		<script type="text/javascript">
			/*
			一、html的文本填充
			1、插值表达式:{{ 值}}
			2、v-text指令：往元素中填充文本
			3、v-html指令：往元素中填充html
			4、v-pre指定： 显示原始的数据格式
			
			二、元素的属性绑定：v-bind
			v-bind 可以简写 :
			
			
			
			*/

			var vm = new Vue({
				el: "#app",
				data: {
					msg: "hello 木森",
					age: 18,
					desc: '<h1>musen<\h1>',
					url: "http://www.baidu.com",
					url2: "http://www.taobao.com"
				},





			})
		</script>



	</body>
</html>

demo4_vue事件绑定和数据双向绑定 .html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>

		<div id="app">
			<!-- 数据单向绑定：把data中的数据绑定到页面的元素中 -->
			<!-- 		数值A: <input type="text" name="a" :value="a">
			<br>
			数值B: <input type="text" name="b" :value="b"> -->

			<!-- 数据双向绑定 -->
			数值A: <input type="text" name="a" v-model.number="a">
			<br>
			数值B: <input type="text" name="b" v-model.number="b">
			<br>
			<br>
			<!-- <button type="button" v-on:click="countNumber()">计算</button> -->
			<button type="button" @click="countNumber()">计算</button>
			<h5>结果：{{c}}</h5>
		</div>


		<script type="text/javascript">
			/*
			1、事件绑定：v-on
				v-on可以简写为：@
			
			
			2、数据双向绑定：v-model (绑定的是表单元素的value)
				双向绑定，用户输入的数据默认或当成字符串处理
				
			3、双向绑定时：表单输入内容数据的转换（表单修饰符）
				.lazy：input数据输入完之后出发
				.number:自动把输入的数字转换为数值类型
				.trim：去除首尾的空白字符
				
			*/

			var vm = new Vue({
				// 指定vue挂载的根节点
				el: "#app",
				// 页面中的数据
				data: {
					a: 11,
					b: 22,
					c: null
				},
				// 页面操作要使用的函数
				methods: {
					// shu计算的方法
					countNumber: function() {
						this.c = this.a + this.b
					}
				}





			})
		</script>



	</body>
</html>

demo5_vue中的分支语句.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">

			<div v-if="case_.result=='success'" style="color: chartreuse;">{{case_}}</div>
			<div v-else-if="case_.result=='fail'" style="color: #994444">{{case_}}</div>
			<div v-else style="color: red;">{{case_}}</div>
				
				
			<div v-show="false" >9999999999999999</div>
				
		</div>


		<script>
			/*
			v-if  
			v-else-if
			v-else
			v-show:控制元素的dispaly属性：
			
			*/ 
			
			
			var vm = new Vue({
				el: '#app',
				data: {
					case_: {
						case_id: 1,
						title: "用例001",
						result: "error",
						show:true
					}
				}
			})
		</script>




	</body>
</html>

demo6_vue中的遍历语句.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<table border="" cellspacing="" cellpadding="">
				<tr>
					<th>ID</th>
					<th>用例名</th>
					<th>结果</th>
				</tr>

				<tr v-for='item in cases'>
					<td>{{item.case_id}}</td>
					<td>{{item.title}}</td>

					<td v-if="item.result=='success'" style="color: green;">{{item.result}}</td>
					<td v-else-if="item.result=='fail'" style="color: #5e0000;">{{item.result}}</td>
					<td v-else style="color: red;">{{item.result}}</td>
				</tr>
				<!--遍历数组 -->
				<div v-for="(item,index) in cases"> {{item}}-----------{{index}}</div>

				<!-- 遍历对象 -->
				<div v-for="(value,key) in stus"> {{key}}------{{value}}-----</div>
			</table>
		</div>


		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					cases: [{
							case_id: 1,
							title: "用例001",
							result: "success"
						},
						{
							case_id: 2,
							title: "用例002",
							result: "error"
						},
						{
							case_id: 3,
							title: "用例003",
							result: "fail"
						}, {
							case_id: 4,
							title: "用例004",
							result: "success"
						}, {
							case_id: 5,
							title: "用例004",
							result: "success"
						},
					],
					stus: {
						case_id: 5,
						title: "用例004",
						result: "success"
					}
				}
			})
		</script>
	</body>






</html>

20210625_vue的高级特性
demo1_事件的参数传递.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			<table border="" cellspacing="" cellpadding="">
				<tr>
					<th>ID</th>
					<th>接口名</th>
					<th>测试人员</th>
					<th>项目名</th>
					<th>项目ID</th>
					<th>描述信息</th>
					<th>创建时间</th>
					<th>用例数</th>
					<th>操作</th>
				</tr>
				<tr :key='item.id' v-for="item in lists">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.tester}}</td>
					<td>{{item.project}}</td>
					<td>{{item.project_id}}</td>
					<td>{{item.desc}}</td>
					<td>{{item.create_time}}</td>
					<td>{{item.testcases}}</td>
					<td><button @click="deleteHandle(item.id)">删除</button></td>
				</tr>
			</table>

		</div>
		<script type="text/javascript">
			/*
			1、事件的参数传递：绑定事件的时候，如果要给处理事件的方法传递参数，
						     那么在定义方法的时候，就要先定义好参数，绑定的时候传入参数即可
				
				
			
			*/


			var vue = new Vue({
				el: '#app',
				data: {
					lists: [{
							"id": 1,
							"name": "登录接口_自动化测试平台项目",
							"tester": "可优",
							"project": "自动化测试平台项目",
							"project_id": 1,
							"desc": "登录接口",
							"create_time": "2019-11-06 14:50:30",
							"testcases": 9,
						},
						{
							"id": 2,
							"name": "注册接口_自动化测试平台项目",
							"tester": "可可",
							"project": "自动化测试平台项目",
							"project_id": 1,
							"desc": "自动化测试平台项目, 注册接口",
							"create_time": "2019-11-06 14:51:00",
							"testcases": 0,
						},
						{
							"id": 3,
							"name": "创建项目接口_自动化测试平台项目",
							"tester": "可优",
							"project": "自动化测试平台项目",
							"project_id": 1,
							"desc": "这是自动化测试平台创建项目接口",
							"create_time": "2019-11-06 14:51:45",
							"testcases": 1,
						},
						{
							"id": 4,
							"name": "注册接口_前程贷P2P金融项目",
							"tester": "小可可",
							"project": "前程贷P2P金融项目",
							"project_id": 2,
							"desc": "",
							"create_time": "2019-11-06 14:52:22",
							"testcases": 0,
						},
						{
							"id": 5,
							"name": "登录接口_前程贷P2P金融项目",
							"tester": "柠檬小姐姐",
							"project": "前程贷P2P金融项目",
							"project_id": 2,
							"desc": "",
							"create_time": "2019-11-06 14:52:40",
							"testcases": 0,
						},
						{
							"id": 6,
							"name": "查看项目列表接口_前程贷P2P金融项目",
							"tester": "柠檬小姐姐",
							"project": "前程贷P2P金融项目",
							"project_id": 2,
							"desc": "",
							"create_time": "2019-11-06 17:22:50",
							"testcases": 1,
						}
					]
				},
				methods: {
					deleteHandle: function(id) {
						console.log('点击了删除按钮')
						// 方式一：通过数组过滤的方法，对原数据进行过滤
						const new_lists = this.lists.filter(function(value,index){
							return value.id !=id
						})
						this.lists = new_lists

						// // 方式二、先把数据的索引值找出来，根据索引值，删除原数组中的数据
						// const index_ = this.lists.findIndex(function(item) {
						// 	return item.id === id
						// })
						// // console.log('索引值为',index_)
						// this.lists.splice(index_,1)


						// 数组中弹窗最后一条数据
						// this.lists.pop()
					}
				}
			})
		</script>


	</body>
</html>

demo2_事件的修饰符.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div @click="work" style="width: 100px;height: 70px; background: cyan;">
				<button type="button" @click.stop="work2()">按钮1</button>
			</div>
			
			<a href="https://www.baidu.com" @click.prevent='work3()'>百度</a>
		</div>
		<script type="text/javascript">
			/*
			.stop:阻止冒泡（事件冒泡:点击子元素，事件会一级一级冒泡到父元素）
			.prevnet :阻止的默认行为事件行为
			
			
			*/ 
			
			
			var vue = new Vue({
				el: '#app',
				data: {

				},
				methods: {
					work: function() {
						console.log('调用了work方法')
					},
					work2: function() {
						console.log('---work2----')
					},
					work3: function() {
						console.log('---work3----')
					}
				}
			})
		</script>
	</body>
</html>

demo3_按键修饰符.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			<form action="">
				账号：<input type="text" v-model="loginForm.user"> <br>
				密码：<input type="password" v-model="loginForm.pwd" @keyup.enter="login_btn()" 
				@keyup.delete="delete_data()" ><br>
				<button type="button" @click="login_btn()">点击登录</button>
			</form>
		</div>
		<script type="text/javascript">
			/*
			键盘事件：keyUp
			按键修饰符：通过按键修饰符，可以实现按下键盘指定的键，来触发事件。
				enter:回车键，
				delete:删除键
			
			*/ 
			var vue = new Vue({
				el: '#app',
				data: {
					
					loginForm:{
						user:'',
						pwd:''
					}
					
				},
				methods:{
					login_btn(){
						console.log('用户登录的数据为：',this.loginForm)
					},
					delete_data(){
						this.loginForm.pwd=''
					}
				}
			})
		</script>


	</body>
</html>

demo4_计算属性和侦听器.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>


		<div id="app">
			<div>
				<h3>订单</h3>
				<h5>商品名：{{name}}</h5>
				<h5>单价：{{price}}</h5>
				<p>库存：{{stock}}</p>
				<h5>数量：
					<button type="button" @click="sub">-</button>
					<span>{{num}}</span>
					<button type="button" @click="add">+</button>
				</h5>
				<hr>
				<h5>总价{{priceSum}}</h5>
				<hr>
				<hr>
				<form action="">
					账号：<input type="text" v-model="loginForm.user"> <br>
					密码：<input type="password" v-model="loginForm.pwd" @keyup.enter="login_btn()"
						@keyup.delete="delete_data()"><br>
					<button type="button" @click="login_btn()">点击登录</button>
				</form>


			</div>
		</div>


		<script>
			var vm = new Vue({
				// 指定挂载的根节点
				el: '#app',
				// 定义vue实例中的数据（属性）
				data: {
					name: '小柠檬',
					num: 10,
					price: 99,
					stock: 10,
					loginForm: {
						user: '',
						pwd: ''
					}
				},
				// 定义vue实例中的方法
				methods: {
					// 下面这个定义方法的形式，实际上就是省略了:function
					add() {
						this.num += 1
					},
					sub: function() {
						this.num -= 1
					},
					// 上面两种方法定义的形式没有任何区别
				},
				// 定义计算属性
				computed: {
					priceSum: function() {
						return this.num * this.price
					}
				},
				// 定义侦听器:可以用例侦听属性的值是否发生变化
				watch: {
					// 1、侦听的数据直接定义在data中
					num: function(value, oldVlue) {
						// console.log(value,oldVlue)
						if (value < 0) {
							// alert('数量不能少于0')
							this.num = 0
						} else if (value > this.stock) {
							this.num = this.stock
						}
					},

					//2、侦听的数据直接定义在data中，外面有多层嵌套
					// 2.1、通过层级指定侦听的数据
					// 'loginForm.user':function(value,oldVlue){
					// 	console.log(value,oldVlue)
					// }
					// 2.3、直接侦听外层数据,多层嵌套不过层级有多深都能侦听到
					loginForm:{
						deep:true,
						handler:function(value,oldVlue){
							console.log(value,oldVlue)
						}
					}

				}

			})
		</script>

	</body>
</html>

demo5_过滤器.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>


		<div id="app">
			<div>
				<h3>订单</h3>
				<h5>商品名：{{name}}</h5>
				<h5>单价：{{price | dubboFloat}}</h5>
				<p>库存：{{stock | musen}}</p>
				<h5>数量：
					<button type="button" @click="sub">-</button>
					<span>{{num}}</span>
					<button type="button" @click="add">+</button>
				</h5>
				<hr>
				<h5>总价{{priceSum | dubboFloat}}</h5>
				<hr>
				<hr>
				<form action="">
					账号：<input type="text" v-model="loginForm.user"> <br>
					密码：<input type="password" v-model="loginForm.pwd" @keyup.enter="login_btn()"
						@keyup.delete="delete_data()"><br>
					<button type="button" @click="login_btn()">点击登录</button>
				</form>


			</div>
		</div>


		<script>
			var vm = new Vue({
				// 指定挂载的根节点
				el: '#app',
				// 定义vue实例中的数据（属性）
				data: {
					name: '小柠檬',
					num: 10,
					price: 99,
					stock: 10,
					loginForm: {
						user: '',
						pwd: ''
					}
				},
				// 定义vue实例中的方法
				methods: {
					// 下面这个定义方法的形式，实际上就是省略了:function
					add() {
						this.num += 1
					},
					sub: function() {
						this.num -= 1
					},
					// 上面两种方法定义的形式没有任何区别
				},
				// 定义计算属性
				computed: {
					priceSum: function() {
						return this.num * this.price
					}
				},
				// 定义侦听器:可以用例侦听属性的值是否发生变化
				watch: {
					// 1、侦听的数据直接定义在data中
					num: function(value, oldVlue) {
						// console.log(value,oldVlue)
						if (value < 0) {
							// alert('数量不能少于0')
							this.num = 0
						} else if (value > this.stock) {
							this.num = this.stock
						}
					},

					//2、侦听的数据直接定义在data中，外面有多层嵌套
					// 2.1、通过层级指定侦听的数据
					'loginForm.user': function(value, oldVlue) {
						console.log(value, oldVlue)
					},
					// 2.3、直接侦听外层数据,多层嵌套不过层级有多深都能侦听到
					loginForm: {
						deep: true,
						handler: function(value, oldVlue) {
							console.log(value, oldVlue)
						}
					}

				},
				// 定义过滤器
				filters: {
					dubboFloat: function(value) {
						// 将数据保留两位小数
						return value.toFixed(2)
					},
					
					musen:function(value){
						console.log(value)
						return value
					}
				},



			})
		</script>

	</body>
</html>

work04.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			<table border="" cellspacing="" cellpadding="">
				<tr>
					<th>ID</th>
					<th>接口名</th>
					<th>测试人员</th>
					<th>项目名</th>
					<th>项目ID</th>
					<th>描述信息</th>
					<th>创建时间</th>
					<th>用例数</th>
				</tr>
				<tr :key='item.id' v-for="item in lists">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.tester}}</td>
					<td>{{item.project}}</td>
					<td>{{item.project_id}}</td>
					<td>{{item.desc}}</td>
					<td>{{item.create_time}}</td>
					<td>{{item.testcases}}</td>
				</tr>
			</table>
			<hr>
			<form action="">
				账号：<input type="text" v-model="loginForm.user"> <br>
				密码：<input type="password" v-model="loginForm.pwd"><br>
				<button type="button" @click="login_btn()">点击登录</button>
			</form>
		
		</div>
		<script type="text/javascript">
			var vue = new Vue({
				el: '#app',
				data: {
					lists: [{
							"id": 1,
							"name": "登录接口_自动化测试平台项目",
							"tester": "可优",
							"project": "自动化测试平台项目",
							"project_id": 1,
							"desc": "登录接口",
							"create_time": "2019-11-06 14:50:30",
							"testcases": 9,
						},
						{
							"id": 2,
							"name": "注册接口_自动化测试平台项目",
							"tester": "可可",
							"project": "自动化测试平台项目",
							"project_id": 1,
							"desc": "自动化测试平台项目, 注册接口",
							"create_time": "2019-11-06 14:51:00",
							"testcases": 0,
						},
						{
							"id": 3,
							"name": "创建项目接口_自动化测试平台项目",
							"tester": "可优",
							"project": "自动化测试平台项目",
							"project_id": 1,
							"desc": "这是自动化测试平台创建项目接口",
							"create_time": "2019-11-06 14:51:45",
							"testcases": 1,
						},
						{
							"id": 4,
							"name": "注册接口_前程贷P2P金融项目",
							"tester": "小可可",
							"project": "前程贷P2P金融项目",
							"project_id": 2,
							"desc": "",
							"create_time": "2019-11-06 14:52:22",
							"testcases": 0,
						},
						{
							"id": 5,
							"name": "登录接口_前程贷P2P金融项目",
							"tester": "柠檬小姐姐",
							"project": "前程贷P2P金融项目",
							"project_id": 2,
							"desc": "",
							"create_time": "2019-11-06 14:52:40",
							"testcases": 0,
						},
						{
							"id": 6,
							"name": "查看项目列表接口_前程贷P2P金融项目",
							"tester": "柠檬小姐姐",
							"project": "前程贷P2P金融项目",
							"project_id": 2,
							"desc": "",
							"create_time": "2019-11-06 17:22:50",
							"testcases": 1,
						}
					],
					loginForm:{
						user:'',
						pwd:''
					}
					
				},
				methods:{
					login_btn(){
						console.log('用户登录的数据为：',this.loginForm)
					}
				}
			})
		</script>


	</body>
</html>

20210628_组件化开发
demo1_vue生命周期的钩子函数.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="message">
		</div>


		<script type="text/javascript">
			var vm = new Vue({
				// 挂载的根节点
				el: '#app',
				// 数据
				data: {
					message:'9999'
				},


				beforeCreate: function() {
					console.group('------beforeCreate--vue创建前状态------');
					console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
					console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
					console.log("%c%s", "color:red", "message: " + this.message)
				},
				created: function() {
					console.group('------created--vue创建完毕状态------');
					console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
					console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
					console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
				},
				beforeMount: function() {
					console.group('------beforeMount,data数据挂载前状态------');
					console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
					console.log(this.$el.innerHTML);
					console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
					console.log("%c%s", "color:red", "message: " + this.message); //已被初始化  
				},
				mounted: function() {
					console.group('------mounted data数据挂载结束状态------');
					console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
					console.log(this.$el.innerHTML);
					console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
					console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
				},
				beforeUpdate: function() {
					console.group('beforeUpdate  data数据更新前状态==============');
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el.innerHTML);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.message);
				},
				updated: function() {
					console.group('updated  data数据更新完成状态==============');
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el.innerHTML);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.message);
				},
				beforeDestroy: function() {
					console.group('beforeDestroy  vue对象销毁前状态==============');
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el.innerHTML);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.message);
				},
				destroyed: function() {
					console.group('destroyed  vue对象销毁完成状态==============');
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el.innerHTML);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.message)
				}

			})
		</script>



	</body>
</html>

demo2_vue组件的定义.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			<h1>{{title}}</h1>
			<!-- <cop1></cop1> -->
			<!-- <el-musen></el-musen> -->
			<el-box></el-box>
			<hello-world></hello-world>
			

		</div>


		<script type="text/javascript">
			/*
			1、全局组件
				定义：
					Vue.component('组件名', {})
				
				注意点：全局组件可以在其他的组件中直接使用
			
			2、局部组件：
				定义：在其他的组件(vue实例)中定义的子组件叫做局部组件,局部组件只能在他定义的那个父组件中使用
			
			
			3、关于组件的命名：如果组件名称由多个单词组成，推荐使用xx-xxx这种风格
				注意点：组件名如果时大驼峰这种命名风格，在全局的根节点中无法直接使用
			、
			
			
			*/

			// 定义一个全局组件
			Vue.component('cop1', {
				template: '<div>cop1组件中的内容</div>'
			})

			Vue.component('el-musen', {
				template: '<div>el-musen组件中的内容</div>'
			})
			// 全局组件可以在其他的组件中直接使用
			Vue.component('el-box', {
				template: `<div>
				<el-musen></el-musen>
				<el-musen></el-musen>
				<el-mm></el-mm>	
				<HelloWorld></HelloWorld>
				<hr>
				</div>`,
				components: {
					'el-mm': {
						template: `<h2>el-mm</h2>`
					}
				},
			})
			Vue.component('HelloWorld', {
				template: '<div>HelloWorld组件中的内容</div>'
			})
			
			
			


			// 创建一个vue实例
			var vm = new Vue({
				el: '#app',
				data: {
					title: "一、组件化开发"
				},
				// 定义局部组件
				components: {
					'el-musen02': {
						template: `<h2>局部组件木森002</h2>`
					}
				}
			})
		</script>



	</body>
</html>

demo3_组件中的数据和方法定义.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			<el-musen></el-musen>
		</div>


		<script type="text/javascript">
			/*
			注意点：组件的模板最外层必须时一个根节点（最外层只能由一个标签）
			
			
			*/
			// 在组件中定义数据
			Vue.component('el-musen', {
				// 组件中的模板
				template: `
				<div>
				<h1>名字：{{name}},年龄：{{age}}</h1>
				<button @click="handle(name)">按钮</button>
				</div>
				`,
				//组件中的数据 注意点：组件中的data要定义为函数
				data: function() {
					return {
						name: 'el-musen',
						age: 999
					}
				},
				// 组件中的方法
				methods: {
					handle: function(val) {
						console.log('参数值为：', val)
					}
				},
				//组件中的计算属性
				computed: {

				},
				// 组件中的侦听器
				watch: {

				},
				// 组件中的过滤器
				filters: {

				},
				// 组件中的子组件
				components: {

				}



			})


			var vm = new Vue({
				el: '#app',
				data: {
					name: 'musen',
					age: 18
				},

			})
		</script>


	</body>
</html>

demo4_父组件往子组件中传递数据.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			<el-table :musen='case1' title='表格1'></el-table>
			<hr>
			<el-table :musen='case2' title='表格2222'></el-table>
			<hr>
			<el-table :musen='case3' title='表格3333'></el-table>
		</div>

		<script type="text/javascript">
			/*
			父组件往子组件中传递数据：
				1、在子组件中通过props属性来定义接收数据的属性名(参数)
				2、父组件在使用子组件时，使用子组件中定义的属性来传递数据
			
			*/
			var vm = new Vue({
				el: '#app',
				data: {
					case1: [{
							"id": 1,
							"name": "登录接口_自动化测试平台项目",
							"tester": "可优",
							"project": "自动化测试平台项目",
							"project_id": 1,
							"desc": "登录接口",
							"create_time": "2019-11-06 14:50:30",
							"testcases": 9,
						},
						{
							"id": 2,
							"name": "注册接口_自动化测试平台项目",
							"tester": "可可",
							"project": "自动化测试平台项目",
							"project_id": 1,
							"desc": "自动化测试平台项目, 注册接口",
							"create_time": "2019-11-06 14:51:00",
							"testcases": 0,
						}
					],
					case2: [{
							"id": 3,
							"name": "创建项目接口_自动化测试平台项目",
							"tester": "可优",
							"project": "自动化测试平台项目",
							"project_id": 1,
							"desc": "这是自动化测试平台创建项目接口",
							"create_time": "2019-11-06 14:51:45",
							"testcases": 1,
						},
						{
							"id": 4,
							"name": "注册接口_前程贷P2P金融项目",
							"tester": "小可可",
							"project": "前程贷P2P金融项目",
							"project_id": 2,
							"desc": "",
							"create_time": "2019-11-06 14:52:22",
							"testcases": 0,
						}
					],
					case3: [{
							"id": 5,
							"name": "登录接口_前程贷P2P金融项目",
							"tester": "柠檬小姐姐",
							"project": "前程贷P2P金融项目",
							"project_id": 2,
							"desc": "",
							"create_time": "2019-11-06 14:52:40",
							"testcases": 0,
						},
						{
							"id": 6,
							"name": "查看项目列表接口_前程贷P2P金融项目",
							"tester": "柠檬小姐姐",
							"project": "前程贷P2P金融项目",
							"project_id": 2,
							"desc": "",
							"create_time": "2019-11-06 17:22:50",
							"testcases": 1,
						}
					]

				},
				components: {
					'el-table': {
						template: `<div>
						<h1>{{title}}</h1>
						<table border="" cellspacing="" cellpadding="">
									<tr>
										<th>ID</th>
										<th>接口名</th>
										<th>测试人员</th>
										<th>项目名</th>
										<th>项目ID</th>
										<th>描述信息</th>
										<th>创建时间</th>
										<th>用例数</th>
									</tr>
									<tr :key='item.id' v-for="item in musen">
										<td>{{item.id}}</td>
										<td>{{item.name}}</td>
										<td>{{item.tester}}</td>
										<td>{{item.project}}</td>
										<td>{{item.project_id}}</td>
										<td>{{item.desc}}</td>
										<td>{{item.create_time}}</td>
										<td>{{item.testcases}}</td>
									</tr>
								</table>
						</div>`,
						data() {
							return {}
						},
						props: ['musen', 'title']
					}
				}
			})
		</script>


	</body>
</html>

demo5_子组件中往父组件中传递数据.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>
	<body>
		<div id="app">
			<el-table :musen='case1' title='表格1' @run='handle($event)'></el-table>
			<hr>
			<el-table :musen='case2' title='表格2222' @run='handle($event)'></el-table>
			<hr>
			<el-table :musen='case3' title='表格3333' @run='handle($event)'></el-table>
			
			<h2>运行的数据:{{case_}}</h2>
		</div>

		<script type="text/javascript">
			/*
			子组件往父组件中传递数据：
				1、子组件中通过$emit 触发自定义的事件，并分别传入对应的参数。
				2、监听子组件中自定义的事件，当触发事件时，子组件中传递过来的数据，父组件可以通过$event来接收。
			
			*/
			var vm = new Vue({
				el: '#app',
				data: {
					case1: [{
							"id": 1,
							"name": "登录接口_自动化测试平台项目",
							"tester": "可优",
							"project": "自动化测试平台项目",
							"project_id": 1,
							"desc": "登录接口",
							"create_time": "2019-11-06 14:50:30",
							"testcases": 9,
						},
						{
							"id": 2,
							"name": "注册接口_自动化测试平台项目",
							"tester": "可可",
							"project": "自动化测试平台项目",
							"project_id": 1,
							"desc": "自动化测试平台项目, 注册接口",
							"create_time": "2019-11-06 14:51:00",
							"testcases": 0,
						}
					],
					case2: [{
							"id": 3,
							"name": "创建项目接口_自动化测试平台项目",
							"tester": "可优",
							"project": "自动化测试平台项目",
							"project_id": 1,
							"desc": "这是自动化测试平台创建项目接口",
							"create_time": "2019-11-06 14:51:45",
							"testcases": 1,
						},
						{
							"id": 4,
							"name": "注册接口_前程贷P2P金融项目",
							"tester": "小可可",
							"project": "前程贷P2P金融项目",
							"project_id": 2,
							"desc": "",
							"create_time": "2019-11-06 14:52:22",
							"testcases": 0,
						}
					],
					case3: [{
							"id": 5,
							"name": "登录接口_前程贷P2P金融项目",
							"tester": "柠檬小姐姐",
							"project": "前程贷P2P金融项目",
							"project_id": 2,
							"desc": "",
							"create_time": "2019-11-06 14:52:40",
							"testcases": 0,
						},
						{
							"id": 6,
							"name": "查看项目列表接口_前程贷P2P金融项目",
							"tester": "柠檬小姐姐",
							"project": "前程贷P2P金融项目",
							"project_id": 2,
							"desc": "",
							"create_time": "2019-11-06 17:22:50",
							"testcases": 1,
						}
					],
					case_:''

				},
				methods:{
					handle:function(val){
						console.log(val)
						this.case_ = val
					}
				},
				components: {
					'el-table': {
						template: `<div>
						<h1>{{title}}</h1>
						<table border="" cellspacing="" cellpadding="">
									<tr>
										<th>ID</th>
										<th>接口名</th>
										<th>测试人员</th>
										<th>项目名</th>
										<th>项目ID</th>
										<th>描述信息</th>
										<th>创建时间</th>
										<th>用例数</th>
										<th>操作</th>
									</tr>
									<tr :key='item.id' v-for="item in musen">
										<td>{{item.id}}</td>
										<td>{{item.name}}</td>
										<td>{{item.tester}}</td>
										<td>{{item.project}}</td>
										<td>{{item.project_id}}</td>
										<td>{{item.desc}}</td>
										<td>{{item.create_time}}</td>
										<td>{{item.testcases}}</td>
										// 子组件中主动触发一个自定义的事件
										<td><button @click="$emit('run',item)">运行</button></td>
									</tr>
								</table>
						</div>`,
						data() {
							return {}
						},
						props: ['musen', 'title']
					}
				}
			})
			
			
			
			
			
		</script>


	</body>
</html>

demo6_插槽的使用.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
		<el-header>
			<!-- 往插槽中填充的内容 -->
			<h1>python测试开发</h1>
			<a href="http://www.baidu.com">baidu</a>
		</el-header>


		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {},
				components: {
					'el-header': {
						template: `
						<div>
							<slot></slot>
							<h2>这个是内容信息</h2>
						</div>
						`
					}
				}



			})
		</script>


	</body>
</html>

demo7_具名插槽的使用.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<el-header>
				<!-- 往插槽中填充的内容 -->
				<h1 slot="header">python测试开发</h1>
				<div slot="header">
					<a  href="http://www.baidu.com">baidu</a>
					<p>67890-=567890-567890-</p>
				</div>
				<h1 slot='footer'>---------------底部---------------------</h1>
			</el-header>


		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {},
				components: {
					'el-header': {
						template: `
						<div>
							<hr>
							<slot name='header'></slot>
							<slot name='main'></slot>
							<slot name='footer'></slot>
							<hr>
						</div>
						`
					}
				}



			})
		</script>


	</body>
</html>

21210630_前后端数据交互
demo1_elementUI的组件使用.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>elementUI组件库的使用</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style type="text/css">
			.el-header{
				padding: 0;
			}
		</style>
		
		
	</head>
	<body>
		<div id="app">
			<el-container>
			  <el-header>
				  <el-menu
				    :default-active="activeIndex2"
				    class="el-menu-demo"
				    mode="horizontal"
				    @select="handleSelect"
				    background-color="#545c64"
				    text-color="#fff"
				    active-text-color="#ffd04b">
				    <el-menu-item index="1">处理中心</el-menu-item>
				    <el-submenu index="2">
				      <template slot="title">我的工作台</template>
				      <el-menu-item index="2-1">选项1</el-menu-item>
				      <el-menu-item index="2-2">选项2</el-menu-item>
				      <el-menu-item index="2-3">选项3</el-menu-item>
				      <el-submenu index="2-4">
				        <template slot="title">选项4</template>
				        <el-menu-item index="2-4-1">选项1</el-menu-item>
				        <el-menu-item index="2-4-2">选项2</el-menu-item>
				        <el-menu-item index="2-4-3">选项3</el-menu-item>
				      </el-submenu>
				    </el-submenu>
				    <el-menu-item index="3" disabled>消息中心</el-menu-item>
				    <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
				  </el-menu>
				  
				  
			  </el-header>
			  <el-container>
			    <el-aside width="200px">
					<el-menu
					      default-active="2"
					      class="el-menu-vertical-demo"
					      @open="handleOpen"
					      @close="handleClose"
					      background-color="#545c64"
					      text-color="#fff"
					      active-text-color="#ffd04b">
					      <el-submenu index="1">
					        <template slot="title">
					          <i class="el-icon-location"></i>
					          <span>导航一</span>
					        </template>
					        <el-menu-item-group>
					          <template slot="title">分组一</template>
					          <el-menu-item index="1-1">选项1</el-menu-item>
					          <el-menu-item index="1-2">选项2</el-menu-item>
					        </el-menu-item-group>
					        <el-menu-item-group title="分组2">
					          <el-menu-item index="1-3">选项3</el-menu-item>
					        </el-menu-item-group>
					        <el-submenu index="1-4">
					          <template slot="title">选项4</template>
					          <el-menu-item index="1-4-1">选项1</el-menu-item>
					        </el-submenu>
					      </el-submenu>
					      <el-menu-item index="2">
					        <i class="el-icon-menu"></i>
					        <span slot="title">导航二</span>
					      </el-menu-item>
					      <el-menu-item index="3" disabled>
					        <i class="el-icon-document"></i>
					        <span slot="title">导航三</span>
					      </el-menu-item>
					      <el-menu-item index="4">
					        <i class="el-icon-setting"></i>
					        <span slot="title">导航四</span>
					      </el-menu-item>
					    </el-menu>
					
					
					
				</el-aside>
			    <el-container>
			      <el-main>Main</el-main>
			      <el-footer>Footer</el-footer>
			    </el-container>
			  </el-container>
			</el-container>
			
			
		</div>
		
		<script type="text/javascript">
			var vm =new Vue({
				el:'#app',
				data:{
					
				}
			})
			
			
		</script>
		
		
		
		
	</body>
</html>

demo2_前后端数据交互axios.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入前端的请求库axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	</head>
	<body>

		<script type="text/javascript">
		/*
		接口地址：http://127.0.0.1:5000/api/projects
		请求方法：get
		参数：无
		返回所有的项目
		*/ 
	   // const res = axios.get('http://127.0.0.1:5000/api/projects')
	   // // axios 发送的是异步请求，返回的是一个异步的对象
	   // res.then(function(response){
		  //  console.log(response)
	   // })
	   
	   // 以上代码简写
	   // axios.get('http://127.0.0.1:5000/api/projects').then(function(response){
	   // 		   // 请求成功（http状态码是2系列的）,会执行这个回调函数
	   // 		   console.log(response)
	   // 		   // 获取http响应状态码
	   // 		   console.log(response.status)
	   // 		   // 获取http响应体
	   // 		   console.log(response.data)
	   // })
	   
	   axios.get('http://127.0.0.1:5000/api/projects1').then(function(response){
		   // 请求成功（http状态码是2系列的）,会执行这个回调函数
		   console.log(response)
		   // 获取http响应状态码
		   console.log(response.status)
		   // 获取http响应体
		   console.log(response.data)
	   }).catch(function(error){
		   // 请求失败（http状态码是3，4，5系列的）,会执行这个回调函数
		   // console.log(error)
		   // 获取响应对象
		   const response = error.response
		   // 获取http响应状态码
		   console.log(response.status)
		   // 获取http响应体
		   console.log(response.data)
	   })

		</script>



	</body>
</html>

demo3_axios自定义请求失败状态码的范围.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入前端的请求库axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	</head>
	<body>

		<script type="text/javascript">
			/*
		接口地址：http://127.0.0.1:5000/api/projects
		请求方法：get
		参数：无
		返回所有的项目
		*/
			// axios.get('http://127.0.0.1:5000/api/projects1', {
			// 	validateStatus: function(status) {
			// 		return status < 500
			// 	}
			// }).then(function(response) {
			// 	// 请求成功（http状态码是2系列的）,会执行这个回调函数
			// 	console.log('请求成功')
			// 	// 获取http响应状态码
			// 	console.log(response.status)
			// 	// 获取http响应体
			// 	console.log(response.data)
			// }).catch(function(error) {
			// 	// 请求失败（http状态码是3，4，5系列的）,会执行这个回调函数
			// 	// console.log(error)
			// 	console.log('失败')
			// 	// 获取响应对象
			// 	const response = error.response
			// 	// 获取http响应状态码
			// 	console.log(response.status)
			// 	// 获取http响应体
			// 	console.log(response.data)
			// })
			
			// 所有的请求结果都使用一个方法来处理
			axios.get('http://127.0.0.1:5000/api/projects1', {
				validateStatus: function(status) {
					return true
				},
			}).then(function(response) {
				// 请求成功（http状态码是2系列的）,会执行这个回调函数
				console.log('请求成功')
				// 获取http响应状态码
				console.log(response.status)
				// 获取http响应体
				console.log(response.data)
			})	
		</script>



	</body>
</html>

demo4_axios实例化请求对象.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入前端的请求库axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	</head>
	<body>

		<script type="text/javascript">
			/*
			接口地址：http://127.0.0.1:5000/api/projects
			请求方法：get
			参数：无
			返回所有的项目
			*/

			// 创建请求对象
			const http = axios.create({
				// 设置基本的url地址
				baseURL: 'http://127.0.0.1:5000',
				timeout: 1000,
				// 指定http状态码错误范围
				validateStatus: function(status) {
					return true
				}
			});
			// const http2 = axios.create({
			// 	// 设置基本的url地址
			// 	baseURL: 'http://127.0.0.1:8000',
			// 	timeout: 1000,
			// 	// 指定http状态码错误范围
			// 	validateStatus: function(status) {
			// 		return true
			// 	}
			// });

			// 所有的请求结果都使用一个方法来处理
			http.get('/api/projects').then(function(response) {
				// 请求成功（http状态码是2系列的）,会执行这个回调函数
				console.log('请求成功')
				// 获取http响应状态码
				console.log(response.status)
				// 获取http响应体
				console.log(response.data)
			})
			
		</script>



	</body>
</html>

demo5_axios发生get请求的参数传递.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入前端的请求库axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	</head>
	<body>

		<script type="text/javascript">
			/*
			接口地址：http://127.0.0.1:5000/api/interface
			请求方法：get
			参数： id(项目的id)
			参数类型：查询字符串
			返回:该项目的所有接口
			*/
			// 创建请求对象
			const http = axios.create({
				// 设置基本的url地址
				baseURL: 'http://127.0.0.1:5000',
				timeout: 1000,
				// 指定http状态码错误范围
				validateStatus: function(status) {
					return true
				}
			})
			// get请求的参数传递（查询字符串参数）
			// 方式一：在url地址后面使用?key=value
			// http.get('/api/interface?id=1001').then(function(response){
			// 	console.log(response.data)
			// })
			// 方式二： 在请求配置对象中数据params传递
			// http.get('/api/interface', {
			// 	params: {
			// 		id: 1003
			// 	}
			// }).then(function(response) {
			// 	console.log(response.data)
			// })

			// 使用request方法发生请求
			// http.request({
			// 	method: 'get',
			// 	url: '/api/interface',
			// 	params: {
			// 		id: 1003
			// 	},
			// 	data: {
			// 		'aa': 11,
			// 		'bb': 11
			// 	}
			// }).then(function(response) {
			// 	console.log(response.data)
			// })
		</script>



	</body>
</html>

demo6_post请求参数传递.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入前端的请求库axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	</head>
	<body>

		<script type="text/javascript">
			/*
			接口地址：http://127.0.0.1:5000/api/user/login
			请求方法：post
			参数： {user:账号,pwd:密码}
			参数类型：表单 、json都支持
			返回:登录之后的结果
			*/
			// 创建请求对象
			const http = axios.create({
				// 设置基本的url地址
				baseURL: 'http://127.0.0.1:5000',
				timeout: 1000,
				// 指定http状态码错误范围
				validateStatus: function(status) {
					return true
				}
			})
			// 一、发送post请求：传递json参数
			http.post('/api/user/login', {
				user: 'python01',
				pwd: "lemonban11"
			}).then(function(response) {
				console.log(response.data)
			})
			
			// 二、传递表单格式的参数
			// const data = {
			// 	user: 'python01',
			// 	pwd: "lemonban11"
			// }
			// 构造表单参数对象
			// const params = new URLSearchParams()
			// params.append('user', 'python01')
			// params.append('pwd', 'lemonban')
			// http.post('/api/user/login', params).then(function(response) {
			// 	console.log(response.data)
			// })
			
			
			
		</script>



	</body>
</html>

demo7_axios结合async和await的使用.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>

		<script type="text/javascript">
			/*
			接口地址：http://127.0.0.1:5000/api/user/login
			请求方法：post
			参数： {user:账号,pwd:密码}
			参数类型：表单 、json都支持
			返回:登录之后的结果
			*/
			const http = axios.create({
				// 设置基本的url地址
				baseURL: 'http://127.0.0.1:5000',
				timeout: 1000,
				// 指定http状态码错误范围
				validateStatus: function(status) {
					return true
				}
			})

			// 添加请求拦截器
			http.interceptors.request.use(function(config) {
				// 在发送请求之前做些什么
				console.log('请求拦截器调用了----')
				// 获取sessionStorage中的token值，添加到请求信息中
				token = window.sessionStorage.getItem('token')
				if (token) {
					config.headers.MyToken = token
				}
				return config;
			});
			
		
			// // async和await结合axios使用
			// async function login() {
			// 	const response = await http.post('/api/user/login', {
			// 		user: 'python01',
			// 		pwd: "lemonban"
			// 	})
			// 	if (response.data.code === '1') {
			// 		console.log('登录成功')
			// 		const token = response.data.token
			// 		console.log(token)
			// 		// 将token存储到sessionStorage
			// 		window.sessionStorage.setItem('token', token)
			// 	} else {
			// 		console.log('登录失败')
			// 	}
			// 	// console.log(response.data)
			// 	// console.log(response.status)
			// }

			// async function getInter() {
			// 	const response = await http.get('/api/interface?id=1001')
			// 	console.log(response)
			// }


			// login()
			// getInter()
			
			// ---------------------添加响应拦截器----------------------
			http.interceptors.response.use(function (response) {
			    // 对响应数据做过滤处理
			    return response.data;
			  });
			
			async function getInter2() {
				const response = await http.get('/api/interface?id=1001')
				console.log(response)
			}
			
			getInter2()
		</script>



	</body>
</html>

demo8_请求拦截器和响应拦截器.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>

		<script type="text/javascript">
			/*
			接口地址：http://127.0.0.1:5000/api/user/login
			请求方法：post
			参数： {user:账号,pwd:密码}
			参数类型：表单 、json都支持
			返回:登录之后的结果
			*/
			const http = axios.create({
				// 设置基本的url地址
				baseURL: 'http://127.0.0.1:5000',
				timeout: 1000,
				// 指定http状态码错误范围
				validateStatus: function(status) {
					return true
				}
			})

			// 添加请求拦截器
			http.interceptors.request.use(function(config) {
				// 在发送请求之前做些什么
				console.log('请求拦截器调用了----')
				// 获取sessionStorage中的token值，添加到请求信息中
				token = window.sessionStorage.getItem('token')
				if (token) {
					config.headers.MyToken = token
				}
				return config;
			});
			
		
			// // async和await结合axios使用
			// async function login() {
			// 	const response = await http.post('/api/user/login', {
			// 		user: 'python01',
			// 		pwd: "lemonban"
			// 	})
			// 	if (response.data.code === '1') {
			// 		console.log('登录成功')
			// 		const token = response.data.token
			// 		console.log(token)
			// 		// 将token存储到sessionStorage
			// 		window.sessionStorage.setItem('token', token)
			// 	} else {
			// 		console.log('登录失败')
			// 	}
			// 	// console.log(response.data)
			// 	// console.log(response.status)
			// }

			// async function getInter() {
			// 	const response = await http.get('/api/interface?id=1001')
			// 	console.log(response)
			// }


			// login()
			// getInter()
			
			// ---------------------添加响应拦截器----------------------
			http.interceptors.response.use(function (response) {
			    // 对响应数据做过滤处理
			    return response.data;
			  });
			
			async function getInter2() {
				const response = await http.get('/api/interface?id=1001')
				console.log(response)
			}
			
			getInter2()
		</script>



	</body>
</html>

demo9_登录页面的小案例.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<style type="text/css">
			.login{
				width: 800px;
				height: 600px;
				margin: 200px auto;
				padding-top: 100px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="login">
				<el-card class="box-card">
				  <el-form :model="loginData" label-width="80px">
				  	<el-form-item label="账号">
				  		<el-input  v-model='loginData.user'></el-input>
				  	</el-form-item>
				  	<el-form-item label="密码">
				  		<el-input  v-model='loginData.pwd' type='password'></el-input>
				  	</el-form-item>
				  	<el-form-item>
				  		<el-button type="primary" @click='login'>点击登录</el-button>
				  	</el-form-item>
				  </el-form>
				</el-card>
			</div>

		</div>


		<script type="text/javascript">
			// 创建请求对象
			const http = axios.create({
				// 设置基本的url地址
				baseURL: 'http://127.0.0.1:5000',
				timeout: 1000,
				// 指定http状态码错误范围
				validateStatus: function(status) {
					return true
				}
			})

			// 创建一个vue实例
			var vm = new Vue({
				el: '#app',
				data: {
					// 登录的参数
					loginData: {
						user: '',
						pwd: ''
					}
				},
				methods: {
					// 登录的方法
					async login() {
						const reposne = await http.post('/api/user/login', this.loginData)
						if(reposne.data.code==='1'){
							alert('登录成功')
						}else{
							alert('登录失败')
						}
					}
				}


			})
		</script>


	</body>
</html>

work6.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.title {
				height: 80px;
				width: 100%;
				background: #c6c6c6;
				margin-bottom: 5px;
			}

			.content {
				height: 800px;
				width: 100%;
				background: #ffffff;
				overflow: hidden;

			}

			.left {
				width: 15%;
				height: 800px;
				background: #000;
				float: left;
			}

			.right {
				width: 84%;
				height: 800px;
				background: #C6C6C6;
				float: right;
			}
			ul,li{
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			li{
				height: 50px;
				font: normal 20px/50px "microsoft yahei";
				background: #00AAFF;
				border-bottom: solid 2px #fff ;
				text-align: center;
				color: #fff;
			}
			li:hover{
				color: chocolate;
			}
		</style>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		
	</head>
	<body>

		<div id="app">
			<!-- <el-layout>
				<div slot='header'>
					<div style="width: 100%;text-align: center; font: normal 32px/80px microsoft yahei;" >自动化测试平台</div>
				</div>
				<div slot='menu'>
					<ul>
						<li>菜单1</li>
						<li>菜单2</li>
						<li>菜单3</li>
						<li>菜单4</li>
						<li>菜单5</li>
					</ul>
				</div>
				<div slot='main'>
					<p>主体内容显示</p>
				</div>
			</el-header> -->
			<!-- <el-layout>
				<div slot='header'>自动化平台</div>
				<div slot='menu' style="color: #fff;">侧边菜单</div>
				<div slot='main'>主题部分的内容</div>
			</el-layout>	 -->
			<el-layout>
				<div slot='header'>
					<el-menu
					  :default-active="activeIndex2"
					  class="el-menu-demo"
					  mode="horizontal"
					  @select="handleSelect"
					  background-color="#545c64"
					  text-color="#fff"
					  active-text-color="#ffd04b">
					  <el-menu-item index="1">处理中心</el-menu-item>
					  <el-submenu index="2">
					    <template slot="title">我的工作台</template>
					    <el-menu-item index="2-1">选项1</el-menu-item>
					    <el-menu-item index="2-2">选项2</el-menu-item>
					    <el-menu-item index="2-3">选项3</el-menu-item>
					    <el-submenu index="2-4">
					      <template slot="title">选项4</template>
					      <el-menu-item index="2-4-1">选项1</el-menu-item>
					      <el-menu-item index="2-4-2">选项2</el-menu-item>
					      <el-menu-item index="2-4-3">选项3</el-menu-item>
					    </el-submenu>
					  </el-submenu>
					  <el-menu-item index="3" disabled>消息中心</el-menu-item>
					  <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
					</el-menu>
				</div>
				<div slot='menu' style="color: #fff;">
					<el-menu
					      default-active="2"
					      class="el-menu-vertical-demo"
					      @open="handleOpen"
					      @close="handleClose"
					      background-color="#545c64"
					      text-color="#fff"
					      active-text-color="#ffd04b">
					      <el-submenu index="1">
					        <template slot="title">
					          <i class="el-icon-location"></i>
					          <span>导航一</span>
					        </template>
					        <el-menu-item-group>
					          <template slot="title">分组一</template>
					          <el-menu-item index="1-1">选项1</el-menu-item>
					          <el-menu-item index="1-2">选项2</el-menu-item>
					        </el-menu-item-group>
					        <el-menu-item-group title="分组2">
					          <el-menu-item index="1-3">选项3</el-menu-item>
					        </el-menu-item-group>
					        <el-submenu index="1-4">
					          <template slot="title">选项4</template>
					          <el-menu-item index="1-4-1">选项1</el-menu-item>
					        </el-submenu>
					      </el-submenu>
					      <el-menu-item index="2">
					        <i class="el-icon-menu"></i>
					        <span slot="title">导航二</span>
					      </el-menu-item>
					      <el-menu-item index="3" disabled>
					        <i class="el-icon-document"></i>
					        <span slot="title">导航三</span>
					      </el-menu-item>
					      <el-menu-item index="4">
					        <i class="el-icon-setting"></i>
					        <span slot="title">导航四</span>
					      </el-menu-item>
					    </el-menu>
					
					
					
				</div>
				<div slot='main'>主题部分的内容</div>
			</el-layout>	
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {},
				components: {
					'el-layout': {
						template: `
						<div>
							<div class="title">
								<slot name='header'></slot>
							</div>
							<div class="content">
								<div class="left">
									<slot name='menu'></slot>
								</div>
								<div class="right">
									<slot name='main'></slot>
								</div>
							</div>
						</div>
						`
					}
				}
			})
		</script>
	</body>
</html>

http_server.py

"""
============================
author:MuSen
time:2019/6/21
E-mail:3247119728@qq.com
============================
"""

from flask import Flask, request, jsonify

from flask_cors import CORS

app = Flask(__name__)

#  测试数据
user_info = {"user": 'python01', 'pwd': 'lemonban'}

project_data = {"code": "1",
                "data": [{"title": "前程贷", "id": "1001"},
                         {"title": "智慧金融", "id": "1002"},
                         {"title": "生鲜到家", "id": "1003"},
                         {"title": "柠檬班app", "id": "1004"}],
                "msg": "四个项目",
                }
# 接口数据
interface_data = {
    "1001": {"code": "1",
             "data": [{"name": "前程贷登录1001"},
                      {"name": "前程贷注册1001"}],
             "msg": "2个接口", },

    "1002": {"code": "1",
             "data": [{"name": "智慧-登录1002"},
                      {"name": "智慧-注册1002"},
                      {"name": "智慧-贷款1004"}, ],
             "msg": "3个接口", },

    "1003": {"code": "1",
             "data": [{"name": "生鲜-登录1003"},
                      {"name": "生鲜-注册1003"},
                      {"name": "生鲜下单1003"}, ],
             "msg": "3个接口", },

    "1004": {"code": "1",
             "data": [{"name": "app登录1004"},
                      {"name": "app注册1004"},
                      {"name": "app报名1004"},
                      {"name": "app缴费1004"},
                      ],
             "msg": "4个接口", },
}


# 登录
@app.route('/api/user/login', methods=['post'])
def login():
    """
    接口地址：http://127.0.0.1:5000/api/user/login
    请求方法：post
    参数： {user:账号,pwd:密码}
    参数类型：表单 、json都支持
    返回:登录之后的结果
    """
    data = request.form or request.json
    # 判断账号，密码是否正确
    if user_info.get('user') == data.get('user') and user_info.get('pwd') == data.get('pwd'):
        return jsonify({'code': "1", "data": None, "msg": "成功",'token':"afguhijkrr567897uhijokctyu"})
    else:
        return jsonify({'code': "0", "data": None, "msg": "账号或密码有误"})


# 获取项目列表
@app.route('/api/projects', methods=['get'])
def pro_list():
    """
    接口地址：http://127.0.0.1:5000/api/projects
    请求方法：get
    参数：无
    返回所有的项目
    :return:
    """
    return jsonify(project_data)


# 获取接口列表
@app.route('/api/interface', methods=['get'])
def interface():
    """
    接口地址：http://127.0.0.1:5000/api/interface
    请求方法：get
    参数： id(项目的id)
    参数类型：查询字符串
    返回:该项目的所有接口
    """
    inter_id = request.args.get('id')

    if inter_id:
        res_data = interface_data.get(inter_id)
        if res_data:
            return jsonify(res_data)
        else:
            return jsonify({"code": "0", "data": None, "msg": "没有该项目"})
    else:
        return jsonify({"code": "0", "data": None, "msg": "参数id不能为空"})


if __name__ == '__main__':
    cors = CORS(app)
    app.run(debug=True)

20210702_前端路由
demo1_work7.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第7天作业</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<style type="text/css">
			.box1 {
				width: 600px;
				height: 400px;
				margin: 100px auto;
			}

			.project {
				width: 600px;
				height: 400px;
				float: left;
				text-align: center;
			}

			.inter {
				width: 600px;
				height: 400px;
				float: right;
				text-align: center;
			}
		</style>

	</head>
	<body>
		<div id="app">
			<!-- 登录框内容 -->
			<div class="box1">
				<el-card>
					<h2 style="color: deepskyblue;text-align: center;">用户登录</h2>
					<el-form :model="loginData" label-width="80px">
						<el-form-item label="账号">
							<el-input v-model='loginData.user'></el-input>
						</el-form-item>
						<el-form-item label="密码">
							<el-input v-model='loginData.pwd' type='password'></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click='login'>点击登录</el-button>
						</el-form-item>
					</el-form>
				</el-card>
			</div>
			<!-- 表格的内容 -->
			<!-- <div class="box2">
				<div class="project">
					<table border="1px">
						<tr>
							<th>ID</th>
							<th>项目名</th>
							<th>操作</th>
						</tr>
						<tr v-for="pro in projects.data" :key='pro.id'>
							<td>{{pro.id}}</td>
							<td>{{pro.title}}</td>
							<td><button @click="getInter(pro.id)">获取数据</button></td>
						</tr>
					</table>
				</div>
				<div class="inter">
					<table border="1px">
						<tr>
							<th>接口名</th>
							<th>操作</th>
						</tr>
						<tr v-for="inter in interfaces.data" :key='inter.id'>
							<td>{{inter.name}}</td>
							<td><button @click="updateMsg(inter)>点击</button></td>
						</tr>
					</table>
					<h1>{{msg}}</h1>
				</div>
			</div> -->

			<div class="box2">
				<div class="project">
					<el-card>
						<el-table :data="projects.data" style="width: 100%">
							<el-table-column prop="id" label="ID" width="180">
							</el-table-column>
							<el-table-column prop="title" label="项目名" width="180">
							</el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<el-button size="mini" type="danger" @click="getInter(scope.row.id)">获取项目数据
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-card>
				</div>
				<div class="inter">
					<el-card>
						<el-table :data="interfaces.data" style="width: 100%">
							<el-table-column prop="name" label="接口名" width="180">
							</el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<el-button size="mini" type="danger" @click="updateMsg(scope.row)">点击
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						</template>
						<h1>{{msg}}</h1>
					</el-card>
				</div>
			</div>


		</div>
		<script type="text/javascript">
			// 创建请求对象
			const http = axios.create({
				// 设置基本的url地址
				baseURL: 'http://127.0.0.1:5000',
				timeout: 1000,
				// 指定http状态码错误范围
				validateStatus: function(status) {
					return true
				}
			})

			var vm = new Vue({
				el: '#app',
				data: {
					loginData: {
						user: '',
						pwd: ''
					},
					projects: [],
					interfaces: [],
					msg: '',
				},
				methods: {
					async login() {
						// 请求登录接口
						const response = await http.post('/api/user/login', this.loginData)
						// 判断是否登录成功
						if (response.data.code === '1') {
							alert('登录成功')
							// 请求获取项目接口
							this.getProject()
						} else {
							alert('登录失败')
						}
					},
					async getProject() {
						// 请求获取项目的接口
						const response = await http.get('/api/projects')
						// 保存数据到data里的project中
						this.projects = response.data
					},
					async getInter(interId) {
						// 请求获取项目的接口
						const response = await http.get('/api/interface', {
							params: {
								id: interId
							}
						})
						// 保存数据到data里的project中
						this.interfaces = response.data
					},
					updateMsg(inter){
						this.msg =inter
						
					}
				}


			})
		</script>




	</body>
</html>

demo2_登录鉴权接口的案例.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://unpkg.com/axios<style type="text/css">
			.box {
				width: 600px;
				height: 400px;
				margin: 100px auto;
			}
		</style>/dist/axios.min.js"></script>
		

	</head>
	<body>
		<div id="app">

			<div class="box">
				<el-card class="box-card">
					<h2 style="text-align: center;">用 户 登 录</h2>
					<el-form :model="form" label-width="80px">
						<el-form-item label="账号">
							<el-input v-model="form.username"></el-input>
						</el-form-item>
						<el-form-item label="密码">
							<el-input v-model="form.password" type='password'></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="login">点击登录</el-button>
						</el-form-item>
					</el-form>
				</el-card>
			</div>
			<hr>
			<div class="box2">
				<el-button type="primary" @click='getProject'>获取项目列表</el-button>
				<el-table :data="projects" style="width: 100%">
					<el-table-column prop="id" label="ID" min-width="50">
					</el-table-column>
					<el-table-column prop="name" label="项目名" min-width="180">
					</el-table-column>
					<el-table-column prop="create_time" label="创建时间" min-width='200'>
					</el-table-column>
					<el-table-column prop="leader" label="负责人" min-width="180">
					</el-table-column>
					<el-table-column prop="testcases" label="用例数" min-width="180">
					</el-table-column>
				</el-table>
			</div>

		</div>



		<script type="text/javascript">
			// 创建请求对象
			const http = axios.create({
				// 设置基本的url地址
				baseURL: 'http://api.keyou.site:8000',
				timeout: 1000,
				// 指定http状态码错误范围
				validateStatus: function(status) {
					return true
				}
			})

			// 添加请求拦截器
			http.interceptors.request.use(function(config) {

				// 获取sessionStorage中的token值，添加到请求信息中
				token = window.sessionStorage.getItem('token')
				if (token) {
					config.headers.Authorization = 'JWT ' + token
				}
				return config;
			});

			var vm = new Vue({
				el: "#app",
				data: {
					form: {
						username: "",
						password: ""
					},
					projects:[]
				},
				methods: {
					// 登录请求
					async login() {
						//发送请求登录
						const response = await http.post('/user/login/', this.form)
						console.log(response.data)
						if (response.status === 200) {
							// 提取响应中的token
							const token = response.data.token
							// 将token存储到sessionstorage中
							window.sessionStorage.setItem('token', token)
						} else {
							alert('登录失败！')
						}
					},
					// 发送请求获取所有的项目
					async getProject() {
						const response = await http.get('/projects/')
						console.log(response)
						if (response.status===200){
							this.projects = response.data.results 
						}
					}

				}
			})
		</script>



	</body>
</html>

demo3_vue-reouter的基本使用 - 副本.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 引入vue-router -->
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 路由视图展示的地方 -->
			<router-view></router-view>

		</div>


		<script type="text/javascript">
			//1、 定义路由对应的组件
			const Login = {
				template: `<h1>登录页面</h1>`
			}
			const Home = {
				template: `<h1>项目首页</h1>`
			}

			// 2、 创建一个路由对象, 设置路由匹配规则
			const router = new VueRouter({
				routes: [{
						path: '/user/login',
						component: Login
					},
					{
						path: '/index/home',
						component: Home
					}
				]
			})
			// 3、 将路由对象挂载到vue实例中
			const app = new Vue({
				el: '#app',
				router: router
			})
		</script>






	</body>
</html>

demo4_使用路由实现登录页面跳转的案例.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 引入vue-router -->
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
		<style type="text/css">
			.box {
				width: 600px;
				height: 400px;
				margin: 100px auto;
			}
		</style>
		
		
	</head>
	<body>
		<div id="app">
			<!-- 路由视图展示的地方 -->
			<router-view></router-view>
		</div>


		<script type="text/javascript">
			// 创建请求对象
			const http = axios.create({
				// 设置基本的url地址
				baseURL: 'http://api.keyou.site:8000',
				timeout: 1000,
				// 指定http状态码错误范围
				validateStatus: function(status) {
					return true
				}
			})
			
			// 添加请求拦截器
			http.interceptors.request.use(function(config) {
			
				// 获取sessionStorage中的token值，添加到请求信息中
				token = window.sessionStorage.getItem('token')
				if (token) {
					config.headers.Authorization = 'JWT ' + token
				}
				return config;
			});
			
			
			//1、 定义登录组件
			const Login = {
				template: `
				<div class="box">
					<el-card class="box-card">
						<h2 style="text-align: center;">用 户 登 录</h2>
						<el-form :model="form" label-width="80px">
							<el-form-item label="账号">
								<el-input v-model="form.username"></el-input>
							</el-form-item>
							<el-form-item label="密码">
								<el-input v-model="form.password" type='password'></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="login">点击登录</el-button>
							</el-form-item>
						</el-form>
					</el-card>
				</div>`,
				data(){
					return{
						form: {
							username: "",
							password: ""
						}
					}
				},
				methods:{
					async login() {
						//发送请求登录
						const response = await http.post('/user/login/', this.form)
						console.log(response.data)
						if (response.status === 200) {
							alert('登录成功！')
							// 提取响应中的token
							const token = response.data.token
							// 将token存储到sessionstorage中
							window.sessionStorage.setItem('token', token)
							// 使用编程式导航进行页面跳转
							this.$router.push('/index/home')
							
						} else {
							alert('登录失败！')
						}
					}
				}
			}
			// 2、定义项目首页组件
			const Home = {
				template: `<div class="box2">
				<el-button type="primary" @click='getProject'>获取项目列表</el-button>
				<el-table :data="projects" style="width: 100%">
					<el-table-column prop="id" label="ID" min-width="50">
					</el-table-column>
					<el-table-column prop="name" label="项目名" min-width="180">
					</el-table-column>
					<el-table-column prop="create_time" label="创建时间" min-width='200'>
					</el-table-column>
					<el-table-column prop="leader" label="负责人" min-width="180">
					</el-table-column>
					<el-table-column prop="testcases" label="用例数" min-width="180">
					</el-table-column>
					</el-table>
				</div>`,
				data(){
					return{
						projects:[]
					}
				},
				methods:{
					// 发送请求获取所有的项目
					async getProject() {
						const response = await http.get('/projects/')
						console.log(response)
						if (response.status===200){
						
							this.projects = response.data.results 
						}
					}
				}
			}

			// 2、 创建一个路由对象, 设置路由匹配规则
			const router = new VueRouter({
				routes: [{
						path: '/user/login',
						component: Login
					},
					{
						path: '/index/home',
						component: Home
					}
				]
			})
			// 3、 将路由对象挂载到vue实例中
			const app = new Vue({
				el: '#app',
				router: router
			})
		</script>






	</body>
</html>

demo5_编程式导航和声明式导航.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 引入vue-router -->
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
		<style type="text/css">
			.box {
				width: 600px;
				height: 400px;
				margin: 100px auto;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff"
				active-text-color="#ffd04b">
				<el-menu-item index="1">
					<router-link to="/user/login">登录页面</router-link>
				</el-menu-item>
				<el-menu-item index="2">
					<router-link to="/index/home">个人中心</router-link>
				</el-menu-item>
				<!-- <el-menu-item index="8">
					<router-link to={name:register}>注册</router-link>
				</el-menu-item> -->
				<el-submenu index="3">
					<template slot="title">我的工作台</template>
					<el-menu-item index="2-1">选项1</el-menu-item>
					<el-menu-item index="2-2">选项2</el-menu-item>
					<el-menu-item index="2-3">选项3</el-menu-item>
				</el-submenu>
				<el-menu-item index="5">订单管理</el-menu-item>
			</el-menu>
			<!-- 路由视图展示的地方 -->
			<router-view></router-view>

		</div>
		<script type="text/javascript">
			// 创建请求对象
			const http = axios.create({
				// 设置基本的url地址
				baseURL: 'http://api.keyou.site:8000',
				timeout: 1000,
				// 指定http状态码错误范围
				validateStatus: function(status) {
					return true
				}
			})

			// 添加请求拦截器
			http.interceptors.request.use(function(config) {

				// 获取sessionStorage中的token值，添加到请求信息中
				token = window.sessionStorage.getItem('token')
				if (token) {
					config.headers.Authorization = 'JWT ' + token
				}
				return config;
			});


			//1、 定义登录组件
			const Login = {
				template: `
				<div class="box">
					<el-card class="box-card">
						<h2 style="text-align: center;">用 户 登 录</h2>
						<el-form :model="form" label-width="80px">
							<el-form-item label="账号">
								<el-input v-model="form.username"></el-input>
							</el-form-item>
							<el-form-item label="密码">
								<el-input v-model="form.password" type='password'></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="login">点击登录</el-button>
							</el-form-item>
						</el-form>
					</el-card>
				</div>`,
				data() {
					return {
						form: {
							username: "",
							password: ""
						}
					}
				},
				methods: {
					async login() {
						//发送请求登录
						const response = await http.post('/user/login/', this.form)
						console.log(response.data)
						if (response.status === 200) {
							alert('登录成功！')
							// 提取响应中的token
							const token = response.data.token
							// 将token存储到sessionstorage中
							window.sessionStorage.setItem('token', token)
							// 使用编程式导航进行页面跳转
							this.$router.push('/index/home')

						} else {
							alert('登录失败！')
						}
					}
				}
			}
			// 2、定义项目首页组件
			const Home = {
				template: `<div class="box2">
				<el-button type="primary" @click='registerBtn'>注册页面</el-button>
				<el-button type="primary" @click='getProject'>获取项目列表</el-button>
				<el-table :data="projects" style="width: 100%">
					<el-table-column prop="id" label="ID" min-width="50">
					</el-table-column>
					<el-table-column prop="name" label="项目名" min-width="180">
					</el-table-column>
					<el-table-column prop="create_time" label="创建时间" min-width='200'>
					</el-table-column>
					<el-table-column prop="leader" label="负责人" min-width="180">
					</el-table-column>
					<el-table-column prop="testcases" label="用例数" min-width="180">
					</el-table-column>
					</el-table>
				</div>`,
				data() {
					return {
						projects: []
					}
				},
				methods: {
					// 发送请求获取所有的项目
					async getProject() {
						const response = await http.get('/projects/')
						console.log(response)
						if (response.status === 200) {

							this.projects = response.data.results
						}
					},
					registerBtn(){
						// 给路由命名之后  可以直接通过name指定名字进行跳转
						this.$router.push({name:'register'})
					}
				}
			}
			const Register = {
				template: `<h1>注册页面</h1>`,
				}
			// 2、 创建一个路由对象, 设置路由匹配规则
			const router = new VueRouter({
				routes: [{
						path: '/',
						// 进行重定向配置路由跳转
						redirect:'/index/home'
					}, {
						path: '/user/login',
						component: Login
					},
					{
						path: '/index/home',
						component: Home
					},
					{	name:"register",
						path: '/user/register',
						component: Register
					}
				]
			})


			var vm = new Vue({
				el: '#app',
				router: router
			})
		</script>




	</body>
</html>

demo6_子路由的配置.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 引入vue-router -->
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
		<style type="text/css">
			.box {
				width: 600px;
				height: 400px;
				margin: 100px auto;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 路由视图展示的地方 -->
			<router-view></router-view>
		</div>
		<script type="text/javascript">
			// 创建请求对象
			const http = axios.create({
				// 设置基本的url地址
				baseURL: 'http://api.keyou.site:8000',
				timeout: 1000,
				// 指定http状态码错误范围
				validateStatus: function(status) {
					return true
				}
			})
			
			// 添加请求拦截器
			http.interceptors.request.use(function(config) {
			
				// 获取sessionStorage中的token值，添加到请求信息中
				token = window.sessionStorage.getItem('token')
				if (token) {
					config.headers.Authorization = 'JWT ' + token
				}
				return config;
			});
			
			
			//1、 定义登录组件
			const Login = {
				template: `
				<div class="box">
					<el-card class="box-card">
						<h2 style="text-align: center;">用 户 登 录</h2>
						<el-form :model="form" label-width="80px">
							<el-form-item label="账号">
								<el-input v-model="form.username"></el-input>
							</el-form-item>
							<el-form-item label="密码">
								<el-input v-model="form.password" type='password'></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="login">点击登录</el-button>
							</el-form-item>
						</el-form>
					</el-card>
				</div>`,
				data() {
					return {
						form: {
							username: "",
							password: ""
						}
					}
				},
				methods: {
					async login() {
						//发送请求登录
						const response = await http.post('/user/login/', this.form)
						console.log(response.data)
						if (response.status === 200) {
							alert('登录成功！')
							// 提取响应中的token
							const token = response.data.token
							// 将token存储到sessionstorage中
							window.sessionStorage.setItem('token', token)
							// 使用编程式导航进行页面跳转
							this.$router.push('/')
			
						} else {
							alert('登录失败！')
						}
					}
				}
			}
			const Home = {
				template: `
				<div>
					<el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff"
					active-text-color="#ffd04b">
						<el-menu-item index="1">
							<router-link to="/index">index页面</router-link>
						</el-menu-item>
						<el-menu-item index="2">
							<router-link to="/project">项目页面</router-link>
						</el-menu-item>
						<el-menu-item index="3">
						<router-link to="/interface">接口页面</router-link></el-menu-item>
					</el-menu>
				<router-view></router-view>
				</div>	
			`
			}
			const index = {
				template: `<h1>index页面</h1>`,
			}
			const project = {
				template: `<h1>项目页面</h1>`,
			}
			const interface = {
				template: `<h1>接口页面</h1>`,
			}
			// 2、 创建一个路由对象, 设置路由匹配规则
			const router = new VueRouter({
				routes: [
					{
						path: '/',
						component: Home,
						// 定义子路由,子路由的模板内容，会展示在父路由模板中dinginess的router-view中
						children: [{
								path: '/index',
								component: index
							},
							{
								path: '/project',
								component: project
							},
							{
								path: '/interface',
								component: interface
							}

						]
					},{
						path:'/login',
						component:Login
					}
				]
			})


			var vm = new Vue({
				el: '#app',
				router: router
			})
		</script>


	</body>
</html>

20210705_vue-cli
demo1_路由参数传递之路径参数.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 引入vue-router -->
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>

		<div id="app">
			<button type="button">
				<router-link to='/user/9999/000'>用户</router-link>
			</button>
			<button type="button" @click="userBtn">
				按钮
			</button>
			<button type="button">
				<router-link :to="{name:'user',params:{id:777,key:999}}">用户页面</router-link>
			</button>


			<!-- 路由视图展示的地方 -->
			<router-view></router-view>
		</div>
		<script type="text/javascript">
			const Home = {
				template: `<h1>Home页面</h1>`,
			}
			const User = {
				template: `
					<div>
						<h1>User页面</h1>
						<h3>参数值为:{{$route.params.id}}</h3>
						<h3>参数值为:{{$route.params.key}}</h3>
					</div>`,
			}
			const router = new VueRouter({
				routes: [{
					path: '/',
					component: Home,
				}, {
					path: '/user/:id/:key',
					component: User,
					name: 'user'
				}]
			})

			var vm = new Vue({
				el: '#app',
				data: {},
				router: router,
				methods: {
					userBtn: function() {
						this.$router.push({
							name: 'user',
							params: {
								id: 888,
								key: 999
							}
						})
					}
				}
			})
		</script>

	</body>
</html>

demo2_路由参数传递之查询参数.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 引入vue-router -->
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>
	<body>

		<div id="app">
			<button type="button" @click="userBtn">
				按钮
			</button>
			<button type="button">
				<router-link :to="{name:'user',query:{name:777,age:999}}">用户页面</router-link>
			</button>


			<!-- 路由视图展示的地方 -->
			<router-view></router-view>
		</div>
		<script type="text/javascript">
			const Home = {
				template: `<h1>Home页面</h1>`,
			}
			const User = {
				template: `
					<div>
						<h1>User页面</h1>
						<h3>参数值为:{{$route.query.name}}</h3>
						<h3>参数值为:{{$route.query.age}}</h3>
					</div>`,
			}
			const router = new VueRouter({
				routes: [{
					path: '/',
					component: Home,
				}, {
					path: '/user',
					component: User,
					name: 'user'
				}]
			})
			var vm = new Vue({
				el: '#app',
				data: {},
				router: router,
				methods: {
					userBtn: function() {
						this.$router.push({
							name: 'user',
							query: {
								project: 888,
								id: 999
							}
						})
					}
				}
			})
		</script>

	</body>
</html>

demo3_路由导航守卫.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 引入vue-router -->
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
		<style type="text/css">
			.box {
				width: 600px;
				height: 400px;
				margin: 100px auto;
			}
		</style>


	</head>
	<body>
		<div id="app">
			<!-- 路由视图展示的地方 -->
			<router-view></router-view>
		</div>


		<script type="text/javascript">
			// 创建请求对象
			const http = axios.create({
				// 设置基本的url地址
				baseURL: 'http://api.keyou.site:8000',
				timeout: 1000,
				// 指定http状态码错误范围
				validateStatus: function(status) {
					return true
				}
			})

			// 添加请求拦截器
			http.interceptors.request.use(function(config) {

				// 获取sessionStorage中的token值，添加到请求信息中
				token = window.sessionStorage.getItem('token')
				if (token) {
					config.headers.Authorization = 'JWT ' + token
				}
				return config;
			});


			//1、 定义登录组件
			const Login = {
				template: `
				<div class="box">
					<el-card class="box-card">
						<h2 style="text-align: center;">用 户 登 录</h2>
						<el-form :model="form" label-width="80px">
							<el-form-item label="账号">
								<el-input v-model="form.username"></el-input>
							</el-form-item>
							<el-form-item label="密码">
								<el-input v-model="form.password" type='password'></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="login">点击登录</el-button>
							</el-form-item>
						</el-form>
					</el-card>
				</div>`,
				data() {
					return {
						form: {
							username: "",
							password: ""
						}
					}
				},
				methods: {
					async login() {
						//发送请求登录
						const response = await http.post('/user/login/', this.form)
						console.log(response.data)
						if (response.status === 200) {
							alert('登录成功！')
							// 提取响应中的token
							const token = response.data.token
							// 将token存储到sessionstorage中
							window.sessionStorage.setItem('token', token)
							// 使用编程式导航进行页面跳转
							this.$router.push('/home')

						} else {
							alert('登录失败！')
						}
					}
				}
			}
			// 2、定义项目首页组件
			const Home = {
				template: `<div class="box2">
				<el-button type="primary" @click='getProject'>获取项目列表</el-button>
				<el-table :data="projects" style="width: 100%">
					<el-table-column prop="id" label="ID" min-width="50">
					</el-table-column>
					<el-table-column prop="name" label="项目名" min-width="180">
					</el-table-column>
					<el-table-column prop="create_time" label="创建时间" min-width='200'>
					</el-table-column>
					<el-table-column prop="leader" label="负责人" min-width="180">
					</el-table-column>
					<el-table-column prop="testcases" label="用例数" min-width="180">
					</el-table-column>
					</el-table>
				</div>`,
				data() {
					return {
						projects: []
					}
				},
				methods: {
					// 发送请求获取所有的项目
					async getProject() {
						const response = await http.get('/projects/')
						console.log(response)
						if (response.status === 200) {

							this.projects = response.data.results
						}
					}
				}
			}

			// 2、 创建一个路由对象, 设置路由匹配规则
			const router = new VueRouter({
				routes: [{
						path: '/login',
						component: Login
					},
					{
						path: '/',
						component: Home
					},
					{
						path: '/home',
						component: Home
					}
				]
			})
			// 定义路由导航守卫
			// router.beforeEach((to, form, next) => {
			// 	console.log('to',to)
			// 	console.log('form',form)
			// 	console.log('next',next)
			// 	next()
			// })
			// router.beforeEach((to, form, next) => {
			// 	// 判断访问的是否是登录这个页面
			// 	if(to.path ==='/login'){
			// 		next()
			// 	}else{
			// 		// 如果不是登录页面，判断之前是否登录过，
			// 		const token = window.sessionStorage.getItem('token')
			// 		if (token){
			// 			 next()
			// 		}else{
			// 			next('./login')
			// 		}
			// 	}
			// })
			router.beforeEach((to, form, next) => {
				// 判断访问的是否是登录这个页面				
				// if(to.path=='/login'|| window.sessionStorage.getItem('token')){
				// 	next()
				// }else{
				// 	next('/login')
				// }
				if (to.path == '/login' || window.sessionStorage.getItem('token')) return next()
				next('/login')

			})


			// 3、 将路由对象挂载到vue实例中
			const app = new Vue({
				el: '#app',
				router: router
			})
		</script>






	</body>
</html>

何日才能成为大神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
00100

20210621_vue的基本语法demo1_js操作页面元素.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .title{ color: red; font-size: 30px; } </style> &lt
复制链接

扫一扫