AI 助理
备案控制台
开发者社区 数据库 文章 正文

IDEA+SSM+SpringBoot+Vue+Element UI实现班级管理增删改查

2022-05-27 343
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： IDEA+SSM+SpringBoot+Vue+Element UI实现班级管理增删改查

环境搭建


SQL

CREATE TABLE `tb_class` (
  `c_id` varchar(32) NOT NULL COMMENT '班级ID',
  `c_name` varchar(50) DEFAULT NULL COMMENT '班级名称',
  `desc` varchar(200) DEFAULT NULL COMMENT '班级描述',
  PRIMARY KEY (`c_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
/*Data for the table `tb_class` */
insert  into `tb_class`(`c_id`,`c_name`,`desc`) values ('22','22','22'),('c001','Java12班','花儿222'),('c002','Java34班','艺术223'),('c003','虚拟的班级','111');

查询


前端


  • - 需求：简单的查询所有
  • - 步骤：
  •  - 步骤1：编写查询所有班级的函数
  •  - 步骤2：页面加载成功后调用
  •  - 步骤3：展示查询结果
  • - 实现
<template>
  <div>
    <!-- 1.4 班级列表 start -->
    <el-table
      :data="classesList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="cid"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="cname"
        label="班级名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="描述"
        width="280">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <!-- scope.$index, scope.row -->
          <el-button size="mini">编辑</el-button>
          <el-button size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 1.4 班级列表 end -->
  </div>
</template>
<script>
// 1.0 导入axios
import axios from 'axios'
export default {
  data() {
    return {
      classesList: [],      // 1.1 班级列表
    }
  },
  methods: {
    async selectAllClasses() {  //1.2 查询班级
      // ajax 查询班级
      let url = `http://localhost:8888/classes`
      let { data:baseResult } = await axios.get(url)
      // 保存数据
      this.classesList = baseResult.data
    }
  },
  mounted() {
    // 1.3 调用班级
    this.selectAllClasses()
  },
}
</script>
<style>
</style>

后端


ClassesMapper：

package com.czxy.mapper;
import com.czxy.domain.Classes;
import tk.mybatis.mapper.common.Mapper;
@org.apache.ibatis.annotations.Mapper
public interface ClassesMapper extends Mapper<Classes> {
}

ClassesService：

package com.czxy.service;
import com.czxy.domain.Classes;
import java.util.List;
public interface ClassesService {
    /**
     * 查询所有班级
     * @return
     */
    public List<Classes> selectAllClasses();
}

ClassesServiceImpl:

package com.czxy.service.impl;
import com.czxy.domain.Classes;
import com.czxy.mapper.ClassesMapper;
import com.czxy.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> selectAllClasses() {
        return classesMapper.selectAll();
    }
}

ClassesController：

package com.czxy.controller;
import com.czxy.domain.Classes;
import com.czxy.service.ClassesService;
import com.czxy.vo.BaseResult;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
@RestController
@RequestMapping("/classes")
@CrossOrigin
public class ClassesController {
    @Resource
    private ClassesService classesService;
    @GetMapping
    public BaseResult selectAll(){
        List<Classes> list = classesService.selectAllClasses();
        return BaseResult.ok("查询成功",list);
    }
}

添加：弹出框


前端


  • 需求：使用弹出框完成添加
  • 步骤：
  • 步骤1：拷贝弹出框，并调试代码（变量）
  • 步骤2：声明弹出框显示变量、表单变量（表单绑定）
  • 步骤3：添加函数，与按钮绑定
  • 实现
<template>
  <div>
    <!-- 2.4 添加按钮 -->
    <el-button type="primary" round @click="openAddDialog">添加</el-button>
    <!-- 1.4 班级列表 start -->
    <el-table
      :data="classesList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="cid"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="cname"
        label="班级名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="描述"
        width="280">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <!-- scope.$index, scope.row -->
          <el-button size="mini">编辑</el-button>
          <el-button size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 1.4 班级列表 end -->
    <!-- 2.1 添加弹出框 start -->
    <el-dialog title="添加班级" :visible.sync="classesAddVisible">
      <el-form :model="classes" label-width="80px">
        <el-form-item label="班级编号">
          <el-input v-model="classes.cid"></el-input>
        </el-form-item>
        <el-form-item label="班级名称">
          <el-input v-model="classes.cname"></el-input>
        </el-form-item>
        <el-form-item label="班级描述">
          <el-input type="textarea" v-model="classes.desc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="classesAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="addClasses">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 2.1 添加弹出框 end -->
  </div>
