vue简单前后端交互增删改查

最新推荐文章于 2022-09-16 18:35:05 发布
Hou°
最新推荐文章于 2022-09-16 18:35:05 发布
阅读量3.8k
点赞数 5
本文链接：https://blog.csdn.net/xinzaiz/article/details/103483421
版权
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--加载vue.js文件-->
    <script type="text/javascript" src="static/js/vuejs-2.5.16.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
        <!--vue异步前后端交互-->
    <div id="app01">
        <!--这是添加用户-->
        <el-dialog title="添加用户" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="报销类型" :label-width="formLabelWidth">
                    <el-input v-model="form.paymode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="报销金额" :label-width="formLabelWidth">
                    <el-input v-model="form.totalmoney" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="报销备注" :label-width="formLabelWidth">
                    <el-input v-model="form.bxremark" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="comf">确 定</el-button>
            </div>
        </el-dialog>
        <div style="margin-left: 400px">
            <!--设置添加数据的按钮 当点击是触发弹窗-->
        <el-button type="primary"style="margin: 10px 200px" v-on:click="clear">添加数据</el-button>
            <!--list是自己定义的数组名称-->
            <el-table
                    :data="list"
                    border
                    style="width: 100%">
                <!--prop是pojo对象属性名称-->
                <!--label标题名称-->
                <el-table-column
                        prop="paymode"
                        label="报销类型"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="totalmoney"
                        label="报销金额"
                        width="180">
                </el-table-column>
                    <el-table-column
                            prop="bxremark"
                            label="报销备注"
                            width="180">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                    >
                    <template slot-scope="scope">
                        <el-button @click="deleteItem(scope.row.bxid)" type="text" size="small">删除</el-button>
                        <el-button type="text" @click="editItem(scope.row)"size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            </template>
        </div>
        <!--vue分页-->
        <div style="margin-left: 450px">
            <!--total总记录数-->
            <!--page-size每页显示数-->
            <!--current-page当前页-->
            <!--@current-change="changeNum" 设置当页数发生改变时的事件-->
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :total="total"
                    :current-page="currentPage"
            @current-change="changeNum">
            </el-pagination>
        </div>
    </div>
    <script>
        <!--这个是vm-->
        new Vue({
            el:"#app01",
            data:{
            list:[],
            total:50,
            pageSize:2,
            currentPage:1,
            dialogFormVisible:false,
                form:{
                    paymode:"",
                    totalmoney:"",
                    bxremark:"",
                    bxid:""
                }
            },
            <!--写函数的地方-->
            methods:{
                clear:function(){
                    this.dialogFormVisible=true
                    this.form={
                        paymode:"",
                        totalmoney:"",
                        bxremark:"",
                        bxid:""
                    }
                },
                editItem:function(info){
                    this.dialogFormVisible=true
                    this.form.paymode=info.paymode
                    this.form.totalmoney=info.totalmoney
                    this.form.bxremark=info.bxremark
                    this.form.bxid=info.bxid
                },
                deleteItem:function(num){
                    var is=this;
                    //post请求（路径，is.form） 要传入后台的参数
                    axios.delete("/pms/baoxiao/del/"+num)
                        .then(function (result) {
                            if (result.data.statusCode==200){
                                is.$message({
                                        message: '删除成功',
                                        type: 'success'
                                    });
                                is.fenye("/pms/baoxiao/page",is);
                            }
                        }).catch(function (error) {
                    });
                },
                //弹窗的确定操作
                comf:function(){
                    var is=this;
                    if (is.form.bxid!=""){
                        //修改数据
                        axios.put("/pms/baoxiao/update",is.form)
                            .then(function (result) {
                                if (result.data.statusCode==200){
                                    is.dialogFormVisible=false
                                    is.fenye("/pms/baoxiao/page",is);
                                }
                            }).catch(function (error) {
                        });
                    }else{
                        //添加数据
                        //post请求（路径，is.form） 要传入后台的参数
                        axios.post("/pms/baoxiao/save",is.form)
                            .then(function (result) {
                                if (result.data.statusCode==200){
                                    is.dialogFormVisible=false
                                    is.fenye("/pms/baoxiao/page",is);
                                }
                            }).catch(function (error) {
                        });
                    }

                },
                <!--这个是当页数发生改变时执行的事件-->
                changeNum:function (msg) {
                    var is=this;
                    is.fenye("/pms/baoxiao/page?pageNum="+msg,is);
                },
                <!--提取的相同的分页数据-->
                fenye:function (url,is) {
                    axios.get(url)
                        .then(function (result) {
                            //list数据库的数据
                            is.list=result.data.map.pageInfo.list
                            //total数据库的总记录数
                            is.total=result.data.map.pageInfo.total;
                            //total数据库的当前页
                            is.currentPage=result.data.map.pageInfo.PageNum;
                        }).catch(function (error) {
                    });
                }
            },
            <!--这个是页面加载完成时执行的函数-->
            mounted:function () {
                var is=this;
                is.fenye("/pms/baoxiao/page",is);
            },
        })
    </script>
</body>
</html>