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

<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 字典管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-select v-model="query.fkCategoryId" placeholder="所属字典" class="handle-select mr10">
          <el-option v-for="category in categorys" :label="category.name" :value="category.id" :key="category.id"></el-option>
<!--          <el-option key="1" label="文章类别" value="1"></el-option>
          <el-option key="2" label="文章标签" value="2"></el-option>-->
        </el-select>
        <el-input v-model="query.name" placeholder="名称" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button type="info" icon="el-icon-plus" @click="handleAdd">新增</el-button>
      </div>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
<!--        <el-table-column prop="id" label="序号" width="55" align="center"></el-table-column>-->
        <el-table-column prop="id" type="index" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="type" label="所属字典"> </el-table-column>
        <el-table-column prop="value" label="值" width="55"></el-table-column>
        <el-table-column prop="sort" label="排序" width="55"></el-table-column>
        <el-table-column prop="createDate" label="创建时间"></el-table-column>
        <el-table-column prop="updateDate" label="修改时间"></el-table-column>
        <el-table-column prop="updateBy" label="修改人"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button type="text" icon="el-icon-delete" class="red"
                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
                       :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog :title="editTitle" v-model="editVisible" width="30%">
      <el-form label-width="80px" ref="formRef" :model="form" :rules="rules">
        <el-form-item label="所属字典" prop="fkCategoryId">
          <el-select v-model="form.fkCategoryId" placeholder="请选择" class="handle-select mr10">
            <!-- value加冒号回显label -->
            <el-option v-for="category in categorys" :label="category.name" :value="category.id" :key="category.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="值" prop="value">
          <el-input v-model.number="form.value"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model.number="form.sort"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit">确 定</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {deleteDictionary, getDictionaryCategoryList, getDictionaryList, saveOrUpdateDictionary} from "../../api";

export default {
  name: "basetable",
  setup() {

    const rules = {
      fkCategoryId: [
        {required: true, message: "请选择所属字典", trigger: "blur"}
      ],
      name: [
        {required: true, message: "请填写名称", trigger: "blur"},
        { min: 1, max: 40, message: '名称长度在 1 到 40 个字符', trigger: 'blur' }
      ],
      value: [
        {required: true, message: "请填写值", trigger: "blur"},
        { type: 'number', message: "值必须输入数字", trigger: "blur" },
      ],
      sort: [
        {required: true, message: "请填写排序", trigger: "blur"},
        { type: 'number', message: "排序必须输入数字", trigger: "blur" },
        { min: 1, max: 4, message: '排序长度在 1 到 4 个字符', trigger: 'blur' }
      ],
    }
    const query = reactive({
      fkCategoryId: "",
      name: "",
      pageIndex: 1,
      pageSize: 5,
    });
    const formRef = ref(null);
    const categorys = ref([])
    const tableData = ref([]);
    const pageTotal = ref(0);
    const editTitle = ref('新增');
    // 表格编辑时弹窗和保存
    const editVisible = ref(false);
    let form = reactive({
      name: "",
      id: "",
      fkCategoryId: "",
      value: "",
      sort: "",
    });
    //获取字典类型表
    getDictionaryCategoryList(query).then((res) => {
      console.log(res)
      categorys.value = res;
    });
    // 获取列表数据
    const getData = () => {
      getDictionaryList(query).then((res) => {
        tableData.value = res.records;
        pageTotal.value = res.total || 0;
      });
    };
    getData();

    // 查询操作
    const handleSearch = () => {
      query.pageIndex = 1;
      getData();
    };
    // 分页导航
    const handlePageChange = (val) => {
      query.pageIndex = val;
      getData();
    };
    //新增操作
    const handleAdd = () =>{
      editTitle.value = "新增";
      editVisible.value = true;
      //每次新增清空form中的值，避免编辑数据留存在form
      //formRef.value.resetFields(); 此方法先编辑后新增不会重置
      Object.keys(form).forEach((item) => {
        form[item] = "";
      });
    }
    // 删除操作
    const handleDelete = (index, row) => {
      // 二次确认删除
      ElMessageBox.confirm("确定要删除吗？", "提示", {
        type: "warning",
      }).then(() => {
        deleteDictionary({"id":row.id}).then((res) => {
          if(res.success == true){
            ElMessage.success("删除成功");
            getData(); //删除成功刷新列表数据
          }else{
            ElMessage.error("删除失败")
          }
        });
      }).catch(() => {});
    };

    let idx = -1;
    //编辑按钮
    const handleEdit = (index, row) => {
      idx = index;
      Object.keys(form).forEach((item) => {
        form[item] = row[item];
      });
      editTitle.value = "编辑";
      editVisible.value = true;
    };
    //保存编辑
    const saveEdit = () => {
      // 表单校验
      formRef.value.validate((valid) => {
        if (valid) {
          saveOrUpdateDictionary(form).then((res) => {
            if(res.success == true){
              editVisible.value = false;
              // ElMessage.success(`修改第 ${idx + 1} 行成功`);
              ElMessage.success("保存成功")
              // Object.keys(form).forEach((item) => {
              //   tableData.value[idx][item] = form[item];
              // });
              getData(); // 保存成功刷新列表数据
            }else{
              ElMessage.error("信息保存失败")
            }
          });

        } else {
          return false;
        }
      });
    };

    return {
      formRef,
      query,
      tableData,
      pageTotal,
      editVisible,
      form,
      categorys,
      handleSearch,
      handlePageChange,
      handleDelete,
      handleAdd,
      handleEdit,
      saveEdit,
      editTitle,
      rules
    };
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>

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
    });
};

   @Autowired
    private SysDataDictionaryService dataDictionaryService;

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

    @RequestMapping("/getDictionaryCategoryList")
    public List<SysDataDictionaryCategory> 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
