Vue入门项目：学生管理系统之班级管理 【含源码】，如何学web前端开发

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：docs.qq.com/doc/DSmRnRG…

            <groupId>com.alibaba.cloud</groupId>

            <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>

            <version>${alibaba.cloud.version}</version>

        </dependency>



        <!--nacos cloud 配置 -->

        <dependency>

            <groupId>com.alibaba.cloud</groupId>

            <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>

            <version>${alibaba.cloud.version}</version>

        </dependency>



        <!-- https://mvnrepository.com/artifact/com.alibaba.cloud/spring-cloud-starter-alibaba-sentinel -->

        <dependency>

            <groupId>com.alibaba.cloud</groupId>

            <artifactId>spring-cloud-starter-alibaba-sentinel</artifactId>

            <version>${alibaba.cloud.version}</version>

        </dependency>



        <!-- mybatis启动器 -->

        <dependency>

            <groupId>org.mybatis.spring.boot</groupId>

            <artifactId>mybatis-spring-boot-starter</artifactId>

            <version>${mybatis.starter.version}</version>

        </dependency>

        <!-- 通用Mapper启动器 -->

        <dependency>

            <groupId>tk.mybatis</groupId>

            <artifactId>mapper-spring-boot-starter</artifactId>

            <version>${mapper.starter.version}</version>

        </dependency>

        <!-- 分页助手启动器 -->

        <dependency>

            <groupId>com.github.pagehelper</groupId>

            <artifactId>pagehelper-spring-boot-starter</artifactId>

            <version>${pageHelper.starter.version}</version>

        </dependency>



        <!-- mybatis plus-->

        <dependency>

            <groupId>com.baomidou</groupId>

            <artifactId>mybatis-plus-boot-starter</artifactId>

            <version>${mybatis.plus.version}</version>

        </dependency>

        <dependency>

            <groupId>com.baomidou</groupId>

            <artifactId>mybatis-plus-annotation</artifactId>

            <version>${mybatis.plus.version}</version>

        </dependency>



        <!-- mysql驱动 -->

        <dependency>

            <groupId>mysql</groupId>

            <artifactId>mysql-connector-java</artifactId>

            <version>${mysql.version}</version>

        </dependency>



        <!-- Druid连接池 -->

        <dependency>

            <groupId>com.alibaba</groupId>

            <artifactId>druid-spring-boot-starter</artifactId>

            <version>${durid.starter.version}</version>

        </dependency>



        <!--swagger2-->

        <dependency>

            <groupId>io.springfox</groupId>

            <artifactId>springfox-swagger2</artifactId>

            <version>${swagger.version}</version>

        </dependency>

        <dependency>

            <groupId>io.springfox</groupId>

            <artifactId>springfox-swagger-ui</artifactId>

            <version>${swagger.version}</version>

        </dependency>



        <!--jwt-->

        <!--JavaBean工具类，用于JavaBean数据封装-->

        <dependency>

            <groupId>commons-beanutils</groupId>

            <artifactId>commons-beanutils</artifactId>

            <version>${beanutils.version}</version>

        </dependency>



        <!--jwt工具-->

        <dependency>

            <groupId>io.jsonwebtoken</groupId>

            <artifactId>jjwt</artifactId>

            <version>${jwt.jjwt.version}</version>

        </dependency>



        <!--joda 时间工具类 -->

        <dependency>

            <groupId>joda-time</groupId>

            <artifactId>joda-time</artifactId>

            <version>${jwt.joda.version}</version>

        </dependency>



    </dependencies>



</dependencyManagement>