</template>
<script>
// 1.0 导入axios
import axios from 'axios'
export default {
  data() {
    return {
      classesList: [],            // 1.1 班级列表
      classesAddVisible: false,    // 2.2 添加弹出框的变量
      classes: {},                // 2.3 班级表单
    }
  },
  methods: {
    async selectAllClasses() {  //1.2 查询班级
      // ajax 查询班级
      let url = `http://localhost:8888/classes`
      let { data:baseResult } = await axios.get(url)
      // 保存数据
      this.classesList = baseResult.data
    },
    openAddDialog() {       //2.5 显示弹出框
      this.classesAddVisible = true
    },
    async addClasses() {          //2.6 添加班级
      // ajax
      var url = `http://localhost:8888/classes`
      let { data: baseResult } = await axios.post(url, this.classes) 
      // 处理结果
      if(baseResult.code == 20000) {
        // 成功
        // 提示
        this.$message.success(baseResult.message)
        // 刷新页面
        this.selectAllClasses()
        // 关闭弹出框
        this.classesAddVisible = false
      } else {
        // 失败
        this.$message.error(baseResult.message)
      }
    }
  },
  mounted() {
    // 1.3 调用班级
    this.selectAllClasses()
  },
}
</script>
<style>
</style>

后端


ClassesService

package com.czxy.service;
import com.czxy.domain.Classes;
import java.util.List;
public interface ClassesService {
    /**
     * 添加 | 修改 班级
     * @return
     */
    public boolean addClasses(Classes classes);
}

ClassesServiceImpl

package com.czxy.service.impl;
import com.czxy.domain.Classes;
import com.czxy.mapper.ClassesMapper;
import com.czxy.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 {
    @Override
    public boolean addClasses(Classes classes) {
        Classes cls = classesMapper.selectByPrimaryKey(classes.getCid());
        int result;
        if(cls != null){
            result = classesMapper.updateByPrimaryKey(classes);
        }else{
            result = classesMapper.insert(classes);
        }
        return result == 1;
    }
}

ClassesController

package com.czxy.controller;
import com.czxy.domain.Classes;
import com.czxy.service.ClassesService;
import com.czxy.vo.BaseResult;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
@RestController
@RequestMapping("/classes")
@CrossOrigin
public class ClassesController {
    @Resource
    private ClassesService classesService;
    @PostMapping
    public BaseResult addupdateClasses(@RequestBody Classes classes){
        try {
            boolean b = classesService.addClasses(classes);
            if(b){
                return BaseResult.ok("添加 | 编辑 成功");
            }else{
                return BaseResult.error("添加 | 编辑 失败");
            }
        } catch (Exception e) {
            e.printStackTrace();
            return BaseResult.error(e.getMessage());
        }
    }
}

修改：抽屉


前端


  • 需求：使用抽屉完成修改功能
  • 步骤
  • 步骤1：点击修改按钮，打开一个抽泣，通过id查询详情，需要回显表单
  • 步骤2：表单的绑定
  • 步骤3：修改确定按
  • 实现
<template>
  <div>
    <!-- 2.4 添加按钮 -->
    <el-button type="primary" round @click="openAddDialog">添加</el-button>
    <!-- 1.4 班级列表 start -->
    <el-table
      :data="classesList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="cid"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="cname"
        label="班级名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="描述"
        width="280">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <!-- scope.$index, scope.row -->
          <!-- 3.1 打开编辑抽屉 -->
          <el-button size="mini" @click="openEditDrawer(scope.row.cid)">编辑</el-button>
          <el-button size="mini" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 1.4 班级列表 end -->
    <!-- 2.1 添加弹出框 start -->
    <el-dialog title="添加班级" :visible.sync="classesAddVisible">
      <el-form :model="classes" label-width="80px">
        <el-form-item label="班级编号">
          <el-input v-model="classes.cid"></el-input>
        </el-form-item>
        <el-form-item label="班级名称">
          <el-input v-model="classes.cname"></el-input>
        </el-form-item>
        <el-form-item label="班级描述">
          <el-input type="textarea" v-model="classes.desc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="classesAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="addClasses">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 2.1 添加弹出框 end -->
    <!-- 3.3 抽屉 start -->
    <el-drawer
      title="修改班级"
      :visible.sync="classesEditDrawerVisible"
      direction="rtl">
      <!-- 修改表单 start -->
      <el-form :model="classes" label-width="80px">
        <el-form-item label="班级编号">
          <el-input v-model="classes.cid"></el-input>
        </el-form-item>
        <el-form-item label="班级名称">
          <el-input v-model="classes.cname"></el-input>
        </el-form-item>
        <el-form-item label="班级描述">
          <el-input type="textarea" v-model="classes.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="editClasses">立即创建</el-button>
          <el-button @click="classesEditDrawerVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
      <!-- 修改表单 end -->
    </el-drawer>
    <!-- 3.3 抽屉 end -->
  </div>
