Springboot+vue从零开始做网站9-简单的增删改查功能

今天做一个完整的增删改查功能，后端开发接口，前端写样式以及调用接口。

因为很久没写过vue了，而且3.0还是第一回接触，所以一边学习一边做，进度还是稍慢的

所有功能就是分页获取列表，根据条件查询数据，新增、修改、删除数据。

前端样式用的是elementUi 框架，https://element.eleme.cn/#/zh-CN/component/icon

效果图

列表：

搜索-下拉选择搜索：

搜索-模糊搜索：

新增：新增时更换dialog标题，并清空form表单的各项值，并对输入做相关校验

编辑：

删除：

感觉也没什么难度就不细讲了 直接留下代码吧

前端完整代码：

Vue：

前段调用接口代码：api/index.js

import request from '../utils/request';

//查询字典列表
export const getDictionaryList = (query) => {
    return request({
        url: '/api/dictionary/pageList',
        method: 'get',
        params: query
    });
};

//查询字典类型列表
export const getDictionaryCategoryList = () => {
    return request({
        url: '/api/dictionary/getDictionaryCategoryList',
        method: 'get'
    })
}

//保存或更新字典数据
export const saveOrUpdateDictionary = (param) => {
    return request({
        url: '/api/dictionary/saveOrUpdate',
        method: 'post',
        params: param
    });
};

//删除字典数据
export const deleteDictionary = (param) => {
    return request({
        url: '/api/dictionary/deleteDictionary',
        method: 'post',
        params: param
    });
};

后端代码：

controller：

@Autowired
    private SysDataDictionaryService dataDictionaryService;

    @RequestMapping("/pageList")
    public Page pageList(Long pageIndex, Long pageSize,SysDataDictionary sysDataDictionary) {
        if(pageIndex==null || pageIndex == 0){
            pageIndex = 1L;
        }
        if(pageSize==null || pageSize == 0){
            pageSize = 10L;
        }
        Page page = new Page<>(pageIndex, pageSize);
        return dataDictionaryService.selectByPage(page, sysDataDictionary);
    }

    @RequestMapping("/getDictionaryCategoryList")
    public List getDictionaryCategoryList(){
        return dataDictionaryService.getDictionaryCategoryList();
    }

    @RequestMapping("/saveOrUpdate")
    public Result saveOrUpdate(HttpServletRequest request, SysDataDictionary sysDataDictionary) {
        return dataDictionaryService.saveOrUpdate(request, sysDataDictionary);
    }

    @RequestMapping("/deleteDictionary")
    public  Result deleteDictionary(Long id){
        return dataDictionaryService.deleteDictionary(id);
    }

service：

@Service
public class SysDataDictionaryService {

    @Autowired
    private SysDataDictionaryMapper sysDataDictionaryMapper;
    @Autowired
    private SysDataDictionaryCategoryMapper sysDataDictionaryCategoryMapper;

    /**
     * 字典分页
     * @param
     * @return
     */
    public Page selectByPage(Page page, SysDataDictionary dataDictionary) {
        List list = sysDataDictionaryMapper.selectByPage(page, dataDictionary);
        page.setRecords(list);
        return page;
    }

    public List getDictionaryCategoryList(){
        List list = sysDataDictionaryCategoryMapper.selectAll();
        return list;
    }

    /**
     * 新增或修改
     * @param request
     * @param model
     * @return
     */
    public Result saveOrUpdate(HttpServletRequest request, SysDataDictionary model){
        Result result = new Result();
        String token = request.getHeader(Constance.TOKEN);
        String username = JwtUtils.getUsername(token);

        if(Tools.isEmpty(username)){
            return Result.fail("获取用户信息失败");
        }

        if(model == null){
            return Result.fail("字典信息为空");
        }

        //通过字典类型id获取字典类型
        SysDataDictionaryCategory category = sysDataDictionaryCategoryMapper.selectByPrimaryKey(model.getFkCategoryId());
        if(category != null){
            model.setType(category.getName());
        }else{
            model.setType("默认类型");
        }
        model.setUpdateBy(username);
        model.setUpdateDate(new Timestamp(System.currentTimeMillis()));
        model.setDelFlag(Constance.DelFlag_YES);
        if(model.getId() == null){

            model.setId(IdGenerator.getIdLong());
            model.setCreateBy(username);
            model.setCreateDate(new Timestamp(System.currentTimeMillis()));
            sysDataDictionaryMapper.insert(model);
        } else {
            sysDataDictionaryMapper.updateByPrimaryKey(model);
        }
        result.setSuccess(true);
        result.setData(model);
        return result;
    }

    public Result deleteDictionary(Long id){
        if(Tools.isEmpty(id)){
            return Result.fail("请选择一条数据删除");
        }
        sysDataDictionaryMapper.deleteByPrimaryKey(id);
        return Result.ok("删除成功");
    }

}

