From f4c940d95e7709abfa239b8f3d8877485ebcd534 Mon Sep 17 00:00:00 2001 From: kailong321200875 <321200875@qq.com> Date: Thu, 23 Jun 2022 22:37:49 +0800 Subject: [PATCH] wip: coding --- .eslintrc.js | 7 +- .vscode/settings.json | 2 +- src/api-types/user.ts | 7 ++ src/api/register/index.ts | 12 +++ src/components/Form/src/Form.vue | 4 +- src/config/axios/config.ts | 2 +- src/config/axios/index.ts | 2 +- src/hooks/web/useValidator.ts | 60 +++++++++++ src/locales/en.ts | 4 +- src/locales/zh-CN.ts | 4 +- src/styles/index.less | 2 +- src/views/Login/Login.vue | 2 +- src/views/Login/components/RegisterForm.vue | 106 ++++++++++++++++++-- types/global.d.ts | 5 + vite.config.ts | 10 +- 15 files changed, 202 insertions(+), 27 deletions(-) create mode 100644 src/api-types/user.ts create mode 100644 src/api/register/index.ts create mode 100644 src/hooks/web/useValidator.ts diff --git a/.eslintrc.js b/.eslintrc.js index d68a39e..2aec88b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -38,8 +38,8 @@ module.exports = defineConfig({ '@typescript-eslint/ban-types': 'off', '@typescript-eslint/no-non-null-assertion': 'off', '@typescript-eslint/explicit-module-boundary-types': 'off', - '@typescript-eslint/no-unused-vars': 'error', - 'no-unused-vars': 'error', + '@typescript-eslint/no-unused-vars': 'off', + 'no-unused-vars': 'off', 'space-before-function-paren': 'off', 'vue/attributes-order': 'off', @@ -63,6 +63,7 @@ module.exports = defineConfig({ math: 'always' } ], - 'vue/multi-word-component-names': 'off' + 'vue/multi-word-component-names': 'off', + 'vue/no-v-html': 'off' } }) diff --git a/.vscode/settings.json b/.vscode/settings.json index 2bbdc0f..8bafd70 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -10,7 +10,7 @@ "i18n-ally.localesPaths": ["src/locales"], "i18n-ally.keystyle": "nested", "i18n-ally.sortKeys": true, - "i18n-ally.namespace": true, + "i18n-ally.namespace": false, "i18n-ally.enabledParsers": ["ts"], "i18n-ally.sourceLanguage": "en", "i18n-ally.displayLanguage": "zh-CN", diff --git a/src/api-types/user.ts b/src/api-types/user.ts new file mode 100644 index 0000000..7ffab0a --- /dev/null +++ b/src/api-types/user.ts @@ -0,0 +1,7 @@ +export interface IUserModel { + user_name: string + password: string + check_password: string + is_admin: number + code: string | number +} diff --git a/src/api/register/index.ts b/src/api/register/index.ts new file mode 100644 index 0000000..22f76ce --- /dev/null +++ b/src/api/register/index.ts @@ -0,0 +1,12 @@ +import { useAxios } from '@/hooks/web/useAxios' +import { IUserModel } from '@/api-types/user' + +const request = useAxios() + +export const getCodeApi = () => { + return request.get>({ url: 'user/captcha' }) +} + +export const registerApi = (data: Omit) => { + return request.post>({ url: 'user/register', data }) +} diff --git a/src/components/Form/src/Form.vue b/src/components/Form/src/Form.vue index 4f2558d..fee05df 100644 --- a/src/components/Form/src/Form.vue +++ b/src/components/Form/src/Form.vue @@ -219,7 +219,7 @@ export default defineComponent({ const { autoSetPlaceholder } = unref(getProps) return slots[item.field] ? ( - getSlot(slots, item.field, { item }) + getSlot(slots, item.field, formModel.value) ) : ( .@{elNamespace}-form.@{namespace}-form .@{elNamespace}-row { - margin-left: 0 !important; margin-right: 0 !important; + margin-left: 0 !important; } diff --git a/src/config/axios/config.ts b/src/config/axios/config.ts index 69c2fc0..b79019d 100644 --- a/src/config/axios/config.ts +++ b/src/config/axios/config.ts @@ -14,7 +14,7 @@ const config: { */ base_url: { // 开发环境接口前缀 - base: '', + base: '/api', // 打包开发环境接口前缀 dev: '', diff --git a/src/config/axios/index.ts b/src/config/axios/index.ts index 6bc86d3..c55557e 100644 --- a/src/config/axios/index.ts +++ b/src/config/axios/index.ts @@ -59,7 +59,7 @@ service.interceptors.request.use( service.interceptors.response.use( (response: AxiosResponse) => { if (response.data.code === result_code) { - return response.data + return response } else { ElMessage.error(response.data.message) } diff --git a/src/hooks/web/useValidator.ts b/src/hooks/web/useValidator.ts new file mode 100644 index 0000000..ae660ed --- /dev/null +++ b/src/hooks/web/useValidator.ts @@ -0,0 +1,60 @@ +type Callback = (error?: string | Error | undefined) => void + +interface LengthRange { + min: number + max: number + message: string +} + +export const useValidator = () => { + const required = (message: string) => { + return { + required: true, + message + } + } + + const lengthRange = (val: any, callback: Callback, options: LengthRange) => { + const { min, max, message } = options + if (val.length < min || val.length > max) { + callback(new Error(message)) + } else { + callback() + } + } + + const notSpace = (val: any, callback: Callback, message: string) => { + // 用户名不能有空格 + if (val.indexOf(' ') !== -1) { + callback(new Error(message)) + } else { + callback() + } + } + + const notSpecialCharacters = (val: any, callback: Callback, message: string) => { + // 密码不能是特殊字符 + if (/[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/gi.test(val)) { + callback(new Error(message)) + } else { + callback() + } + } + + // 两个字符串是否想等 + const isEqual = (val1: string, val2: string, callback: Callback, message: string) => { + if (val1 === val2) { + callback() + } else { + callback(new Error(message)) + } + } + + return { + required, + lengthRange, + notSpace, + notSpecialCharacters, + isEqual + } +} diff --git a/src/locales/en.ts b/src/locales/en.ts index 7e51fd3..b565a0b 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -94,7 +94,9 @@ export default { hasUser: 'Existing account? Go to login', forgetPassword: 'Forget password', usernamePlaceholder: 'Please input username', - passwordPlaceholder: 'Please input password' + passwordPlaceholder: 'Please input password', + code: 'Verification code', + codePlaceholder: 'Please input verification code' }, router: { login: 'Login', diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index e7fb40a..9519ebb 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -94,7 +94,9 @@ export default { hasUser: '已有账号？去登录', forgetPassword: '忘记密码', usernamePlaceholder: '请输入用户名', - passwordPlaceholder: '请输入密码' + passwordPlaceholder: '请输入密码', + code: '验证码', + codePlaceholder: '请输入验证码' }, router: { login: '登录', diff --git a/src/styles/index.less b/src/styles/index.less index 3b539c5..c023316 100644 --- a/src/styles/index.less +++ b/src/styles/index.less @@ -1,2 +1,2 @@ @import './var.css'; -@import 'element-plus/theme-chalk/dark/css-vars.css'; \ No newline at end of file +@import 'element-plus/theme-chalk/dark/css-vars.css'; diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index 12ba80d..25170cb 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -30,7 +30,7 @@ const toLogin = () => {