Web应用开发实战｜基于前后端分离架构的完整项目落地教程

web-student-demo
├── controller // 接口控制层：接收前端所有请求
├── service // 业务逻辑层：核心业务处理
│ └── impl // 业务接口实现类
├── mapper // 数据访问层：数据库操作
├── entity // 实体类：对应数据库数据表
├── config // 配置类：跨域、拦截器、全局配置
├── util // 工具类：统一返回结果、日期工具等
└── resources
├── application.yml // 全局配置文件（端口、数据库配置）
└── mybatis mapper文件

3.2 前端项目完整目录结构

vue-student-front
├── src
│ ├── api // 接口统一管理：封装所有后端请求
│ ├── components // 公共组件：复用弹窗、导航栏
│ ├── router // 路由配置：页面跳转权限控制
│ ├── views // 页面视图：登录页、学生列表页、个人中心
│ └── main.js // 项目入口文件
└── vite.config.js // 项目配置文件

3.3 核心环境配置（可直接复用）

后端核心配置文件 application.yml，包含端口、数据库连接、MyBatis配置：

# 服务端口配置
server:
  port: 8080

# 数据库配置
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/web_student_db?useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver

# MyBatis Plus配置
mybatis-plus:
  global-config:
    db-config:
      id-type: auto # 主键自增
  configuration:
    map-underscore-to-camel-case: true # 下划线转驼峰

四、数据库详细设计（规范化三范式）

本次项目创建两张核心数据表，实现用户权限管理与学生数据管理，遵循数据库三大范式，设置主键、非空、默认值约束，杜绝数据冗余。

4.1 数据库创建语句

-- 创建项目数据库
CREATE DATABASE IF NOT EXISTS web_student_db DEFAULT CHARSET utf8mb4;
USE web_student_db;

