很高兴能为您提供这方面的帮助，以下是基本的代码结构和技术选型：
## 后端代码结构
```
├── 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
│ │ │ │ │ ├── Teacher
Mapper.java
│ │ │ │ ├── utils
│ │ │ │ │ ├── JwtUtils.java
│ │ ├── resources
│ │ │ ├── application.yml
│ │ │ ├──
mapper
│ │ │ │ ├── Teacher
Mapper.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-camel-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 Teacher
Mapper extends Base
Mapper<Teacher> {
}
```
### DAO 层
```java
public interface TeacherDao {
Teacher selectById(Integer id);
List<Teacher> selectList();
int insert(Teacher teacher);
int update(Teacher teacher);
int delete(Integer id);
}
```
### Service 层
```java
public interface TeacherService {
Teacher selectById(Integer id);
List<Teacher> selectList();
boolean save(Teacher teacher);
boolean update(Teacher teacher);
boolean delete(Integer id);
}
```
### Service 实现类
```java
@Service
public class TeacherServiceImpl implements TeacherService {
@Autowired
private TeacherDao teacherDao;
@Override
public Teacher selectById(Integer id) {
return teacherDao.selectById(id);
}
@Override
public List<Teacher> selectList() {
return teacherDao.selectList();
}
@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 delete(Integer id) {
return teacherDao.delete(id) > 0;
}
}
```
### Controller 层
```java
@RestController
@Request
Mapping("/teacher")
public class TeacherController {
@Autowired
private TeacherService teacherService;
@Get
Mapping("/list")
public Result list() {
List<Teacher> list = teacherService.selectList();
return Result.success(list);
}
@Post
Mapping("/save")
public Result save(@RequestBody Teacher teacher) {
boolean result = teacherService.save(teacher);
return result ? Result.success() : Result.fail("添加失败");
}
@Post
Mapping("/update")
public Result update(@RequestBody Teacher teacher) {
boolean result = teacherService.update(teacher);
return result ? Result.success() : Result.fail("更新失败");
}
@Post
Mapping("/delete")
public Result delete(@RequestParam Integer id) {
boolean result = teacherService.delete(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" label="ID"></el-table-column>
<el-table-column prop="name" 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 prop="phone" label="电话"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column prop="departmentId" label="部门"></el-table-column>
<el-table-column prop="status" label="状态"></el-table-column>
<el-table-column label="操作">
<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 :model="addForm" :rules="addRules" ref="addForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="addForm.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="addForm.age"></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="addForm.sex">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="addForm.phone"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="addForm.address"></el-input>
</el-form-item>
<el-form-item label="部门" prop="departmentId">
<el-select v-model="addForm.departmentId">
<el-option v-for="item in departmentList" :
key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</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 :model="editForm" :rules="editRules" ref="editForm">
<el-form-item label="ID" prop="id">
<el-input v-model="editForm.id" disabled></el-input>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="editForm.name"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="editForm.age"></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="editForm.sex">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="editForm.phone"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="editForm.email"></el-input>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="editForm.address"></el-input>
</el-form-item>
<el-form-item label="部门" prop="departmentId">
<el-select v-model="editForm.departmentId">
<el-option v-for="item in departmentList" :
key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</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: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数字', trigger: 'blur' }
],
sex: [
{ required: true, message: '请选择性别', trigger: 'change' }
],
phone: [
{ required: true, message: '请输入电话', trigger: 'blur' },
{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
],
address: [
{ required: true, message: '请输入地址', trigger: 'blur' }
],
departmentId: [
{ required: true, message: '请选择所属部门', trigger: 'change' }
]
},
editDialogVisible: false,
editForm: {
id: '',
name: '',
age: '',
sex: '男',
phone: '',
email: '',
address: '',
departmentId: ''
},
editRules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数字', trigger: 'blur' }
],
sex: [
{ required: true, message: '请选择性别', trigger: 'change' }
],
phone: [
{ required: true, message: '请输入电话', trigger: 'blur' },
{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
],
address: [
{ required: true, message: '请输入地址', trigger: 'blur' }
],
departmentId: [
{ required: true, message: '请选择所属部门', trigger: 'change' }
]
},
departmentList: [
{ value: 1, label: '计算机科学与技术' },
{ value: 2, label: '信息管理与信息系统' },
{ value: 3, label: '软件工程' }
]
}
},
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('确定删除？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '
取消',
type: 'warning'
}).then(() => {
api.post('/teacher/delete', { id: row.id }).then(res => {
this.getList()
})
})
}
}
}
</script>
```
21万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
