假期第三周总结

本周第三周，本周主要进行的是bootstrap,vue,ui-element的学习，主要进行的对前端界面的绘制与学习，来满足对网页一些的需求，主要学习以下的内容

1：ajax获取数据：

var _this = this;
axios({
    method:"get",
    url:"http://localhost:8080/dormitory/SelectByidServlet",
}).then(function (resp) {
    _this.student = resp.data;
})

2：ajax传入数据后进行操作：

update()
{
    var _this = this
    axios({
        method: "post",
        url: "http://localhost:8080/dormitory/UpdateServlet",
        data:_this.student
    }).then(function (resp) {
        // 判断响应数据是否为 success
        if (resp.data == "success") {
            alert("修改成功");
            location.href = "http://localhost:8080/dormitory/Student.html";
        }
        else{
            alert("修改失败");
            location.href = "http://localhost:8080/dormitory/Student.html";
        }
    })
}

3：遍历表格传入数据后对每一行数据进行操作绑定

<template>
                            <el-table
                                    :data="dorm"
                                    style="width: 100%">
                                <el-table-column
                                        label="宿舍编号"
                                        width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.dorid }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="用水量"
                                        width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.watquantity }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="用电量"
                                        width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.elcquantity }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="剩余水量"
                                        width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.usedwater }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="剩余电量"
                                        width="180">
                                    <template slot-scope="scope">
                                        <span style="margin-left: 10px">{{ scope.row.usedelctronic }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操   作">
                                    <template slot-scope="scope">
                                        <el-button type="primary" type="text" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                        <el-button
                                                size="mini"
                                                type="danger"
                                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                        <el-dialog
                                                title="修改宿舍信息"
                                                :visible.sync="dialogVisible1"
                                                width="30%"
                                                :before-close="handleClose" >
                                            <el-form ref="form" :model="dromtemp" label-width="80px" editOn = true">
                                                <el-form-item label="宿舍编号">
                                                    <el-input v-model="dromtemp.dorid" disabled ></el-input>
                                                </el-form-item>
                                                <el-form-item label="用水量">
                                                    <el-input v-model="dromtemp.watquantity" ></el-input>
                                                </el-form-item>
                                                <el-form-item label="用电量">
                                                    <el-input v-model="dromtemp.elcquantity" ></el-input>
                                                </el-form-item>
                                                <el-form-item label="剩余水量">
                                                    <el-input v-model="dromtemp.usedwater"></el-input>
                                                </el-form-item>
                                                <el-form-item label="剩余电量">
                                                    <el-input v-model="dromtemp.usedelctronic"></el-input>
                                                </el-form-item>
                                            </el-form>
                                        <span slot="footer" class="dialog-footer">
                                        <el-button @click="dialogVisible1 = false">取 消</el-button>
                                        <el-button type="primary" @click="SubmitForm" >确 定</el-button>
                                        </span>
                                        </el-dialog>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-button
                                    size="mini"
                                    type="primary"
                                    @click="adddorm" style="float: right">新增</el-button>
                            <el-dialog
                                    title="添加宿舍信息"
                                    :visible.sync="dialogVisible2"
                                    width="30%"
                                    :before-close="handleClose" >
                                <el-form ref="form" :model="dromtemp" label-width="80px" editOn = true">
                                    <el-form-item label="宿舍编号">
                                        <el-input v-model="dromtemp.dorid" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="用水量">
                                        <el-input v-model="dromtemp.watquantity" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="用电量">
                                        <el-input v-model="dromtemp.elcquantity" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="剩余水量">
                                        <el-input v-model="dromtemp.usedwater"></el-input>
                                    </el-form-item>
                                    <el-form-item label="剩余电量">
                                        <el-input v-model="dromtemp.usedelctronic"></el-input>
                                    </el-form-item>
                                </el-form>
                                <span slot="footer" class="dialog-footer">
                                        <el-button @click="dialogVisible2 = false">取 消</el-button>
                                        <el-button type="primary" @click="SubmitForm2" >确 定</el-button>
                                        </span>
                            </el-dialog>
                        </template>

通过绑定以下的方法：

 handleDelete(index, row) {
                console.log(index, row);
                var _this = this
                axios({
                    method: "post",
                    url: "http://localhost:8080/dormitory/deleteDormServlet",
                    data:row.dorid
                }).then(function (resp) {
                    // 判断响应数据是否为 success
                    if (resp.data == "success") {
                        alert("已删除");
                        location.href = "http://localhost:8080/dormitory/manager.html";
                    }
                    else{
                        alert("删除失败");
                        location.href = "http://localhost:8080/dormitory/manager.html";
                    }
                });


            }

handleEdit(index, row) {
                this.dromtemp.dorid = row.dorid;
                this.dromtemp.watquantity = row.watquantity;
                this.dromtemp.elcquantity = row.elcquantity;
                this.dromtemp.usedwater = row.usedwater;
                this.dromtemp.usedelctronic = row.usedelctronic;
                this.dialogVisible1 = true;
            },

4：dialoge弹出框界面：

<el-button
                                    size="mini"
                                    type="primary"
                                    @click="adddorm" style="float: right">新增</el-button>
                            <el-dialog
                                    title="添加宿舍信息"
                                    :visible.sync="dialogVisible2"
                                    width="30%"
                                    :before-close="handleClose" >
                                <el-form ref="form" :model="dromtemp" label-width="80px" editOn = true">
                                    <el-form-item label="宿舍编号">
                                        <el-input v-model="dromtemp.dorid" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="用水量">
                                        <el-input v-model="dromtemp.watquantity" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="用电量">
                                        <el-input v-model="dromtemp.elcquantity" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="剩余水量">
                                        <el-input v-model="dromtemp.usedwater"></el-input>
                                    </el-form-item>
                                    <el-form-item label="剩余电量">
                                        <el-input v-model="dromtemp.usedelctronic"></el-input>
                                    </el-form-item>
                                </el-form>
                                <span slot="footer" class="dialog-footer">
                                        <el-button @click="dialogVisible2 = false">取 消</el-button>
                                        <el-button type="primary" @click="SubmitForm2" >确 定</el-button>
                                        </span>
                            </el-dialog>

需绑定弹出框显示&&初始化方法：

 adddorm(){
                this.dromtemp.dorid = "";
                this.dromtemp.watquantity = "";
                this.dromtemp.elcquantity = "";
                this.dromtemp.usedwater = "";
                this.dromtemp.usedelctronic = "";
                this.dialogVisible2 = true;
            }

提交方法：

SubmitForm2()
            {
                var _this = this
                axios({
                    method: "post",
                    url: "http://localhost:8080/dormitory/AdddormServlet",
                    data:_this.dromtemp
                }).then(function (resp) {
                    // 判断响应数据是否为 success
                    if (resp.data == "success") {
                        alert("添加成功");
                        location.href = "http://localhost:8080/dormitory/manager.html";
                    }
                    else{
                        alert("添加失败");
                        location.href = "http://localhost:8080/dormitory/manager.html";
                    }
                    this.dialogVisible2 = false;
                })

            

5:下拉款显示自己数据：

 <el-form ref="form" :model="infor" label-width="80px" editOn = true">
                                                <el-form-item label="宿舍编号">
                                                    <el-select v-model="infor.dorid" style="width: 120px">
                                                        <el-option
                                                                v-for="item in option"
                                                                :key="item.dorid"
                                                                :label="item.dorid"
                                                                :value="item.dorid">
                                                        </el-option>
                                                    </el-select>
                                                </el-form-item>
                                            </el-form>

初始化：

getDorminfor()
            {
                var _this = this;
                axios({
                    method:"get",
                    url:"http://localhost:8080/dormitory/getDorminfor",
                }).then(function (resp) {
                    _this.option = resp.data;
                })
            }

这些是本周的主要成功，主要是对于ui界面的实现，遇到了很多的问题，也解决了很多的问题，但是一些问题只是进行了简单的解决，如果大规模的会很费，所以我认为有很好的解决方法，后续也会进行前端的学习，来实现，来确定是我代码的问题还是方法的问题。