结对作业开发进度（第九天）
第九天对地铁查询系统中的前端界面进行书写，其中使用到了element-ui，引入相关依赖，并引用相关结构框架进行编写
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .el-table .warning-row { 8 background: oldlace; 9 } 10 .el-table .success-row { 11 background: #f0f9eb; 12 } 13 </style> 14 </head> 15 <body> 16 <button onclick="location.href='h.html'">点我</button> 17 <div id="app"> 18 <!--搜索表单--> 19 <el-form :inline="true" :model="ditie" class="demo-form-inline"> 20 <el-form-item label="地铁线路"> 21 <el-input v-model="ditie.xianlu" placeholder="地铁线路"></el-input> 22 </el-form-item> 23 24 <!-- <el-form-item label="地铁车次"> 25 <el-input v-model="ditie.cid" placeholder="地铁车次"></el-input> 26 </el-form-item>--> 27 <el-form-item label="地铁站点"> 28 <el-input v-model="ditie.zhandian" placeholder="地铁站点"></el-input> 29 </el-form-item> 30 <!--<el-form-item label="地铁换乘信息"> 31 <el-input v-model="ditie.cid" placeholder="地铁换乘信息"></el-input> 32 </el-form-item>--> 33 <el-form-item> 34 <el-button type="primary" @click="onSubmit">查询</el-button> 35 </el-form-item> 36 37 </el-form> 38 <!--按钮--> 39 <el-row> 40 41 <el-button type="danger" plain @click="deleteByIds">批量删除</el-button> 42 <el-button type="primary" plain @click="dialogVisible = true">新增</el-button> 43 </el-row> 44 <!--添加数据对话框表单--> 45 <el-dialog 46 title="编辑" 47 :visible.sync="dialogVisible" 48 width="30%" 49 > 50 <el-form ref="form" :model="ditie" label-width="80px"> 51 <el-form-item label="地铁线路"> 52 <el-input v-model="ditie.xianlu" placeholder="地铁线路"></el-input> 53 </el-form-item> 54 55 <el-form-item label="地铁车次"> 56 <el-input v-model="ditie.cid" placeholder="地铁车次"></el-input> 57 </el-form-item> 58 <el-form-item label="地铁站点"> 59 <el-input v-model="ditie.zhandian" placeholder="地铁站点"></el-input> 60 </el-form-item> 61 <el-form-item label="地铁换乘信息"> 62 <el-input v-model="ditie.cid" placeholder="地铁换乘信息"></el-input> 63 </el-form-item> 64 <el-form-item> 65 <el-button type="primary" @click="addxin">提交</el-button> 66 <el-button @click="dialogVisible = false">取消</el-button> 67 </el-form-item> 68 </el-form> 69 </el-dialog> 70 <!--表格--> 71 <template> 72 <el-table 73 :data="tableData" 74 style="width: 100%" 75 :row-class-name="tableRowClassName" 76 @selection-change="handleSelectionChange"> 77 <el-table-column 78 type="selection" 79 width="55"> 80 </el-table-column> 81 <el-table-column 82 type="index" 83 width="50"> 84 </el-table-column> 85 86 <el-table-column 87 prop="xianlu" 88 label="地铁线路" 89 align="center" 90 > 91 </el-table-column> 92 <el-table-column 93 prop="cid" 94 label="地铁车次" 95 align="center" 96 > 97 </el-table-column> 98 <el-table-column 99 prop="zhandian" 100 label="地铁站点" 101 align="center" 102 > 103 </el-table-column> 104 <el-table-column 105 prop="huanc" 106 label="地铁车换乘" 107 align="center" 108 > 109 </el-table-column> 110 <el-table-column 111 align="center" 112 label="操作"> 113 <template slot-scope="scope"> 114 <el-button type="primary" plain @click="updateById(scope.$index, scope.row)">修改</el-button> 115 <el-button type="danger" plain @click="deleteById(scope.$index, scope.row)">删除</el-button> 116 <!--修改数据的对话框表单--> 117 <el-dialog 118 title="修改信息" 119 :visible.sync="centerVisible" 120 width="30%" 121 > 122 <el-form ref="form" :model="ditie" label-width="80px"> 123 <el-form-item label="地铁线路"> 124 <el-input v-model="ditie.xianlu" placeholder="地铁线路"></el-input> 125 </el-form-item> 126 127 <el-form-item label="地铁车次"> 128 <el-input v-model="ditie.cid" placeholder="地铁车次"></el-input> 129 </el-form-item> 130 <el-form-item label="地铁站点"> 131 <el-input v-model="ditie.zhandian" placeholder="地铁站点"></el-input> 132 </el-form-item> 133 <el-form-item label="地铁换乘信息"> 134 <el-input v-model="ditie.huanc" placeholder="地铁换乘信息"></el-input> 135 </el-form-item> 136 <el-form-item> 137 <el-button type="primary" @click="edit">提交</el-button> 138 <el-button @click="centerVisible =false">取消</el-button> 139 </el-form-item> 140 </el-form> 141 </el-dialog> 142 </template> 143 </el-table-column> 144 </el-table> 145 </template> 146 <!--分页工具条--> 147 <el-pagination 148 @size-change="handleSizeChange" 149 @current-change="handleCurrentChange" 150 :current-page="currentPage" 151 :page-sizes="[5, 10, 15, 20]" 152 :page-size="5" 153 layout="total, sizes, prev, pager, next, jumper" 154 :total="totalCount"> 155 </el-pagination> 156 </div> 157 <script src="js/vue.js"></script> 158 <script src="element-ui/lib/index.js"></script> 159 <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> 160 161 <script src="js/axios-0.18.0.js"></script> 162 <script> 163 new Vue({ 164 el: "#app", 165 166 mounted(){ 167 //当页面加载完成后，发送异步请求，获取数据 168 169 this.selectAll(); 170 171 }, 172 173 methods: { 174 175 // 查询分页数据 176 selectAll(){ 177 var _this=this; 178 axios({ 179 method:"post", 180 /* url:"http://localhost:8080/ditie/ditie/all"*/ 181 url:"http://localhost:8080/ditie/ditie/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize, 182 data:this.ditie 183 184 }).then(resp=> 185 { 186 /* _this.tableData=resp.data;*/ 187 this.tableData=resp.data.rows; 188 this.totalCount=resp.data.totalCount; 189 }) 190 191 192 }, 193 194 tableRowClassName({row, rowIndex}) { 195 if (rowIndex === 1) { 196 return 'warning-row'; 197 } else if (rowIndex === 3) { 198 return 'success-row'; 199 } 200 return ''; 201 }, 202 // 复选框选中后执行的方法 203 handleSelectionChange(val) { 204 this.multipleSelection = val; 205 206 }, 207 // 查询方法 208 onSubmit() { 209 /* var _this = this; 210 211 // 发送ajax请求，添加数据 212 axios({ 213 method:"post", 214 url:"http://localhost:8080/ditie/ditie/tiaocha1", 215 data:_this.ditie 216 }).then(function (resp) { 217 218 // 重新查询数据 219 /!* _this.selectAll();*!/ 220 _this.tableData=resp.data; 221 222 223 })*/ 224 this.selectAll(); 225 }, 226 // 添加数据 227 addxin() { 228 var _this = this; 229 230 // 发送ajax请求，添加数据 231 axios({ 232 method:"post", 233 url:"http://localhost:8080/xinwen/xiewen/add", 234 data:_this.xin 235 }).then(function (resp) { 236 if(resp.data == "success"){ 237 //添加成功 238 239 //关闭窗口 240 _this.dialogVisible = false; 241 242 // 重新查询数据 243 _this.selectAll(); 244 // 弹出消息提示 245 _this.$message({ 246 message: '恭喜你，添加成功', 247 type: 'success' 248 }); 249 250 } 251 }) 252 253 }, 254 255 //分页 256 handleSizeChange(val) { 257 this.pageSize=val; 258 this.selectAll(); 259 260 }, 261 handleCurrentChange(val) { 262 this.currentPage=val; 263 this.selectAll(); 264 }, 265 // 删除 266 deleteById(index, row){ 267 268 // 弹出确认提示框 269 270 this.$confirm('此操作将删除该数据, 是否继续?', '提示', { 271 confirmButtonText: '确定', 272 cancelButtonText: '取消', 273 type: 'warning' 274 }).then(() => { 275 //用户点击确认按钮 276 277 //2. 发送AJAX请求 278 var _this = this; 279 280 // 发送ajax请求，添加数据 281 axios({ 282 method:"post", 283 url:"http://localhost:8080/xinwen/xiewen/deleteById", 284 data:row.xinwen 285 }).then(function (resp) { 286 if(resp.data == "success"){ 287 //删除成功 288 289 // 重新查询数据 290 _this.selectAll(); 291 // 弹出消息提示 292 _this.$message({ 293 message: '恭喜你，删除成功', 294 type: 'success' 295 }); 296 297 } 298 }) 299 }).catch(() => { 300 //用户点击取消按钮 301 302 this.$message({ 303 type: 'info', 304 message: '已取消删除' 305 }); 306 }); 307 308 }, 309 updateById(index, row) { 310 this.xin.xinwen=row.xinwen; 311 this.xin.lanmu=row.lanmu; 312 this.centerVisible = true; 313 314 }, 315 //修改数据的部分内容 316 edit() { 317 var _this = this; 318 //发送ajax异步请求，添加数据 319 axios({ 320 method: "post", 321 url: "http://localhost:8080/xinwen/xiewen/updateById", 322 data: _this.xin 323 }).then(function (resp) { 324 if (resp.data == "success") { 325 //关闭窗口 326 _this.centerVisible = false; 327 //查询一次 328 _this.selectAll(); 329 _this.$message({ 330 message: '恭喜你，修改数据成功', 331 type: 'success' 332 }); 333 } else { 334 _this.$message.error('修改数据失败'); 335 } 336 }) 337 }, 338 // 批量删除 339 deleteByIds(){} 340 }, 341 data() { 342 return { 343 // 每页显示的条数 344 pageSize:5, 345 // 总记录数 346 totalCount:100, 347 // 当前页码 348 currentPage: 1, 349 // 添加数据对话框是否展示的标记 350 dialogVisible: false, 351 centerVisible:false, 352 // 品牌模型数据 353 ditie: { 354 xianlu: '', 355 cid: '', 356 zhandian: '', 357 huanc: '' 358 }, 359 // 被选中的id数组 360 selectedIds:[], 361 // 复选框选中数据集合 362 multipleSelection: [], 363 // 表格数据 364 tableData: [{ 365 xianlu: '', 366 cid: '', 367 zhandian: '', 368 huanc: '' 369 }, { 370 xianlu: '', 371 cid:'', 372 zhandian: '', 373 huanc: '' 374 }] 375 } 376 } 377 }) 378 </script> 379 </body> 380 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 <el-form :inline="true" :model="lix" class="demo-form-inline"> 10 <el-form-item label="地铁起点"> 11 <el-input v-model="lix.qidian" placeholder="起点"></el-input> 12 </el-form-item> 13 <el-form-item label="地铁终点"> 14 <el-input v-model="lix.zdain" placeholder="终点"></el-input> 15 </el-form-item> 16 <el-form-item> 17 <el-button type="primary" @click="ceshi">查询</el-button> 18 </el-form-item> 19 20 </el-form> 21 <template> 22 <el-table 23 :data="tableData" 24 style="width: 100%" 25 :row-class-name="tableRowClassName" 26 @selection-change="handleSelectionChange"> 27 <el-table-column 28 type="selection" 29 width="55"> 30 </el-table-column> 31 <el-table-column 32 type="index" 33 width="50"> 34 </el-table-column> 35 <el-table-column 36 prop="lu" 37 label="所有路线" 38 align="center" 39 > 40 </el-table-column> 41 </el-table> 42 </template> 43 </div> 44 </body> 45 <script src="js/vue.js"></script> 46 <script src="element-ui/lib/index.js"></script> 47 <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> 48 <script src="js/axios-0.18.0.js"></script> 49 <script> 50 new Vue({ 51 el: "#app", 52 53 mounted(){ 54 //当页面加载完成后，发送异步请求，获取数据 55 56 this.ceshi(); 57 }, 58 59 methods: { 60 ceshi(){ 61 var _this=this; 62 axios({ 63 method:"post", 64 /* url:"http://localhost:8080/ditie/ditie/all"*/ 65 url:"http://localhost:8080/ditie/ditie/zxhc", 66 data:_this.lix 67 }).then(function (resp) { 68 //添加成功 69 //关闭窗口 70 // 重新查询数据 71 /* _this.selectAll();*/ 72 _this.tableData=resp.data; 73 }) 74 } 75 }, 76 data() { 77 return { 78 lix:{ 79 qidian:'', 80 zdain:'' 81 }, 82 tableData: [{ 83 lu: '' 84 }, { 85 lu: '' 86 }] 87 } 88 } 89 }) 90 </script> 91 </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <el-form :inline="true" :model="lix" class="demo-form-inline"> <el-form-item label="地铁起点"> <el-input v-model="lix.qidian" placeholder="起点"></el-input> </el-form-item> <!-- <el-form-item label="地铁车次"> <el-input v-model="ditie.cid" placeholder="地铁车次"></el-input> </el-form-item>--> <el-form-item label="地铁终点"> <el-input v-model="lix.zdain" placeholder="终点"></el-input> </el-form-item> <!--<el-form-item label="地铁换乘信息"> <el-input v-model="ditie.cid" placeholder="地铁换乘信息"></el-input> </el-form-item>--> <el-form-item> <el-button type="primary" @click="ceshi">查询</el-button> </el-form-item> </el-form> <template> <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column type="index" width="50"> </el-table-column> <el-table-column prop="zhandian1" label="地铁站点" align="center" > </el-table-column> </el-table> </template> </div> </body> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/axios-0.18.0.js"></script> <script> new Vue({ el: "#app", mounted(){ //当页面加载完成后，发送异步请求，获取数据 this.ceshi(); }, methods: { ceshi(){ var _this=this; axios({ method:"post", /* url:"http://localhost:8080/ditie/ditie/all"*/ url:"http://localhost:8080/ditie/ditie/ceshi", data:_this.lix }).then(function (resp) { //添加成功 //关闭窗口 // 重新查询数据 /* _this.selectAll();*/ _this.tableData=resp.data; }) } }, data() { return { lix:{ qidian:'', zdain:'' }, tableData: [{ zhandian1: '' }, { zhandian1: '' }] } } }) </script> </html>
