9-3 完成用户表基本的增删查改功能

src/main/java/io/github/yubincloud/fairywiki/controller/UserController.java

+package io.github.yubincloud.fairywiki.controller;
+
+import io.github.yubincloud.fairywiki.dto.req.UserQueryReqDto;
+import io.github.yubincloud.fairywiki.dto.req.UserSaveReqDto;
+import io.github.yubincloud.fairywiki.dto.resp.PageRespDto;
+import io.github.yubincloud.fairywiki.dto.resp.RestfulModel;
+import io.github.yubincloud.fairywiki.dto.resp.UserQueryRespDto;
+import io.github.yubincloud.fairywiki.service.UserService;
+import org.springframework.web.bind.annotation.*;
+
+import javax.annotation.Resource;
+import javax.validation.Valid;
+
+@RestController
+@RequestMapping("/user")
+public class UserController {
+
+    @Resource
+    private UserService userService;
+
+    @GetMapping("/list")
+    public RestfulModel<PageRespDto<UserQueryRespDto>> list(@Valid UserQueryReqDto userQueryReqDto) {
+        PageRespDto<UserQueryRespDto> userList = userService.list(userQueryReqDto);
+        return new RestfulModel<>(0, "", userList);
+    }
+
+    @GetMapping("/save")
+    public RestfulModel<Integer> saveUser(@RequestBody @Valid UserSaveReqDto userSaveReqDto) {
+        userService.save(userSaveReqDto);
+        return new RestfulModel<>(0, "", 0);
+    }
+
+    @DeleteMapping("/delete/{userId}")
+    public RestfulModel<Integer> deleteUser(@PathVariable Long userId) {
+        userService.delete(userId);
+        return new RestfulModel<>(0, "", 0);
+    }
+}

src/main/java/io/github/yubincloud/fairywiki/dto/req/UserQueryReqDto.java

+package io.github.yubincloud.fairywiki.dto.req;
+
+import lombok.Data;
+import lombok.EqualsAndHashCode;
+
+@Data
+@EqualsAndHashCode(callSuper = true)
+public class UserQueryReqDto extends PageReqDto {
+
+    private String loginName;
+
+}

src/main/java/io/github/yubincloud/fairywiki/dto/req/UserSaveReqDto.java

+package io.github.yubincloud.fairywiki.dto.req;
+
+import lombok.Data;
+
+import javax.validation.constraints.NotNull;
+import javax.validation.constraints.Pattern;
+
+@Data
+public class UserSaveReqDto {
+    private Long id;
+
+    @NotNull(message = "【用户名】不能为空")
+    private String loginName;
+
+    @NotNull(message = "【昵称】不能为空")
+    private String name;
+
+    @NotNull(message = "【密码】不能为空")
+    @Pattern(regexp = "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$", message = "【密码】至少包含 数字和英文，长度6-20")
+    private String password;
+
+}

src/main/java/io/github/yubincloud/fairywiki/dto/resp/UserQueryRespDto.java

+package io.github.yubincloud.fairywiki.dto.resp;
+
+import lombok.Data;
+
+@Data
+public class UserQueryRespDto {
+    private Long id;
+
+    private String loginName;
+
+    private String name;
+
+    private String password;
+
+}

src/main/java/io/github/yubincloud/fairywiki/service/UserService.java