</template>
<script>
// 1.0 导入axios
import axios from 'axios'
export default {
  data() {
    return {
      classesList: [],            // 1.1 班级列表
      classesAddVisible: false,    // 2.2 添加弹出框的变量
      classes: {},                // 2.3 班级表单
      classesEditDrawerVisible: false,  // 3.4 抽屉变量
    }
  },
  methods: {
    async selectAllClasses() {  //1.2 查询班级
      // ajax 查询班级
      let url = `http://localhost:8888/classes`
      let { data:baseResult } = await axios.get(url)
      // 保存数据
      this.classesList = baseResult.data
    },
    openAddDialog() {       //2.5 显示弹出框
      this.classesAddVisible = true
    },
    async addClasses() {          //2.6 添加班级
      // ajax
      var url = `http://localhost:8888/classes`
      let { data: baseResult } = await axios.post(url, this.classes) 
      // 处理结果
      if(baseResult.code == 20000) {
        // 成功
        // 提示
        this.$message.success(baseResult.message)
        // 刷新页面
        this.selectAllClasses()
        // 关闭弹出框
        this.classesAddVisible = false
      } else {
        // 失败
        this.$message.error(baseResult.message)
      }
    },
    async openEditDrawer(cid) {  //3.2 打开编辑抽屉函数
      // 打开抽屉
      this.classesEditDrawerVisible = true
      // 查询详情
      let url = `http://localhost:8888/classes/${cid}`
      let { data: baseResult } = await axios.get(url)
      this.classes = baseResult.data
    },
    async editClasses() {   //3.4 修改班级函数
      // ajax
      var url = `http://localhost:8888/classes`
      let { data: baseResult } = await axios.put(url, this.classes) 
      // 处理结果
      if(baseResult.code == 20000) {
        // 成功
        // 提示
        this.$message.success(baseResult.message)
        // 刷新页面
        this.selectAllClasses()
        // 关闭抽屉
        this.classesEditDrawerVisible = false
      } else {
        // 失败
        this.$message.error(baseResult.message)
      }
    }
  },
  mounted() {
    // 1.3 调用班级
    this.selectAllClasses()
  },
}
</script>
<style>
</style>

后端


ClassesService

package com.czxy.service;
import com.czxy.domain.Classes;
import java.util.List;
public interface ClassesService {
    /**
     * 添加 | 修改 班级
     * @return
     */
    public boolean addClasses(Classes classes);
    /**
     * 查询指定班级
     * @param cid
     * @return
     */
    public Classes selectById(String cid);
}

ClassesServiceImpl

package com.czxy.service.impl;
import com.czxy.domain.Classes;
import com.czxy.mapper.ClassesMapper;
import com.czxy.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 boolean addClasses(Classes classes) {
        Classes cls = classesMapper.selectByPrimaryKey(classes.getCid());
        int result;
        if(cls != null){
            result = classesMapper.updateByPrimaryKey(classes);
        }else{
            result = classesMapper.insert(classes);
        }
        return result == 1;
    }
    @Override
    public Classes selectById(String cid) {
        Classes classes = classesMapper.selectByPrimaryKey(cid);
        return classes;
    }
}

ClassesServiceController

1.package com.czxy.controller;
import com.czxy.domain.Classes;
import com.czxy.service.ClassesService;
import com.czxy.vo.BaseResult;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
/**
 * @Author 刘嘉俊
 * @Date 2022/3/21
 */
@RestController
@RequestMapping("/classes")
@CrossOrigin
public class ClassesController {
    @Resource
    private ClassesService classesService;
    @PostMapping
    public BaseResult addupdateClasses(@RequestBody Classes classes){
        try {
            boolean b = classesService.addClasses(classes);
            if(b){
                return BaseResult.ok("添加 | 编辑 成功");
            }else{
                return BaseResult.error("添加 | 编辑 失败");
            }
        } catch (Exception e) {
            e.printStackTrace();
            return BaseResult.error(e.getMessage());
        }
    }
    @GetMapping("/{cid}")
    public BaseResult selectById(@PathVariable("cid") String cid){
        System.out.println(cid);
        Classes classes = classesService.selectById(cid);
        return BaseResult.ok("查询成功",classes);
    }
}

