一、
①安装软件,一路默认
②打开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>