很高兴能为您提供这方面的帮助，以下是基本的代码结构和技术选型：
## 后端代码结构
```
├── src
│ ├── main
│ │ ├── java
│ │ │ ├── com
│ │ │ │ ├── example
│ │ │ │ │ ├── config
│ │ │ │ │ │ ├── MybatisPlusConfig.java
│ │ │ │ │ │ ├── WebMvcConfig.java
│ │ │ │ │ ├── controller
│ │ │ │ │ │ ├── TeacherController.java
│ │ │ │ │ ├── dao
│ │ │ │ │ │ ├── TeacherDao.java
│ │ │ │ │ ├── entity
│ │ │ │ │ │ ├── Teacher.java
│ │ │ │ │ ├── service
│ │ │ │ │ │ ├── TeacherService.java
│ │ │ │ │ │ ├── impl
│ │ │ │ │ │ │ ├── TeacherServiceImpl.java
│ │ │ │ │ ├── Application.java
│ │ │ │ ├── common
│ │ │ │ │ ├── Result.java
│ │ │ │ ├── interceptor
│ │ │ │ │ ├── LoginInterceptor.java
│ │ │ │ ├── mapper
│ │ │ │ │ ├── TeacherMapper.java
│ │ │ │ ├── utils
│ │ │ │ │ ├── JwtUtils.java
│ │ ├── resources
│ │ │ ├── application.yml
│ │ │ ├── mapper
│ │ │ │ ├── TeacherMapper.xml
│ │ ├── static
│ │ ├── templates
```
## 技术选型
- 后端技术栈：Spring Boot、Mybatis-Plus、JWT、
MySQL
- 前端技术栈：Vue、
Element UI、Axios
## 后端代码
实现
### 配置文件
在 `application.yml`
中配置数据库和 JWT 相关信息。
```yaml
server:
port: 8080
spring:
datasource:
url: jdbc:
mysql://localhost:3306/teacher_evaluation?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai
username: root
password: 123456
driver-class-name: com.
mysql.cj.jdbc.Driver
mybatis-plus:
mapper-locations: classpath:mapper/*.xml
type-aliases-package: com.example.entity
configuration:
map-underscore-to-cam
el-case: true
jwt:
secret: secret
expire: 3600
```
### 实体类
```java
@Data
public class Teacher {
private Integer id;
private String name;
private Integer age;
private String sex;
private String phone;
private String email;
private String address;
private Integer departmentId;
private Integer status;
}
```
### Mapper 接口
```java
public interface TeacherMapper extends BaseMapper<Teacher> {
}
```
### DAO 层
```java
public interface TeacherDao {
Teacher s
electById(Integer id);
List<Teacher> s
electList();
int insert(Teacher teacher);
int update(Teacher teacher);
int d
elete(Integer id);
}
```
### Service 层
```java
public interface TeacherService {
Teacher s
electById(Integer id);
List<Teacher> s
electList();
boolean save(Teacher teacher);
boolean update(Teacher teacher);
boolean d
elete(Integer id);
}
```
### Service
实现类
```java
@Service
public class TeacherServiceImpl implements TeacherService {
@Autowired
private TeacherDao teacherDao;
@Override
public Teacher s
electById(Integer id) {
return teacherDao.s
electById(id);
}
@Override
public List<Teacher> s
electList() {
return teacherDao.s
electList();
}
@Override
public boolean save(Teacher teacher) {
return teacherDao.insert(teacher) > 0;
}
@Override
public boolean update(Teacher teacher) {
return teacherDao.update(teacher) > 0;
}
@Override
public boolean d
elete(Integer id) {
return teacherDao.d
elete(id) > 0;
}
}
```
### Controller 层
```java
@RestController
@RequestMapping("/teacher")
public class TeacherController {
@Autowired
private TeacherService teacherService;
@GetMapping("/list")
public Result list() {
List<Teacher> list = teacherService.s
electList();
return Result.success(list);
}
@PostMapping("/save")
public Result save(@RequestBody Teacher teacher) {
boolean result = teacherService.save(teacher);
return result ? Result.success() : Result.fail("
添加失败");
}
@PostMapping("/update")
public Result update(@RequestBody Teacher teacher) {
boolean result = teacherService.update(teacher);
return result ? Result.success() : Result.fail("更新失败");
}
@PostMapping("/d
elete")
public Result d
elete(@RequestParam Integer id) {
boolean result = teacherService.d
elete(id);
return result ? Result.success() : Result.fail("删除失败");
}
}
```
### JWT 鉴权
```java
@Component
public class LoginInterceptor implements HandlerInterceptor {
@Autowired
private JwtUtils jwtUtils;
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
String token = request.getHeader("Authorization");
if (token == null || !token.startsWith("Bearer ")) {
throw new RuntimeException("无效的token");
}
token = token.replace("Bearer ", "");
if (!jwtUtils.validateToken(token)) {
throw new RuntimeException("无效的token");
}
return true;
}
}
```
## 前端代码
实现
### Axios 请求封装
```js
import axios from 'axios'
import { Message } from '
element-
ui'
let instance = axios.create({
baseURL: '/api',
timeout: 5000,
headers: {
'Content-
Type': 'application/json;charset=UTF-8'
}
})
instance.interceptors.request.use(config => {
let token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
}, error => {
return Promise.reject(error)
})
instance.interceptors.response.use(response => {
if (response.status === 200) {
return response.data
}
else {
Message.error('请求错误')
}
}, error => {
if (error.response.status === 401) {
Message.error('登录过期')
localStorage.removeItem('token')
window.location.href = '/login'
}
else if (error.response.status === 403) {
Message.error('权限不足')
}
else if (error.response.status === 500) {
Message.error('服务器错误')
}
else {
Message.error('请求错误')
}
return Promise.reject(error)
})
export default instance
```
### Vue 页面
```vue
<template>
<div>
<
el-row>
<
el-col :span="24"><h2>教师列表</h2></
el-col>
</
el-row>
<
el-row>
<
el-col :span="24"><
el-
button type="primary" @click="add">
添加教师</
el-
button></
el-col>
</
el-row>
<
el-row>
<
el-col :span="24">
<
el-table :data="tableData" style="width: 100%">
<
el-table-column prop="id" lab
el="ID"></
el-table-column>
<
el-table-column prop="name" lab
el="姓名"></
el-table-column>
<
el-table-column prop="age" lab
el="年龄"></
el-table-column>
<
el-table-column prop="sex" lab
el="性别"></
el-table-column>
<
el-table-column prop="phone" lab
el="电话"></
el-table-column>
<
el-table-column prop="email" lab
el="邮箱"></
el-table-column>
<
el-table-column prop="address" lab
el="地址"></
el-table-column>
<
el-table-column prop="departmentId" lab
el="部门"></
el-table-column>
<
el-table-column prop="status" lab
el="状态"></
el-table-column>
<
el-table-column lab
el="操作">
<template slot-scope="scope">
<
el-
button type="primary" size="mini" @click="edit(scope.row)">编辑</
el-
button>
<
el-
button type="danger" size="mini" @click="remove(scope.row)">删除</
el-
button>
</template>
</
el-table-column>
</
el-table>
</
el-col>
</
el-row>
<
el-dialog title="
添加教师" :visible.sync="addDialogVisible">
<
el-form :mod
el="addForm" :rules="addRules" ref="addForm">
<
el-form-item lab
el="姓名" prop="name">
<
el-input v-mod
el="addForm.name"></
el-input>
</
el-form-item>
<
el-form-item lab
el="年龄" prop="age">
<
el-input v-mod
el="addForm.age"></
el-input>
</
el-form-item>
<
el-form-item lab
el="性别" prop="sex">
<
el-radio-group v-mod
el="addForm.sex">
<
el-radio lab
el="男"></
el-radio>
<
el-radio lab
el="女"></
el-radio>
</
el-radio-group>
</
el-form-item>
<
el-form-item lab
el="电话" prop="phone">
<
el-input v-mod
el="addForm.phone"></
el-input>
</
el-form-item>
<
el-form-item lab
el="邮箱" prop="email">
<
el-input v-mod
el="addForm.email"></
el-input>
</
el-form-item>
<
el-form-item lab
el="地址" prop="address">
<
el-input v-mod
el="addForm.address"></
el-input>
</
el-form-item>
<
el-form-item lab
el="部门" prop="departmentId">
<
el-s
elect v-mod
el="addForm.departmentId">
<
el-option v-for="item in departmentList" :key="item.value" :lab
el="item.lab
el" :value="item.value"></
el-option>
</
el-s
elect>
</
el-form-item>
</
el-form>
<div slot="footer">
<
el-
button @click="addDialogVisible = false">取消</
el-
button>
<
el-
button type="primary" @click="addFormSubmit">
添加</
el-
button>
</div>
</
el-dialog>
<
el-dialog title="编辑教师" :visible.sync="editDialogVisible">
<
el-form :mod
el="editForm" :rules="editRules" ref="editForm">
<
el-form-item lab
el="ID" prop="id">
<
el-input v-mod
el="editForm.id" disabled></
el-input>
</
el-form-item>
<
el-form-item lab
el="姓名" prop="name">
<
el-input v-mod
el="editForm.name"></
el-input>
</
el-form-item>
<
el-form-item lab
el="年龄" prop="age">
<
el-input v-mod
el="editForm.age"></
el-input>
</
el-form-item>
<
el-form-item lab
el="性别" prop="sex">
<
el-radio-group v-mod
el="editForm.sex">
<
el-radio lab
el="男"></
el-radio>
<
el-radio lab
el="女"></
el-radio>
</
el-radio-group>
</
el-form-item>
<
el-form-item lab
el="电话" prop="phone">
<
el-input v-mod
el="editForm.phone"></
el-input>
</
el-form-item>
<
el-form-item lab
el="邮箱" prop="email">
<
el-input v-mod
el="editForm.email"></
el-input>
</
el-form-item>
<
el-form-item lab
el="地址" prop="address">
<
el-input v-mod
el="editForm.address"></
el-input>
</
el-form-item>
<
el-form-item lab
el="部门" prop="departmentId">
<
el-s
elect v-mod
el="editForm.departmentId">
<
el-option v-for="item in departmentList" :key="item.value" :lab
el="item.lab
el" :value="item.value"></
el-option>
</
el-s
elect>
</
el-form-item>
</
el-form>
<div slot="footer">
<
el-
button @click="editDialogVisible = false">取消</
el-
button>
<
el-
button type="primary" @click="editFormSubmit">保存</
el-
button>
</div>
</
el-dialog>
</div>
</template>
<script>
import api from '@/utils/api'
export default {
name: 'TeacherList',
data() {
return {
tableData: [],
addDialogVisible: false,
addForm: {
name: '',
age: '',
sex: '男',
phone: '',
email: '',
address: '',
departmentId: ''
},
addRules: {
name: [
{ req
uired: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
],
age: [
{ req
uired: true, message: '请输入年龄', trigger: 'blur' },
{
type: 'number', message: '年龄必须为数字', trigger: 'blur' }
],
sex: [
{ req
uired: true, message: '请选择性别', trigger: 'change' }
],
phone: [
{ req
uired: true, message: '请输入电话', trigger: 'blur' },
{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
],
email: [
{ req
uired: true, message: '请输入邮箱', trigger: 'blur' },
{
type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
],
address: [
{ req
uired: true, message: '请输入地址', trigger: 'blur' }
],
departmentId: [
{ req
uired: true, message: '请选择所属部门', trigger: 'change' }
]
},
editDialogVisible: false,
editForm: {
id: '',
name: '',
age: '',
sex: '男',
phone: '',
email: '',
address: '',
departmentId: ''
},
editRules: {
name: [
{ req
uired: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
],
age: [
{ req
uired: true, message: '请输入年龄', trigger: 'blur' },
{
type: 'number', message: '年龄必须为数字', trigger: 'blur' }
],
sex: [
{ req
uired: true, message: '请选择性别', trigger: 'change' }
],
phone: [
{ req
uired: true, message: '请输入电话', trigger: 'blur' },
{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
],
email: [
{ req
uired: true, message: '请输入邮箱', trigger: 'blur' },
{
type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
],
address: [
{ req
uired: true, message: '请输入地址', trigger: 'blur' }
],
departmentId: [
{ req
uired: true, message: '请选择所属部门', trigger: 'change' }
]
},
departmentList: [
{ value: 1, lab
el: '计算机科学与技术' },
{ value: 2, lab
el: '信息管理与信息系统' },
{ value: 3, lab
el: '软件工程' }
]
}
},
created() {
this.getList()
},
methods: {
getList() {
api.get('/teacher/list').then(res => {
this.tableData = res.data
})
},
add() {
this.addDialogVisible = true
},
addFormSubmit() {
this.$refs.addForm.validate(valid => {
if (valid) {
api.post('/teacher/save', this.addForm).then(res => {
this.addDialogVisible = false
this.getList()
})
}
})
},
edit(row) {
this.editForm = Object.assign({}, row)
this.editDialogVisible = true
},
editFormSubmit() {
this.$refs.editForm.validate(valid => {
if (valid) {
api.post('/teacher/update', this.editForm).then(res => {
this.editDialogVisible = false
this.getList()
})
}
})
},
remove(row) {
this.$confirm('确定删除？', '提示', {
confirm
ButtonText: '确定',
canc
elButtonText: '取消',
type: 'warning'
}).then(() => {
api.post('/teacher/d
elete', { id: row.id }).then(res => {
this.getList()
})
})
}
}
}
</script>
```
本文介绍如何在Element-UI的el-button组件中添加自定义颜色和图标。通过创建自定义全局指令和修改Element-UI源码，开发人员可以在type属性中指定不同类别，以显示不同颜色和图标。此外，还展示了如何使用自定义图标来替换Element-UI默认图标库中的图标。
扫一扫
4016
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
