在api/user/index.ts文件下配置新增用户业务的接口

在vite.config.ts文件下进行跨域配置，实现所有/api的路径都会被转接到后端

完善后端新增用户逻辑，当用户账户名和手机号重复时，返回错误提示

（经测试，由前端表单获取的数据能够传递给数据库，并且能实现重复报错逻辑）

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/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/compositions/user/useUser.ts

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

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

@@ -28,7 +28,7 @@ export default function useUserTable() {
 
   // 重置按钮
   const resetBtn = () => {
-    tableShowBtn.value.show("重置")
+    tableShowBtn.value?.show("重置")
   }
   // 将表格查询的方法返回出去
   return {

order-system/src/http/index.ts

@@ -4,7 +4,9 @@ import { ElMessage } from 'element-plus'
 
 // axios请求配置
 const config = {
-  baseURL:'http://localhost:8089',
+  // baseURL:'http://localhost:8089',
+  baseURL:'/api',
+
   timeout:10000,
 }
 

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

@@ -51,7 +51,7 @@
 
           <el-col :span="12" :offset="0">
             <el-form-item prop="password" label="密码">
-              <el-input v-model="addModel.password"></el-input>
+              <el-input type="password" v-model="addModel.password"></el-input>
             </el-form-item>
           </el-col>
         </el-row>
@@ -73,8 +73,11 @@ import useDialog from '@/hooks/useDialog';
 import { ref, reactive } from 'vue';
 
 // 引入UserModel获取表单数据类型
-import { UserModel } from '@/api/user/userModel';
-import { FormInstance } from 'element-plus';
+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()
@@ -85,7 +88,7 @@ const show = (title: string, width: number, height: number) => {
   onShow(title, width, height)
   // dialog.visible = true;
   // 清空表单
-  addFormRef.value.resetFields()
+  addFormRef.value?.resetFields()
 }
 
 // 将显示弹框方法暴露给父组件
@@ -138,9 +141,14 @@ const rules = reactive({
 
 // 表单提交
 const commit = () => {
-  addFormRef.value.validate((valid) => {
+  addFormRef.value?.validate(async(valid) => {
     if(valid){
-      onConfirm()
+      // 调用addUserApi，将前端表单收集到的数据提交给数据库
+      let res = await addUserApi(addModel)
+      if(res && res.code == 200){
+        onConfirm()
+      }
+      
     }
   })
 }

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,//开启热更新
-    open:true//启动在浏览器打开
+    hmr: true,//开启热更新
+    open: true,//启动在浏览器打开
+    // 跨域配置,所有api的请求都会被转接到后端接口
+    proxy: {
+      '/api': { // 这里也匹配 /api 路径
+        target: 'http://localhost:8089',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
   },
   // resolve: {
   //   //为项目设置别名，简化项目路径