ssm+html前后端分离实现简单学生信息管理，登录、增删改查（有多表查询）

可爱的爹爹

已于 2023-11-05 11:36:17 修改

阅读量1.6k

点赞数 9

文章标签： java maven spring mybatis idea 前端 tomcat

于 2023-11-05 11:32:08 首次发布

本文链接：https://blog.csdn.net/qq_54244823/article/details/134227323

版权

一、结构展示

二、实现的功能

登录
条件查询（根据学号，姓名（模糊查询）查询）
新增
修改学生信息
删除（逻辑删除）
查看学生成绩（多表查询）

三、成果展示

可以使用学号和姓名进行条件查询

增加表单

修改表单，数据回显

查看学生的成绩（多表查询）

四、数据库

两个表，student和score表

1.student表（逻辑删除字段deleted记得设置默认值为0哦~）

2.score表（设置id自动递增）

五、后端部分

1.建立一个maven项目（不再演示）

2.pom文件，加载依赖

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>org.example</groupId>
  <artifactId>day11-3SSM</artifactId>
  <packaging>war</packaging>
  <version>1.0-SNAPSHOT</version>
  <name>day11-3SSM Maven Webapp</name>
  <url>http://maven.apache.org</url>
  <dependencies>
    <!-- spring-context 核心基础功能 -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>5.3.18</version>
    </dependency>
    <!-- spring-webmvc -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.3.18</version>
    </dependency>
    <!-- servlet -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>3.1.0</version>
      <scope>provided</scope>
    </dependency>
    <!-- spring-jdbc -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>5.3.18</version>
    </dependency>
    <!-- aop 面向切面(事务管理) -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aspects</artifactId>
      <version>5.3.18</version>
    </dependency>
    <!-- 阿里数据源 -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.1.10</version>
    </dependency>
    <!-- mybatis框架 -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.4.2</version>
    </dependency>
    <!-- spring整合mybatis的插件包 -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.1</version>
    </dependency>
    <!-- mysql驱动 -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.33</version>
    </dependency>
    <!-- 日志：log4j -->
    <dependency>
      <groupId>log4j</groupId>
      <artifactId>log4j</artifactId>
      <version>1.2.17</version>
    </dependency>
    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.20</version>
    </dependency>
    <!--Jackson依赖-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>2.9.0</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.9.0</version>
    </dependency>
  </dependencies>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.encoding>UTF-8</maven.compiler.encoding>
    <java.version>17</java.version>
    <maven.compiler.source>17</maven.compiler.source>
    <maven.compiler.target>17</maven.compiler.target>
  </properties>
  <build>
    <finalName>day11-3SSM</finalName>
  </build>
</project>

3.在resources目录下建立spring.xml配置文件

注意在配置数据源处修改自己的数据库配置

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd">

    <!--扫描service层-->
    <context:component-scan base-package="com.stu.service"/>

    <!--配置数据源-->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <property name="driverClassName" value="com.mysql.cj.jdbc.Driver"/>
        <property name="url" value="jdbc:mysql://127.0.0.1:3306/ssm_test"/>
        <property name="username" value="root"/>
        <property name="password" value="111111"/>
    </bean>
    <!--配置SqlSessionFactory-->
    <bean id="sessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--指定数据源-->
        <property name="dataSource" ref="dataSource"/>
        <!--配置实体类别名-->
        <property name="typeAliasesPackage" value="com.stu.model"/>
        <!-- 指定映射文件的路径 -->
        <property name="mapperLocations" value="classpath:mapper/*.xml"/>
    </bean>
    <!--配置Mapper代理-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.stu.dao"/>
        <property name="sqlSessionFactoryBeanName" value="sessionFactory"/>
    </bean>

</beans>

4.在resources目录下建立springMVC.xml配置文件

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!--处理访问静态资源的请求-->
    <mvc:default-servlet-handler/>

    <!--扫描控制层-->
    <context:component-scan base-package="com.stu.controller"/>

    <!--开启SpringMVC注解扫描器-->
    <mvc:annotation-driven/>
</beans>

5.在resources目录下建立log4j.properties日志文件

log4j.appender.stdout.Target = System.out
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.layout = org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern =  %d{ABSOLUTE} %5p %c{1}:%L - %m%n
log4j.logger.com.stu.dao=TRACE
log4j.rootLogger=INFO, stdout