public class SysDataDictionaryService {

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

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

    public List<SysDataDictionaryCategory> getDictionaryCategoryList(){
        List<SysDataDictionaryCategory> 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("删除成功");
    }

}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.zjlovelt.mapper.SysDataDictionaryMapper" >
  <resultMap id="BaseResultMap" type="com.zjlovelt.entity.SysDataDictionary" >
    <id column="id" property="id" jdbcType="BIGINT" />
    <result column="fk_category_id" property="fkCategoryId" jdbcType="BIGINT" />
    <result column="NAME" property="name" jdbcType="VARCHAR" />
    <result column="TYPE" property="type" jdbcType="VARCHAR" />
    <result column="VALUE" property="value" jdbcType="VARCHAR" />
    <result column="sort" property="sort" jdbcType="DECIMAL" />
    <result column="update_by" property="updateBy" jdbcType="VARCHAR" />
    <result column="update_date" property="updateDate" jdbcType="TIMESTAMP" />
    <result column="create_by" property="createBy" jdbcType="VARCHAR" />
    <result column="create_date" property="createDate" jdbcType="TIMESTAMP" />
    <result column="remark" property="remark" jdbcType="VARCHAR" />
    <result column="del_flag" property="delFlag" jdbcType="CHAR" />
  </resultMap>
  <sql id="Base_Column_List" >
    id, fk_category_id, NAME, TYPE, VALUE, sort, update_by, update_date, create_by, create_date,
    remark, del_flag
  </sql>
  <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Long" >
    select
    <include refid="Base_Column_List" />
    from sys_data_dictionary
    where id = #{id,jdbcType=BIGINT}
  </select>
  <delete id="deleteByPrimaryKey" parameterType="java.lang.Long" >
    delete from sys_data_dictionary
    where id = #{id,jdbcType=BIGINT}
  </delete>
  <insert id="insert" parameterType="com.zjlovelt.entity.SysDataDictionary" >
    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>
  <insert id="insertSelective" parameterType="com.zjlovelt.entity.SysDataDictionary" >
    insert into sys_data_dictionary
    <trim prefix="(" suffix=")" suffixOverrides="," >
      <if test="id != null" >
        id,
      </if>
      <if test="fkCategoryId != null" >
        fk_category_id,
      </if>
      <if test="name != null" >
        NAME,
      </if>
      <if test="type != null" >
        TYPE,
      </if>
      <if test="value != null" >
        VALUE,
      </if>
      <if test="sort != null" >
        sort,
      </if>
      <if test="updateBy != null" >
        update_by,
      </if>
      <if test="updateDate != null" >
        update_date,
      </if>
      <if test="createBy != null" >
        create_by,
      </if>
      <if test="createDate != null" >
        create_date,
      </if>
      <if test="remark != null" >
        remark,
      </if>
      <if test="delFlag != null" >
        del_flag,
      </if>
    </trim>
    <trim prefix="values (" suffix=")" suffixOverrides="," >
      <if test="id != null" >
        #{id,jdbcType=BIGINT},
      </if>
      <if test="fkCategoryId != null" >
        #{fkCategoryId,jdbcType=BIGINT},
      </if>
      <if test="name != null" >
        #{name,jdbcType=VARCHAR},
      </if>
      <if test="type != null" >
        #{type,jdbcType=VARCHAR},
      </if>
      <if test="value != null" >
        #{value,jdbcType=VARCHAR},
      </if>
      <if test="sort != null" >
        #{sort,jdbcType=DECIMAL},
      </if>
      <if test="updateBy != null" >
        #{updateBy,jdbcType=VARCHAR},
      </if>
      <if test="updateDate != null" >
        #{updateDate,jdbcType=TIMESTAMP},
      </if>
      <if test="createBy != null" >
        #{createBy,jdbcType=VARCHAR},
      </if>
      <if test="createDate != null" >
        #{createDate,jdbcType=TIMESTAMP},
      </if>
      <if test="remark != null" >
        #{remark,jdbcType=VARCHAR},
      </if>
      <if test="delFlag != null" >
        #{delFlag,jdbcType=CHAR},
      </if>
    </trim>
  </insert>
  <update id="updateByPrimaryKeySelective" parameterType="com.zjlovelt.entity.SysDataDictionary" >
    update sys_data_dictionary
    <set >
      <if test="fkCategoryId != null" >
        fk_category_id = #{fkCategoryId,jdbcType=BIGINT},
      </if>
      <if test="name != null" >
        NAME = #{name,jdbcType=VARCHAR},
      </if>
      <if test="type != null" >
        TYPE = #{type,jdbcType=VARCHAR},
      </if>
      <if test="value != null" >
        VALUE = #{value,jdbcType=VARCHAR},
      </if>
      <if test="sort != null" >
        sort = #{sort,jdbcType=DECIMAL},
      </if>
      <if test="updateBy != null" >
        update_by = #{updateBy,jdbcType=VARCHAR},
      </if>
      <if test="updateDate != null" >
        update_date = #{updateDate,jdbcType=TIMESTAMP},
      </if>
      <if test="createBy != null" >
        create_by = #{createBy,jdbcType=VARCHAR},
      </if>
      <if test="createDate != null" >
        create_date = #{createDate,jdbcType=TIMESTAMP},
      </if>
      <if test="remark != null" >
        remark = #{remark,jdbcType=VARCHAR},
      </if>
      <if test="delFlag != null" >
        del_flag = #{delFlag,jdbcType=CHAR},
      </if>
    </set>
    where id = #{id,jdbcType=BIGINT}
  </update>
  <update id="updateByPrimaryKey" parameterType="com.zjlovelt.entity.SysDataDictionary" >
    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}
  </update>
  <!-- 分页查询 -->
  <select id="selectByPage" resultMap="BaseResultMap" parameterType="com.zjlovelt.entity.SysDataDictionary">
    select
    <include refid="Base_Column_List" />
    from sys_data_dictionary
    <where>
       del_flag = '0'
      <if test="dataDictionary.fkCategoryId != null and dataDictionary.fkCategoryId != '' ">
        and fk_category_id = #{dataDictionary.fkCategoryId}
      </if>
      <if test="dataDictionary.name != null and dataDictionary.name != ''">
       and name like CONCAT('%',CONCAT(#{dataDictionary.name},'%'))
     </if>
    </where>
    order by fk_category_id desc
  </select>

  <select id="findByCategoryId" resultMap="BaseResultMap" parameterType="java.lang.Long">
    select
    <include refid="Base_Column_List"/>
    from sys_data_dictionary
   where
      del_flag != '1' and fk_category_id = #{typeId}
    order by sort
  </select>

   <select id="findByTypeAndValue" resultMap="BaseResultMap">
    select
    <include refid="Base_Column_List"/>
    from sys_data_dictionary
    where del_flag='0' and type=#{type} and value=#{value}
  </select>

  <select id="findByType" resultMap="BaseResultMap">
    select
    <include refid="Base_Column_List"/>
    from sys_data_dictionary
    where del_flag='0' and type=#{type}
  </select>

  <select id="findByCategoryidAndValue" resultMap="BaseResultMap">
    select
    <include refid="Base_Column_List"/>
    from sys_data_dictionary
    where del_flag='0' and fk_category_id=#{fk_category_id} and value=#{value}
  </select>


  <update id="deleteById" parameterType="java.lang.Long">
    update sys_data_dictionary set del_flag = '1' where id = #{id,jdbcType=BIGINT}
  </update>
</mapper>