结对作业开发进度（第九天）

第九天对地铁查询系统中的前端界面进行书写，其中使用到了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>

 

 

 

posted @ 2024-04-30 17:50  连师傅只会helloword  阅读(10)  评论(0)    收藏  举报