+package io.github.yubincloud.fairywiki.service;
+
+import com.github.pagehelper.PageHelper;
+import com.github.pagehelper.PageInfo;
+import io.github.yubincloud.fairywiki.domain.User;
+import io.github.yubincloud.fairywiki.domain.UserExample;
+import io.github.yubincloud.fairywiki.dto.resp.PageRespDto;
+import io.github.yubincloud.fairywiki.mapper.UserMapper;
+import io.github.yubincloud.fairywiki.dto.req.UserQueryReqDto;
+import io.github.yubincloud.fairywiki.dto.req.UserSaveReqDto;
+import io.github.yubincloud.fairywiki.dto.resp.UserQueryRespDto;
+import io.github.yubincloud.fairywiki.utils.CopyUtil;
+import io.github.yubincloud.fairywiki.utils.SnowFlake;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+import org.springframework.stereotype.Service;
+import org.springframework.util.ObjectUtils;
+
+import javax.annotation.Resource;
+import java.util.List;
+
+@Service
+public class UserService {
+
+    private static final Logger LOG = LoggerFactory.getLogger(UserService.class);
+
+    @Resource
+    private UserMapper userMapper;
+
+    @Resource
+    private SnowFlake snowFlake;
+
+    public PageRespDto<UserQueryRespDto> list(UserQueryReqDto req) {
+        UserExample userExample = new UserExample();
+        UserExample.Criteria criteria = userExample.createCriteria();
+        if (!ObjectUtils.isEmpty(req.getLoginName())) {
+            criteria.andLoginNameEqualTo(req.getLoginName());
+        }
+        PageHelper.startPage(req.getPageNum(), req.getPageSize());
+        List<User> userList = userMapper.selectByExample(userExample);
+
+        PageInfo<User> pageInfo = new PageInfo<>(userList);
+        LOG.info("总行数：{}", pageInfo.getTotal());
+        LOG.info("总页数：{}", pageInfo.getPages());
+
+        // 列表复制
+        List<UserQueryRespDto> list = CopyUtil.copyList(userList, UserQueryRespDto.class);
+
+        PageRespDto<UserQueryRespDto> pageRespDto = new PageRespDto<>();
+        pageRespDto.setTotal(pageInfo.getTotal());
+        pageRespDto.setList(list);
+
+        return pageRespDto;
+    }
+
+    /**
+     * 保存
+     */
+    public void save(UserSaveReqDto req) {
+        User user = CopyUtil.copy(req, User.class);
+        if (ObjectUtils.isEmpty(req.getId())) {
+            // 新增
+            user.setId(snowFlake.nextId());
+            userMapper.insert(user);
+        } else {
+            // 更新
+            userMapper.updateByPrimaryKey(user);
+        }
+    }
+
+    public void delete(Long id) {
+        userMapper.deleteByPrimaryKey(id);
+    }
+}

web/src/components/the-header.vue

@@ -10,6 +10,9 @@
       <a-menu-item key="/">
         <router-link to="/">首页</router-link>
       </a-menu-item>
+      <a-menu-item key="/admin/user">
+        <router-link to="/admin/user">用户管理</router-link>
+      </a-menu-item>
       <a-menu-item key="/admin/ebook">
         <router-link to="/admin/ebook">电子书管理</router-link>
       </a-menu-item>

web/src/router/index.ts

@@ -4,6 +4,7 @@ import About from '../views/about.vue'
 import AdminEbook from '../views/admin/admin-ebook.vue'
 import AdminCategory from '../views/admin/admin-category.vue'
 import AdminDoc from '../views/admin/admin-doc.vue'
+import AdminUser from '../views/admin/admin-user.vue'
 import Doc from '../views/doc.vue'
 
 const routes: Array<RouteRecordRaw> = [
@@ -22,6 +23,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'About',
     component: About
   },
