elementUI脚手架

一、

①安装软件，一路默认

②打开cmd输入下面代码，下载插件

npm install -g @vue/cli

③下载完成后，输入“ vue ui  ” 后会自动打开图形化界面

④

⑤按照上面步骤完成后，下载相关依赖和插件

⑥创建一个vue项目，进行操作

和后台连接

<template>
    <div>
        <el-container>
            <el-header>用户信息</el-header>

            <el-container>
                <el-aside width="200px">
                    <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>用户管理</span>
                            </template>
                            <el-menu-item index="1-1">查询用户</el-menu-item>
                            <el-menu-item index="1-2">添加用户</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <el-button type="primary"  icon="el-icon-circle-plus" @click="insertUser"></el-button>
                    <el-table
                            :data="tableData"
                            stripe
                            style="width: 100%">
                        <el-table-column
                                prop="id"
                                label="编号">
                        </el-table-column>
                        <el-table-column
                                prop="uname"
                                label="姓名">
                        </el-table-column>
                        <el-table-column
                                prop="age"
                                label="年龄">
                        </el-table-column>
                        <el-table-column
                                prop="sex"
                                label="性别">
                        </el-table-column>
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" circle @click="editUser(scope.row.id)"></el-button>
                                <el-button type="danger" icon="el-icon-delete" @click="deleteUser(scope.row.id)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>
            </el-container>
        </el-container>

<!--        修改的对话框-->

        <el-dialog
                title="提示"
                :visible.sync="editDialogVisible"
                width="30%">
            <el-form  label-width="80px" :model="userForm">
                <el-form-item label="姓名">
                    <el-input v-model="userForm.uname"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="userForm.age"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="userForm.sex"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmEditUser">确 定</el-button>
  </span>
        </el-dialog>


        <!--        增加的对话框-->

        <el-dialog
                title="提示"
                :visible.sync="insertDialogVisible"
                width="30%">
            <el-form  label-width="80px" :model="insertForm">
                <el-form-item label="姓名">
                    <el-input v-model="insertForm.uname"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="insertForm.age"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="insertForm.sex"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="insertDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirminsertUser">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "index",
        data(){
            return {
                tableData: [],
                //修改弹出框
                editDialogVisible:false,
                //增加弹出框
                insertDialogVisible:false,
                //用户表单对象
                userForm:{},
                //增加用户表单对象
                insertForm:{},
            }
        },
        created() {
            this.initTable();
        },
        methods:{
            initTable(){
                var that=this;
                this.$http.get("http://localhost:8001/list").then(function(result){
                    that.tableData=result.data.data;
                })
            },
            //根据用户id查询用户信息-----id不要使用Long  ----使用String类型
            editUser(uid){
                this.editDialogVisible=true;
                var that=this;
                this.$http.get(`http://localhost:8001/byId/${uid}`).then(function(result){
                    that.userForm=result.data.data;
                })
            },
            //修改保存到数据库
            confirmEditUser(){
                var that=this;
                //JSON对象
                this.$http.put(`http://localhost:8001/update`,this.userForm).then(function(result){
                    if(result.data.code===200){
                        that.editDialogVisible=false;
                        that.initTable();
                    }
                })
            },
            insertUser(){
                var that=this;
                that.insertDialogVisible=true;
                this.insertForm={}
            },
            confirminsertUser(){
                var that=this;
                //JSON对象
                this.$http.post(`http://localhost:8001/insert`,this.insertForm).then(function(result){
                    if(result.data.code===200){
                        that.insertDialogVisible=false;
                        that.initTable();
                    }
                })
            },
            deleteUser(id){
                var that=this;
                //JSON对象
                this.$http.delete(`http://localhost:8001/delete/${id}`).then(function(result){
                    if(result.data.code===200){
                        that.initTable();
                    }
                })
            }
        }
    }
</script>
<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }
</style>