删除


基本功能


  • 需求：点击删除按钮，完成删除操作
  • 实现
<template>
  <div>
    <!-- 2.4 添加按钮 -->
    <el-button type="primary" round @click="openAddDialog">添加</el-button>
    <!-- 1.4 班级列表 start -->
    <el-table
      :data="classesList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="cid"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="cname"
        label="班级名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="描述"
        width="280">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <!-- scope.$index, scope.row -->
          <!-- 3.1 打开编辑抽屉 -->
          <el-button size="mini" @click="openEditDrawer(scope.row.cid)">编辑</el-button>
          <!-- 4.1 删除 -->
          <el-button size="mini" @click="deleteClasses(scope.row.cid)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 1.4 班级列表 end -->
    <!-- 2.1 添加弹出框 start -->
    <el-dialog title="添加班级" :visible.sync="classesAddVisible">
      <el-form :model="classes" label-width="80px">
        <el-form-item label="班级编号">
          <el-input v-model="classes.cid"></el-input>
        </el-form-item>
        <el-form-item label="班级名称">
          <el-input v-model="classes.cname"></el-input>
        </el-form-item>
        <el-form-item label="班级描述">
          <el-input type="textarea" v-model="classes.desc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="classesAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="addClasses">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 2.1 添加弹出框 end -->
    <!-- 3.3 抽屉 start -->
    <el-drawer
      title="修改班级"
      :visible.sync="classesEditDrawerVisible"
      direction="rtl">
      <!-- 修改表单 start -->
      <el-form :model="classes" label-width="80px">
        <el-form-item label="班级编号">
          <el-input v-model="classes.cid"></el-input>
        </el-form-item>
        <el-form-item label="班级名称">
          <el-input v-model="classes.cname"></el-input>
        </el-form-item>
        <el-form-item label="班级描述">
          <el-input type="textarea" v-model="classes.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="editClasses">立即创建</el-button>
          <el-button @click="classesEditDrawerVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
      <!-- 修改表单 end -->
    </el-drawer>
    <!-- 3.3 抽屉 end -->
  </div>
</template>
<script>
// 1.0 导入axios
import axios from 'axios'
export default {
  data() {
    return {
      classesList: [],            // 1.1 班级列表
      classesAddVisible: false,    // 2.2 添加弹出框的变量
      classes: {},                // 2.3 班级表单
      classesEditDrawerVisible: false,  // 3.4 抽屉变量
    }
  },
  methods: {
    async selectAllClasses() {  //1.2 查询班级
      // ajax 查询班级
      let url = `http://localhost:8888/classes`
      let { data:baseResult } = await axios.get(url)
      // 保存数据
      this.classesList = baseResult.data
    },
    openAddDialog() {       //2.5 显示弹出框
      this.classesAddVisible = true
    },
    async addClasses() {          //2.6 添加班级
      // ajax
      var url = `http://localhost:8888/classes`
      let { data: baseResult } = await axios.post(url, this.classes) 
      // 处理结果
      if(baseResult.code == 20000) {
        // 成功
        // 提示
        this.$message.success(baseResult.message)
        // 刷新页面
        this.selectAllClasses()
        // 关闭弹出框
        this.classesAddVisible = false
      } else {
        // 失败
        this.$message.error(baseResult.message)
      }
    },
    async openEditDrawer(cid) {  //3.2 打开编辑抽屉函数
      // 打开抽屉
      this.classesEditDrawerVisible = true
      // 查询详情
      let url = `http://localhost:8888/classes/${cid}`
      let { data: baseResult } = await axios.get(url)
      this.classes = baseResult.data
    },
    async editClasses() {   //3.4 修改班级函数
      // ajax
      var url = `http://localhost:8888/classes`
      let { data: baseResult } = await axios.put(url, this.classes) 
      // 处理结果
      if(baseResult.code == 20000) {
        // 成功
        // 提示
        this.$message.success(baseResult.message)
        // 刷新页面
        this.selectAllClasses()
        // 关闭抽屉
        this.classesEditDrawerVisible = false
      } else {
        // 失败
        this.$message.error(baseResult.message)
      }
    },
    deleteClasses(cid) {    // 4.2 删除功能
      // 询问
      this.$confirm('您确定要删除么?', '删除提示', {
        type: 'warning'
      }).then(async () => {
        // 确认
        let url = `http://localhost:8888/classes/${cid}`
        let { data:baseResult } = await axios.delete(url)
        if(baseResult.code == 20000) {
          // 成功
          this.$message.success(baseResult.message)
          // 刷新
          this.selectAllClasses()
        } else {
          // 失败
          this.$message.error(baseResult.message)
        }
      }).catch(() => {
        // 
        this.$message.info('用户已取消')         
      });
    }
  },
  mounted() {
    // 1.3 调用班级
    this.selectAllClasses()
  },
}
</script>
<style>
</style>