<dependencies>

    <!--web起步依赖-->

    <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-web</artifactId>

    </dependency>

    <!-- mybatis启动器 -->

    <dependency>

        <groupId>org.mybatis.spring.boot</groupId>

        <artifactId>mybatis-spring-boot-starter</artifactId>

    </dependency>

    <!-- 通用Mapper启动器 -->

    <dependency>

        <groupId>tk.mybatis</groupId>

        <artifactId>mapper-spring-boot-starter</artifactId>

    </dependency>

    <!-- 分页助手启动器 -->

    <dependency>

        <groupId>com.github.pagehelper</groupId>

        <artifactId>pagehelper-spring-boot-starter</artifactId>

    </dependency>

    <!-- mysql驱动 -->

    <dependency>

        <groupId>mysql</groupId>

        <artifactId>mysql-connector-java</artifactId>

    </dependency>

    <!-- Druid连接池 -->

    <dependency>

        <groupId>com.alibaba</groupId>

        <artifactId>druid-spring-boot-starter</artifactId>

    </dependency>

    <!--swagger2-->

    <dependency>

        <groupId>io.springfox</groupId>

        <artifactId>springfox-swagger2</artifactId>

    </dependency>

    <dependency>

        <groupId>io.springfox</groupId>

        <artifactId>springfox-swagger-ui</artifactId>

    </dependency>

</dependencies>

###                 3.1.3核心配置文件



*   application.properties



![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5893a7546ad54f3f9ad64b81d538f52b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771325651&x-signature=LawgRK%2BwbJvrUD4VYdPUNbsG55Q%3D)

#端口号

server.port=8080

#数据库基本配置

spring.datasource.driverClassName=com.mysql.jdbc.Driver

spring.datasource.url=jdbc:mysql://127.0.0.1:3306/ssm_db3?useUnicode=true&characterEncoding=utf8

spring.datasource.username=root

spring.datasource.password=1234

#druid 连接池配置

#驱动

#spring.datasource.driver-class-name=com.mysql.jdbc.Driver

#初始化连接池大小

spring.datasource.druid.initial-size=1

#最小连接数

spring.datasource.druid.min-idle=1

#最大连接数

spring.datasource.druid.max-active=20

#获取连接时候验证，会影响性能

spring.datasource.druid.test-on-borrow=true

mybatis

mybatis.type-aliases-package=com.czxy.domain.base

mybatis.mapper-locations=classpath:mappers/*.xml

#mapper

mapper.not-empty=false

mapper.identity=MYSQL

#开启驼峰映射

mybatis.configuration.map-underscore-to-camel-case=true

mybatis.mapper-locations=classpath*:mapper/*.xml

#开启log4j打印SQL语句

logging.level.com.czxy.dao=debug

###                 3.1.4启动类



![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/bf5c38e6debf4f8e8827f2d75e4d58f8~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771325651&x-signature=Yw1xCB%2Fq3UooEaKalKWOM9OS33I%3D)

package com.czxy.ssm;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication

public class StudentApplication {

public static void main(String[] args) {

    SpringApplication.run(StudentApplication.class, args);

}

}

###                 3.1.5封装类



![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/77ca1ec4ce0a47cca745da13ba4cca17~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771325651&x-signature=1CFQnRm0fYF6%2FlhHSR7vjcjsZfY%3D)

package com.czxy.ssm.vo;

import java.util.HashMap;

import java.util.Map;

public class BaseResult {

//成功状态码

public static final int OK = 1;

//失败状态码

public static final int ERROR = 0;



//返回码

private Integer code;

//返回消息

private String message;



//存放数据

private T data;

//其他数据

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



public BaseResult() {



}



public BaseResult(Integer code, String message) {

    this.code = code;

    this.message = message;

}

public BaseResult(Integer code, String message, T data) {

    this.code = code;

    this.message = message;

    this.data = data;

}



/**

 * 快捷成功BaseResult对象

 * @param message

 * @return

 */

public static BaseResult ok(String message){

    return new BaseResult(BaseResult.OK , message);

}



public static BaseResult ok(String message, Object data){

    return new BaseResult(BaseResult.OK , message, data );

}



/**

 * 快捷失败BaseResult对象

 * @param message

 * @return

 */

public static BaseResult error(String message){

    return new BaseResult(BaseResult.ERROR , message);

}



/**

 * 自定义数据区域

 * @param key

 * @param msg

 * @return

 */

public BaseResult append(String key , Object msg){

    other.put(key , msg);

    return this;

}



public Integer getCode() {

    return code;

}



public String getMessage() {

    return message;

}



public T getData() {

    return data;

}



public Map<String, Object> getOther() {

    return other;

}

}

###                 3.1.6配置类(可选)



![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e084fe7efbf44110baa7fa7948d46a0f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771325651&x-signature=MQzgpJ8IoOSHSAQasjm2w8PZQmw%3D)

