Vue对于表单的简单操作（增删改查）And与Javaweb结合实现

最新推荐文章于 2024-09-10 20:26:21 发布

小羊肖恩O_o

最新推荐文章于 2024-09-10 20:26:21 发布

阅读量504

点赞数 18

文章标签： vue.js 前端 javascript java html5

本文链接：https://blog.csdn.net/2303_82274725/article/details/140933780

版权

1.html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="vue.min.js"></script>
    <link rel="stylesheet" href="showstu.css">
    <script src="axios.js"></script>
</head>
<body>
    <div id="app">
        <div class="insert">
        <div v-show="show1">
            学号:<input type="text" v-model="adddata.id"><br>
            姓名:<input type="text" v-model="adddata.name"><br>
            年龄:<input type="text" v-model="adddata.age"><br>
            爱好:<input type="text" v-model="adddata.hobit"><br>
            <button @click="add()">提交</button>
        </div>

        <div class="update" v-show="show">
            学号:<input type="text" v-model="adddata.id"><br>
            姓名:<input type="text" v-model="adddata.name"><br>
            年龄:<input type="text" v-model="adddata.age"><br>
            爱好:<input type="text" v-model="adddata.hobit"><br>
            <button @click="updateok()">更新数据</button>
        </div>

        </div>
        
        <table class="table">
            <tr class="tr">
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>爱好</th>
                <th>操作一</th>
                <th>操作二</th>
            </tr>
            <tr v-for="(value,index) in msg">
                <td class="td">{{msg[index].id}}</td>
                <td>{{msg[index].name}}</td>
                <td>{{msg[index].age}}</td>
                <td>{{msg[index].hobit}}</td>
                <td><a href="#" @click="del(index)">删除</a></td>
                <td><a href="#" @click="update(index)">更新</a></td>
            </tr>
        </table>
    </div>
    <script src="showstu.js"></script>
</body>
</html>

2.css美化部分

*{
    margin: 0;
    padding: 0;
}
body {
    background-color: #FFF0F5;
    background-size: cover;
}
body a {
        color: #03515d;
        text-decoration: none;
}
  .table th:nth-child(even) {
    background-color: #D1BBFF;
}

.table th:nth-child(odd) {
    background-color: #E8CCFF;
}
.table{
    margin-top: 50px;
    margin-right:255px;
    border: 1px dashed #E8CCFF;
     width: 50%;
    height: 305px;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 22px;
     border-collapse: collapse;
    text-align: center;
    float: right;
}
 .table td:hover {
        background-color: #FFDEAD;
    }
 .tr{
        border-collapse: collapse;
        height: 60px;
        background: url("./tab/images/bg.gif");
        border: 2px dashed #E8CCFF;
        text-align: center;
        font-size: 20px;
    }
.td {
        height: 40px;
        word-wrap: break-word;
        max-width: 300px;
        text-align: center;
        vertical-align: middle;
        border: 2px dashed #E8CCFF;
    }
.insert{
    margin: 10px;
    float: left;
    font-size: 20px;
    line-height: 70px;
    letter-spacing:3px;
}

3.js部分

new Vue({
    el:'#app',
        data(){
            return{
                msg :null,
                adddata:{
                    id:"",
                    name:"",
                    age:"",
                    hobit:""
                },
                show:false,
                show1:true,
                index1:""
            }
        },
    mounted(){
        axios
            .get('/servletstudy_war_exploded/vueStu')
            .then(response=>(this.msg = response.data))
            .catch(function (error) {
                console.log(error);
            });
    },
    methods:{
        del:function(index){
            if(confirm("确定删除吗")){
                this.msg.splice(index,1);
            }
        },
        update:function(index){
            this.show=true;
            this.show1=false;

            let data1={};
            data1={...this.msg[index]};
            this.adddata=data1;
            this.index1=index;
        },
        updateok:function(){
            this.msg[this.index1]=this.adddata;
            this.show1=true;
            this.show=false;
            this.adddata={};
        },
        add:function(){
            if (this.adddata.name==""||this.adddata.age=="") {
                alert("数据不完整");
                return;
            }
            let data={};
            data={...this.adddata};
            this.msg.push(data);
            this.adddata.id="";
            this.adddata.name="";
            this.adddata.age="";
            this.adddata.hobit="";
        }
    }
})

4.后端部分

@WebServlet("/vueStu")
public class VueTest extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        resp.setContentType("application/json");
        List<VueStu> vueStus = JdbcTools3.queryBeanList("select * from vuestu", VueStu.class);
        String res = JSON.toJSONString(vueStus);
        System.out.println("后端json格式的字符串 = " + res);

        PrintWriter writer = resp.getWriter();
        writer.write(res);
        writer.flush();
        writer.close();
    }
}