SpringBoot + Vue (ElementUI)的小例子

关于SpringBoot项目的搭建，Vue的环境搭建这里不再中赘述。

1.首先建立数据库表：

DROP TABLE IF EXISTS `semester`;
CREATE TABLE `semester`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `semesterid` char(200) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '学习编号',
  `semestername` varchar(400) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL COMMENT '学期名称',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 38 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

2.后端Mapper层：

package com.justcs.mapper;

import com.justcs.entity.Semester;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface SemesterMapper {
    int deleteByPrimaryKey(Integer id);

    int insert(Semester record);

    int insertSelective(Semester record);

    Semester selectByPrimaryKey(Integer id);

    int updateByPrimaryKeySelective(Semester record);

    int updateByPrimaryKey(Semester record);


    /**
     * 查询所有的学期信息
     * @param semsname
     * @param sortby
     * @param order
     * @return
     */
    @Select({
            ""
    })
    List selectSemester(@Param("semsname") String semsname, @Param("sortby") String sortby, @Param("order") String order);


    /**
     * 批量删除学期信息
     * @param semesters
     * @return
     */
    @Delete({
            ""
    })
    int batchDeleteSemester(@Param("ids") int[] semesters);
}

3.Service层：

package com.justcs.service;


import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.justcs.entity.Semester;
import com.justcs.form.PagedQueryForm;
import com.justcs.form.Semesters_c;
import com.justcs.mapper.SemesterMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

@Service
public class SysConfService {

    @Autowired
    private SemesterMapper semesterMapper;

    /**
     * 分页查询所有的学期信息
     *
     * @return
     */
    @Transactional(propagation = Propagation.SUPPORTS)
    public PageInfo queryPagedSemester(PagedQueryForm query) {
        if(query!=null) {
            PageHelper.startPage(query.getPage(), query.getPagesize());
            PageInfo semesterPageInfo = new PageInfo<>(
                    semesterMapper.selectSemester(query.getSearch().getSemestername(), query.getSort(), query.getOrder())
            );
            return semesterPageInfo;
        }
        return null;
    }

    /**
     * 添加学期
     * @param semester
     * @return
     */
    @Transactional
    public int addSemester(Semester semester) {
        if (semester != null) {
            return semesterMapper.insertSelective(semester);
        }
        return 0;
    }

    /**
     * 根据主键修改学期
     * @param semester
     * @return
     */
    @Transactional
    public int modifySemester(Semester semester) {
        if (semester!=null && semester.getId() != null) {
            return semesterMapper.updateByPrimaryKeySelective(semester);
        }
        return 0;
    }

    /**
     * 根据主键删除学期
     * @param semester
     * @return
     */
    @Transactional
    public int removeSemester(Semester semester) {
        if (semester!=null && semester.getId() != null) {
            return semesterMapper.deleteByPrimaryKey(semester.getId());
        }
        return 0;
    }

    /**
     * 批量删除学期信息
     * @param semesters
     * @return
     */
    @Transactional
    public int batchRemoveSemester(int[] semesters) {
        if(semesters!=null && semesters.length>0) {
            return semesterMapper.batchDeleteSemester(semesters);
        }
        return 0;
    }


}

4.Controller层：

package com.justcs.controller;


import com.github.pagehelper.PageInfo;
import com.justcs.entity.Semester;
import com.justcs.form.PagedQueryForm;
import com.justcs.form.Semesters_c;
import com.justcs.service.SysConfService;
import com.justcs.utils.JSONResult;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import javax.validation.Valid;


@Api(value = "系统配置控制层")
@RestController
@RequestMapping("/sys")
public class SysConfController {

    private static final Logger logger = LoggerFactory.getLogger(SysConfController.class);

    @Autowired
    private SysConfService sysConfService;

    /**
     * 分页查询所有学期信息
     *
     * @return
     */
    @PostMapping("/querySemesters")
    @ApiOperation(value = "分页按照条件查询所有的学期的信息")
    public JSONResult querySemesters(@RequestBody @Valid PagedQueryForm param) {
        try {
            PageInfo result = sysConfService.queryPagedSemester(param);
            return JSONResult.ok(result);
        } catch (Exception e) {
            logger.error(e.getMessage());
            throw  e;
        }
    }

    /**
     * 新增学期
     * @param semester
     * @return
     */
    @PostMapping("/addSemester")
    @ApiOperation(value = "新增学期")
    public JSONResult addSemester(@RequestBody(required = true) Semester semester) {
        try {
            int affected = sysConfService.addSemester(semester);
            return affected > 0 ? JSONResult.ok() : JSONResult.errorMsg("录入失败!");
        } catch (Exception e) {
            logger.error(e.getMessage());
            throw e;
        }
    }

    /**
     * 删除学期信息
     * @param semesterid
     * @return
     */
    @PostMapping("/rmSemester/{semesterid}")
    @ApiOperation(value = "删除学期信息")
    public JSONResult removeSemester(@PathVariable("semesterid") int semesterid){
        Semester semester = new Semester();
        semester.setId(semesterid);
        try {
            int affected = sysConfService.removeSemester(semester);
            return affected > 0? JSONResult.ok() : JSONResult.errorMsg("删除失败!");
        } catch (Exception e) {
            logger.error(e.getMessage());
            throw e;
        }
    }

    /**
     * 批量删除学期信息
     * @param arrs
     * @return
     */
    @PostMapping("/bhrmsemester")
    @ApiOperation(value = "批量删除学期信息")
    public JSONResult batchRemoveSemester(@RequestBody(required = true) int[] arrs) {
        try {
            int affected = sysConfService.batchRemoveSemester(arrs);
            return affected > 0? JSONResult.ok() : JSONResult.errorMsg("批量删除失败!");
        } catch (Exception e) {
            logger.error(e.getMessage());
            throw e;
        }
    }

    /**
     * 修改学期信息
     * @param semester
     * @return
     */
    @PostMapping("/mdsemester")
    @ApiOperation(value = "修改学期信息")
    public JSONResult mdsemester(@RequestBody(required = true) Semester semester) {
        try {
            int affected = sysConfService.modifySemester(semester);
            return affected > 0? JSONResult.ok() : JSONResult.errorMsg("修改失败!");
        } catch (Exception e) {
            logger.error(e.getMessage());
            throw e;
        }
    }

}

5.前端index.vue文件：

6.展示结果：

后记：本身内容并不复杂，DEMO采取的目前主流的技术SpringBoot+Vue + ElementUI ，前后端分离的解决方案。仅此记录，方便后续开发人员参考，节省时间。