package com.czxy.student.config;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import springfox.documentation.builders.ApiInfoBuilder;

import springfox.documentation.builders.PathSelectors;

import springfox.documentation.builders.RequestHandlerSelectors;

import springfox.documentation.service.*;

import springfox.documentation.spi.DocumentationType;

import springfox.documentation.spi.service.contexts.SecurityContext;

import springfox.documentation.spring.web.plugins.Docket;

import springfox.documentation.swagger2.annotations.EnableSwagger2;

import java.util.ArrayList;

import java.util.List;

/**

• Swagger2 配置类，

• 访问路径：swagger-ui.html

• 自动注册：

• 位置：resources/META-INF/spring.factories
  

• 内容：
  

•    org.springframework.boot.autoconfigure.EnableAutoConfiguration=\
  

•      com.czxy.config.Swagger2Configuration
  

*/

@Configuration

@EnableSwagger2

public class Swagger2ConfigurationV3 {

@Bean

public Docket createRestApi() {

    // 1 确定文档Swagger版本

    Docket docket = new Docket(DocumentationType.SWAGGER_2);

    // 2 设置 api基本信息

    docket.apiInfo(apiInfo());

    // 3 设置自定义加载路径

    docket = docket.select()

            .apis(RequestHandlerSelectors.basePackage("com.czxy"))

            .paths(PathSelectors.any())

            .build();

    //4 设置权限

    docket.securitySchemes(securitySchemes());

    docket.securityContexts(securityContexts());



    return docket;

}



private ApiInfo apiInfo() {

    return new ApiInfoBuilder()

            .title("API")

            .description("基于swagger接口文档")

            .contact(new Contact("梁桐","http://www.javaliang.com","liangtong@itcast.cn"))

            .version("1.0")

            .build();

}



private List<ApiKey> securitySchemes() {

    List<ApiKey> list = new ArrayList<>();

    // name 为参数名  keyname是页面传值显示的 keyname， name在swagger鉴权中使用

    list.add(new ApiKey("Authorization", "Authorization", "header"));

    return list;

}



private List<SecurityContext> securityContexts() {

    List<SecurityContext> list = new ArrayList<>();

    list.add(SecurityContext.builder()

            .securityReferences(defaultAuth())

            .forPaths(PathSelectors.regex("^(?!auth).*$"))

            .build());

    return list;

}



private List<SecurityReference> defaultAuth() {

    AuthorizationScope authorizationScope = new AuthorizationScope("global", "accessEverything");

    AuthorizationScope[] authorizationScopes = new AuthorizationScope[1];

    authorizationScopes[0] = authorizationScope;

    List<SecurityReference> list = new ArrayList();

    list.add(new SecurityReference("Authorization", authorizationScopes));

    return list;

}

}

        3.2前端环境

---------------



###                 3.2.1拷贝静态资源



![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3260c4c07ed54474a923d32cba703fbf~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771325651&x-signature=FC1Qbiqv%2FEV%2FMD3gjnJg%2FbG2fHQ%3D)      



###                 3.2.2vs打开资源



![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/9df6f9fc389b4a1d94aa5fd18915777e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771325651&x-signature=52Mj2uIQIBlmGKgdBDfTQgwPUaE%3D) 



4.班级管理

======



        4.1JavaBean:Classes

---------------------------



![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/e18de7d06d1441f4b28a66531274ecfd~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771325651&x-signature=7vnzo3q3mizGW9beQrD%2FoyliF%2B4%3D)

package com.czxy.ssm.domain;

import javax.persistence.Column;

import javax.persistence.Id;

import javax.persistence.Table;

@Table(name = "tb_class")