mapper

  
    
    
    
    
    
    
    
    
    
    
    
    
  
  
    id, fk_category_id, NAME, TYPE, VALUE, sort, update_by, update_date, create_by, create_date,
    remark, del_flag
  
  
    select
    
    from sys_data_dictionary
    where id = #{id,jdbcType=BIGINT}
  
  
    delete from sys_data_dictionary
    where id = #{id,jdbcType=BIGINT}
  
  
    insert into sys_data_dictionary (id, fk_category_id, NAME,
      TYPE, VALUE, sort,
      update_by, update_date, create_by,
      create_date, remark, del_flag
      )
    values (#{id,jdbcType=BIGINT}, #{fkCategoryId,jdbcType=BIGINT}, #{name,jdbcType=VARCHAR},
      #{type,jdbcType=VARCHAR}, #{value,jdbcType=VARCHAR}, #{sort,jdbcType=DECIMAL},
      #{updateBy,jdbcType=VARCHAR}, #{updateDate,jdbcType=TIMESTAMP}, #{createBy,jdbcType=VARCHAR},
      #{createDate,jdbcType=TIMESTAMP}, #{remark,jdbcType=VARCHAR}, #{delFlag,jdbcType=CHAR}
      )
  
  
    insert into sys_data_dictionary
    
      
        id,
      
      
        fk_category_id,
      
      
        NAME,
      
      
        TYPE,
      
      
        VALUE,
      
      
        sort,
      
      
        update_by,
      
      
        update_date,
      
      
        create_by,
      
      
        create_date,
      
      
        remark,
      
      
        del_flag,
      
    
    
      
        #{id,jdbcType=BIGINT},
      
      
        #{fkCategoryId,jdbcType=BIGINT},
      
      
        #{name,jdbcType=VARCHAR},
      
      
        #{type,jdbcType=VARCHAR},
      
      
        #{value,jdbcType=VARCHAR},
      
      
        #{sort,jdbcType=DECIMAL},
      
      
        #{updateBy,jdbcType=VARCHAR},
      
      
        #{updateDate,jdbcType=TIMESTAMP},
      
      
        #{createBy,jdbcType=VARCHAR},
      
      
        #{createDate,jdbcType=TIMESTAMP},
      
      
        #{remark,jdbcType=VARCHAR},
      
      
        #{delFlag,jdbcType=CHAR},
      
    
  
  
    update sys_data_dictionary
    
      
        fk_category_id = #{fkCategoryId,jdbcType=BIGINT},
      
      
        NAME = #{name,jdbcType=VARCHAR},
      
      
        TYPE = #{type,jdbcType=VARCHAR},
      
      
        VALUE = #{value,jdbcType=VARCHAR},
      
      
        sort = #{sort,jdbcType=DECIMAL},
      
      
        update_by = #{updateBy,jdbcType=VARCHAR},
      
      
        update_date = #{updateDate,jdbcType=TIMESTAMP},
      
      
        create_by = #{createBy,jdbcType=VARCHAR},
      
      
        create_date = #{createDate,jdbcType=TIMESTAMP},
      
      
        remark = #{remark,jdbcType=VARCHAR},
      
      
        del_flag = #{delFlag,jdbcType=CHAR},
      
    
    where id = #{id,jdbcType=BIGINT}
  
  
    update sys_data_dictionary
    set fk_category_id = #{fkCategoryId,jdbcType=BIGINT},
      NAME = #{name,jdbcType=VARCHAR},
      TYPE = #{type,jdbcType=VARCHAR},
      VALUE = #{value,jdbcType=VARCHAR},
      sort = #{sort,jdbcType=DECIMAL},
      update_by = #{updateBy,jdbcType=VARCHAR},
      update_date = #{updateDate,jdbcType=TIMESTAMP},
      remark = #{remark,jdbcType=VARCHAR},
      del_flag = #{delFlag,jdbcType=CHAR}
    where id = #{id,jdbcType=BIGINT}
  
  
  
    select
    
    from sys_data_dictionary
    
       del_flag = '0'
      
        and fk_category_id = #{dataDictionary.fkCategoryId}
      
      
       and name like CONCAT('%',CONCAT(#{dataDictionary.name},'%'))
     
    
    order by fk_category_id desc
  

  
    select
    
    from sys_data_dictionary
   where
      del_flag != '1' and fk_category_id = #{typeId}
    order by sort
  

   
    select
    
    from sys_data_dictionary
    where del_flag='0' and type=#{type} and value=#{value}
  

  
    select
    
    from sys_data_dictionary
    where del_flag='0' and type=#{type}
  

  
    select
    
    from sys_data_dictionary
    where del_flag='0' and fk_category_id=#{fk_category_id} and value=#{value}
  


  
    update sys_data_dictionary set del_flag = '1' where id = #{id,jdbcType=BIGINT}
  

简单的增删改查就好了，系统也进入了功能开发阶段。后续的进度就很快了。

​

在博客中查看： 从零开始做网站8-Springboot+vue简答的增删改查功能 - ZJBLOG