vue+springboot实现申请审核功能
时间: 2023-11-09 10:09:17 浏览: 189
基于SpringBoot+Vue实现的采购需求管理系统
5星 · 资源好评率100%
前置知识:
1. Vue.js
2. Spring Boot
3. MySQL
实现流程:
1. 创建数据库
创建一个名为`apply`的数据库,其中包含如下两个表:
- `apply_info`:用于存储申请信息
| 字段名 | 类型 | 描述 |
| ------------ | ---------- | -------------- |
| id | int | 主键 ID |
| apply_reason | varchar(5) | 申请原因 |
| apply_time | datetime | 申请时间 |
| status | int | 审核状态(0/1)|
- `user_info`:用于存储用户信息
| 字段名 | 类型 | 描述 |
| ------ | -------- | -------- |
| id | int | 主键 ID |
| name | varchar | 用户姓名 |
| role | varchar | 用户角色 |
2. 创建后端项目
使用 Spring Initializr 创建一个 Spring Boot 项目,添加如下依赖:
```xml
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jdbc</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
</dependencies>
```
3. 配置数据库连接
在`application.properties`文件中添加如下配置:
```properties
spring.datasource.url=jdbc:mysql://localhost:3306/apply?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf8&useSSL=false
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
```
4. 创建实体类
在`com.example.demo.entity`包下创建如下两个实体类:
- ApplyInfo.java
```java
@Data
@AllArgsConstructor
@NoArgsConstructor
public class ApplyInfo {
private Integer id;
private String applyReason;
private LocalDateTime applyTime;
private Integer status;
}
```
- UserInfo.java
```java
@Data
@AllArgsConstructor
@NoArgsConstructor
public class UserInfo {
private Integer id;
private String name;
private String role;
}
```
5. 创建 DAO
在`com.example.demo.dao`包下创建如下两个 DAO:
- ApplyInfoDao.java
```java
@Repository
public interface ApplyInfoDao {
@Select("select * from apply_info where id=#{id}")
ApplyInfo getApplyInfoById(Integer id);
@Insert("insert into apply_info(apply_reason, apply_time, status) values(#{applyReason}, #{applyTime}, #{status})")
void saveApplyInfo(ApplyInfo applyInfo);
@Update("update apply_info set status=#{status} where id=#{id}")
void updateApplyStatus(Integer id, Integer status);
}
```
- UserInfoDao.java
```java
@Repository
public interface UserInfoDao {
@Select("select * from user_info where id=#{id}")
UserInfo getUserInfoById(Integer id);
}
```
6. 创建 Service
在`com.example.demo.service`包下创建如下两个 Service:
- ApplyInfoService.java
```java
@Service
public class ApplyInfoService {
@Autowired
private ApplyInfoDao applyInfoDao;
@Autowired
private UserInfoDao userInfoDao;
public ApplyInfo getApplyInfoById(Integer id) {
return applyInfoDao.getApplyInfoById(id);
}
public void saveApplyInfo(ApplyInfo applyInfo) {
applyInfoDao.saveApplyInfo(applyInfo);
}
public void updateApplyStatus(Integer id, Integer status) {
applyInfoDao.updateApplyStatus(id, status);
}
public UserInfo getUserInfoById(Integer id) {
return userInfoDao.getUserInfoById(id);
}
}
```
- UserInfoService.java
```java
@Service
public class UserInfoService {
@Autowired
private UserInfoDao userInfoDao;
public UserInfo getUserInfoById(Integer id) {
return userInfoDao.getUserInfoById(id);
}
}
```
7. 创建 Controller
在`com.example.demo.controller`包下创建如下一个 Controller:
- ApplyInfoController.java
```java
@RestController
@RequestMapping("/apply")
public class ApplyInfoController {
@Autowired
private ApplyInfoService applyInfoService;
@Autowired
private UserInfoService userInfoService;
@PostMapping("/save")
public void saveApplyInfo(@RequestBody ApplyInfo applyInfo) {
UserInfo userInfo = userInfoService.getUserInfoById(applyInfo.getId());
applyInfoService.saveApplyInfo(applyInfo);
}
@PostMapping("/update")
public void updateApplyStatus(@RequestParam Integer id, @RequestParam Integer status) {
applyInfoService.updateApplyStatus(id, status);
}
@GetMapping("/{id}")
public ApplyInfo getApplyInfoById(@PathVariable Integer id) {
return applyInfoService.getApplyInfoById(id);
}
}
```
8. 创建前端项目
使用 Vue CLI 创建一个 Vue 项目,并添加 Element UI 和 Axios:
```bash
vue create apply-frontend
cd apply-frontend
vue add element
npm install axios --save
```
9. 创建组件
在`src/components`目录下创建如下两个组件:
- ApplyForm.vue
```vue
<template>
<el-form :model="form" label-width="100px">
<el-form-item label="申请原因">
<el-input v-model="form.applyReason" placeholder="请输入申请原因"></el-input>
</el-form-item>
<el-form-item label="申请时间">
<el-date-picker v-model="form.applyTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
import axios from 'axios';
export default {
name: 'ApplyForm',
data() {
return {
form: {
applyReason: '',
applyTime: ''
}
};
},
methods: {
submitForm() {
axios.post('/apply/save', this.form).then(() => {
this.$message({
type: 'success',
message: '申请提交成功'
});
});
},
resetForm() {
this.$refs.form.resetFields();
}
}
};
</script>
```
- ApplyList.vue
```vue
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="applyReason" label="申请原因"></el-table-column>
<el-table-column prop="applyTime" label="申请时间"></el-table-column>
<el-table-column prop="status" label="审核状态">
<template slot-scope="scope">
<el-tag :type="statusTag(scope.row.status)">{{ statusText(scope.row.status) }}</el-tag>
<el-button v-if="scope.row.status === 0" type="text" @click="handleApprove(scope.row)">通过</el-button>
<el-button v-if="scope.row.status === 0" type="text" @click="handleReject(scope.row)">拒绝</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
import axios from 'axios';
export default {
name: 'ApplyList',
data() {
return {
tableData: []
};
},
created() {
axios.get('/apply').then(response => {
this.tableData = response.data;
});
},
methods: {
statusText(status) {
return status === 0 ? '待审核' : '已审核';
},
statusTag(status) {
return status === 0 ? 'warning' : 'success';
},
handleApprove(row) {
axios.post('/apply/update', { id: row.id, status: 1 }).then(() => {
this.$message({
type: 'success',
message: '审核通过'
});
row.status = 1;
});
},
handleReject(row) {
axios.post('/apply/update', { id: row.id, status: 2 }).then(() => {
this.$message({
type: 'success',
message: '审核拒绝'
});
row.status = 2;
});
}
}
};
</script>
```
10. 创建路由
在`src/router/index.js`文件中添加如下路由:
```javascript
import Vue from 'vue';
import VueRouter from 'vue-router';
import ApplyForm from '@/components/ApplyForm';
import ApplyList from '@/components/ApplyList';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'ApplyForm',
component: ApplyForm
},
{
path: '/list',
name: 'ApplyList',
component: ApplyList
}
];
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
});
export default router;
```
11. 启动项目
运行如下命令启动项目:
```bash
# 启动后端项目
mvn spring-boot:run
# 启动前端项目
npm run serve
```
12. 测试功能
打开浏览器,访问`http://localhost:8080`,填写申请表单并提交,切换到列表页查看申请状态,管理员可以审核申请并更改审核状态。
阅读全文