public class Classes {

/*

CREATE TABLE tb_class(

  `c_id` VARCHAR(32) PRIMARY KEY COMMENT '班级ID',

  `c_name` VARCHAR(50) COMMENT '班级名称',

  `desc` VARCHAR(200) COMMENT '班级描述'

);

 */



@Id

@Column(name = "c_id")

private String cid;



@Column(name = "c_name")

private String cname;



@Column(name = "`desc`")

private String desc;



public String getCid() {

    return cid;

}



public void setCid(String cid) {

    this.cid = cid;

}



public String getCname() {

    return cname;

}



public void setCname(String cname) {

    this.cname = cname;

}



public String getDesc() {

    return desc;

}



public void setDesc(String desc) {

    this.desc = desc;

}



public Classes() {

}



public Classes(String cid, String cname, String desc) {

    this.cid = cid;

    this.cname = cname;

    this.desc = desc;

}



@Override

public String toString() {

    return "Classes{" +

            "cid='" + cid + '\'' +

            ", cname='" + cname + '\'' +

            ", desc='" + desc + '\'' +

            '}';

}

}

        4.2查询所有

---------------



###                 4.2.1后端



*   编写Mapper

package com.czxy.ssm.mapper;

import com.czxy.ssm.domain.Classes;

import tk.mybatis.mapper.common.Mapper;

@org.apache.ibatis.annotations.Mapper

public interface ClassesMapper extends Mapper {

}

*   编写service

*   接口

package com.czxy.ssm.service;

import com.czxy.ssm.domain.Classes;

import java.util.List;

public interface ClassesService {

/**

 * 查询所有

 * @return

 */

public List<Classes> selectAll() ;

}

        -实现类

package com.czxy.ssm.service.impl;

import com.czxy.ssm.domain.Classes;

import com.czxy.ssm.mapper.ClassesMapper;

import com.czxy.ssm.service.ClassesService;

import org.springframework.stereotype.Service;

import org.springframework.transaction.annotation.Transactional;

import javax.annotation.Resource;

import java.util.List;

@Service

@Transactional

public class ClassesServiceImpl implements ClassesService {

@Resource

private ClassesMapper classesMapper;



@Override

public List<Classes> selectAll() {

    List<Classes> list = classesMapper.selectAll();

    return list;

}

}

*    编写Controller

    

package com.czxy.ssm.controller;

import com.czxy.ssm.domain.Classes;

import com.czxy.ssm.service.ClassesService;

import com.czxy.ssm.vo.BaseResult;

import org.springframework.web.bind.annotation.GetMapping;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;

import java.util.List;

@RestController

@RequestMapping("/classes")

public class ClassesController {

@Resource

private ClassesService classesService;



@GetMapping

public BaseResult<List<Classes>> list() {

    // 查询所有

    List<Classes> list = classesService.selectAll();

    // 返回

    /*

    BaseResult baseResult = new BaseResult();

    baseResult.setCode(1);  // 0 错误， 20000 成功

    baseResult.setMessage("提示信息");

    baseResult.setData(list);

    return baseResult;

    */

    return BaseResult.ok("查询成功", list);

}

}

*   查询结果



![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/143a6a1103914278ad38a1d87098c200~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771325651&x-signature=IoAExHoBcIvOh86ouwcHgrjlw2c%3D) 



###                 4.2.2前端：axios+then



*   编写页面、发送ajax、显示数据

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<script src="js/vue.js"></script>

<script src="js/axios.js"></script>

<div id="app">

    <table border="1">

        <tr>

            <td>编号</td>

            <td>名称</td>

            <td>描述</td>

        </tr>

        <tr v-for="(classes,index) in classesList">

            <td>{{classes.cid}}</td>

            <td>{{classes.cname}} </td>

            <td>{{classes.desc}}</td>

        </tr>

    </table>

</div>

###                 4.2.3前端：async+await

<meta charset="UTF-8">

<title>班级列表</title>

<script src="../js/axios.js"></script>

<script src="../js/vue.js"></script>

<div id="app">

    <table border="1">

        <tr>

            <td>编号</td>

            <td>班级名称</td>

            <td>描述</td>

            <td>操作</td>

        </tr>

        <tr v-for="(classes,index) in classesList">

            <td>{{classes.cid}}</td>

            <td>{{classes.cname}}</td>

            <td>{{classes.desc}}</td>

            <td>

                修改

                删除

            </td>

        </tr>

    </table>

</div>

        4.3添加班级

---------------



###                 4.3.1需求：



*   完成班级的添加

*   后端

    *   获得提交的班级数据（json数据）

    *   保存班级数据（controller-service）

    *   根据操作结果提示：成功true-->添加成功，失败false-->添加失败