6.修改web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

  <!--配置Spring框架配置文件的路径-->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:spring.xml</param-value>
  </context-param>
  <!--注册Spring框架的核心监听器-->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <!--配置SpringMVC框架的中央控制器-->
  <servlet>
    <servlet-name>DispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <!--配置SpringMVC框架配置文件的路径-->
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:springMVC.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>DispatcherServlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

  <!--配置编码过滤器-->
  <filter>
    <filter-name>CharacterEncodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>UTF-8</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>CharacterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>


  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
</web-app>

7.如图所示建立文件夹和类，接口等等。。。

（1）ResultCode接口

public interface ResultCode {

    Integer SUCCESS = 200;
    Integer ERROR = 500;
}

（2）RestResult类


@Data
public class RestResult {
    private Boolean success;

    private Integer code;

    private String message;

    private Map<String, Object> data = new HashMap<String, Object>();

    private RestResult() {
    }

    public static RestResult ok() {
        RestResult restResult = new RestResult();
        restResult.setSuccess(true);
        restResult.setCode(ResultCode.SUCCESS);
        restResult.setMessage("成功");
        return restResult;
    }

    public static RestResult error() {
        RestResult restResult = new RestResult();
        restResult.setSuccess(false);
        restResult.setCode(ResultCode.ERROR);
        restResult.setMessage("失败");
        return restResult;
    }

    public RestResult success(Boolean success) {
        this.setSuccess(success);
        return this;
    }

    public RestResult message(String message) {
        this.setMessage(message);
        return this;
    }

    public RestResult code(Integer code) {
        this.setCode(code);
        return this;
    }

    public RestResult data(String key, Object value) {
        this.data.put(key, value);
        return this;
    }

    public RestResult data(Map<String, Object> map) {
        this.setData(map);
        return this;
    }
}

（3）先写model层的实体类吧，Score类

@Data
public class Score {
    private Integer id;
    private Integer sid;
    private String cname;
    private Integer score;
}

（4）ScoreVo类

@EqualsAndHashCode(callSuper = true)
@Data
@NoArgsConstructor
@AllArgsConstructor
public class ScoreVo extends Score {
    private String name;
}

（5）Student类

@NoArgsConstructor
@AllArgsConstructor
@Data
public class Student {
    private Integer id;
    private String name;
    private Integer age;
    private String sex;
    private String password;
    private Integer deleted;
}

实体类创建结束~

（6）mapper层下的StudentDao.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.stu.dao.StudentDao">

<!--    条件分页查询-->
    <select id="pageSelect" resultType="com.stu.model.Student">
        select *
        from student
        <where>
            deleted = 0
            <if test="name != null and name != ''">
                and student.name like '%' #{name} '%'
            </if>
            <if test="id != null and id != ''">
                and student.id = #{id}
            </if>
        </where>

    </select>

<!--    查询符合条件的总记录数-->
    <select id="selectCount" resultType="java.lang.Integer">
        select count(*)
        from student
        <where>
            deleted = 0
            <if test="name != null and name != ''">
                and student.name like '%' #{name} '%'
            </if>
            <if test="id != null and id != ''">
                and student.id = #{id}
            </if>
        </where>
    </select>
