HTML基础四-VUE
一、VUE
VUE官网:https://cn.vuejs.org/v2/guide/
1.1 Vue简介
VUE与JS的区别
VUE在JS的基础上进行了优化
增加VUE最强大的特点,对数据操作特别的友好
(1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化
不失优雅
Vue虽然是一个比较轻量级的框架,简单轻量的同时还非常的人性化,其提供的API也是非常的容易理解,同时也提供了一些很便捷的指令和属性。
1.2 Vue基础写法
1、一个最基础的实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--模板语言--> {{msg}} </div> <!--引用外网js文件--> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> // 最基础实例Vue的方法 var vm = new Vue({ // 元素 el:'#app', // 引用上面APP属性 // 存储数据 data:{ msg:'hi vue!' } // 对数据操作特别友好 }) </script> </body> </html>
2、存储方法methods
2.1 模板语言-更换数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--模板语言--> <span>{{msg}}</span> <input type="button" v-on:click="change" value="修改"> </div> <!--引用外网js文件--> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> // 最基础实例Vue的方法 var vm = new Vue({ // 元素 el: '#app', data: { msg: 'hi vue!' }, // 对数据操作特别友好 methods: { change() { this.msg = 'hi vue! day1' }, } }) </script> </body> </html>
2.3 模板语言-三元运算
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--模板语言--> <span>{{msg}}</span> <div>{{flag?'男生':'女生'}}</div> 三元运算 <input type="button" v-on:click="change" value="修改"> </div> <!--引用外网js文件--> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> // 最基础实例Vue的方法 var vm = new Vue({ // 元素 el: '#app', data: { msg: 'hi vue!', flag:true }, // 对数据操作特别友好 methods: { change() { this.flag = false; this.msg = 'hi vue! day1' }, } }) </script> </body> </html>
2.3 模板语言-标签跳转
v-on:用于绑定事件
v-bind:用于给标签的属性绑定变量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--模板语言--> <a v-bind:href="a_href">跳转</a> <input type="button" v-on:click="change" value="修改"> <!--flag为真 跳百度 为假跳博客--> </div> <!--引用外网js文件--> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> // 最基础实例Vue的方法 var vm = new Vue({ // 元素 el: '#app', data: { msg: 'hi vue!', flag:true, num:1, a_href:'http://www.baidu.com' }, // 对数据操作特别友好 methods: { change() { this.a_href = 'https://www.cnblogs.com/zibinchen/' }, } }) </script> </body> </html>
<input type="button" v-on:click="change" value="修改">
简写方式--> <input type="button" @click="change" value="修改">
<a v-bind:href="a_href">跳转</a>
简写方式-->
<a :href="a_href">跳转</a>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--模板语言--> <a :href="a_href">跳转</a> <input type="button" @click="change" value="修改"> <!--flag为真 跳百度 为假跳博客--> </div> <!--引用外网js文件--> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> // 最基础实例Vue的方法 var vm = new Vue({ // 元素 el: '#app', data: { msg: 'hi vue!', flag:true, num:1, a_href:'http://www.baidu.com' }, // 对数据操作特别友好 methods: { change() { this.a_href = 'https://www.cnblogs.com/zibinchen/' }, } }) </script> </body> </html>
1.3 Vue模板条件判断
<span v-if="number==10086">移动v-if</span><span v-else-if="number==10010">联通v-else-if</span><span v-else>电信v-else</span> <span v-show="number==10086">移动-v-show</span><span v-show="number==100861">111111</span>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>摩羯座</title> </head> <body> <div id="app"> <!--模板语言--> <span v-if="number==10086">移动v-if</span> <span v-else-if="number==10010">联通v-else-if</span> <span v-else>电信v-else</span> <span v-show="number==10086">移动-v-show</span> <span v-show="number==100861">111111</span> </div> <!--引用外网js文件--> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> // 最基础实例Vue的方法 var vm = new Vue({ // 元素 el: '#app', data: { msg: 'hi vue!', flag:true, num:1, a_href:'http://www.baidu.com', number:10086 }, // 对数据操作特别友好 methods: { change() { this.a_href = 'https://www.cnblogs.com/zibinchen/' }, } }) </script> </body> </html>
1.4 Vue里for循环
循环写在哪个标签上,就生成哪个标签1、列循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>摩羯座</title> </head> <body> <div id="app"> <!--循环写在哪个标签上,就生成哪个标签--> <div v-for="(item,index) in games">{{item}}--{{index}}</div> </div> <!--引用外网js文件--> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> // 最基础实例Vue的方法 var vm = new Vue({ // 元素 el: '#app', data: { msg: 'hi vue!', flag:true, num:1, a_href:'http://www.baidu.com', number:10086, games:['绝地求生','英雄联盟','王者荣耀'] }, // 对数据操作特别友好 methods: { change() { this.a_href = 'https://www.cnblogs.com/zibinchen/' }, } }) </script> </body> </html>
2、字典循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>摩羯座</title> </head> <body> <div id="app"> <!--循环写在哪个标签上,就生成哪个标签--> <div v-for="(item,key) in dictgames">{{item}}--{{key}}</div> </div> <!--引用外网js文件--> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> // 最基础实例Vue的方法 var vm = new Vue({ // 元素 el: '#app', data: { msg: 'hi vue!', flag:true, num:1, a_href:'http://www.baidu.com', number:10086, games:['绝地求生','英雄联盟','王者荣耀'], dictgames:{'name':'英雄联盟','company':'蓝洞'} }, // 对数据操作特别友好 methods: { change() { this.a_href = 'https://www.cnblogs.com/zibinchen/' }, } }) </script> </body> </html>
1.5 双向数据绑定
1、v-model双向数据绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>摩羯座</title> </head> <body> <div id="app"> <span>span-->{{name}}</span><br> <!--v-model 双向数据绑定--> <input type="text" v-model="name"> <input type="button" @click="change" value="修改"> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', data:{ "name":'wdc' }, methods:{ change(){ this.name = ''; } } }) </script> </body> </html>
2、radio【单选】双向数据绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <span>性别-->{{genderValue}}</span><br> <input type="radio" value="1" name="gender" v-model="genderValue">男 <input type="radio" value="2" name="gender" v-model="genderValue">女 </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', data:{ name:'', passwd:'', genderValue:2 }, methods:{ change(){ this.name = ''; } } }) </script> </body> </html>
3、checkbox+v-model【多选】双向数据绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>摩羯座</title> </head> <body> <div id="app"> <span>请选择你喜欢的电影-->{{movies}}</span><br> <input type="checkbox" value="1" v-model="movies">变形金刚 <input type="checkbox" value="2" v-model="movies">复仇者联盟 <input type="checkbox" value="3" v-model="movies">飞驰人生 </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', data:{ name:'', passwd:'', genderValue:2, movies:[] }, methods:{ change(){ this.name = ''; } } }) </script> </body> </html>
4、v-model【下拉框】双向数据绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>摩羯座</title> </head> <body> <div id="app"> <span>请选择你喜欢的电影-->{{selectMovie}}</span><br> <select v-model="selectMovie"> <option disabled value="">请选择</option> <option value="变形金刚">变形金刚</option> <option value="复仇者联盟">复仇者联盟</option> <option value="飞驰人生">飞驰人生</option> </select> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', data:{ name:'', passwd:'', genderValue:2, movies:[], selectMovie:'复仇者联盟' }, methods:{ change(){ this.name = ''; } } }) </script> </body> </html>
5、通过枚举值取变量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>摩羯座</title> </head> <body> <div id="app"> <span>请选择你喜欢的电影-->{{selectMovie}}</span><br> <select v-model="selectMovie"> <option v-for="option in options" :value="option.id">{{option.name}}</option> </select> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', data:{ name:'', passwd:'', genderValue:2, movies:[2,3], selectMovie:'', options:[{"name":"变形金刚","id":1},{"name":"复仇者联盟","id":2},{"name":"飞驰人生","id":3}] }, // 枚举: 变形金刚==1,复仇者联盟==2,飞驰人生==3 methods:{ change(){ this.name = ''; } } }) </script> </body> </html>
1.6 Filters添加参数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>摩羯座</title> </head> <body> <div id="app"> <span>{{age|changeAge('wdc','真')}}</span> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', data:{ name:'', passwd:'', genderValue:2, movies:[2,3], selectMovie:'', options:[{"name":"变形金刚","id":1},{"name":"复仇者联盟","id":2},{"name":"飞驰人生","id":3}], age:18 }, methods: { change() { this.name = ''; } }, filters:{ changeAge(age,name,f){ if (age==18){ return name+f+'年轻' } } } }) </script> </body> </html>
二、生命周期 axios
在SPA的项目开发过程中,前端和后端进行数据交互有很多种方式,这里说常用的axios的方式,基本类似JQ的Ajax。
如果想在项目中使用axios,首先要进行安装。并在main.js中进行注册。
安装并注册完成后,就可以在组件中使用了。比如我们通过钩子函数(mounted)当Vue实例和页面进行绑定后就开始请求我们的数据。
2.1 钩子函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <span>{{name}}</span> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', data:{ name:'', }, methods:{ }, filters:{ }, // 钩子函数 created:function () { //数据初始化后 //假设 我们限制有一个列表的页面,列表的数据就可以通过created 进行请求 this.name='wdc'; console.log('created') }, // mounted:function () { // //标签和数据相结合前调用了mounted // console.log('mounted') // } }) </script> </body> </html>
2.2 使用axios发送请求
1、启动mock.py
import flask from flask_cors import CORS server = flask.Flask(__name__) CORS(server, supports_credentials=True) server.config['JSON_AS_ASCII'] = False @server.route("/api/project", methods=["get", "put", "post", "delete"]) def project(): print(flask.request.args) if flask.request.method == "GET": data = {"code": 0, "msg": "操作成功", "data": [ {"id": 2, "create_time": "2019-11-13 10:42:38", "name": "测试本机项目", "desc": "测试本机项目", "user": "dsx", "host": "http://127.0.0.1:8000"}, {"id": 1, "create_time": "2019-11-12 22:02:04", "name": "金桔宝", "desc": "金桔宝", "user": "dsx", "host": "127.0.0.1:8080"}], "count": 2} else: data = { "code": 0, "msg": "成功" } return flask.jsonify(data) @server.route("/api/parameter", methods=["get", "put", "post", "delete"]) def parameter(): print(flask.request.args) if flask.request.method == "GET": data = {"code": 0, "msg": "操作成功", "data": [{"id": 5, "name": "username", "desc": "用户名", "value": "dsx"}, {"}], "count": 2} else: data = { "code": 0, "msg": "成功" } return flask.jsonify(data) @server.route("/api/interface", methods=["get", "put", "post", "delete"]) def interface(): print(flask.request.values) if flask.request.method == "GET": data = {"code": 0, "msg": "操作成功", "data": [ {"id": 4, "create_time": "2019-11-13 12:21:48", "update_time": "2019-11-13 12:21:48", "name": "获取参数接口", "uri": "/api/parameter", "params": None, "headers": "{\"token\":\"${token}\"}", "project_id": 2, "user": "dsx", "project": "测试本机项目"}, {"id": 3, "create_time": "2019-11-13 10:49:04", "update_time": "2019-11-13 10:49:04", "name": "项目接口", "uri": "/api/project", "params": None, "headers": "{\"token\":\"${token}\"}", "project_id": 2, "user": "dsx", "project": "测试本机项目"}, {"id": 2, "create_time": "2019-11-13 10:43:20", "update_time": "2019-11-13 10:43:20", "name": "登录接口", "uri": "/api/login", "params": None, "headers": None, "project_id": 2, "user": "dsx", "project": "测试本机项目"}, {"id": 1, "create_time": "2019-11-12 22:02:35", "update_time": "2019-11-12 22:02:35", "name": "接口名称", "uri": "/api/login", "params": "{\"key\":\"1\"}", "headers": "{\"key1\":\"value1\"}", "project_id": 1, "user": "dsx", "project": "金桔宝"}], "count": 4} else: data = { "code": 0, "msg": "成功" } return flask.jsonify(data) @server.route("/api/case_collection", methods=["get", "put", "post", "delete"]) def case_collection(): print(flask.request.values) if flask.request.method == "GET": data = {"code": 0, "msg": "操作成功", "data": [ {"id": 1, "create_time": "2019-11-13 12:06:51", "update_time": "2019-11-13 12:06:51", "name": "本机集合13", "desc": "本机集合", "project_id": 2, "user": "dsx", "report_batch": "63640cae-deef-49d6-8d50-30edff146705", "status": 3, "project_name": "测试本机项目", "case_count": 3}, {"id": 1, "create_time": "2019-11-13 12:06:51", "update_time": "2019-11-13 12:06:51", "name": "本机集合13", "desc": "本机集合", "project_id": 2, "user": "dsx", "report_batch": "63640cae-deef-49d6-8d50-30edff146705", "status": 3, "project_name": "测试本机项目", "case_count": 3}, {"id": 1, "create_time": "2019-11-13 12:06:51", "update_time": "2019-11-13 12:06:51", "name": "本机集合13", "desc": "本机集合", "project_id": 2, "user": "dsx", "report_batch": "63640cae-deef-49d6-8d50-30edff146705", "status": 3, "project_name": "测试本机项目", "case_count": 3}, {"id": 1, "create_time": "2019-11-13 12:06:51", "update_time": "2019-11-13 12:06:51", "name": "本机集合13", "desc": "本机集合", "project_id": 2, "user": "dsx", "report_batch": "63640cae-deef-49d6-8d50-30edff146705", "status": 3, "project_name": "测试本机项目", "case_count": 3}, {"id": 1, "create_time": "2019-11-13 12:06:51", "update_time": "2019-11-13 12:06:51", "name": "本机集合13", "desc": "本机集合", "project_id": 2, "user": "dsx", "report_batch": "63640cae-deef-49d6-8d50-30edff146705", "status": 3, "project_name": "测试本机项目", "case_count": 3}, {"id": 1, "create_time": "2019-11-13 12:06:51", "update_time": "2019-11-13 12:06:51", "name": "本机集合13", "desc": "本机集合", "project_id": 2, "user": "dsx", "report_batch": "63640cae-deef-49d6-8d50-30edff146705", "status": 3, "project_name": "测试本机项目", "case_count": 3}, {"id": 1, "create_time": "2019-11-13 12:06:51", "update_time": "2019-11-13 12:06:51", "name": "本机集合13", "desc": "本机集合", "project_id": 2, "user": "dsx", "report_batch": "63640cae-deef-49d6-8d50-30edff146705", "status": 3, "project_name": "测试本机项目", "case_count": 3}, {"id": 1, "create_time": "2019-11-13 12:06:51", "update_time": "2019-11-13 12:06:51", "name": "本机集合13", "desc": "本机集合", "project_id": 2, "user": "dsx", "report_batch": "63640cae-deef-49d6-8d50-30edff146705", "status": 3, "project_name": "测试本机项目", "case_count": 3}, {"id": 1, "create_time": "2019-11-13 12:06:51", "update_time": "2019-11-13 12:06:51", "name": "本机集合13", "desc": "本机集合", "project_id": 2, "user": "dsx", "report_batch": "63640cae-deef-49d6-8d50-30edff146705", "status": 3, "project_name": "测试本机项目", "case_count": 3}], "count": 9} else: data = { "code": 0, "msg": "成功" } return flask.jsonify(data) @server.route("/api/run", methods=["post"]) def case_run(): data = { "code": 0, "msg": "成功" } return flask.jsonify(data) @server.route("/api/run_collection", methods=["post"]) def run_collection(): data = { "code": 0, "msg": "成功" } return flask.jsonify(data) @server.route("/api/case", methods=["get", "put", "post", "delete"]) def case(): print(flask.request.values) if flask.request.method == "GET": data = {"code": 0, "msg": "操作成功", "data": [ {"id": 8, "create_time": "2019-11-13 17:01:16", "update_time": "2019-11-13 17:01:16", "title": "测试", ", "params": None, "headers": None, "is_json": False, "json": None, "status": 2, "report_batch": None, "project_name": "测试本机项目", "interface_name": "/api/parameter", "rely_case": []}, {"id": 6, "create_time": "2019-11-13 15:40:43", "update_time": "2019-11-13 15:40:43", "title": "创建参数", ", "params": "{\"name\":\"测试\",\"desc\":\"测试\",\"value\":\"123\"}", "headers": None, "is_json": False, "json": None, "status": 999, "report_batch": "71cd8d7d-f18a-46b6-b871-bbc159863883", "project_name": "测试本机项目", "interface_name": "/api/parameter", "rely_case": []}, {"id": 5, "create_time": "2019-11-13 12:33:07", "update_time": "2019-11-13 12:33:07", "title": "参数请求", "project_id": 2, "interface_id": 4, "user": "dsx", "method": 2, "cache_field": "id", "check": "code=0", "params": "{\"project_id\":\"2\"}", "headers": None, "is_json": False, "json": None, "status": 1, "report_batch": "cf9c57e5-eba0-4be9-b0c2-6d08002d2130", "project_name": "测试本机项目", "interface_name": "/api/parameter", "rely_case": [{"id": 4, "title": "项目请求"}]}, {"id": 4, "create_time": "2019-11-13 10:49:39", "update_time": "2019-11-13 10:49:39", "title": "项目请求", "project_id": 2, "interface_id": 3, "user": "dsx", "method": 2, "cache_field": None, "check": "code=0", "params": None, "headers": None, "is_json": False, "json": None, "status": 1, "report_batch": "c1440343-89aa-46a1-8fe8-7740b35ce854", "project_name": "测试本机项目", "interface_name": "/api/project", "rely_case": [{"id": 3, "title": "本机登录"}]}, {"id": 3, "create_time": "2019-11-13 10:44:33", "update_time": "2019-11-13 10:44:33", "title": "本机登录", "project_id": 2, "interface_id": 2, "user": "dsx", "method": 1, "cache_field": "token", "check": "code=0", "params": "{\"username\":\"17610105018\",\"password\":\"123456\"}", "headers": None, "is_json": False, "json": None, "status": 1, "report_batch": "50154aa1-335c-42f8-a224-f7d7819eae35", "project_name": "测试本机项目", "interface_name": "/api/login", "rely_case": []}, {"id": 2, "create_time": "2019-11-13 00:11:03", "update_time": "2019-11-13 00:11:03", "title": "test2", ", "params": None, "headers": None, "is_json": False, "json": None, "status": 2, "report_batch": None, "project_name": "金桔宝", "interface_name": "/api/login", "rely_case": [{"id": 1, "title": "登录用例"}]}, {"id": 1, "create_time": "2019-11-12 22:03:13", "update_time": "2019-11-12 22:03:13", "title": "登录用例", ", "params": None, "headers": None, "is_json": False, "json": None, "status": 2, "report_batch": None, "project_name": "金桔宝", "interface_name": "/api/login", "rely_case": []}], "count": 7} else: data = { "code": 0, "msg": "成功" } return flask.jsonify(data) @server.route("/api/join_case", methods=["post", "get"]) def join_case(): print(flask.request.values) if flask.request.method == "GET": data = {"code": 0, "msg": "操作成功", "data": { "all_case": [{"id": 8, "title": "测试"}, {"id": 6, "title": "创建参数"}, {"id": 5, "title": "参数请求"}, {"id": 4, "title": "项目请求"}, {"id": 3, "title": "本机登录"}], "join_case": [5, 4, 3]}} else: data = { "code": 0, "msg": "成功" } return flask.jsonify(data) # @server.route("/api/case_response", methods=["get"]) # def case_response(): # print(flask.request.values) # if flask.request.method == "GET": # # data = { # "code": 0, # "msg": "成功", # "data": { # "all_case": [{"id": 1, "name": "登陆用例", "create_time": "2019-07-21 18:01:02", # "update_time": "2019-07-21 18:01:02", # "project_name": "牛牛测试项目1", "response": "回归流程使用", "case_count": 5, # "report_id": 1, # "report_name": "2019-08-06测试报告", "user": "牛牛"}, # {"id": 2, "name": "登陆用例1", "create_time": "2019-07-21 18:01:02", # "update_time": "2019-07-21 18:01:02", # "project_name": "牛牛测试项目2", "project_id": 2, "desc": "冒烟测试使用", "case_count": 4, # "report_id": 2, # "report_name": "2019-08-06测试报告", "user": "牛牛"}, # {"id": 3, "name": "登陆用例2", "create_time": "2019-07-21 18:01:02", # "update_time": "2019-07-21 18:01:02", # "project_name": "牛牛测试项目3", "project_id": 3, "desc": "支付流程", "case_count": 3, # "report_id": 3, # "report_name": "2019-08-06测试报告", "user": "牛牛"}], # "join_case": [1] # # } # } # else: # data = { # "code": 0, # "msg": "成功" # } # return flask.jsonify(data) @server.route("/api/login", methods=["post"]) def login(): data = { "code": 0, "msg": "成功", "token": "token1234355", "user": "牛牛" } return flask.jsonify(data) @server.route("/api/logout", methods=['get']) def logout(): data = { "code": 0, "msg": "成功" } return flask.jsonify(data) @server.route("/api/report", methods=['get']) def report(): data = {"code": 0, "msg": "操作成功", "data": [ {"id": 145, "create_time": "2019-11-23 12:53:34", "update_time": "2019-11-23 12:53:34", "url": "http://127.0.0.1:8000/api/parameter", "project": 2, "title": "参数请求", "params": "{\"project_id\": \"2\"}", "response": "{'code': 0, 'msg': '操作成功', 'data': [{'id': 5, 'name': 'username', 'desc': '用户名', 'value': 'dsx'}, {'id': 4, 'name': '测试', 'desc': '测试', 'value': '123'}], 'count': 2}", "case": 5, "case_collection": "本机集合13", "batch": "111e8fa4-4407-44cf-97f7-ee9a2cd1b9b2", "reason": "验证通过", "duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx", "run_time": "2019-11-23 12:53:34", "check": "code=0", "method": "GET"}, {"id": 144, "create_time": "2019-11-23 12:53:32", "update_time": "2019-11-23 12:53:32", "url": "http://127.0.0.1:8000/api/project", "project": 2, "title": "项目请求", "params": "{}", "response": "{'code': 0, 'msg': '操作成功', 'data': [{'id': 2, 'create_time': '2019-11-13 10:42:38', 'name': '测试本机项目', 'desc': '测试本机项目', 'user': 'dsx', 'host': 'http://127.0.0.1:8000'}, {'id': 1, 'create_time': '2019-11-12 22:02:04', 'name': '金桔宝', 'desc': '金桔宝', 'user': 'dsx', 'host': '127.0.0.1:8080'}], 'count': 2}", "case": 4, "case_collection": "本机集合13", "batch": "111e8fa4-4407-44cf-97f7-ee9a2cd1b9b2", "reason": "验证通过", "duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx", "run_time": "2019-11-23 12:53:32", "check": "code=0", "method": "GET"}, {"id": 143, "create_time": "2019-11-23 12:53:31", "update_time": "2019-11-23 12:53:31", "url": "http://127.0.0.1:8000/api/login", "project": 2, "title": "本机登录", "params": "{\"username\": \"17610105018\", \"password\": \"123456\"}", "response": "{'code': 0, 'msg': '操作成功', 'token': '783d2c6ded55ca4f5bb865923ff29cbc', 'user': 'dsx', 'user_id': 1}", "case": 3, "case_collection": "本机集合13", "batch": "111e8fa4-4407-44cf-97f7-ee9a2cd1b9b2", "reason": "验证通过", "duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx", "run_time": "2019-11-23 12:53:31", "check": "code=0", "method": "POST"}, {"id": 142, "create_time": "2019-11-23 12:53:09", "update_time": "2019-11-23 12:53:09", "url": "http://127.0.0.1:8000/api/parameter", "project": 2, "title": "创建参数", "params": "{\"name\": \"\\u6d4b\\u8bd5\", \"desc\": \"\\u6d4b\\u8bd5\", \"value\": \"123\"}", "response": "{'code': -1, 'msg': 'name具有 参数名称 的 全局参数表 已存在。'}", "case": 6, "case_collection": "单用例运行", "batch": "71cd8d7d-f18a-46b6-b871-bbc159863883", "reason": "校验点写法出错", "duration": 100, "status": 999, ", "method": "POST"}, {"id": 141, "create_time": "2019-11-23 12:53:04", "update_time": "2019-11-23 12:53:04", "url": "http://127.0.0.1:8000/api/login", "project": 2, "title": "本机登录", "params": "{\"username\": \"17610105018\", \"password\": \"123456\"}", "response": "{'code': 0, 'msg': '操作成功', 'token': 'cc0c3eb41b9b6be9b01d726523dcf1b9', 'user': 'dsx', 'user_id': 1}", "case": 3, "case_collection": "单用例运行", "batch": "50154aa1-335c-42f8-a224-f7d7819eae35", "reason": "验证通过", "duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx", "run_time": "2019-11-23 12:53:04", "check": "code=0", "method": "POST"}, {"id": 140, "create_time": "2019-11-23 12:51:34", "update_time": "2019-11-23 12:51:34", "url": "http://127.0.0.1:8000/api/login", "project": 2, "title": "本机登录", "params": "{\"username\": \"17610105018\", \"password\": \"123456\"}", "response": "{'code': 0, 'msg': '操作成功', 'token': '8d2bba744a35f76b0ea99ccc296feff4', 'user': 'dsx', 'user_id': 1}", "case": 3, "case_collection": "单用例运行", "batch": "999c5990-6bd3-406f-8750-3b1b9a16ec50", "reason": "验证通过", "duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx", "run_time": "2019-11-23 12:51:34", "check": "code=0", "method": "POST"}, {"id": 139, "create_time": "2019-11-23 12:50:51", "update_time": "2019-11-23 12:50:51", "url": "http://127.0.0.1:8080/api/login", "project": 2, "title": "本机登录", "params": "{\"username\": \"17610105018\", \"password\": \"123456\"}", "response": "{'msg': \"请求接口出错,http://127.0.0.1:8080/api/login,HTTPConnectionPool(host='127.0.0.1', port=8080): Max retries exceeded with url: /api/login (Caused by NewConnectionError('<urllib3.connection.HTTPConnection object at 0x10555d860>: Failed to establish a new connection: [Errno 61] Connection refused',))\"}", "case": 3, "case_collection": "单用例运行", "batch": "753a6a27-98d7-42c6-b244-8096b53ce38c", "reason": "code和预期结果不一致,预期结果【0】,实际结果【空】,运算符【=】", "duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx", "run_time": "2019-11-23 12:50:51", "check": "code=0", "method": "POST"}, {"id": 138, "create_time": "2019-11-15 16:21:56", "update_time": "2019-11-15 16:21:56", "url": "http://127.0.0.1:8080/api/project", "project": 2, "title": "项目请求", "params": "{}", "response": "{'code': 0, 'msg': '操作成功', 'data': [{'id': 2, 'create_time': '2019-11-13 10:42:38', 'name': '测试本机项目', 'desc': '测试本机项目', 'user': 'dsx', 'host': 'http://127.0.0.1:8080'}, {'id': 1, 'create_time': '2019-11-12 22:02:04', 'name': '金桔宝', 'desc': '金桔宝', 'user': 'dsx', 'host': '127.0.0.1:8080'}], 'count': 2}", "case": 4, "case_collection": "单用例运行", "batch": "c1440343-89aa-46a1-8fe8-7740b35ce854", "reason": "验证通过", "duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx", "run_time": "2019-11-15 16:21:56", "check": "code=0", "method": "GET"}, {"id": 137, "create_time": "2019-11-15 16:21:54", "update_time": "2019-11-15 16:21:54", "url": "http://127.0.0.1:8080/api/login", "project": 2, "title": "本机登录", "params": "{\"username\": \"17610105018\", \"password\": \"123456\"}", "response": "{'code': 0, 'msg': '操作成功', 'token': '1c9d51ccae8e7606ab5cc2c22a48650e', 'user': 'dsx', 'user_id': 1}", "case": 3, "case_collection": "单用例运行", "batch": "c1440343-89aa-46a1-8fe8-7740b35ce854", "reason": "验证通过", "duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx", "run_time": "2019-11-15 16:21:54", "check": "code=0", "method": "POST"}, {"id": 136, "create_time": "2019-11-15 16:21:42", "update_time": "2019-11-15 16:21:42", "url": "http://127.0.0.1:8080/api/parameter", "project": 2, "title": "创建参数", "params": "{\"name\": \"\\u6d4b\\u8bd5\", \"desc\": \"\\u6d4b\\u8bd5\", \"value\": \"123\"}", "response": "{'code': -2, 'msg': '请登录!'}", "case": 6, "case_collection": "单用例运行", "batch": "359810f9-9e16-40a2-81b4-e010c4db9e44", "reason": "校验点写法出错", "duration": 100, "status": 999, ", "method": "POST"}, {"id": 135, "create_time": "2019-11-13 18:15:37", "update_time": "2019-11-13 18:15:37", "url": "http://127.0.0.1:8080/api/parameter", "project": 2, "title": "创建参数", "params": "{\"name\": \"\\u6d4b\\u8bd5\", \"desc\": \"\\u6d4b\\u8bd5\", \"value\": \"123\"}", "response": "{'code': -1, 'msg': 'name具有 参数名称 的 全局参数表 已存在。'}", "case": 6, "case_collection": "单用例运行", "batch": "b2a61952-88ed-43d4-b43a-b847a69ba82b", "reason": "校验点写法出错", "duration": 100, "status": 999, "user": 1, "project_name": "测试本机项目", ", "method": "POST"}, {"id": 134, "create_time": "2019-11-13 18:14:55", "update_time": "2019-11-13 18:14:55", "url": "http://127.0.0.1:8080/api/parameter", "project": 2, "title": "创建参数", "params": "{\"name\": \"\\u6d4b\\u8bd5\", \"desc\": \"\\u6d4b\\u8bd5\", \"value\": \"123\"}", "response": "{'code': -1, 'msg': 'name具有 参数名称 的 全局参数表 已存在。'}", "case": 6, "case_collection": "单用例运行", "batch": "42677205-d36a-4792-8b17-7ca71960e4bc", "reason": "校验点写法出错", "duration": 100, "status": 999, ", "method": "POST"}, {"id": 133, "create_time": "2019-11-13 18:12:10", "update_time": "2019-11-13 18:12:10", "url": "http://127.0.0.1:8080/api/parameter", "project": 2, "title": "创建参数", "params": "{\"name\": \"\\u6d4b\\u8bd5\", \"desc\": \"\\u6d4b\\u8bd5\", \"value\": \"123\"}", "response": "{'code': -1, 'msg': 'name具有 参数名称 的 全局参数表 已存在。'}", "case": 6, "case_collection": "单用例运行", "batch": "c19a3b82-e1f7-4bb4-b87f-4520c1590073", "reason": "验证通过", "duration": 100, "status": 999, "user": 1, "project_name": "测试本机项目", ", "method": "POST"}, {"id": 132, "create_time": "2019-11-13 17:29:58", "update_time": "2019-11-13 17:29:58", "url": "http://127.0.0.1:8080/api/parameter", "project": 2, "title": "参数请求", "params": "{\"project_id\": \"2\"}", "response": "{'code': 0, 'msg': '操作成功', 'data': [{'id': 4, 'name': '测试', 'desc': '测试', 'value': '123'}], 'count': 1}", "case": 5, "case_collection": "单用例运行", "batch": "cf9c57e5-eba0-4be9-b0c2-6d08002d2130", "reason": "验证通过", "duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx", "run_time": "2019-11-13 17:29:58", "check": "code=0", "method": "GET"}, {"id": 131, "create_time": "2019-11-13 17:29:57", "update_time": "2019-11-13 17:29:57", "url": "http://127.0.0.1:8080/api/project", "project": 2, "title": "项目请求", "params": "{}", "response": "{'code': 0, 'msg': '操作成功', 'data': [{'id': 2, 'create_time': '2019-11-13 10:42:38', 'name': '测试本机项目', 'desc': '测试本机项目', 'user': 'dsx', 'host': 'http://127.0.0.1:8080'}, {'id': 1, 'create_time': '2019-11-12 22:02:04', 'name': '金桔宝', 'desc': '金桔宝', 'user': 'dsx', 'host': '127.0.0.1:8080'}], 'count': 2}", "case": 4, "case_collection": "单用例运行", "batch": "cf9c57e5-eba0-4be9-b0c2-6d08002d2130", "reason": "验证通过", "duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx", "run_time": "2019-11-13 17:29:57", "check": "code=0", "method": "GET"}, {"id": 130, "create_time": "2019-11-13 17:29:55", "update_time": "2019-11-13 17:29:55", "url": "http://127.0.0.1:8080/api/login", "project": 2, "title": "本机登录", "params": "{\"username\": \"17610105018\", \"password\": \"123456\"}", "response": "{'code': 0, 'msg': '操作成功', 'token': 'd91da70a2394669cdc0e7bef4a5ec222', 'user': 'dsx', 'user_id': 1}", "case": 3, "case_collection": "单用例运行", "batch": "cf9c57e5-eba0-4be9-b0c2-6d08002d2130", "reason": "验证通过", "duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx", "run_time": "2019-11-13 17:29:55", "check": "code=0", "method": "POST"}, {"id": 129, "create_time": "2019-11-13 17:29:28", "update_time": "2019-11-13 17:29:28", "url": "http://127.0.0.1:8080/api/project", "project": 2, "title": "项目请求", "params": "{}", "response": "{'code': 0, 'msg': '操作成功', 'data': [{'id': 2, 'create_time': '2019-11-13 10:42:38', 'name': '测试本机项目', 'desc': '测试本机项目', 'user': 'dsx', 'host': 'http://127.0.0.1:8080'}, {'id': 1, 'create_time': '2019-11-12 22:02:04', 'name': '金桔宝', 'desc': '金桔宝', 'user': 'dsx', 'host': '127.0.0.1:8080'}], 'count': 2}", "case": 4, "case_collection": "单用例运行", "batch": "1d10fdaa-698b-4fef-a8a8-59e53576f5ae", "reason": "验证通过", "duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx", "run_time": "2019-11-13 17:29:28", "check": "code=0", "method": "GET"}, {"id": 128, "create_time": "2019-11-13 17:29:27", "update_time": "2019-11-13 17:29:27", "url": "http://127.0.0.1:8080/api/login", "project": 2, "title": "本机登录", "params": "{\"username\": \"17610105018\", \"password\": \"123456\"}", "response": "{'code': 0, 'msg': '操作成功', 'token': 'd5e84d54c497e74a746ffeaa061cc28e', 'user': 'dsx', 'user_id': 1}", "case": 3, "case_collection": "单用例运行", "batch": "1d10fdaa-698b-4fef-a8a8-59e53576f5ae", "reason": "验证通过", "duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx", "run_time": "2019-11-13 17:29:27", "check": "code=0", "method": "POST"}, {"id": 127, "create_time": "2019-11-13 17:29:20", "update_time": "2019-11-13 17:29:20", "url": "http://127.0.0.1:8080/api/parameter", "project": 2, "title": "创建参数", "params": "{\"name\": \"\\u6d4b\\u8bd5\", \"desc\": \"\\u6d4b\\u8bd5\", \"value\": \"123\"}", "response": "{'code': -1, 'msg': 'name具有 参数名称 的 全局参数表 已存在。'}", "case": 6, "case_collection": "单用例运行", "batch": "a64261bd-c5d3-4b18-8c61-a549e7be29c6", "reason": "code和预期结果不一致,预期结果【0】,实际结果【-1】,运算符【=】", "duration": 100, "status": 999, "user": 1, "project_name": "测试本机项目", "run_user": "dsx", ", "method": "POST"}, {"id": 126, "create_time": "2019-11-13 17:28:16", "update_time": "2019-11-13 17:28:16", "url": "http://127.0.0.1:8080/api/project", "project": 2, "title": "项目请求", "params": "{}", "response": "{'code': 0, 'msg': '操作成功', 'data': [{'id': 2, 'create_time': '2019-11-13 10:42:38', 'name': '测试本机项目', 'desc': '测试本机项目', 'user': 'dsx', 'host': 'http://127.0.0.1:8080'}, {'id': 1, 'create_time': '2019-11-12 22:02:04', 'name': '金桔宝', 'desc': '金桔宝', 'user': 'dsx', 'host': '127.0.0.1:8080'}], 'count': 2}", "case": 4, "case_collection": "本机集合13", "batch": "117ebcf4-fdec-4ebc-a9b4-5628f4b79abb", "reason": "验证通过", "duration": 100, "status": 1, "user": 1, "project_name": "测试本机项目", "run_user": "dsx", "run_time": "2019-11-13 17:28:16", "check": "code=0", "method": "GET"}], "count": 145} return flask.jsonify(data) @server.route("/api/collection_report", methods=['get']) def collection_report(): data = {"code": 0, "msg": "操作成功", "data": {"case_collection": "本机集合13", "run_time": "2019-12-05 15:27:21", "case_count": 1, "pass_count": 1, "run_user": "dsx", "fail_count": 0, "duration": 100, "report_batch": "e714e8d1-477e-4851-b76a-b57cbd575af7"}} return flask.jsonify(data) @server.route("/api/case_report", methods=['get']) def case_report(): data = {"code": 0, "msg": "操作成功", "data": {"title": "参数请求", "run_time": "2019-11-13 17:29:58", "project_name": "测试本机项目", "status": 1, "case_collection": "单用例运行", "duration": 100, "run_user": "dsx", "url": "http://127.0.0.1:8080/api/parameter", "method": 2, "check": "code=0", "reason": "验证通过", "params": "{\"project_id\": \"2\"}", "response": "{'code': 0, 'msg': '操作成功', 'data': [{'id': 4, 'name': '测试', 'desc': '测试', 'value': '123'}], 'count': 1}"}} return flask.jsonify(data) @server.route("/api/dataInfo", methods=['get']) def dataInfo(): data = { "code": 0, "msg": "成功", "data": {"project": 128, "interface": 100, "case_join": 100, "caseNum": 100, "info": {"caseNumInfo": [80, 4.9, 7, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20, 6.4, 3.3], "runInfo": [2.6, 5.9, 9, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6, 2.3], "passInfo": [2, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23, 16.5, 12, 6.2]}} } return flask.jsonify(data) @server.route("/api/test", methods=['get']) def test(): data = { "code": 0, "msg": "成功", "data": [ {"id": 1, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 2, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 3, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 4, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 5, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 5, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 6, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 7, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 8, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 9, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 10, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 11, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 12, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 13, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 14, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 15, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 16, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 17, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 18, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 19, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 20, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, {"id": 21, "date": "2016-05-03", "user": "王小虎", "interface": "登录", "project": "南京银行", "report": "查看", "status": "失败", "title": "登录1"}, ], "count": 21 } return flask.jsonify(data) server.run("127.0.0.1", port=8080, debug=True)
2、使用axios({})方法调用接口
2.1 第一种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <span>{{name}}</span> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> new Vue({ el:'#app', data:{ name:'', }, methods:{ }, filters:{ }, // 钩子函数 created:function () { //数据初始化后 //假设 我们限制有一个列表的页面,列表的数据就可以通过created 进行请求 axios({ method:'post', url:'http://127.0.0.1:8080/api/project', }).then(function (response) { console.log(response) }); this.name='wdc'; console.log('created') }, // mounted:function () { // //标签和数据相结合前调用了mounted // console.log('mounted') // } }) </script> </body> </html>
2.2第二种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <span>{{name}}</span> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> new Vue({ el:'#app', data:{ name:'', }, methods:{ }, filters:{ }, // 钩子函数 created:function () { //数据初始化后 //假设 我们限制有一个列表的页面,列表的数据就可以通过created 进行请求 axios({ method:'get', url:'http://127.0.0.1:8080/api/project', // es6最新的函数定义方式 }).then((response)=>{ this.name='wdc2' }) }, // mounted:function () { // //标签和数据相结合前调用了mounted // console.log('mounted') // } }) </script> </body> </html>
HTML基础四-VUE的更多相关文章
- Python全栈开发【基础四】
Python全栈开发[基础四] 本节内容: 匿名函数(lambda) 函数式编程(map,filter,reduce) 文件处理 迭代器 三元表达式 列表解析与生成器表达式 生成器 匿名函数 lamb ...
- Bootstrap<基础四> 代码
Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...
- Python 基础 四 面向对象杂谈
Python 基础 四 面向对象杂谈 一.isinstance(obj,cls) 与issubcalss(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls ...
- C#_02.13_基础四_.NET方法
C#_02.13_基础四_.NET方法 一.方法概述: 方法是一块具有名称的代码.可以通过方法进行调用而在别的地方执行,也可以把数据传入方法并接受数据输出. 二.方法的结构: 方法头 AND 方法 ...
- day 68 Django基础四之模板系统
Django基础四之模板系统 本节目录 一 语法 二 变量 三 过滤器 四 标签Tags 五 模板继承 六 组件 七 自定义标签和过滤器 八 静态文件相关 一 语法 模板渲染的官方文档 关 ...
- day 54 Django基础四之模板系统
Django基础四之模板系统 本节目录 一 语法 二 变量 三 过滤器 四 标签Tags 五 模板继承 六 组件 七 自定义标签和过滤器 八 静态文件相关 一 语法 模板渲染的官方文档 关于模 ...
- Vue基础之Vue组件
Vue基础之Vue组件 // 组件是可以复用的Vue实例! // 可以把经常重复的功能封装为组件!
- Vue基础之Vue的模板语法
Vue基础之Vue的模板语法 数据绑定 01 数据绑定最常见的形式就是使用插值表达式(两个大括号!)[也就是小胡子语法!mustache] <body> <!-- Vue.js的应用 ...
- Django基础四之测试环境和ORM查询
Django基础四之测试环境和ORM查询 目录 Django基础四之测试环境和ORM查询 1. 搭建测试环境 1.1 测试环境搭建方法: 1.2 使用测试环境对数据库进行CURD 1.3 返回Quer ...
随机推荐
- git强制合并另一个分支
New分支和Old分支都修改了同样的部分,有冲突,但是想在Old分之上合并New分支的内容,并且以New分支为主,就是不自己手动解决冲突,碰到冲突,直接以New分支为主. 参考 https://git ...
- 实战django(一)--(你也能看懂的)注册与登录(带前端模板)
先是具体目录:(主要是注意templates和static的位置),其中person文件夹是上一期实战的,不用理会,login是本节实战app 项目urls.py from django.contri ...
- HTTP之Web服务器是如何进行工作的!
Web服务器是如何进行工作的 ====================文章摘自<HTTP权威指南>====================== 1. 建立连接—接收一个客户端的连接,或者 ...
- 问题追查:QA压测工具http长连接总是被服务端close情况
1. 背景 最近QA对线上单模块进行压测(非全链路压测),http客户端 与 thrift服务端的tcp链接总在一段时间被close. 查看服务端日志显示 i/o timeout. 最后的结果是: q ...
- c语言中static 函数和普通函数的区别
C程序一直由下列部分组成: 1)正文段——CPU执行的机器指令部分:一个程序只有一个副本:只读,防止程序由于意外事故而修改自身指令: 2)初始化数据段(数据段)——在程序中所有赋了初值的全局变量,存放 ...
- [转帖]PG的时间函数使用整理如下
PG的时间函数使用整理如下 https://blog.csdn.net/dahuzix/article/details/48576945 1.获取系统时间函数 -- :: -- :: -- :: 2. ...
- 一次性删除master数据库中的所有用户添加的表
执行查询命令 use master; go sp_msforeachtable @command1="drop table ?" go
- c#在sqlserver中使用EF框架
vs2017,sqlserver2017(localdb)调试通过.在sqlserver中创建数据库d1,表t1如下: 录入数据如下: 在vs新建任意项目,此处以控制台为例.添加数据模型Model1: ...
- QGraphicsItem鼠标精准拾取(pick/select)研究
在QT场景视图中,一个2D图形项是一个QGraphicsItem,我们可以通过继承来定义我们自己的图形项. 主要有以下三个虚函数需要重点关注: 1) 边界矩形(必须实现) virtual QRec ...
- C++ http服务
1.需要使用c++提供http服务,本来想使用libevent,但是经过一番搜索后,发现了只需要引用2个文件的mongoose库. 官方文档:https://cesanta.com/docs/over ...