*   前端

    *   绘制表单，数据绑定

    *   点击添加，发送ajax完成添加

    *   成功，跳转到列表页面。失败，给出提示



###                 4.3.2后端



*   步骤1：编写service，完成添加

*   接口

/**

 * 添加班级

 * @param classes

 * @return

 */

public boolean add(Classes classes);

*   实现类

@Override

public boolean add(Classes classes) {

    int result = classesMapper.insert(classes);

    return result == 1;

}

*   步骤2：编写controller，处理结果BaseResult

/**

 * 添加班级

 * @param classes

 * @return

 */

@PostMapping

public BaseResult add(@RequestBody Classes classes) {

    // 添加

    boolean result =classesService.add(classes);

    // 提示

    if(result) {

        // 成功

        return BaseResult.ok("添加成功");

    }

    // 失败

    return BaseResult.error("添加失败");

}

###               4.3.3前端

<meta charset="UTF-8">

<title>班级列表</title>

<script src="../js/axios.js"></script>

<script src="../js/vue.js"></script>

<div id="app">

    <table>

        <tr>

            <td>编号</td>

            <td>

                <input type="text" v-model="classes.cid" />

            </td>

        </tr>

        <tr>

            <td>班级名称</td>

            <td>

                <input type="text" v-model="classes.cname" />

            </td>

        </tr>

        <tr>

            <td>班级描述</td>

            <td>

                <textarea cols="30" rows="10" v-model="classes.desc"></textarea>

            </td>

        </tr>

        <tr>

            <td>

                <input type="button" value="添加" @click="addClasses" />

            </td>

            <td></td>

        </tr>

    </table>

</div>

        4.4修改班级

---------------



###                 4.4.1需求：



*   完成班级的修改

    *   表单的回显：通过id查询详情

    *   修改功能：通过id更新



###                 4.4.2后端



*   步骤

    *   编写service：selectById、update

        *   接口

        *   实现类

    *   编写controller：selectById、update

*   编写service：selectById、update

*   接口

/**

 * 通过id查询详情

 * @param cid

 * @return

 */

public Classes selectById(String cid);



/**

 * 更新班级

 * @param classes

 * @return

 */

public boolean update(Classes classes);

*   实现类

    

@Override

public Classes selectById(String cid) {

    return classesMapper.selectByPrimaryKey(cid);

}



@Override

public boolean update(Classes classes) {

    int result = classesMapper.updateByPrimaryKeySelective(classes);

    return result == 1;

}

*   编写controller：selectById、update

/**

 * 查询详情

 * @param cid

 * @return

 */

@GetMapping("/{cid}")

public BaseResult<Classes> selectById(@PathVariable("cid") String cid) {

    //查询

    Classes classes = classesService.selectById(cid);



    //返回

    return BaseResult.ok("查询详情成功", classes);

}



/**

 * 更新

 * @param classes

 * @return

 */

@PutMapping

public BaseResult update(@RequestBody Classes classes) {

    try {

        // 更新

        boolean result = classesService.update(classes);



        // 提示

        if(result) {

            return BaseResult.ok("更新成功");

        }

        return BaseResult.error("更新失败");

    } catch (Exception e) {

        e.printStackTrace();

        return BaseResult.error(e.getMessage());

    }

}

###               4.4.3前端



*   步骤：

    *   列表页面点击“修改”，添加到修改页面 edit.html?cid=c001

    *   页面加载成功时，通过id查询详情

    *   回显：将查询结果绑定表单（添加已经完成，采用复制）

    *   点击确定进行更新

*   修改list.html页面



![](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/53bedb05e4164c39a5cb57fc9c286bfc~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3MzM5MTQ5MjgwNjA=:q75.awebp?rk3s=f64ab15b&x-expires=1771325651&x-signature=7%2Fh4dlu44cPwxlQOoyxoUOS%2FMSE%3D)

修改

*   编写edit.html页面        

<meta charset="UTF-8">

<title>班级列表</title>

<script src="../js/axios.js"></script>

<script src="../js/vue.js"></script>

<div id="app">

    <!--3 表单回显 -->

    <table>

        <tr>

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】