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

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

 后端：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<Student> queryAll(Student student);

    int insert(Student record);

}

StudentMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE 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<Student> 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<Student> 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<List<Student>> queryAll(Student student){
        List<Student> students = studentService.queryAll(student);
        return new JsonResponseBody<>(200,"Ok",students);
    }

    @RequestMapping("/addStu")
    public JsonResponseBody<?> addStu(Student student){
        studentService.insert(student);
        return new JsonResponseBody<>();
    }

    /**
     * 匿名内部类
     * @param <T>
     */
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    class JsonResponseBody<T>{
        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文件

<template>
	<div>
		<h1 align="center">SpringBoot阶段机试，ts={{ts}}</h1>
		<!-- 1.搜索栏 -->
		<el-form :inline="true">
			<el-form-item label="学生姓名">
				<el-input v-model="sname" placeholder="学生姓名"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="query">查询</el-button>
				<el-button type="primary" @click="open">新增</el-button>
			</el-form-item>
		</el-form>
		<!-- 2.数据表格 -->
		<template>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="sid" label="学生编号" align="center">
				</el-table-column>
				<el-table-column prop="sname" label="学生姓名"align="center">
				</el-table-column>
				<el-table-column prop="score" label="学生成绩" align="center">
				</el-table-column>
				<el-table-column prop="sex" label="学生性别" align="center">
				</el-table-column>
			</el-table>
		</template>
		<!-- 3.弹出框 -->
		<!-- dialogFormVisible:显示隐藏 -->
		<el-dialog title="新增" :visible.sync="dialogFormVisible" @close="close">
		  <el-form :model="stu" :rules="rules" ref="stu">
		    <el-form-item prop="sname" label="学生姓名" label-width="90px">
		      <el-input v-model="stu.sname" autocomplete="off"></el-input>
		    </el-form-item>
			<el-form-item prop="score" label="学生成绩" label-width="90px">
			  <el-input v-model="stu.score" autocomplete="off"></el-input>
			</el-form-item>
		    <el-form-item prop="sex" label="学生性别" label-width="90px">
		      <el-select style="width: 100%;" v-model="stu.sex" placeholder="请选择学生性别">
		        <el-option label="男" value="男"></el-option>
		        <el-option label="女" value="女"></el-option>
		      </el-select>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="save">确 定</el-button>
		  </div>
		</el-dialog>

</div>
</template>

<script>
	export default {
		data: function() {
			return {
				ts: new Date().getTime(),
				sname:'',
				tableData:[],
				dialogFormVisible:false,
				stu:{
					sname:'',
					score:'',
					sex:''
				},
				rules: {
				  sname: [
					{ required: true, message: '请输入学生姓名', trigger: 'blur' },
				  ],
				  score: [
					{ required: true, message: '请输入学生成绩', trigger: 'blur' },
				  ],
				  sex: [
					{ required: true, message: '请选择学生性别', trigger: 'change' },
				  ],
				}
			};
		},
		methods: {
			close:function(){
				//清空表单数据
				this.stu={
					sname:'',
					score:'',
					sex:''
				}
				//清空表单验证
				this.$refs['stu'].resetFields();
			},
			save:function(){
				this.$refs['stu'].validate((valid) => {
				  if (valid) {
					  //1.获取请求路径
					  let url = this.axios.urls.ADDSTU;
					  //2.发起ajxa请求
					  this.axios.post(url,this.stu).then(resp=>{
					  	//获取数据
					  	let data = resp.data;
					  	console.log(data);
						//判断结果码是否为200
						if(data.code==200){
							//关闭对话框
							this.dialogFormVisible=false;
							//刷新列表
							this.query();
						}
					  }).catch(err=>{
					  	
					  })
				  } else {
					this.$message.error('新增失败');
					return false;
				  }
				});
			},
			query: function() {
				//1.定义查询参数
				let params={
					sname:this.sname
				}
				//2.获取请求路径
				let url = this.axios.urls.QUERYSTU;
				//3.发起ajxa请求
				this.axios.post(url,params).then(resp=>{
					//获取数据
					let data = resp.data;
					console.log(data);
					//获取表格中的数据
					this.tableData=data.data;
				}).catch(err=>{
					
				})
			},
			open: function() {
				//打开对话框
				this.dialogFormVisible=true;
			}
		}

	}
</script>

<style>
</style>

6、新增&模糊查询