<!--    学号和密码查询-->
    <select id="selectLogin" resultType="com.stu.model.Student">
        select *
        from student
        where
            id = #{id}
            and password = #{password}
    </select>

    <insert id="insertStu">
        insert into student (id, name, sex, age)
        VALUES (#{id}, #{name}, #{sex}, #{age})
    </insert>
    <update id="updateStu">
        update student
        set id=#{id},
            name=#{name},
            sex=#{sex},
            age=#{age}
        where id = #{id}
          and deleted = 0
    </update>
<!--    根据id查询-->
    <select id="selectById" resultType="com.stu.model.Student">
        select *
        from student
        where id=#{id}
        and deleted=0
    </select>
<!--逻辑删除-->
    <delete id="delete">
        update student set deleted=1 where deleted=0 and id =#{id}
    </delete>
<!--    根据id查成绩-->
    <select id="selectScore" resultType="com.stu.model.ScoreVo">
        select student.name as name,
               score.sid as sid,
               score.cname as cname,
               score.score as score
        from student,score
        where student.id=#{id} and student.id = score.sid and deleted = 0
    </select>
</mapper>

（7）StudentDao接口

public interface StudentDao {
    public Student selectLogin(Student student);
    public List<Student> pageSelect(@Param("name") String name,
                                    @Param("id") Integer id,
                                    @Param("startIndex") Integer startIndex,
                                    @Param("limit") Integer limit
                                    );
    public Integer selectCount(@Param("name") String name,
                                @Param("id") Integer id);
    public boolean insertStu(Student student);
    public boolean updateStu(Student student);
    public Student selectById(Integer id);
    public boolean delete(Integer id);
    public List<ScoreVo> selectScore(Integer id);
}

（8）service层接口IStudentService

public interface IStudentService {
    public RestResult login(Student student);

    public RestResult pageSelect(String name, Integer id,Integer current,Integer limit);
    public RestResult insertStu(Student student);
    public RestResult updateStu(Student student);
    public RestResult selectById(Integer id);
    public RestResult delete(Integer id);
    public RestResult selectScore(Integer id);
}

（9）service层实现类StudentService

@Service()
public class StudentService implements IStudentService {
    @Autowired
    private StudentDao studentDao;
    public RestResult login(Student student) {
        Student student1 = studentDao.selectLogin(student);
        if(student1 != null){
            System.out.println(RestResult.ok().data("student",student1));
            return RestResult.ok().data("student",student1);
        }else{
            return RestResult.error();
        }
    }

    @Override
    public RestResult pageSelect(String name,Integer id,Integer current, Integer limit) {
        System.out.println(name+"------"+id);
        int total = studentDao.selectCount(name,id);
        System.out.println("总记录数"+total);
        int pages = (total+limit-1)/limit;
        int startIndex = (current-1)*limit;
        List<Student> students = studentDao.pageSelect(name,id,current, limit);
        System.out.println(students+"  .."+current+"  "+limit);
        return RestResult.ok().data("total", total).data("pages", pages).data("rows", students).data("current", current).data("limit", limit);

    }

    @Override
    public RestResult insertStu(Student student) {
        System.out.println(student);
        boolean b = studentDao.insertStu(student);
        if(b==true){
            return RestResult.ok();
        }else{
            return RestResult.error();
        }
    }

    @Override
    public RestResult updateStu(Student student) {
        boolean b = studentDao.updateStu(student);
        if(b==true){
            return RestResult.ok();
        }else{
            return RestResult.error();
        }
    }

    @Override
    public RestResult selectById(Integer id) {
        Student student = studentDao.selectById(id);
        System.out.println("chagenjuid"+student);
        return RestResult.ok().data("student",student);
    }

    @Override
    public RestResult delete(Integer id) {
        boolean delete = studentDao.delete(id);
        if(delete==true){
            return RestResult.ok();
        }else{
            return RestResult.error();
        }
    }

    @Override
    public RestResult selectScore(Integer id) {
        List<ScoreVo> scoreVos = studentDao.selectScore(id);
        System.out.println(scoreVos);
        return RestResult.ok().data("score",scoreVos);
    }
}

（10）controller层StudentController类


@RestController
@RequestMapping("/stu")
public class StudentController {
    @Autowired
    private StudentService service;

    @PostMapping("/login")
    public RestResult login(@RequestBody Student student){
        System.out.println(student);
        return service.login(student);
    }

    @PostMapping("/pageSelect/{current}/{limit}")
    public RestResult pageSelect(
            @RequestParam(required = false) String name,
            @RequestParam(required = false) Integer id,
            @PathVariable Integer current,
            @PathVariable Integer limit
    ){
        System.out.println(name+"---"+id);
        return service.pageSelect(name,id,current, limit);
    }
    @PostMapping("/insert")
    public RestResult insertStu(@RequestBody Student student){
        return service.insertStu(student);
    }
    @PostMapping("/update")
    public RestResult updateStu(@RequestBody Student student){
        return service.updateStu(student);
    }
    @GetMapping("/selectById/{id}")
    public RestResult selectById(@PathVariable Integer id){
        System.out.println(id);
        return service.selectById(id);
    }
    @PostMapping("/delete/{id}")
    public RestResult delete(@PathVariable Integer id){
        return service.delete(id);
    }

    @GetMapping("/selectScore/{id}")
    public RestResult selectScore(@PathVariable Integer id){
        System.out.println("controller"+id);
        return service.selectScore(id);
    }
}

后端代码结束~撒花~~~~~

六、前端部分

前端我使用的是在html中嵌入vue和element ui~

1.首先~看一下项目结构

axios.min.js文件需要大家自己下载一下，放在js文件夹下，这个大家自行百度下载~很简单，我就不做赘述了~

2.index.html文件（登录页面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--引入 element-ui 的样式，-->
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="./css/login.css">
  <script src="./js/axios.min.js"></script>
</head>
<body>
<div>
  <div id="login">
    <p class="title">学生信息管理</p>
    <el-form
            :model="student"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
    >
      <el-form-item label="学号" prop="id">
        <el-input v-model="student.id"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="student.password"></el-input>
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="primary" @click="login()">登录</el-button>
        <span></span>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
<script>
  new Vue({
    el:"#login",
      data() {
        return {
          student: {
            id: "",
            password: "",
          },
          rules: {
            name: [
              { required: true, message: "请输入学号", trigger: "blur" },
              {
                min: 3,
                max: 12,
                message: "长度在 3 到 12 个字符",
                trigger: "blur",
              },
            ],
            password: [
              { required: true, message: "请输入密码", trigger: "blur" },
              {
                min: 3,
                max: 16,
                message: "长度在 3 到 16 个字符",
                trigger: "blur",
              },
            ],
          },
        };
      },
      methods: {
        // 登录方法
        login() {
          axios({
            method: "post", // 请求类型
            url: "/stu/login", // 请求路径
            data: this.student, // 请求对象
          }).then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              // 登录成功
              // 可以全局存储数据（JavaScript中的基本数据类型）
              localStorage.setItem("name", res.data.data.student.name);
              localStorage.setItem("id", res.data.data.student.id); // 跳转至主页面
              this.jumpHtml();
            }
          });
        }, // 清空表单
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        jumpHtml(){
          window.location.href="./studentList.html"
        }
      },
  })
