feat:登录页面改造

Yi.Pure.Vue3/.env.development

@@ -6,3 +6,16 @@ VITE_PUBLIC_PATH = /
 
 # 开发环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
 VITE_ROUTER_HISTORY = "hash"
+
+
+# 开发环境
+VITE_APP_BASE_API = '/dev-api'
+
+# ws/开发环境
+VITE_APP_BASE_WS = '/dev-ws'
+
+#RBAC
+# VITE_APP_BASE_URL='http://localhost:19001/api'
+
+#长连接
+VITE_APP_BASE_URL_WS='http://localhost:19001/hub'

Yi.Pure.Vue3/.env.production

@@ -7,7 +7,13 @@ VITE_ROUTER_HISTORY = "hash"
 # 是否在打包时使用cdn替换本地库 替换 true 不替换 false
 VITE_CDN = false
 
+# 生产环境
+VITE_APP_BASE_API = '/prod-api'
+
+# ws/开发环境
+VITE_APP_BASE_WS = '/prod-ws'
+
 # 是否启用gzip压缩或brotli压缩（分两种情况，删除原始文件和不删除原始文件）
 # 压缩时不删除原始文件的配置：gzip、brotli、both（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
 # 压缩时删除原始文件的配置：gzip-clear、brotli-clear、both-clear（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
-VITE_COMPRESSION = "none"
+VITE_COMPRESSION = "none"

Yi.Pure.Vue3/build/utils.ts

