Vue--axios--(day11)
一、Vue
博客地址：http://www.imdsx.cn/index.php/2019/04/17/vue-1/
思路：
1、首先实例Vue,
2、通过el元素绑定div
3、在div中通过模板语言将msg展示出来
注意：pycharm出现波浪线解决方案：https://www.cnblogs.com/qunxiadexiaoxiangjiao/p/9367748.html
点击修改标签，修改msg内容
加法运算：
字典之间分隔用，方法之间分隔用；因为前端代码发版前要简化代码写成一行显示，
flag为真，跳转到百度，为假跳转淘宝
模板语言的判断
v-if 判断条件成立显示，不成立不显示； v-show num ==100861 的其实已经加载出来，只是增加了display属性
for循环：
v-model双向数据绑定：http://www.imdsx.cn/index.php/2019/04/18/vue-2/
单选框
多选框
下拉框
如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。因此，推荐提供一个值为空的禁用选项。
多选下拉框
动态绑定：
数据过滤：http://www.imdsx.cn/index.php/2019/04/23/vue-3/
当年纪为18.输出年轻
生命周期：http://www.imdsx.cn/index.php/2019/04/23/vue-3/
二、axios:
方法1：
方法2：
三、前端页面：
打开文件夹，Chrome浏览器打开index.html
运行mock.py,
index.html文件修改如下
使用组件方法：element
网站快速做网页：https://element.eleme.cn/#/zh-CN
1、新创建个HTML文件，导入样式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>杨明月测试项目</title> 6 <!-- 引入样式 --> 7 <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 8 </head> 9 <body> 10 11 <!-- 引入组件库 --> 12 <script src="https://unpkg.com/element-ui/lib/index.js"></script> 13 </body> 14 </html>
刷新页面
2、页面布局如图所示：
3、顶部搜索功能实现
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <!-- import CSS --> 6 <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet"> 7 </head> 8 <body> 9 <div id="app"> 10 <div id="search"> 11 <el-form :inline="true" class="demo-form-inline"> 12 <el-form-item> 13 <el-input placeholder="搜索" v-model="query_search.search"></el-input> 14 </el-form-item> 15 <el-form-item> 16 <el-select placeholder="项目" v-model="query_search.project"> 17 <el-option :key="item.name" :label="item.name" :value="item.id" 18 v-for="item in projects"></el-option> 19 </el-select> 20 </el-form-item> 21 22 <el-form-item> 23 <el-button type="primary" @click="search">查询</el-button> 24 </el-form-item> 25 <el-form-item> 26 <el-button type="primary">添加</el-button> 27 </el-form-item> 28 <el-form-item> 29 <el-button type="primary">运行</el-button> 30 </el-form-item> 31 </el-form> 32 </div> 33 34 <div id="table"> 35 {{multipleSelection}} 36 <el-table 37 :data="case_collection_datas" 38 @selection-change="handleSelectionChange" 39 ref="multipleTable" 40 style="width: 100%" 41 tooltip-effect="dark"> 42 <el-table-column 43 type="selection" 44 width="55"> 45 </el-table-column> 46 <el-table-column 47 label="集合名称" 48 prop="name" 49 width="120"> 50 <template slot-scope="scope"> 51 <el-button type="text">{{ scope.row.name }}</el-button> 52 </template> 53 54 </el-table-column> 55 <el-table-column 56 label="集合描述" 57 prop="desc" 58 show-overflow-tooltip> 59 </el-table-column> 60 <el-table-column 61 label="归属项目" 62 prop="project_name" 63 show-overflow-tooltip> 64 </el-table-column> 65 <el-table-column 66 label="用例数" 67 prop="case_count" 68 show-overflow-tooltip> 69 </el-table-column> 70 <!-- <el-table-column--> 71 <!-- label="测试报告"--> 72 <!-- prop="case_count"--> 73 <!-- show-overflow-tooltip>--> 74 <!-- </el-table-column>--> 75 <el-table-column 76 label="集合状态" 77 prop="user" 78 show-overflow-tooltip> 79 <template slot-scope="scope"> 80 <el-tag type="danger">{{ scope.row.status|replace_status }}</el-tag> 81 </template> 82 </el-table-column> 83 </el-table-column> 84 <el-table-column 85 label="用户" 86 prop="user" 87 show-overflow-tooltip> 88 </el-table-column> 89 <el-table-column 90 label="测试报告" 91 show-overflow-tooltip> 92 <el-row> 93 <el-button size="mini" plain>查看报告</el-button> 94 </el-row> 95 </el-table-column> 96 97 <el-table-column 98 label="创建日期" 99 > 100 <template slot-scope="scope">{{ scope.row.create_time }}</template> 101 </el-table-column> 102 <el-table-column 103 label="操作"> 104 <el-row> 105 <el-button size="mini">选择用例</el-button> 106 <el-button type="danger" size="mini">删除</el-button> 107 </el-row> 108 109 </el-table-column> 110 </el-table> 111 </div> 112 <div id="pagination"> 113 {{count}} 114 <el-pagination 115 @size-change="handleSizeChange" 116 @current-change="handleCurrentChange" 117 :current-page="query_search.page" 118 :page-sizes="[4,5,6,7 ]" 119 :page-size="query_search.limit" 120 layout="total, sizes, prev, pager, next, jumper" 121 :total="count"> 122 </el-pagination> 123 124 </div> 125 </div> 126 </body> 127 <!-- import Vue before Element --> 128 <script src="https://unpkg.com/vue/dist/vue.js"></script> 129 <!-- import JavaScript --> 130 <script src="https://unpkg.com/element-ui/lib/index.js"></script> 131 <script src="../js/config.js"></script> 132 <script src="../js/axios.min.js"></script> 133 <script> 134 new Vue({ 135 el: '#app', 136 data: { 137 query_search: { 138 search: undefined, 139 project: undefined, 140 limit:4, 141 page:1 142 }, 143 count:0, 144 projects: [], 145 case_collection_datas: [], 146 multipleSelection: [] 147 }, 148 methods: { 149 //查询 150 search: function () { 151 console.log('搜索!'); 152 this.query_search.page = 1; 153 this.get_page_data() 154 }, 155 onSubmit() { 156 console.log('submit!'); 157 }, 158 //获取项目整体返回的数据 159 get_project_data() { 160 //配置访问的服务端的接口方法和具体请求的接口 161 axios({ 162 method: 'get', 163 url: host + '/api/project' 164 }).then((response) => { 165 console.log(response)//打印接口返回的数据 166 this.projects = response.data.data//接口返回的数据 167 168 }) 169 170 }, 171 get_page_data() { 172 //用例集合接口返回的数据 173 axios({ 174 method: 'get', 175 url: host + '/api/case_collection', 176 params:this.query_search 177 }).then((response) => { 178 console.log(response)//打印接口返回的数据 179 this.case_collection_datas = response.data.data 180 this.count = response.data.count//返回集合总数 181 182 }) 183 }, 184 //复选框实现逻辑方式 185 handleSelectionChange(val) { 186 console.log(val)//返回内容为[{}，{}]格式， 187 // {case_count: (...) 188 // create_time: (...) 189 // desc: (...) 190 // id: (...)//只想要id 191 // name: (...) 192 // project_id: (...) 193 // project_name: (...) 194 // report_batch: (...) 195 // status: (...) 196 // update_time: (...) 197 // user: (...)} 198 let ids = [];//定义个空list 199 for (var num in val) { 200 ids.push(val[num].id)//vue尾部增加内容 201 } 202 this.multipleSelection = ids; 203 }, 204 //分页功能 205 handleSizeChange(val) { 206 console.log(`每页 ${val} 条`); 207 this.query_search.limit = val 208 this.get_page_data() 209 }, 210 handleCurrentChange(val) { 211 console.log(`当前页: ${val}`);//val为第几页 212 this.query_search.page = val 213 this.get_page_data() 214 215 216 } 217 }, 218 created: function () { 219 //请求项目接口，返回数据 220 this.get_project_data()//项目接口 221 this.get_page_data()//集合接口 222 }, 223 filters: { 224 replace_status(status) { 225 if (status == 3) { 226 return '运行中' 227 } 228 } 229 } 230 }) 231 </script> 232 </html>