</script>
</body>
</html>

3.StudentList.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理</title>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="./js/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/studentList.css">
    <link rel="shortcut icon" href="#"/>
</head>
<body>
<div id="myTable">
    <div id="queryForm">
        <el-form :inline="true" :model="query">
            <el-form-item>
                <el-col :span="16">
                    <el-input v-model="query.id" placeholder="学号"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-col :span="16">
                    <el-input v-model="query.name" placeholder="姓名"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="querySearch">查询</el-button>
                <el-button type="primary">
                    <i class="el-icon-plus el-icon--right" @click="goSavePage">增加</i></el-button>
            </el-form-item>
        </el-form>
    </div>
    <!-- 数据表格 -->
    <el-table :data="studentList" style="width: 100%" border="1">
        <el-table-column
                width="100"
                type="index"
                label="序号"
                :index="indexMethod">
        </el-table-column>
        <el-table-column label="学号" width="180" prop="id" align="center"></el-table-column>
        <el-table-column label="姓名" width="180" prop="name" align="center"></el-table-column>
        <el-table-column label="性别" width="180" prop="sex" align="center"></el-table-column>
        <el-table-column label="年龄" width="180" prop="age" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
            <template slot-scope="scope">
                <el-button size="mini" type="primary" icon="el-icon-edit" @click="goUpdatePage(scope.row.id)">编辑
                </el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="delStudent(scope.row.id)">删除
                </el-button>
                <el-button size="mini" type="primary" @click="viewScore(scope.row.id)">查看成绩</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
                       :page-sizes="[5, 10, 15, 20, 30, 50, 100]" :page-size="limit"
                       layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
    <!--            增加修改-->
    <div>
        <el-drawer :title="title" width="50%" :visible.sync="dialog" direction="rtl" custom-class="demo-drawer"
                   ref="drawer">
            <el-form label-width="100px" :model="student">
                <el-form-item label="姓名">
                    <el-input v-model="student.name"></el-input>
                </el-form-item>
                <el-form-item label="学号">
                    <el-input v-model="student.id"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="student.sex"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="student.age"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-plus" @click="saveStu">保存</el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="resetForm2">重置</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
    <!--            成绩表单-->
    <div>
        <el-dialog
                :visible.sync="dialog2"
                width="50%">
            <el-table :data="scoreList" border style="width: 100%">
                <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                <el-table-column prop="sid" label="学号" width="180"></el-table-column>
                <el-table-column prop="cname" label="课程名称" width="180"></el-table-column>
                <el-table-column prop="score" label="成绩" width="180"></el-table-column>
            </el-table>
        </el-dialog>
    </div>

