共计 7686 个字符，预计需要花费 20 分钟才能阅读完成。
原文链接
代码地址
前端地址：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
@EnableScheduling
public 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
内容为：
@Mapper
public 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，内容为：
@Data
public 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，内容为：
@Configuration
public 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 增加用户
学习更多编程常识，请关注我的公众号：
代码的路
正文完