校验关联信息


  • 需求：如果有关联数据，先查询，再给出提示
  • 步骤：

          步骤1：修改student mapper ，提供查询指定班级的学生

          步骤2：修改classes serivce，进行数据校验

  • 步骤1：修改student mapper ，提供查询指定班级的学生

微信图片_20220527232803.png

package com.czxy.mapper;
import com.czxy.domain.Student;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import tk.mybatis.mapper.common.Mapper;
import java.util.List;
@org.apache.ibatis.annotations.Mapper
public interface StudentMapper extends Mapper<Student> {
    /**
     * 通过班级id查询
     * @param classesId
     * @return
     */
    @Select("SELECT *,s_id AS sid , c_id AS cid FROM tb_student WHERE c_id = #{classesId}")
    public List<Student> selectAllByCid(@Param("classesId") String classesId);
}

步骤2：修改classes serivce，进行数据校验

微信图片_20220527232841.png

    @Override
    public boolean delete(String cid) {
        // 校验：查询，如果有数据抛异常
        List<Student> studentList = studentMapper.selectAllByCid(cid);
        if(studentList.size() > 0 ) {
            // 有关联数据，不允许删除
            throw new RuntimeException("班级关联学生，请先删除学生！");
        }
        // 删除班级
        int delete = classesMapper.deleteByPrimaryKey(cid);
        return delete == 1;
    }

配置类


BaseResult

package com.czxy.vo;
import java.util.HashMap;
import java.util.Map;
public class BaseResult<T> {
    //成功状态码
    public static final int OK = 20000;
    //失败状态码
    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;
    }
}


文章标签：
前端开发
SQL
关键词：
Spring Boot idea
Spring boot vue
element UI
vue element UI
vue UI
陶然同学
目录
相关文章
众所周知
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能，快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能，快速搭建前后端分离的应用框架。首先，确保开发环境已安装必要的工具，然后创建并配置 Spring Boot 项目，包括添加依赖和配置 Spring Security。接着，创建后端 API 和前端项目，配置动态路由和菜单。最后，运行项目并分享实践心得，包括版本兼容性、安全性、性能调优等方面。
众所周知
152 1
众所周知
|
22天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先，创建并配置 Spring Boot 项目，实现后端 API；然后，使用 Ant Design Pro Vue 创建前端项目，配置动态路由和菜单。通过具体案例，展示了如何快速搭建高效、易维护的项目框架。
众所周知
97 62
东方睿赢
|
20天前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架，实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架，实现动态路由和菜单功能。首先，确保开发环境已安装必要的工具，然后创建并配置 Spring Boot 项目，包括添加依赖和配置 Spring Security。接着，创建后端 API 和前端项目，配置动态路由和菜单。最后，运行项目并分享实践心得，帮助开发者提高开发效率和应用的可维护性。
东方睿赢
37 2
程序员皮皮林
|
22天前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目（附源码）
基于SpringBoot + Vue的医院管理系统，涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X，环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
程序员皮皮林
123 0
net936
|
2月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的大学竞赛报名管理系统
基于Java+Springboot+Vue开发的大学竞赛报名管理系统（前后端分离），这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能，同时锻炼他们的项目设计与开发能力。通过学习基于Java的大学竞赛报名管理系统项目，大学生可以在实践中学习和提升自己的能力，为以后的职业发展打下坚实基础。
net936
221 3
基于Java+Springboot+Vue开发的大学竞赛报名管理系统
杀死一只知更鸟debug
|
2月前
|
JavaScript
Ant Design Vue UI框架的基础使用，及通用后台管理模板的小demo【简单】
这篇文章介绍了如何使用Ant Design Vue UI框架创建一个简单的后台管理模板，包括创建Vue项目、安装和使用ant-design-vue、以及编写后台管理通用页面的代码和样式。
杀死一只知更鸟debug
245 3
Ant Design Vue UI框架的基础使用，及通用后台管理模板的小demo【简单】
net936
|
2月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的蛋糕商城管理系统
基于Java+Springboot+Vue开发的蛋糕商城管理系统（前后端分离），这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能，同时锻炼他们的项目设计与开发能力。通过学习基于Java的蛋糕商城管理系统项目，大学生可以在实践中学习和提升自己的能力，为以后的职业发展打下坚实基础。
net936
159 3
基于Java+Springboot+Vue开发的蛋糕商城管理系统
net936
|
2月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的美容预约管理系统
基于Java+Springboot+Vue开发的美容预约管理系统（前后端分离），这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能，同时锻炼他们的项目设计与开发能力。通过学习基于Java的美容预约管理系统项目，大学生可以在实践中学习和提升自己的能力，为以后的职业发展打下坚实基础。
net936
55 3
基于Java+Springboot+Vue开发的美容预约管理系统
游客4a75ofz7vhoha
|
2月前
|
JavaScript Java 关系型数据库
毕设项目&课程设计&毕设项目：基于springboot+vue实现的在线考试系统（含教程&源码&数据库数据）
本文介绍了一个基于Spring Boot和Vue.js实现的在线考试系统。随着在线教育的发展，在线考试系统的重要性日益凸显。该系统不仅能提高教学效率，减轻教师负担，还为学生提供了灵活便捷的考试方式。技术栈包括Spring Boot、Vue.js、Element-UI等，支持多种角色登录，具备考试管理、题库管理、成绩查询等功能。系统采用前后端分离架构，具备高性能和扩展性，未来可进一步优化并引入AI技术提升智能化水平。
游客4a75ofz7vhoha
180 3
毕设项目&课程设计&毕设项目：基于springboot+vue实现的在线考试系统（含教程&源码&数据库数据）
东方睿赢
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用
【10月更文挑战第8天】本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先，通过 Spring Initializr 创建并配置 Spring Boot 项目，实现后端 API 和安全配置。接着，使用 Ant Design Pro Vue 脚手架创建前端项目，配置动态路由和菜单，并创建相应的页面组件。最后，通过具体实践心得，分享了版本兼容性、安全性、性能调优等注意事项，帮助读者快速搭建高效且易维护的应用框架。
东方睿赢
41 3

