学生管理系统 前后端分离项目【简约版】

前言：本项目以学生管理系统为例，实现了新增和查询功能

 后端：SpringBoot    前端：Vue+elementui

1、操作步骤：

        1、在MySQL数据库中生成学生信息表（t_student）

        2、将html中的spboot项目导入HBuilder X中，并且在终端下载npm（联网） 

运行命令：npm i。下载完成之后，运行项目（npm run dev），查看是否能访问页面。

        3、以上步骤完成后即可开始编写后台代码。java项目导入Idea中首先检查Maven的配置是否与本机的路径一致，然后再导入依赖（联网）。再检查application.yml和jdbc.properties文件中的数据库配置（数据库名/账号/密码）是否与数据库一致； 在 generatorConfig.xml文件中修改 指定数据库jdbc驱动的jar包位置。 生成model/mapper层

---

4、后端代码：StudentMapper.java

package com.zking.spboot.mapper;
import com.zking.spboot.model.Student;
import org.springframework.stereotype.Repository;
import java.util.List;
 
@Repository
public interface StudentMapper {
    /**
     * 模糊查询
     * @param student
     * @return
     */
    List queryAll(Student student);
 
    int insert(Student record);
 
}

StudentMapper.xml

"1.0" encoding="UTF-8" ?>
mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.zking.spboot.mapper.StudentMapper" >
  <resultMap id="BaseResultMap" type="com.zking.spboot.model.Student" >
    <constructor >
      <idArg column="sid" jdbcType="INTEGER" javaType="java.lang.Integer" />
      <arg column="sname" jdbcType="VARCHAR" javaType="java.lang.String" />
      <arg column="score" jdbcType="REAL" javaType="java.lang.Float" />
      <arg column="sex" jdbcType="VARCHAR" javaType="java.lang.String" />
    constructor>
  resultMap>
  <sql id="Base_Column_List" >
    sid, sname, score, sex
  sql>
    <select id="queryAll" resultType="com.zking.spboot.model.Student">
      select <include refid="Base_Column_List"/> from t_student where 1=1
      <if test="sname!=null and sname!='' ">
        and sname like concat('%',#{sname},'%')
      if>
    select>
  <insert id="insert" parameterType="com.zking.spboot.model.Student" >
    insert into t_student (sname, score, sex)
    values (#{sname,jdbcType=VARCHAR}, #{score,jdbcType=REAL}, #{sex,jdbcType=VARCHAR})
  insert>
mapper>

StudentService.java

package com.zking.spboot.service;
import com.zking.spboot.model.Student;
import org.springframework.stereotype.Repository;
import java.util.List;
 
public interface StudentService {
    /**
     * 模糊查询
     * @param student
     * @return
     */
    List queryAll(Student student);
    /**
     * 新增
     * @param record
     * @return
     */
    int insert(Student record);
}

 StudentServiceImpl.java

package com.zking.spboot.service.impl;
import com.zking.spboot.mapper.StudentMapper;
import com.zking.spboot.model.Student;
import com.zking.spboot.service.StudentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
 
@Service
public class StudentServiceImpl implements StudentService {
 
    @Autowired
    private StudentMapper studentMapper;
 
    @Override
    public List queryAll(Student student) {
        return studentMapper.queryAll(student);
    }
 
    @Override
    public int insert(Student record) {
        return studentMapper.insert(record);
    }
}

StudentController.java

package com.zking.spboot.controller;
import com.zking.spboot.model.Student;
import com.zking.spboot.service.StudentService;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
 
@RestController
@RequestMapping("/student")
public class StudnetController {
 
    @Autowired
    private StudentService studentService;
 
    @RequestMapping("/queryAll")
    public JsonResponseBody> queryAll(Student student){
        List students = studentService.queryAll(student);
        return new JsonResponseBody<>(200,"Ok",students);
    }
 
    @RequestMapping("/addStu")
    public JsonResponseBody addStu(Student student){
        studentService.insert(student);
        return new JsonResponseBody<>();
    }
 
    /**
     * 匿名内部类
     * @param 
     */
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    class JsonResponseBody{
        private int code=200;
        private String msg="OK";
        private T data;
    }
}

运行项目，查看是否有数据。

 

---

5、在前端页面编写vue文件。项目需要用到elementUI中的组件（搜索框、数据表格、对话框）

Element - The world's most popular Vue UI framework（elementUI 官网）

5.1、先在action.js中配置跳转路径

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
	//服务器
	'SERVER': 'http://localhost:8080/spboot', 
	'ADDSTU':'/student/addStu',
	'QUERYSTU':'/student/queryAll',
	//获得请求的完整地址，用于mockjs测试时使用
	'getFullPath': k => {
		return this.SERVER + this[k];
	}
}

5.2、编辑StuList.vue文件

6、新增&模糊查询