@@ -56,7 +56,11 @@ const wrapperEnv = (envConf: Recordable): ViteEnv => {
     VITE_ROUTER_HISTORY: "",
     VITE_CDN: false,
     VITE_HIDE_HOME: "false",
-    VITE_COMPRESSION: "none"
+    VITE_COMPRESSION: "none",
+    VITE_APP_BASE_API: "",
+    VITE_APP_BASE_URL: "",
+    VITE_APP_BASE_URL_WS: "",
+    VITE_APP_BASE_WS: ""
   };
 
   for (const envName of Object.keys(envConf)) {

Yi.Pure.Vue3/mock/asyncRoutes.ts

@@ -322,7 +322,7 @@ const tabsRouter = {
 
 export default defineFakeRoute([
   {
-    url: "/get-async-routes",
+    url: `/dev-api/get-async-routes`,
     method: "get",
     response: () => {
       return {

Yi.Pure.Vue3/src/api/user.ts

@@ -1,5 +1,12 @@
 import { http } from "@/utils/http";
 
+export type imageCaptcha = {
+  //uuid
+  uuid: string; // 使用字符串表示 Guid
+  //验证码图片字节数值
+  img: Uint8Array | null;
+};
+
 export type UserResult = {
   success: boolean;
   data: {
@@ -70,7 +77,12 @@ type ResultTable = {
 
 /** 登录 */
 export const getLogin = (data?: object) => {
-  return http.request<UserResult>("post", "/login", { data });
+  return http.request<UserResult>("post", "/account/login", { data });
+};
+
+/** 获取验证码 */
+export const getCodeImg = () => {
+  return http.request<imageCaptcha>("get", "/account/captcha-image");
 };
 
 /** 刷新`token` */

Yi.Pure.Vue3/src/utils/http/index.ts

@@ -16,6 +16,7 @@ import { useUserStoreHook } from "@/store/modules/user";
 
 // 相关配置请参考：www.axios-js.com/zh-cn/docs/#axios-request-config-1
 const defaultConfig: AxiosRequestConfig = {
+  baseURL: import.meta.env.VITE_APP_BASE_API,
   // 请求超时时间
   timeout: 10000,
   headers: {

Yi.Pure.Vue3/src/views/login/index.vue

@@ -24,6 +24,7 @@ import { ref, toRaw, reactive, watch, computed } from "vue";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
+import { getCodeImg } from "@/api/user";
 
 import dayIcon from "@/assets/svg/day.svg?component";
 import darkIcon from "@/assets/svg/dark.svg?component";
@@ -37,6 +38,7 @@ defineOptions({
   name: "Login"
 });
 
+const codeUrl = ref("");
 const imgCode = ref("");
 const loginDay = ref(7);
 const router = useRouter();
@@ -57,18 +59,30 @@ const { title, getDropdownItemStyle, getDropdownItemClass } = useNav();
 const { locale, translationCh, translationEn } = useTranslationLang();
 
 const ruleForm = reactive({
-  username: "admin",
-  password: "admin123",
-  verifyCode: ""
+  username: "cc",
+  password: "123456",
+  verifyCode: "",
+  uuid: ""
 });
 
+//获取验证码
+const getCode = () => {
+  getCodeImg().then(res => {
+    codeUrl.value = "data:image/gif;base64," + res.img;
+    ruleForm.uuid = res.uuid;
+  });
+};
+
 const onLogin = async (formEl: FormInstance | undefined) => {
   if (!formEl) return;
   await formEl.validate(valid => {
     if (valid) {
       loading.value = true;
       useUserStoreHook()
-        .loginByUsername({ username: ruleForm.username, password: "admin123" })
+        .loginByUsername({
+          username: ruleForm.username,
+          password: ruleForm.password
+        })
         .then(res => {
           if (res.success) {
             // 获取后端路由
@@ -114,6 +128,7 @@ watch(checked, bool => {
 watch(loginDay, value => {
   useUserStoreHook().SET_LOGINDAY(value);
 });
+getCode();
 </script>
 
 <template>
@@ -224,7 +239,12 @@ watch(loginDay, value => {
                   :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
                 >
                   <template v-slot:append>
-                    <ReImageVerify v-model:code="imgCode" />
+                   11 {{codeUrl}}
+                    <img
+                      :src="codeUrl"
+                      class="login-code-img"
+                      @click="getCode"
+                    />
                   </template>
                 </el-input>
               </el-form-item>

Yi.Pure.Vue3/src/views/login/utils/rule.ts

@@ -9,7 +9,7 @@ export const REGEXP_SIX = /^\d{6}$/;
 
 /** 密码正则（密码格式应为8-18位数字、字母、符号的任意两种组合） */
 export const REGEXP_PWD =
-  /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
+  /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){6,18}$/;
 
 /** 登录校验 */
 const loginRules = reactive<FormRules>({

Yi.Pure.Vue3/types/global.d.ts

@@ -70,6 +70,10 @@ declare global {
     VITE_CDN: boolean;
     VITE_HIDE_HOME: string;
     VITE_COMPRESSION: ViteCompression;
+    VITE_APP_BASE_API: string;
+    VITE_APP_BASE_WS:string;
+    VITE_APP_BASE_URL:string;
+    VITE_APP_BASE_URL_WS:string;
   }
 
   /**

Yi.Pure.Vue3/vite.config.ts

@@ -10,7 +10,8 @@ import {
 } from "./build/utils";
 
 export default ({ mode }: ConfigEnv): UserConfigExport => {
-  const { VITE_CDN, VITE_PORT, VITE_COMPRESSION, VITE_PUBLIC_PATH } =
+  // eslint-disable-next-line
+  const { VITE_CDN, VITE_PORT, VITE_COMPRESSION, VITE_PUBLIC_PATH,VITE_APP_BASE_URL,VITE_APP_BASE_URL_WS } =
     wrapperEnv(loadEnv(mode, root));
   return {
     base: VITE_PUBLIC_PATH,
@@ -24,7 +25,21 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
       port: VITE_PORT,
       host: "0.0.0.0",
       // 本地跨域代理 https://cn.vitejs.dev/config/server-options.html#server-proxy
-      proxy: {},
+      proxy: {
+        // https://cn.vitejs.dev/config/#server-proxy
+        "/dev-api": {
+          target: VITE_APP_BASE_URL,
+          changeOrigin: true,
+          rewrite: p => p.replace(/^\/dev-api/, "")
+        },
+
+        "/dev-ws": {
+          target: VITE_APP_BASE_URL_WS,
+          changeOrigin: true,
+          rewrite: p => p.replace(/^\/dev-ws/, ""),
+          ws: true
+        }
+      },
       // 预热文件以提前转换和缓存结果，降低启动期间的初始页面加载时长并防止转换瀑布
       warmup: {
         clientFiles: ["./index.html", "./src/{views,components}/*"]

Yi.RuoYi.Vue3/.env.development

@@ -10,13 +10,8 @@ VITE_APP_BASE_API = '/dev-api'
 # ws/开发环境
 VITE_APP_BASE_WS = '/dev-ws'
 
-#BBS
 VITE_APP_BASE_URL='http://localhost:19001/api/app'
 
-
-#RBAC
-# VITE_APP_BASE_URL='http://localhost:19001/api'
-
 #长连接
 VITE_APP_BASE_URL_WS='http://localhost:19001/hub'
 

Yi.RuoYi.Vue3/src/utils/request.js

@@ -22,21 +22,7 @@ const service = axios.create({
   timeout: 10000,
   //处理批零参数
   paramsSerializer:params => {
-    // return qs.stringify(params,{indices:false})
-  //  console.log(params,"params")
-//     if(params.id!=undefined)
-//     {
-//       if(Array.isArray(params.id) )
-//       {
-//         return "id="+params.id.join("&id=")
-//       }
-//       else
-//       {
-//         return "id="+params.id;
-//       }
-    
-//     }
-// return request.param(params);
+
 return qs.stringify(params, {arrayFormat: 'repeat'});
   },