+  {
+    path: '/admin/user',
+    name: 'AdminUser',
+    component: AdminUser
+  },
   {
     path: '/admin/ebook',
     name: 'AdminEbook',

web/src/views/admin/admin-user.vue

+<template>
+  <a-layout>
+    <a-layout-content
+      :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
+    >
+      <p>
+        <a-form layout="inline" :model="param">
+          <a-form-item>
+            <a-input v-model:value="param.loginName" placeholder="登陆名">
+            </a-input>
+          </a-form-item>
+          <a-form-item>
+            <a-button type="primary" @click="handleQuery({page: 1, size: pagination.pageSize})">
+              查询
+            </a-button>
+          </a-form-item>
+          <a-form-item>
+            <a-button type="primary" @click="add()">
+              新增
+            </a-button>
+          </a-form-item>
+        </a-form>
+      </p>
+      <a-table
+        :columns="columns"
+        :row-key="record => record.id"
+        :data-source="users"
+        :pagination="pagination"
+        :loading="loading"
+        @change="handleTableChange"
+      >
+        <template v-slot:action="{ text, record }">
+          <a-space size="small">
+            <a-button type="primary" @click="edit(record)">
+              编辑
+            </a-button>
+            <a-popconfirm
+              title="删除后不可恢复，确认删除?"
+              ok-text="是"
+              cancel-text="否"
+              @confirm="handleDelete(record.id)"
+            >
+              <a-button type="danger">
+                删除
+              </a-button>
+            </a-popconfirm>
+          </a-space>
+        </template>
+      </a-table>
+    </a-layout-content>
+  </a-layout>
+
+  <a-modal
+    title="用户表单"
+    v-model:visible="modalVisible"
+    :confirm-loading="modalLoading"
+    @ok="handleModalOk"
+  >
+    <a-form :model="user" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+      <a-form-item label="登陆名">
+        <a-input v-model:value="user.loginName" />
+      </a-form-item>
+      <a-form-item label="昵称">
+        <a-input v-model:value="user.name" />
+      </a-form-item>
+      <a-form-item label="密码">
+        <a-input v-model:value="user.password" />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  import { defineComponent, onMounted, ref } from 'vue';
+  import axios from 'axios';
+  import { message } from 'ant-design-vue';
+  import {Tool} from "@/util/tool";
+
+  export default defineComponent({
+    name: 'AdminUser',
+    setup() {
+      const param = ref();
+      param.value = {};
+      const users = ref();
+      const pagination = ref({
+        current: 1,
+        pageSize: 10,
+        total: 0
+      });
+      const loading = ref(false);
+
+      const columns = [
+        {
+          title: '登陆名',
+          dataIndex: 'loginName'
+        },
+        {
+          title: '名称',
+          dataIndex: 'name'
+        },
+        {
+          title: '密码',
+          dataIndex: 'password'
+        },
+        {
+          title: 'Action',
+          key: 'action',
+          slots: { customRender: 'action' }
+        }
+      ];
+
+      /**
+       * 数据查询
+       **/
+      const handleQueryUser = (queryParams: any) => {
+        loading.value = true;
+        // 如果不清空现有数据，则编辑保存重新加载数据后，再点编辑，则列表显示的还是编辑前的数据
+        users.value = [];
+        axios.get("/user/list", {
+          params: {
+            pageNum: queryParams.pageNum,
+            pageSize: queryParams.pageSize,
+            loginName: param.value.loginName
+          }
+        }).then((response) => {
+          loading.value = false;
+          const respData = response.data;
+          if (respData.code === 0) {
+            users.value = respData.data.list;
+
+            // 重置分页按钮
+            pagination.value.current = queryParams.pageNum;
+            pagination.value.total = respData.data.total;
+          } else {
+            message.error(respData.msg);
+          }
+        });
+      };
+
+      /**
+       * 表格点击页码时触发
+       */
+      const handleTableChange = (pagination: any) => {
+        console.log("看看自带的分页参数都有啥：" + pagination);
+        handleQueryUser({
+          pageNum: pagination.current,
+          pageSize: pagination.pageSize
+        });
+      };
+
+      // -------- 表单 ---------
+      const user = ref();
+      const modalVisible = ref(false);
+      const modalLoading = ref(false);
+      const handleModalOk = () => {
+        modalLoading.value = true;
+        axios.post("/user/save", user.value).then((response) => {
+          modalLoading.value = false;
+          const respData = response.data; // data = commonResp
+          if (respData.code === 0) {
+            modalVisible.value = false;
+
+            // 重新加载列表
+            handleQueryUser({
+              pageNum: pagination.value.current,
+              pageSize: pagination.value.pageSize,
+            });
+          } else {
+            message.error(respData.msg);
+          }
+        });
+      };
+
+      /**
+       * 编辑
+       */
+      const edit = (record: any) => {
+        modalVisible.value = true;
+        user.value = Tool.copy(record);
+      };
+
+      /**
+       * 新增
+       */
+      const add = () => {
+        modalVisible.value = true;
+        user.value = {};
+      };
+
+      const handleDeleteUser = (id: number) => {
+        axios.delete("/user/delete/" + id).then((response) => {
+          const respData = response.data; // data = commonResp
+          if (respData.code === 0) {
+            // 重新加载列表
+            handleQueryUser({
+              pageNum: pagination.value.current,
+              pageSize: pagination.value.pageSize,
+            });
+          }
+        });
+      };
+
+      onMounted(() => {
+        handleQueryUser({
+          pageNum: 1,
+          pageSize: pagination.value.pageSize,
+        });
+      });
+
+      return {
+        param,
+        users,
+        pagination,
+        columns,
+        loading,
+        handleTableChange,
+        handleQueryUser,
+
+        edit,
+        add,
+
+        user,
+        modalVisible,
+        modalLoading,
+        handleModalOk,
+
+        handleDeleteUser
+      }
+    }
+  });
+</script>
+
+<style scoped>
+  img {
+    width: 50px;
+    height: 50px;
+  }
+</style>