- 一、需求介绍
- 二、搭建后端环境
- 1.1 创建项目
- 1.2 导入Pom文件
- 三、前端项目创建
- 数据库准备
- 需求一、显示首页
- 需求2：学校列表
- 前端显示
- 后端编写
- 需求3：添加学校
- 前端编写
- 后端编写
- 需求4：修改学校
- 前端编写
- 后端代码
- 需求5：单个删除学校
- 前端编写
- 后端编写
- 需求6：老师列表、多条件查询
- 前端编写
- 后端编写
- 需求7：添加老师
- 前端编写
- 后端编写
- 需求8：修改老师
- 前端编写
- 后端编写
- 需求9：批量删除老师
- 前端编写
- 后端编写
需求介绍：
- 前端要求：Vue单页
- 后端要求：SpringBoot+ SSM + RESTFul
- 前端项目名字：exam1919
- 后端项目名字：exam_project1919
（我这里是做了前后端分离的方式书写，所以搭建了两个项目）
一、需求介绍需求1：显示首页
需求2：学校列表+分页显示
需求3：添加学校
需求4：修改学校
需求5：单个删除学校
需求6：老师列表、多条件查询
需求7：添加老师
需求8：修改老师
需求9：批量删除老师
exam_project1919的创建
这里不做选择
Finish完成就可以了
我这里导入的是本项目需要的一些jar包，没有仓库的崽崽第一次下载可能会满一点
三、前端项目创建org.springframework.boot spring-boot-starter-parent 2.1.6.RELEASE UTF-8 UTF-8 1.8 1.3.2 2.0.2 5.1.32 1.2.5 1.1.10 org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-test org.springframework.boot spring-boot-starter-jdbc org.mybatis.spring.boot mybatis-spring-boot-starter ${mybatis.starter.version} tk.mybatis mapper-spring-boot-starter ${mapper.starter.version} com.github.pagehelper pagehelper-spring-boot-starter ${pageHelper.starter.version} mysql mysql-connector-java ${mysql.version} com.alibaba druid-spring-boot-starter ${durid.starter.version} io.springfox springfox-swagger2 2.7.0 io.springfox springfox-swagger-ui 2.7.0 com.chuusai shapeless_2.11 2.3.2 org.projectlombok lombok org.junit.jupiter junit-jupiter-api RELEASE test
创建方式和后端相同，创建成功后使用VSCode打开
创建Vue单页项目
ctrl+shift+y打开终端
vue create vue项目名称
创建项目时，会提示我们选择项目中需要使用的组件，我们可以使用默认的配置，也可以自己手动选择需要加载的组件。
【第一步】手动选择组件
【第二步】勾选需要安装的组件：
babel：将ES6的语法转成浏览器可以执行的低版本js语法
Router：（必须）路由
Vuex： 可选
【第三步】选择Vue版本
【第四步】使用路由的 history 模式：
【第五步】把配置写到 package.json 文件中：
不保存本次的配置：
项目创建成功。
安装成功之后，我们可以进行使用以下指令启动项目：
数据库准备cd 项目名 // 进入项目目录
npm run serve // 启动项目
CREATE TABLE `t_school` ( `id` int(11) NOT NULL AUTO_INCREMENT, `school_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, PRIMARY KEY (`id`) USING BTREE ); INSERT INTO `t_school` VALUES (1, '沭阳校区'); INSERT INTO `t_school` VALUES (2, '南京校区'); INSERT INTO `t_school` VALUES (3, '上海校区'); INSERT INTO `t_school` VALUES (4, '北京校区'); CREATE TABLE `t_teacher` ( `id` int(11) NOT NULL AUTO_INCREMENT, `teacher_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, `pwd` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, `sex` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, `salary` decimal(10, 2) NULL DEFAULT NULL, `type_id` int(11) NULL DEFAULT NULL, `school_id` int(11) NULL DEFAULT NULL, `hire_date` date NULL DEFAULT NULL, `remark` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, PRIMARY KEY (`id`) USING BTREE ) ; INSERT INTO `t_teacher` VALUES (1, 'tom', '123', '男', 5000.00, 1, 1, '2020-02-03', 'tom是优秀老师'); INSERT INTO `t_teacher` VALUES (2, 'lucy', '123', '女', 10000.00, 2, 2, '2020-06-09', 'lucy很优秀'); CREATE TABLE `t_type` ( `id` int(11) NOT NULL AUTO_INCREMENT, `city` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, PRIMARY KEY (`id`) USING BTREE ); INSERT INTO `t_type` VALUES (1, '辅导员'); INSERT INTO `t_type` VALUES (2, '助理讲师'); INSERT INTO `t_type` VALUES (3, '主讲老师'); INSERT INTO `t_type` VALUES (4, '财务老师'); INSERT INTO `t_type` VALUES (5, '后勤老师');需求一、显示首页
先添加路径（可以不填，但是每次写url的时候都要写
全了，我懒）
下面那个$http可以随便写 $axios啥的都行，想写啥写啥
在main.js中添加路由
学校管理 |老师管理 |
去router/index.js中配置路由
{
path: ‘/teacher’,
name: ‘Teacher’,
component: () => import(’…/views/Teacher.vue’)
},
{
path: ‘/school’,
name: ‘School’,
component: () => import(’…/views/School.vue’)
},
然后根据路径里面写的创建vue页面就好
这样就两个页面可以来回切换了
表格搭建
| ID | 学校名称 | 操作 |
| {{school.id}} | {{school.schoolName}} |
script编写
后端编写
先搭建整个后端的框架
application类编写
@SpringBootApplication
public class ExamProject1919Application {
public static void main(String[] args) {
SpringApplication.run(ExamProject1919Application.class, args);
}
}
config类编写
@Configuration
public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
//1.添加CORS配置信息
CorsConfiguration config = new CorsConfiguration();
//1) 允许的域,不要写*，否则cookie就无法使用了
config.addAllowedOrigin("");
//2) 是否发送cookie信息
config.setAllowCredentials(false);
//3) 允许的请求方式
config.addAllowedMethod(“OPTIONS”);
config.addAllowedMethod(“HEAD”);
config.addAllowedMethod(“GET”);
config.addAllowedMethod(“PUT”);
config.addAllowedMethod(“POST”);
config.addAllowedMethod(“DELETE”);
config.addAllowedMethod(“PATCH”);
// 4）允许的头信息
config.addAllowedHeader("");
//2.添加映射路径，我们拦截一切请求
UrlbasedCorsConfigurationSource configSource = new UrlbasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
//3.返回新的CorsFilter.
return new CorsFilter(configSource);
}
}
domain：
School类编写
@Table(name = “t_school”)
@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
public class School implements Serializable {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = “id”)
private Integer id;
@Column(name = “school_name”)
private String schoolName;
}
mapper:
SchoolMapper编写：
@org.apache.ibatis.annotations.Mapper
public interface SchoolMapper extends Mapper {
}
controller:
SchoolController:
@RestController
@RequestMapping("/school")
public class SchoolController {
@Resource
SchoolService schoolService;
@GetMapping
public ResponseEntity selectAll(){
List schools= schoolService.selectAll();
if (schools!=null){
return new ResponseEntity<>(schools, HttpStatus.OK);
}else {
return new ResponseEntity<>(“失败”, HttpStatus.OK);
}
}
}
service:
SchoolService:
需求3：添加学校 前端编写@Service
public class SchoolService {
@Resource
SchoolMapper schoolMapper;
public List selectAll() {
return schoolMapper.selectAll();
}
}
在School.vue页面中添加
addSchool(){
this.$router.push("school_add")
},
在index.js中添加路由
{
path: ‘/school_add’,
name: ‘school_add’,
component: () => import(’…/views/school_add.vue’)
},
创建school_add.vue页面
表格搭建
script编写(添加成功后，跳转到学校列表页面)
后端编写
controller:
SchoolController
@PutMapping
public ResponseEntity addSchool(@RequestBody School school) {
boolean b=schoolService.addSchool(school);
if (b){
return new ResponseEntity<>(HttpStatus.OK);
}else {
return new ResponseEntity<>(“添加失败”,HttpStatus.OK);
}
}
service:
SchoolService
需求4：修改学校 前端编写public boolean addSchool(School school) {
return schoolMapper.insert(school)==1;
}
路由动态传参
script:
updataSchool(id) {
this.$router.push(`/school_updata/${id}`);
},
编写路由，跳转页面
{
path: '/school_updata/:id',
name: 'school_updata',
component: () => import('../views/school_updata.vue')
},
school_updata.vue页面
编写表格：
script:
后端编写
-
查询学校
同需求二相同，直接调用就可以 -
查询老师，并分页展示
domain：
Teacher:
@Table(name = “t_teacher”)
@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
public class Teacher implements Serializable {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = “id”)
private Integer id;
@Column(name = “teacher_name”)
private String teacherName;
@Column(name = “pwd”)
private String pwd;
@Column(name = “sex”)
private String sex;
@Column(name = “salary”)
private BigDecimal salary;
@Column(name = “type_id”)
private Integer typeId;
@Column(name = “school_id”)
private Integer schoolId;
@Column(name = “hire_date”)
private Date hireDate;
@Column(name = “remark”)
private String remark;
}
mapper:
TeacherMapper:
@org.apache.ibatis.annotations.Mapper
public interface TeacherMapper extends Mapper {
}
因为前端传来的是多条件的字段，我们这里需要单独写一个对应的类封装前端的多条件数据
vo:
TeacherVo
public class TeacherVo {
private String name;
private Integer sid;
private String minsalary;
private String maxsalary;
private String startHire;
private String endHire;
}
自行补充get/set/tostring方法
controller:
TeacherController:
@PostMapping("/condition/{pageSize}/{pageNum}")
public ResponseEntity conditionTeacher(
@PathVariable(“pageSize”) Integer pageSize,
@PathVariable(“pageNum”) Integer pageNum,
@RequestBody TeacherVo teacherVo){
PageInfo teachers= teacherService.selectConditionAll(teacherVo,pageSize,pageNum);
if (teachers!=null){
return new ResponseEntity<>(teachers, HttpStatus.OK);
}else {
return new ResponseEntity<>(“失败”, HttpStatus.OK);
}
}
service:
TeacherService:
需求7：添加老师 前端编写public PageInfo selectConditionAll(TeacherVo teacherVo,Integer pageSize,Integer pageNum) {
Example example = new Example(Teacher.class);
Example.Criteria criteria = example.createCriteria();
if (teacherVo.getName()!=null&&!teacherVo.getName().equals("")){
criteria.andLike(“teacherName”,"%"+teacherVo.getName()+"%");
}
if (teacherVo.getSid()!=null){
criteria.andEqualTo(“schoolId”,teacherVo.getSid());
}
if (teacherVo.getMinsalary()!=null){
System.out.println(“进来了”);
criteria.andGreaterThanOrEqualTo(“salary”,teacherVo.getMinsalary());
}
if (teacherVo.getMaxsalary()!=null){
criteria.andLessThanOrEqualTo(“salary”,teacherVo.getMaxsalary());
}
if (teacherVo.getStartHire()!=null&&!teacherVo.getStartHire().equals("")){
criteria.andGreaterThanOrEqualTo(“hireDate”,teacherVo.getStartHire());
}
if (teacherVo.getEndHire()!=null&&!teacherVo.getEndHire().equals("")){
criteria.andLessThanOrEqualTo(“hireDate”,teacherVo.getEndHire());
}
PageHelper.startPage(pageNum,pageSize);
List teachers = teacherMapper.selectByExample(example);
PageInfo teacherPageInfo = new PageInfo<>(teachers);
int i = teacherMapper.selectByExample(example).size();
return teacherPageInfo;
}
add(){
this.$router.push("/teacher_add")
},
路由跳转
{
path: '/teacher_add',
name: 'teacher_add',
component: () => import('../views/teacher_add.vue')
},
teacher_add.vue
后端编写
controller:
TeacherController:
@PutMapping
public ResponseEntity addTeacher(@RequestBody Teacher teacher){
boolean b= teacherService.addTeacher(teacher);
if (b){
return new ResponseEntity<>(HttpStatus.OK);
}else {
return new ResponseEntity<>(“添加成功”,HttpStatus.OK);
}
}
service:
TeacherService:
需求8：修改老师 前端编写public boolean addTeacher(Teacher teacher) {
return teacherMapper.insert(teacher)==1;
}
动态传参
update(id){
this.$router.push(`/teacher_updata/${id}`);
},
路由跳转
{
path: '/teacher_updata/:id',
name: 'teacher_updata',
component: () => import('../views/teacher_updata.vue')
},
teacher_updata.vue
这里在选择是需要学校和类型，所以我们要先获取School和Type的全部数据，完成下拉列表显示
根据我们所动态传的id去后台找到对应的Teacher对象回显到前端页面
老师名字： 老师密码： 性别：男 女 类型： 学校： 入职日期： 薪资： 备注：