原文链接
代码地址
前端地址：https://github.com/Snowstorm0...
后端地址：https://github.com/Snowstorm0...
1 数据库
创立MySQL数据库。
表名为user_data，人员信息有number、name。
成果如下：
2 前端
2.1 创立我的项目
关上cmd，输出ui命令：
vue ui若没有反馈，可能是版本太低，须要卸载后重装：
npm uninstall vue-cli -g #卸载npm install @vue/cli -g #装置执行ui命令胜利后，会呈现提醒：
Starting GUI...
Ready on http://localhost:8000
并会主动关上页面：
创立名为SpringAndVue-vue的我的项目，预设抉择“手动”；性能开启 Babel、Router、Vuex、Linter/Formatter；配置抉择“ESLint with error prevention only”；版本倡议应用 “vue2.0”。创立新我的项目。
通过cd进入目录，启动我的项目：
npm run serve2.2 装置插件
装置 element-ui 插件。
关上cmd，输出ui命令：
vue ui在插件项搜寻，并点击装置。
vue2.0 抉择装置 “vue-cli-plugin-element”；vue3.0 抉择装置 “vue-cli-plugin-element-plus”。
Terminal装置axios，每个新我的项目都须要装置：
# vue-cli2.0命令npm install axios# vue-cli3.0命令npm add axios2.3 增加模块
2.3.1 主页
在views文件夹下创立文件 HomePage.vue，内容如下：
<template> <div> 用户列表 <el-table :data="tableData" border style="width: 40%"> <el-table-column prop="number" label="编号" width="150"> </el-table-column> <el-table-column prop="name" label="姓名" width="150"> </el-table-column> <el-table-column fixed="right" label="操作" width="160"> <template slot-scope="scope"> <el-button @click="handleClick(scope.row)" type="text" size="small">批改</el-button> <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button> </template> </el-table-column> </el-table> <el-pagination background layout="prev, pager, next" :total="total" page-size="2" @current-change="page"> </el-pagination> </div></template><script> import axios from 'axios'; export default { name: "HomePage", methods: { handleClick(row) { this.$router.push({ path: '/useredit', query:{ number: row.number, name: row.name } }) }, deleteClick(row){ // var that=this; axios.delete('http://localhost:8081/homepage/delete/'+row.number).then(function (response) { console.log(response) }) }, //当被点击页数的时候，跳转 page(currPage){ var that=this; axios.get('http://localhost:8081/homepage/query/'+(currPage-1)*3+'/3').then(function (response) { that.tableData=response.data; }) } }, //被创立的时候，显示第一页 created() { var that=this; axios.get('http://localhost:8081/homepage/query/0/3').then(function (response) { //给数据 that.tableData=response.data; // console.log(response.data) }), axios.get('http://localhost:8081/homepage/all').then(function (response) { //取得总长度 that.total=response.data.length ; }) }, data() { return { total: 10, tableData: [{ number: '编号', name: '姓名' }] } } }</script><style scoped></style>2.3.2 查看用户
在views文件夹下创立文件：UserView.vue，内容如下：
<template> <div> <table> <tr> <td>编号</td> <td>姓名</td> </tr> <tr v-for="user in users" :key="user"> <td>{{user.number}}</td> <td>{{user.name}}</td> </tr> </table> </div></template><script> import axios from 'axios'; export default { name: "UserView", data(){ return { users:[ { number: 1003, name: '张三', }, { number: 1004, name: '李四', } ] } }, created() { var that=this; axios.get('http://localhost:8081/homepage/view').then(function (resp) { that.users=resp.data; }) } }</script><style scoped></style>2.3.3 增加用户
在views文件夹下创立文件：UserAdd.vue，内容如下：
<template> <div> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="用户编号" prop="number"> <el-input v-model="ruleForm.number" ></el-input> </el-form-item> <el-form-item label="用户名" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </div></template><script> import axios from 'axios'; export default { name: "UserAdd", data() { var validateNumber = (rule, value, callback) => { if (value === '') { callback(new Error('请输出用户编号')); } else { if (this.ruleForm.number !== '') { //如果不为空 } callback(); } }; var validateName = (rule, value, callback) => { if (value === '') { callback(new Error('请输出用户名')); } else { if (this.ruleForm.name !== '') { //如果不为空 } callback(); } }; return { ruleForm: { number: '', name: '' }, rules: { number: [ { validator: validateNumber, trigger: 'blur' } ], name: [ { validator: validateName, trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { var that=this; this.$refs[formName].validate((valid) => { if (valid) { //提交胜利后要做的事件 // alert('submit!'); console.log(that.ruleForm) axios.post('http://localhost:8081/homepage/add',that.ruleForm).then(function (response) { console.log(response); }) } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } }</script><style scoped></style>2.3.4 批改App
批改App.vue为：
<template> <div id="app"> <el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-openeds="['1']" router> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>用户治理</template> <el-menu-item-group> <el-menu-item index="/">首页</el-menu-item> <el-menu-item index="/userView">全副用户</el-menu-item> <el-menu-item index="/userAdd">增加用户</el-menu-item> </el-menu-item-group> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <span>Snowstorm</span> </el-header> <br><br> <router-view></router-view> </el-container> </el-container> </div></template><style> .el-header { background-color: #B3C0D1; color: #333; line-height: 60px; } .el-aside { color: #333; }</style><script> export default { data() { const item = { }; return { tableData: Array(20).fill(item) } } };</script>2.3.5 批改index
在 router/index.js 中 const routes 函数批改为：
const routes = [ { path: '/', name: '首页', component: HomePage }, { path: '/userview', name: '全副用户', component: () => import(/* webpackChunkName: "user" */ '../views/UserView.vue') }, { path: '/useradd', name: '增加用户', component: () => import(/* webpackChunkName: "user" */ '../views/UserAdd.vue') }, { path: '/useredit', name: '编辑用户', component: () => import(/* webpackChunkName: "user" */ '../views/UserAdd.vue') }]3 后端
3.1 Controller
内容为：
@RestController@RequestMapping("/homepage")public class MyController { @Resource MyService myService; // 查看全副数据 @GetMapping("/view") public List<UserDTO> userView(){ return myService.userView(); } // 增 @PostMapping("/add") public int userAdd(@RequestBody UserDTO user){ myService.userAdd(user); return 0; } // 删 @DeleteMapping("/delete/{number}") public int deleteBook(@PathVariable("number") Integer number){ return myService.userDelete(number); } // 改 @PutMapping("/edit") public int userEdit(@RequestBody UserDTO user){ return myService.userEdit(user); } // 查 @GetMapping("/query/{start}/{length}") public List<UserDTO> userQuery(@PathVariable("start") Integer start,@PathVariable("length") Integer length){ System.out.println("users:" + myService.userQuery(start, length) + "\n"); return myService.userQuery(start, length); }}3.2 Service
内容为：
@Service@EnableSchedulingpublic class MyServiceImpl implements MyService { @Resource MyMapper myMapper; // 返回全副用户类 public List<UserDTO> userView(){ System.out.println("users:" + myMapper.userView() + "\n"); return myMapper.userView(); } public Integer userAdd(UserDTO user){ System.out.println("users:" + user + "\n"); return myMapper.userAdd(user); } public Integer userDelete(int number){ System.out.println("number:" + number + "\n"); return myMapper.userDelete(number); } public Integer userEdit(UserDTO user){ System.out.println("user:" + user + "\n"); return myMapper.userEdit(user); } public List<UserDTO> userQuery(int start, int length){ System.out.println("start:" + start + "high:" + length + "\n"); return myMapper.userQuery(start, length); }}3.3 dao
内容为：
@Mapperpublic interface MyMapper { List<UserDTO> userView(); Integer userAdd(UserDTO user); Integer userDelete(int number); Integer userEdit(UserDTO user); List<UserDTO> userQuery(int start, int length);}3.4 model
文件名UserDTO，内容为：
@Datapublic class UserDTO { private Integer number; private String name; public Integer getNumber() { return number; } public void setNumber(Integer number) { this.number = number; } public String getName() { return name; } public void setName(String name) { this.name = name; }}3.5 跨域配置
文件名Config，内容为：
@Configurationpublic class Config implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET","HEAD","POST","DELETE","OPTIONS","PUT") .allowCredentials(true) .maxAge(3600) .allowedHeaders("*"); }}4 运行成果
4.1 主页
4.2 全副用户
4.3 增加用户
学习更多编程常识，请关注我的公众号：
代码的路