red-future/admin-ui
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改默认登录账户

Browse Source
This commit is contained in:
WUSIJIAN
2025-12-04 16:48:20 +08:00
parent ac87fae81c
commit c00342ae09
2 changed files with 167 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/utils/request.ts
View File

@@ -21,6 +21,7 @@ const service: AxiosInstance = axios.create({
// 配置新建第二个 axios 实例（新功能服务） // 配置新建第二个 axios 实例（新功能服务）
const newService: AxiosInstance = axios.create({ const newService: AxiosInstance = axios.create({
baseURL: 'http://192.168.3.95:8000/', baseURL: 'http://192.168.3.95:8000/',
// baseURL: 'http://192.168.3.49:8000/',
timeout: 50000, timeout: 50000,
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
paramsSerializer: { paramsSerializer: {

354
src/views/login/component/account.vue
View File

@@ -1,85 +1,66 @@
<template> <template>
<el-form ref="loginForm" size="large" class="login-content-form" :model="ruleForm" :rules="formRules"> <el-form ref="loginForm" size="large" class="login-content-form" :model="ruleForm" :rules="formRules">
<el-form-item class="login-animation1" prop="username"> <el-form-item class="login-animation1" prop="username">
<el-input <el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.username" clearable autocomplete="off">
type="text" <template #prefix>
:placeholder="$t('message.account.accountPlaceholder1')" <el-icon class="el-input__icon"><ele-User /></el-icon>
v-model="ruleForm.username" </template>
clearable autocomplete="off"> </el-input>
<template #prefix> </el-form-item>
<el-icon class="el-input__icon"><ele-User /></el-icon> <el-form-item class="login-animation2" prop="password">
</template> <el-input
</el-input> :type="isShowPassword ? 'text' : 'password'"
</el-form-item> :placeholder="$t('message.account.accountPlaceholder2')"
<el-form-item class="login-animation2" prop="password"> v-model="ruleForm.password"
<el-input autocomplete="off"
:type="isShowPassword ? 'text' : 'password'" @keyup.enter="onSignIn"
:placeholder="$t('message.account.accountPlaceholder2')" >
v-model="ruleForm.password" <template #prefix>
autocomplete="off" <el-icon class="el-input__icon"><ele-Unlock /></el-icon>
@keyup.enter="onSignIn" </template>
> <template #suffix>
<template #prefix> <i
<el-icon class="el-input__icon"><ele-Unlock /></el-icon> class="iconfont el-input__icon login-content-password"
</template> :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
<template #suffix> @click="isShowPassword = !isShowPassword"
<i >
class="iconfont el-input__icon login-content-password" </i>
:class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'" </template>
@click="isShowPassword = !isShowPassword" </el-input>
> </el-form-item>
</i> <el-form-item class="login-animation3" prop="verifyCode">
</template> <el-col :span="15">
</el-input> <el-input
</el-form-item> type="text"
<el-form-item class="login-animation3" prop="verifyCode"> maxlength="4"
<el-col :span="15"> :placeholder="$t('message.account.accountPlaceholder3')"
<el-input v-model="ruleForm.verifyCode"
type="text" clearable
maxlength="4" autocomplete="off"
:placeholder="$t('message.account.accountPlaceholder3')" @keyup.enter="onSignIn"
v-model="ruleForm.verifyCode" >
clearable <template #prefix>
autocomplete="off" <el-icon class="el-input__icon"><ele-Position /></el-icon>
@keyup.enter="onSignIn" </template>
> </el-input>
<template #prefix> </el-col>
<el-icon class="el-input__icon"><ele-Position /></el-icon> <el-col :span="1"></el-col>
</template> <el-col :span="8">
</el-input> <div class="login-content-code">
</el-col> <img class="login-content-code-img" @click="getCaptcha" width="130" height="38" :src="captchaSrc" style="cursor: pointer" />
<el-col :span="1"></el-col> </div>
<el-col :span="8"> </el-col>
<div class="login-content-code"> </el-form-item>
<img <el-form-item class="login-animation4">
class="login-content-code-img" <el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
@click="getCaptcha" <span>{{ $t('message.account.accountBtnText') }}</span>
width="130" </el-button>
height="38" </el-form-item>
:src="captchaSrc" </el-form>
style="cursor: pointer"
/>
</div>
</el-col>
</el-form-item>
<el-form-item class="login-animation4">
<el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
<span>{{ $t('message.account.accountBtnText') }}</span>
</el-button>
</el-form-item>
</el-form>
</template> </template>
<script lang="ts"> <script lang="ts">
import { import { toRefs, reactive, defineComponent, computed, onMounted, getCurrentInstance, ref, unref } from 'vue';
toRefs,
reactive,
defineComponent,
computed,
onMounted,
getCurrentInstance,
ref, unref
} from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'; import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
@@ -91,92 +72,90 @@ import { initBackEndControlRoutes } from '/@/router/backEnd';
import { Session } from '/@/utils/storage'; import { Session } from '/@/utils/storage';
import { formatAxis } from '/@/utils/formatTime'; import { formatAxis } from '/@/utils/formatTime';
import { NextLoading } from '/@/utils/loading'; import { NextLoading } from '/@/utils/loading';
import {login,captcha} from "/@/api/login"; import { login, captcha } from '/@/api/login';
export default defineComponent({ export default defineComponent({
name: 'loginAccount', name: 'loginAccount',
setup() { setup() {
const { t } = useI18n(); const { t } = useI18n();
const {proxy} = <any>getCurrentInstance(); const { proxy } = <any>getCurrentInstance();
const storesThemeConfig = useThemeConfig(); const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig); const { themeConfig } = storeToRefs(storesThemeConfig);
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const loginForm = ref(null) const loginForm = ref(null);
const state = reactive({ const state = reactive({
isShowPassword: false, isShowPassword: false,
ruleForm: { ruleForm: {
username: 'demo', username: 'admin',
password: '123456', password: '123456',
verifyCode: '', verifyCode: '',
verifyKey:'' verifyKey: '',
},
formRules: {
username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
verifyCode: [{ required: true, trigger: 'blur', message: '验证码不能为空' }],
}, },
formRules:{
username: [
{ required: true, trigger: "blur", message: "用户名不能为空" }
],
password: [
{ required: true, trigger: "blur", message: "密码不能为空" }
],
verifyCode: [{ required: true, trigger: "blur", message: "验证码不能为空" }]
},
loading: { loading: {
signIn: false, signIn: false,
}, },
captchaSrc:'', captchaSrc: '',
}); });
onMounted(() => { onMounted(() => {
getCaptcha(); getCaptcha();
}); });
const getCaptcha = () => { const getCaptcha = () => {
captcha().then((res:any)=>{ captcha().then((res: any) => {
state.captchaSrc = res.data.img state.captchaSrc = res.data.img;
state.ruleForm.verifyKey = res.data.key state.ruleForm.verifyKey = res.data.key;
}) });
}; };
// 时间获取 // 时间获取
const currentTime = computed(() => { const currentTime = computed(() => {
return formatAxis(new Date()); return formatAxis(new Date());
}); });
// 登录 // 登录
const onSignIn = async () => { const onSignIn = async () => {
if(state.loading.signIn){ if (state.loading.signIn) {
return return;
} }
const formWrap = unref(loginForm) as any; const formWrap = unref(loginForm) as any;
if (!formWrap) return; if (!formWrap) return;
formWrap.validate((valid: boolean) => { formWrap.validate((valid: boolean) => {
if(valid){ if (valid) {
state.loading.signIn = true; state.loading.signIn = true;
login(state.ruleForm).then(async (res:any)=>{ login(state.ruleForm)
const userInfo = res.data.userInfo .then(async (res: any) => {
userInfo.avatar = proxy.getUpFileUrl(userInfo.avatar) const userInfo = res.data.userInfo;
// 存储 token 到浏览器缓存 userInfo.avatar = proxy.getUpFileUrl(userInfo.avatar);
Session.set('token', res.data.token); // 存储 token 到浏览器缓存
// 存储用户信息到浏览器缓存 Session.set('token', res.data.token);
Session.set('userInfo', userInfo); // 存储用户信息到浏览器缓存
// 设置用户菜单 Session.set('userInfo', userInfo);
Session.set('userMenu',res.data.menuList) // 设置用户菜单
// 设置按钮权限 Session.set('userMenu', res.data.menuList);
Session.set('permissions',res.data.permissions) // 设置按钮权限
// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据） Session.set('permissions', res.data.permissions);
Cookies.set('username', state.ruleForm.username); // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
if (!themeConfig.value.isRequestRoutes) { Cookies.set('username', state.ruleForm.username);
// 前端控制路由，2、请注意执行顺序 if (!themeConfig.value.isRequestRoutes) {
await initFrontEndControlRoutes(); // 前端控制路由，2、请注意执行顺序
signInSuccess(); await initFrontEndControlRoutes();
} else { signInSuccess();
// 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由 } else {
// 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/" // 模拟后端控制路由，isRequestRoutes 为 true，则开启后端控制路由
await initBackEndControlRoutes(); // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
// 执行完 initBackEndControlRoutes，再执行 signInSuccess await initBackEndControlRoutes();
signInSuccess(); // 执行完 initBackEndControlRoutes，再执行 signInSuccess
} signInSuccess();
}).catch(()=>{ }
state.loading.signIn = false; })
getCaptcha(); .catch(() => {
}) state.loading.signIn = false;
} getCaptcha();
}) });
}
});
}; };
// 登录成功后的跳转 // 登录成功后的跳转
const signInSuccess = () => { const signInSuccess = () => {
@@ -202,60 +181,59 @@ export default defineComponent({
}; };
return { return {
onSignIn, onSignIn,
getCaptcha, getCaptcha,
loginForm, loginForm,
...toRefs(state), ...toRefs(state),
}; };
}, },
}); });
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.login-content-form { .login-content-form {
margin-top: 20px; margin-top: 20px;
@for $i from 1 through 4 { @for $i from 1 through 4 {
.login-animation#{$i} { .login-animation#{$i} {
opacity: 0; opacity: 0;
animation-name: error-num; animation-name: error-num;
animation-duration: 0.5s; animation-duration: 0.5s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
animation-delay: calc($i/10) + s; animation-delay: calc($i/10) + s;
} }
} }
.login-content-password { .login-content-password {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #909399; color: #909399;
} }
} }
.login-content-code { .login-content-code {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
.login-content-code-img { .login-content-code-img {
width: 100%; width: 100%;
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
background-color: #ffffff; background-color: #ffffff;
border: 1px solid rgb(220, 223, 230); border: 1px solid rgb(220, 223, 230);
cursor: pointer; cursor: pointer;
transition: all ease 0.2s; transition: all ease 0.2s;
border-radius: 4px; border-radius: 4px;
user-select: none; user-select: none;
&:hover { &:hover {
border-color: #c0c4cc; border-color: #c0c4cc;
transition: all ease 0.2s; transition: all ease 0.2s;
} }
} }
} }
.login-content-submit { .login-content-submit {
width: 100%; width: 100%;
letter-spacing: 2px; letter-spacing: 2px;
font-weight: 300; font-weight: 300;
margin-top: 15px; margin-top: 15px;
} }
} }
</style> </style>