-- 1. 用户表（权限管理）
CREATE TABLE sys_user (
    id INT PRIMARY KEY AUTO_INCREMENT COMMENT '用户主键',
    username VARCHAR(30) NOT NULL UNIQUE COMMENT '登录账号',
    password VARCHAR(100) NOT NULL COMMENT '登录密码',
    name VARCHAR(30) NOT NULL COMMENT '用户姓名',
    role VARCHAR(20) NOT NULL DEFAULT 'user' COMMENT '角色：admin/student',
    phone VARCHAR(11) COMMENT '手机号',
    create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='系统用户表';

-- 2. 学生信息表（核心业务数据）
CREATE TABLE student_info (
    id INT PRIMARY KEY AUTO_INCREMENT COMMENT '主键ID',
    student_no VARCHAR(20) NOT NULL UNIQUE COMMENT '学号',
    student_name VARCHAR(30) NOT NULL COMMENT '学生姓名',
    gender VARCHAR(10) COMMENT '性别',
    class_name VARCHAR(50) COMMENT '所属班级',
    score DECIMAL(5,1) COMMENT '总成绩',
    address VARCHAR(100) COMMENT '居住地址',
    create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '录入时间'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='学生信息表';

-- 初始化测试数据
INSERT INTO sys_user(username,password,name,role) VALUES ('admin','123456','超级管理员','admin');
INSERT INTO student_info(student_no,student_name,gender,class_name,score) VALUES ('2026001','张三','男','计算机1班',88.5);

五、全套核心功能代码实现（CRUD完整代码）

区别于上篇仅登录功能，本次实现学生信息新增、查询、修改、删除、条件筛选全套业务功能，代码分层完整、注释详细，可直接运行测试。

5.1 后端实体类、Mapper、Service层代码

学生信息实体类 StudentInfo.java

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.Data;
import java.util.Date;

@Data
public class StudentInfo {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String studentNo;
    private String studentName;
    private String gender;
    private String className;
    private Double score;
    private String address;
    private Date createTime;
}

Mapper数据访问层

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface StudentInfoMapper extends BaseMapper<StudentInfo> {
    // 继承BaseMapper自带CRUD方法，无需重复编写SQL
}

Service业务层接口与实现

// 业务接口
public interface StudentInfoService {
    // 新增学生
    boolean addStudent(StudentInfo studentInfo);
    // 根据ID删除学生
    boolean deleteStudent(Integer id);
    // 修改学生信息
    boolean updateStudent(StudentInfo studentInfo);
    // 查询所有学生
    List<StudentInfo> getAllStudent();
}

// 业务实现类
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

@Service
public class StudentInfoServiceImpl extends ServiceImpl<StudentInfoMapper, StudentInfo> implements StudentInfoService {

    @Override
    public boolean addStudent(StudentInfo studentInfo) {
        return save(studentInfo);
    }

    @Override
    public boolean deleteStudent(Integer id) {
        return removeById(id);
    }

    @Override
    public boolean updateStudent(StudentInfo studentInfo) {
        return updateById(studentInfo);
    }

    @Override
    public List<StudentInfo> getAllStudent() {
        return list();
    }
}

5.2 后端控制器层（完整CRUD接口）

封装全套RESTful风格接口，统一返回格式，适配前端所有业务场景

import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;

@RestController
@RequestMapping("/student")
public class StudentController {

    @Resource
    private StudentInfoService studentInfoService;

    // 新增学生信息
    @PostMapping("/add")
    public Result add(@RequestBody StudentInfo studentInfo){
        boolean result = studentInfoService.addStudent(studentInfo);
        return result ? Result.success("新增成功") : Result.error("新增失败");
    }

    // 删除学生信息
    @DeleteMapping("/delete/{id}")
    public Result delete(@PathVariable Integer id){
        boolean result = studentInfoService.deleteStudent(id);
        return result ? Result.success("删除成功") : Result.error("删除失败");
    }

    // 修改学生信息
    @PutMapping("/update")
    public Result update(@RequestBody StudentInfo studentInfo){
        boolean result = studentInfoService.updateStudent(studentInfo);
        return result ? Result.success("修改成功") : Result.error("修改失败");
    }

    // 查询所有学生
    @GetMapping("/list")
    public Result list(){
        List<StudentInfo> list = studentInfoService.getAllStudent();
        return Result.success(list);
    }
}

5.3 前端Axios接口封装+页面CRUD实现

统一封装后端请求，避免代码冗余，前端页面实现完整交互

// api/student.js 接口统一封装
import axios from 'axios'
const baseUrl = 'http://localhost:8080/student'

// 新增学生
export const addStudent = (data) => axios.post(`${baseUrl}/add`, data)
// 删除学生
export const deleteStudent = (id) => axios.delete(`${baseUrl}/delete/${id}`)
// 修改学生
export const updateStudent = (data) => axios.put(`${baseUrl}/update`, data)
// 查询学生列表
export const getStudentList = () => axios.get(`${baseUrl}/list`)

<!-- 学生信息管理页面核心代码 -->
<template>
  <div class="student-box">
    <el-button type="primary" @click="openDialog">新增学生</el-button>
    <el-table :data="tableData" border style="width: 100%; margin-top: 20px">
      <el-table-column prop="studentNo" label="学号" />
      <el-table-column prop="studentName" label="姓名" />
      <el-table-column prop="className" label="班级" />
      <el-table-column prop="score" label="成绩" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="editRow(scope.row)">编辑</el-button>
          <el-button type="danger" @click="delRow(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑弹窗 -->
    <el-dialog v-model="dialogVisible" title="学生信息">
      <el-form :model="form">
        <el-form-item label="学号" prop="studentNo">
          <el-input v-model="form.studentNo"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="studentName">
          <el-input v-model="form.studentName"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="className">
          <el-input v-model="form.className"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { addStudent, deleteStudent, updateStudent, getStudentList } from '@/api/student'

let tableData = ref([])
let dialogVisible = ref(false)
let form = ref({})

// 页面加载获取数据
onMounted(() => {
  loadData()
})

// 加载学生列表
const loadData = async () => {
  let res = await getStudentList()
  tableData.value = res.data.data
}

// 新增弹窗
const openDialog = () => {
  form.value = {}
  dialogVisible.value = true
}

// 提交表单
const submitForm = async () => {
  if (form.value.id) {
    await updateStudent(form.value)
  } else {
    await addStudent(form.value)
  }
  dialogVisible.value = false
  loadData()
}

// 编辑数据
const editRow = (row) => {
  form.value = {...row}
  dialogVisible.value = true
}

// 删除数据
const delRow = async (id) => {
  await deleteStudent(id)
  loadData()
}
</script>