api-interface/itmk-base-parent/itmk-base-web/src/main/java/com/itmk/web/user/controller/SysUserController.java

@@ -23,6 +23,13 @@ public class SysUserController {
 //    新增用户
     @PostMapping//使用post请求
     public ResultVo addUser(@RequestBody SysUser sysUser){
+//        判断用户是否重复
+        QueryWrapper<SysUser> queryWrapper = new QueryWrapper<>();
+        queryWrapper.lambda().eq(SysUser::getUsername,sysUser.getUsername()).eq(SysUser::getPhone,sysUser.getPhone());
+        SysUser user = sysUserService.getOne(queryWrapper);
+        if(user != null){
+            return ResultUtils.error("用户已存在！或该手机号已被使用！");
+        }
         if(sysUserService.save(sysUser)){
             return ResultUtils.success("新增用户成功！");
         }

order-system/src/App.vue

@@ -1,7 +1,6 @@
 <!-- 作为应用程序的根组件，并提供路由视图的容器 -->
 <template>
-  <router-view/>
+  <router-view />
 </template>
 
-<style lang="scss">
+<style lang="scss"></style>
-</style>

order-system/src/api/user/index.ts

@@ -0,0 +1,7 @@
+import http from "../../http";
+import type { UserModel } from "./userModel";
+
+// 新增接口
+export const addUserApi = (parm:UserModel)=>{
+  return http.post("/api/user", parm)
+}

order-system/src/api/user/userModel.ts

@@ -0,0 +1,18 @@
+// 定义列表查询的数据类型
+export type ListUserParm = {
+  currentPage: number;
+  pageSize: number;
+  name: string;
+  phone: string;
+}
+
+// 定义表单数据类型
+export type UserModel = {
+  userId: string;
+  username: string;
+  password: string;
+  phone: string;
+  email: string;
+  sex: string;
+  name: string;
+}

order-system/src/components/SysDialog.vue

@@ -25,15 +25,14 @@
  
  <script setup lang="ts">
 //  定义参数类型
-//  定义为可选参数
 interface DialogProps{
   // 弹框标题
-  title?: string;
+  title: string;
   // 弹框显示&隐藏
   visible: boolean;
   // 弹框宽高
-  width?: number;
+  width: number;
-  height?: number;
+  height: number;
 }
 
 // 子组件接收父组件传递的参数
@@ -60,7 +59,7 @@ const onConfirm = ()=>{
  
  <style lang="scss">
   .container{
-    overflow-x: initial;
+    overflow-x: hidden;
     overflow-y: auto;
   }
 

order-system/src/compositions/user/useUser.ts

@@ -0,0 +1,28 @@
+import { ref } from "vue"
+
+// 抽取增删改的业务操作
+export default function useUser() {
+  // 获取AddUser里面的show方法
+  const showBtn = ref<{ show: (title: string, width: number, height: number) => {} }>();
+
+  // 增
+  const addBtn = () => {
+    showBtn.value?.show("新增", 630, 180)
+  }
+  // 删
+  const deleteBtn = () => {
+
+  }
+  // 改
+  const editBtn = () => {
+
+  }
+
+  return {
+    showBtn,
+    addBtn,
+    deleteBtn,
+    editBtn
+  }
+
+}

order-system/src/compositions/user/useUserTable.ts

@@ -0,0 +1,41 @@
+// 抽离表格相关业务
+
+import type { ListUserParm } from "@/api/user/userModel";
+import { ref, reactive } from "vue";
+
+export default function useUserTable() {
+  // 列表查询的参数
+  const listParm = reactive<ListUserParm>({
+    currentPage: 1,
+    pageSize: 10,
+    name: '',
+    phone: ''
+
+  })
+
+  // 列表
+  const getList = () => {
+
+  }
+
+  // 获取show方法
+  const tableShowBtn = ref<{show:(title: string)=>void}>()
+
+  // 搜索按钮
+  const searchBtn = () => {
+    
+  }
+
+  // 重置按钮
+  const resetBtn = () => {
+    tableShowBtn.value?.show("重置")
+  }
+  // 将表格查询的方法返回出去
+  return {
+    tableShowBtn,
+    listParm,
+    getList,
+    searchBtn,
+    resetBtn
+  }
+}

order-system/src/hooks/useDialog.ts

@@ -6,10 +6,10 @@ export default function useDialog(){
   // reactive： 定义复杂数据类型的响应式数据
 
   const dialog = reactive({
-    // title: '新增',
+    title: '新增',
     visible: false,
-    // width: 600,
+    width: 630,
-    // height: 100
+    height: 280
   })
 
   // 弹框关闭
@@ -23,7 +23,12 @@ export default function useDialog(){
   }
 
   // 显示弹框
-  const onShow = ()=>{
+  const onShow = (title: string, width: number, height: number)=>{
+    // 设置一个string参数，当不同按钮调用时，可以直接传参改弹框标题
+    dialog.title = title
+    // 宽高参数
+    dialog.width = width
+    dialog.height = height
     dialog.visible = true
   }
 

order-system/src/http/index.ts

@@ -1,9 +1,12 @@
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosRequestHeaders, InternalAxiosRequestConfig } from "axios"
+import axios from "axios"
+import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosRequestHeaders, InternalAxiosRequestConfig } from "axios"
 import { ElMessage } from 'element-plus'
 
 // axios请求配置
 const config = {
-  baseURL:'http://localhost:8089',
+  // baseURL:'http://localhost:8089',
+  baseURL:'/api',
+
   timeout:10000,
 }
 

order-system/src/layout/Index.vue

@@ -48,7 +48,7 @@
     justify-content: space-between;
   }
 
-  .main {
+  // .main {
-    background-color: darkcyan;
+  //   background-color: darkcyan;
-  }
+  // }
 </style>

order-system/src/layout/Menu.vue

@@ -107,7 +107,7 @@
 
   // 获取菜单状态
   const collapse = computed(()=>{
-    return store.getCollapse
+    return store.collapse
   })
 
 </script>

order-system/src/layout/MenuLogo.vue

@@ -25,7 +25,7 @@
 
   // 通过watch监听
   watch(
-    ()=> store.getCollapse,
+    ()=> store.collapse,
     (collapsed: boolean) => {
       if (!collapsed){
         setTimeout(() =>{

order-system/src/layout/header/BreadCrumb.vue

@@ -16,10 +16,12 @@
 
 <script setup lang="ts">
 
-  import { onMounted, ref, Ref, watch } from 'vue';
+  import { onMounted, ref, watch } from 'vue';
+  import type { Ref } from 'vue';
 
   // 引入当前路由，实现通过路由地址控制面包屑导航
-  import { useRoute, RouteLocationMatched } from 'vue-router'
+  import { useRoute } from 'vue-router'
+  import type { RouteLocationMatched } from 'vue-router'
 
   // 获取当前路由
   const route = useRoute()

order-system/src/layout/header/Collapse.vue

@@ -27,7 +27,7 @@
 
   // 获取状态
   const status = computed(()=>{
-    return store.getCollapse
+    return store.collapse
   })
 
   // 给图标添加点击事件

order-system/src/store/collapse/index.ts

@@ -1,25 +1,18 @@
 import { defineStore } from 'pinia'
+import { ref } from 'vue'
 
-export const useCollapseStore = defineStore('collapseStore', {
+export const useCollapseStore = defineStore('collapseStore', () => {
-  state: () => {
+  const collapse = ref(false)
-    return {
+  
-      collapse: false
+  const getCollapse = () => collapse.value
-    }
+  
-  },
+  const setCollapse = (value: boolean) => {
-
+    collapse.value = value
-  // getter
+  }
-  getters:{
+  
-    // 数据放在state里面，需要传递state
+  return { 
-    getCollapse(state){
+    collapse, 
-      return state.collapse
+    getCollapse, 
-    }
+    setCollapse 
-  },
-
-  // action
-  actions:{
-    // 设置state里面的数据
-    setCollapse(collapse:boolean){
-      this.collapse = collapse
-    }
   }
 })

order-system/src/store/test/index.ts

@@ -1,31 +1,21 @@
 import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
 
-//  `defineStore()` 的返回值的命名是自由的
+export const useTestStore = defineStore('testStore', () => {
-// 但最好含有 store 的名字，且以 `use` 开头，以 `Store` 结尾。
+  // State
-// (比如 `useUserStore`，`useCartStore`，`useProductStore`)
+  const count = ref(0)
-// 第一个参数是你的应用中 Store 的唯一 ID。
-export const useTestStore = defineStore('testStore', {
-  // state可以理解为一个共享的内存
-  state: () => {
-    return {
-      count: 0
-    }
-  },
 
-  // getter
+  // Getter
-  getters:{
+  const doubleCount = computed(() => count.value * 2)
-    // 数据放在state里面，需要传递state
-    doubleCount(state){
-      return state.count
-    }
-  },
 
-  // action
+  // Action
-  actions:{
+  function setCount(value: number) {
-    // 设置state里面的数据
+    count.value = value
-    // count:number表示传递进去的count应该是一个number类型
+  }
-    setCount(count:number){
+
-      this.count = count
+  return {
-    }
+    count,
+    doubleCount,
+    setCount
   }
 })

order-system/src/views/dashboard/Index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     首页面
-    <el-button type="primary" size="default" @click="onShow">测试弹框组件</el-button>
+    <!-- <el-button type="primary" size="default" @click="onShow('测试')">测试弹框组件</el-button> -->
     
   </div>
   <SysDialog

order-system/src/views/user/AddUser.vue

@@ -0,0 +1,157 @@
+<template>
+  <SysDialog :title="dialog.title" :visible="dialog.visible" :width="dialog.width" :height="dialog.height"
+    @onClose="onClose" @onConfirm="commit">
+
+    <!-- 通过插槽名称输入内容 -->
+    <template #content>
+      <el-form :model="addModel" ref="addFormRef" :rules="rules" label-width="80px" :inline="false" size="default">
+
+        <!-- 创建el-row容器，将姓名，性别放入一行美化页面 -->
+        <el-row :gutter="20">
+          <el-col :span="12" :offset="0">
+            <el-form-item prop="name" label="姓名">
+              <el-input v-model="addModel.name"></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12" :offset="0">
+
+            <!-- 通过单选框实现性别选择 -->
+
+            <el-form-item prop="sex" label="性别">
+              <el-radio-group v-model="addModel.sex">
+                <el-radio :value="'0'">男</el-radio>
+                <el-radio :value="'1'">女</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12" :offset="0">
+            <el-form-item prop="phone" label="电话">
+              <el-input v-model="addModel.phone"></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12" :offset="0">
+            <el-form-item prop="email" label="邮箱">
+              <el-input v-model="addModel.email"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+
+        <el-row :gutter="20">
+          <el-col :span="12" :offset="0">
+            <el-form-item prop="username" label="账户">
+              <el-input v-model="addModel.username"></el-input>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="12" :offset="0">
+            <el-form-item prop="password" label="密码">
+              <el-input type="password" v-model="addModel.password"></el-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+
+
+      </el-form>
+
+    </template>
+  </SysDialog>
+
+</template>
+
+<script setup lang="ts">
+// 引入弹窗组件
+import SysDialog from '@/components/SysDialog.vue';
+// 引入弹窗组件相关方法
+import useDialog from '@/hooks/useDialog';
+import { ref, reactive } from 'vue';
+
+// 引入UserModel获取表单数据类型
+import type { UserModel } from '@/api/user/userModel';
+import type { FormInstance } from 'element-plus';
+
+// 引入post的新增接口
+import { addUserApi } from '../../api/user/index';
+
+// 获取弹窗组件属性
+const { dialog, onClose, onConfirm, onShow } = useDialog()
+
+// 显示弹框，改写属性
+const show = (title: string, width: number, height: number) => {
+  // dialog.title: 
+  onShow(title, width, height)
+  // dialog.visible = true;
+  // 清空表单
+  addFormRef.value?.resetFields()
+}
+
+// 将显示弹框方法暴露给父组件
+defineExpose({
+  show
+})
+
+// 表单绑定对象
+const addModel = reactive<UserModel>({
+  userId: "",
+  username: "",
+  password: "",
+  phone: "",
+  email: "",
+  sex: "",
+  name: "",
+})
+
+// 表单ref属性
+const addFormRef = ref<FormInstance>()
+
+// 定义表单验证规则
+const rules = reactive({
+  name: [{
+    required: true,
+    message: '请输入姓名',
+    trigger: 'blur'
+  }],
+  sex: [{
+    required: true,
+    message: '请选择性别',
+    trigger: 'blur'
+  }],
+  phone: [{
+    required: true,
+    message: '请输入电话',
+    trigger: 'blur'
+  }],
+  username: [{
+    required: true,
+    message: '请输入用户名',
+    trigger: 'blur'
+  }],
+  password: [{
+    required: true,
+    message: '请输入密码',
+    trigger: 'blur'
+  }]
+})
+
+// 表单提交
+const commit = () => {
+  addFormRef.value?.validate(async(valid) => {
+    if(valid){
+      // 调用addUserApi，将前端表单收集到的数据提交给数据库
+      let res = await addUserApi(addModel)
+      if(res && res.code == 200){
+        onConfirm()
+      }
+      
+    }
+  })
+}
+</script>
+
+<style></style>

order-system/src/views/user/Index.vue

@@ -1,13 +1,45 @@
 <template>
-  <div>
+  <el-main>
-    用户管理
+    <!-- 搜索栏 -->
-  </div>
+    <el-form :model="listParm" label-width="80px" :inline="true" size="default">
+      <el-form-item>
+        <el-input v-model="listParm.name" placeholder="请输入姓名："></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-input v-model="listParm.phone" placeholder="请输入电话："></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button :icon="Search" @click="searchBtn">搜索</el-button>
+        <el-button plain :icon="Close" type="danger" @click="resetBtn">重置</el-button>
+        <el-button plain type="primary" :icon="Plus" @click="addBtn">新增</el-button>
+
+      </el-form-item>
+    </el-form>
+
+  </el-main>
+
+  <!-- 新增、编辑按钮弹框 -->
+  <AddUser ref="showBtn"></AddUser>
+  <AddUser ref="tableShowBtn"></AddUser>
 </template>
 
 <script setup lang="ts">
 
-</script>
+import { Search, Close, Plus } from '@element-plus/icons-vue'
+// 导入useUserTable,获取表格相关业务
+// 第一次导入在vite-env.d.ts中添加路径别名支持
+import useUserTable from '@/compositions/user/useUserTable';
 
-<style scoped>
+// 获取表格相关业务
+const { tableShowBtn, listParm, getList, searchBtn, resetBtn } = useUserTable()
+
+// 导入useUser,获取增删改相关业务
+import useUser from '@/compositions/user/useUser';
+
+const { showBtn, addBtn, deleteBtn, editBtn } = useUser()
+
+// 导入子组件AddUser,关联新增按钮
+import AddUser from './AddUser.vue';
+</script>
 
-</style>
+<style scoped></style>

order-system/src/vite-env.d.ts

@@ -39,9 +39,7 @@ declare module '@/components/*' {
 declare module 'pinia';
 declare module '@/store/*' {
   import { StoreDefinition } from 'pinia';
-  // 允许导出任意具名成员
+
-  export const useTestStore: StoreDefinition;
-  // 或者更通用的声明方式
   export function useTestStore(): any;
 
   // useCollapseStore导出
@@ -49,8 +47,33 @@ declare module '@/store/*' {
 }
 
 // 添加hooks路径别名支持
-declare module '@/hooks/useDialog' {
+declare module '@/hooks/*' {
-  // 我们可以根据实际情况导出具体的类型，如果暂时不想写具体类型，可以导出any
   const content: any;
   export default content;
+}
+
+// 添加compositions路径别名支持
+declare module '@/compositions/*' {
+  const compositions: any;
+  export default compositions;
+}
+
+// 添加api路径别名支持
+declare module '@/api/user/userModel' {
+  export type ListUserParm = {
+    currentPage: number;
+    pageSize: number;
+    name: string;
+    phone: string;
+  }
+
+  export type UserModel = {
+  userId: string;
+  username: string;
+  password: string;
+  phone: string;
+  email: string;
+  sex: string;
+  name: string;
+}
 }

order-system/tsconfig.app.json

@@ -8,7 +8,8 @@
     "paths": {
       "@/*": [
         "src/*"
-      ]
+      ],
+      "@/api/*": ["src/api/*"]
     },
     // 添加必要的库支持
     "lib": ["ES2015", "ES2015.Promise", "DOM", "DOM.Iterable", "ESNext"],
@@ -29,6 +30,7 @@
     "src/**/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue",
-    "vite-env.d.ts" // 确保包含类型声明文件
+    "vite-env.d.ts", // 确保包含类型声明文件
+    "src/api/**/*.ts"
   ]
 }

order-system/vite.config.ts

@@ -4,11 +4,19 @@ import path from 'path'  //导入nodejs核心模块path，解构提取resolce方
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [vue()],
-  server:{
+  server: {
     host: '0.0.0.0',//解决控制台：Network:use--host to expose
     port: 8080,//配置端口号
-    hmr:true,//开启热更新
+    hmr: true,//开启热更新
-    open:true//启动在浏览器打开
+    open: true,//启动在浏览器打开
+    // 跨域配置,所有api的请求都会被转接到后端接口
+    proxy: {
+      '/api': { // 这里也匹配 /api 路径
+        target: 'http://localhost:8089',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
   },
   // resolve: {
   //   //为项目设置别名，简化项目路径