用SpringBoot2、MyBatisPlus和Vue2写一个成绩管理系统,现在有2020级的一班、二班、三班,2021级的一班,二班、三班,通过Vue选择不同的年级和班级,实现对该班级学生成绩的查询,点击哪级的哪个班级就查询哪张表
时间: 2024-06-11 22:08:28 浏览: 82
1. 创建数据库表
创建一个名为"score"的数据库,包含以下表:
- class_2020_1:2020级1班成绩表
- class_2020_2:2020级2班成绩表
- class_2020_3:2020级3班成绩表
- class_2021_1:2021级1班成绩表
- class_2021_2:2021级2班成绩表
- class_2021_3:2021级3班成绩表
每个表包含以下字段:
- id:主键,自增长
- name:学生姓名
- score:成绩
2. 创建SpringBoot项目
使用Spring Initializr创建一个SpringBoot项目,添加如下依赖:
- spring-boot-starter-web
- spring-boot-starter-data-jpa
- spring-boot-starter-data-jdbc
- spring-boot-starter-jdbc
- mybatis-plus-boot-starter
3. 配置数据源
在application.properties中配置数据源信息,如下所示:
```properties
spring.datasource.url=jdbc:mysql://localhost:3306/score?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
```
4. 配置MyBatisPlus
创建MyBatisPlus的配置类,并添加注解@EnableTransactionManagement和@MapperScan,如下所示:
```java
@Configuration
@EnableTransactionManagement
@MapperScan("com.example.score.mapper")
public class MybatisPlusConfig {
@Bean
public PaginationInterceptor paginationInterceptor() {
return new PaginationInterceptor();
}
}
```
5. 创建实体类和Mapper接口
创建Score实体类,包含以下属性:
- id
- name
- score
创建ScoreMapper接口,继承BaseMapper<Score>,并添加@Mapper注解,如下所示:
```java
@Mapper
public interface ScoreMapper extends BaseMapper<Score> {
}
```
6. 实现查询接口
创建ScoreService接口和ScoreServiceImpl实现类,用于查询成绩信息。ScoreServiceImpl实现类中,根据学年和班级名称,动态生成表名,然后使用MyBatisPlus的LambdaQueryWrapper构建查询条件,查询符合条件的成绩列表,如下所示:
```java
@Service
public class ScoreServiceImpl implements ScoreService {
@Autowired
private ScoreMapper scoreMapper;
@Override
public List<Score> getScores(String year, String className) {
// 动态生成表名
String tableName = "class_" + year + "_" + className;
// 构建查询条件
LambdaQueryWrapper<Score> wrapper = new LambdaQueryWrapper<>();
wrapper.eq(Score::getTableName, tableName);
return scoreMapper.selectList(wrapper);
}
}
```
7. 创建前端页面
使用Vue2创建前端页面,显示学年和班级列表,并根据选择的学年和班级,发送请求查询对应的成绩信息,如下所示:
```html
<template>
<div>
<div>
<span>学年:</span>
<select v-model="year">
<option value="2020">2020</option>
<option value="2021">2021</option>
</select>
</div>
<div>
<span>班级:</span>
<select v-model="className">
<option value="1">1班</option>
<option value="2">2班</option>
<option value="3">3班</option>
</select>
</div>
<button @click="query">查询</button>
<table>
<thead>
<tr>
<th>学生姓名</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr v-for="(score, index) in scores" :key="index">
<td>{{ score.name }}</td>
<td>{{ score.score }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
year: '2021',
className: '1',
scores: []
}
},
methods: {
query() {
axios.get(`/scores?year=${this.year}&className=${this.className}`).then(res => {
this.scores = res.data
})
}
}
}
</script>
```
8. 测试
启动SpringBoot项目,访问前端页面,选择不同的学年和班级,点击查询按钮,页面会显示对应的成绩信息。
阅读全文