</div>
<script>
    new Vue({
        el: "#myTable",
        data() {
            return {
                dialog: false,  // 用户增加和修改页面的开关
                dialog2: false,
                query: {},  // form表单条件查询
                current: 1,  // 当前页
                limit: 10,  // 每页显示的记录数
                total: 0, // 总记录数,
                title: "",
                student: {},
                studentList: [],  // 数据表格绑定的数据
                imageUrl: '',
                flag: 0,
                scoreList: [],
            };
        },
        created() {
            this.getData(this.current, this.limit);
        },
        methods: {
            indexMethod(index) {
                return index +1;
            },
            // form表单条件查询
            querySearch() {
                this.pageSelect(this.current, this.limit);
            },
            getData(current, limit) {
                axios({
                    method: 'post',
                    url: `/stu/pageSelect/${current}/${limit}`,
                    data: this.student,
                }).then(res => {
                    this.studentList = res.data.data.rows;
                    this.total = res.data.data.total;
                    console.log('丹青: ', this.studentList)
                })
            },
            pageSelect(current, limit) {
                axios({
                    method: 'post',
                    url: `/stu/pageSelect/${current}/${limit}`,
                    params: {
                        id: this.query.id,
                        name: this.query.name
                    }
                }).then(res => {
                    this.studentList = res.data.data.rows;
                    this.total = res.data.data.total;
                })
            },
            // 当前页显示记录数发生变化时
            handleSizeChange(val) {
                this.limit = val;
                this.pageSelect(this.current, this.limit);
            },
            // 当前页发生变化时
            handleCurrentChange(val) {
                this.current = val;
                this.pageSelect(this.current, this.limit);
            },
            // 删除学生
            delStudent(id) {
                this.$confirm('是否删除选中的数据?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: 'post',
                        url: `/stu/delete/${id}`,
                    }).then(res => {
                        if (res.data.code == 200) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.pageSelect(this.current, this.limit);
                        } else {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //跳转到增加
            // 跳转到增加页面
            goSavePage() {
                this.flag = 1;
                this.dialog = true;
                this.title = "添加学生";
                this.student = {};
            },
            // 保存用户业绩信息
            saveStu() {
                console.log("000000000000")
                console.log(this.student)
                if (this.flag == 0) {// 用户编辑操作
                    this.updatedStu();
                } else {
                    this.save();

                }
            },
            //新增
            save() {
                axios({
                    method: 'post',
                    url: `/stu/insert`,
                    data: this.student,
                }).then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        });
                        this.pageSelect(this.current, this.limit);
                    } else {
                        this.$message({
                            message: '保存失败',
                            type: 'error'
                        });
                    }
                });
                this.dialog = false;
            },
            // 修改学生信息
            updatedStu() {
                axios({
                    method: "post",
                    url: "/stu/update",
                    data: this.student
                }).then(res => {
                    if (res.data.code == 200) {
                        this.dialog = false;
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        this.pageSelect(this.current, this.limit);
                    }
                });
            },
            // 跳转到用户编辑页面
            goUpdatePage(id) {
                this.flag = 0;
                this.dialog = true;
                this.title = "修改学生信息";
                axios({
                    method: "GET",
                    url: `/stu/selectById/${id}`
                }).then(res => {
                    this.student = res.data.data.student
                })
            },
            viewScore(id) {
                this.dialog2 = true;
                this.total = "学生成绩查看";
                axios({
                    method: "get",
                    url: `/stu/selectScore/${id}`
                }).then(res => {
                    this.scoreList = res.data.data.score
                    console.log(res.data.data.score);
                })
            }
        }
    })
</script>
</body>
</html>

4.login.css

* {
    margin: 0;
    padding: 0;
}

#login {
    padding-top: 200px;
}

.title {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 20px;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.4);
}

.demo-ruleForm {
    width: 350px;
    margin: 20px auto;
    padding: 30px 50px 10px 0;
    text-align: center;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

#login p {
    text-align: center;
}

.btn {
    text-align: center;
}

.btn span {
    display: inline-block;
    width: 30px;
}

5.StudentList.css

.myTable {
    width: 98%;
    height: 850px;
    margin: 10px auto;
    text-align: center;
    overflow: hidden scroll;
}

.block {
    margin-top: 15px;
}

#queryForm {
    width: 100%;
    height: 50px;
    text-align: left;
    padding: 10px 0 0 15px;
    margin-bottom: 10px;
    border-radius: 5px;
}

#queryForm .el-input {
    width: 100px;
    margin-right: 30px;
}
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}

.box-card {
    width: 480px;
}

代码部分全部结束~~~~