热门文章

最新文章

  • 1
    SpringBoot开发案例之整合Dubbo提供者(一)
  • 2
    springboot--SpringDataJPA生成表 crud数据
  • 3
    SpringBoot 集成cas5.3 实现自定义认证策略
  • 4
    SpringBoot升级到3.0
  • 5
    SpringBoot启动类的扫描注解的用法及冲突原则
  • 6
    Netty实战，Springboot + netty +websocket 实现推送消息（附源码）
  • 7
    SpringBoot 配置CORS处理前后端分离跨域配置无效问题解析
  • 8
    Springboot Http文件的访问 Url 转换 MultipartFile ，File 转 MultipartFile
  • 9
    springboot2 && mybatis3 && freemarker模板用例
  • 10
    集中式整合之搭建Springboot环境|学习笔记
  • 1
    【Element-UI】vue使用 this.$confirm区分取消与关闭，vue给this.$confirm设置多个按钮
    606
  • 2
    【技术深度解析】多平台适配下的UI适配难题：U3D游戏UI错乱的终极解决方案
    614
  • 3
    【UI】elementui el-pagination分页位置靠右
    219
  • 4
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    164
  • 5
    【UI】前端常用特效
    19
  • 6
    【UI】 elementUI的select-tree组合下拉框，选择后下拉框不收起
    256
  • 7
    「UCD」移动端UI设计尺寸规范详解
    446
  • 8
    采用Canvas Scaler与锚点系统实现UI自适应多屏幕分辨率
    186
  • 9
    鸿蒙使用 @Builder扩展出来的布局数据更新没法更新UI
    152
  • 10
    微信综合购物商城小程序ui模板源码
    107

    • 相关课程

    更多
  • SpringBoot实战教程
  • SpringBoot快速掌握 - 核心技术
  • SpringBoot快速掌握 - 高级应用
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • Springboot项目云开发快速迁移

    • 相关电子书

    更多
  • 使用TensorFlow搭建智能开发系统自劢生成App UI代码
  • 蚂蚁金服高级开发工程师萧恺：IDEA 插件开发入门教程
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 基于 IntelliJ IDEA 插件部署微服务应用
  • 从零搭建Spring Boot的Hello World
    • 下一篇
    无影云桌面