登录页临时代码

src/apis/login.js

@@ -0,0 +1,10 @@
+import request from "@/request/index.js";
+
+// 登录
+export const login = (data) => {
+    return request({
+        url: 'login',
+        method: 'post',
+        data,
+    })
+};

src/i18n/language/en.js

@@ -3,4 +3,13 @@ export default {
     personnalCenter: "Personal Center",
     login: "Login",
     logout: "Exit",
+    form: {
+        username: "Username",
+        usernameHolder: "Please enter your username.",
+        usernameError:
+            "Username can only start with an alphabet and contains 4~32 characters with alphabet, _ and -.",
+        password: "Password",
+        passwordHolder: "Please enter your password.",
+        passwordError: "Please enter a password of at least 4 characters",
+    },
 }

src/i18n/language/zh-cn.js

@@ -1,6 +1,14 @@
 export default {
     sitename: "权限管理系统",
-    personnalCenter: "个人中心",
+    personalCenter: "个人中心",
     login: "登录",
     logout: "退出",
+    form:{
+        username: "用户名",
+        usernameHolder: "请输入用户名",
+        usernameError: "用户名由英文字母开头的长度4-32位字母、_和-组成",
+        password: "密码",
+        passwordHolder: "请输入密码",
+        passwordError: "至少输入4个字符的密码",
+    }
 }

src/layout/components/PageHeader.vue

@@ -38,7 +38,7 @@
           </div>
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item command="toPersonal">{{ t('personnalCenter') }}</el-dropdown-item>
+              <el-dropdown-item command="toPersonal">{{ t('personalCenter') }}</el-dropdown-item>
               <el-dropdown-item divided command="toLogout">{{ t('logout') }}</el-dropdown-item>
             </el-dropdown-menu>
           </template>

src/views/login/index.vue

@@ -1,19 +1,70 @@
 <template>
-  <h1>这是登录页面</h1>
+  <div class="page flex-center">
-  <el-button @click="testAxios">测试</el-button>
+    <div class="single-box">
+      <el-form ref="formRef" :model="form" :rules="rules" label-width="86px">
+        <h3 class="title">{{ t('login') }}</h3>
+        <el-form-item :label="t('form.username')" prop="account">
+          <el-input v-model="form.account" :placeholder="t('form.accountHolder')" prefix-icon="user"></el-input>
+        </el-form-item>
+        <el-form-item :label="t('form.password')" prop="password">
+          <el-input v-model="form.password" type="password" :placeholder="t('form.passwordHolder')"
+                    prefix-icon="lock"></el-input>
+        </el-form-item>
+        <el-form-item label>
+          <el-button type="primary" :loading="loading" class="w100p" @click="doLogin">
+            {{ t('login') }}
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import axios from "axios";
+// import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
-function testAxios() {
+import {elementLocales} from "@/i18n/index.js";
-  axios.get('http://home.rogersun.cn:8888').then(res=>{
+import {login} from "@/apis/login.js";
-    alert(res.data);
+import {useI18n} from "vue-i18n";
-  }).catch(error=>{
+import {useStore} from "vuex";
-    console.log(error);
+import router from "@/router/index.js";
+
+const {t} = useI18n();
+
+const formRef = ref();
+const form = reactive({
+  account: "",
+  password: "",
+})
+const rules = {
+  account: [
+    {required: true, message: t('form.usernameError'), trigger: ["change", "blur"]},
+    {pattern: /^[a-zA-Z][a-zA-Z0-9_-]{3,31}$/, message: t('form.usernameError'), trigger: ["change", "blur"]}
+  ],
+  password: [{required: true, message: t('form.passwordError'), min: 4, trigger: ["change", "blur"]}],
+}
+const loading = ref(false);
+const store = useStore();
+
+function doLogin() {
+  formRef.value.validate((valid) => {
+    // 验证不通过
+    if (!valid) return;
+    // 验证通过
+    loading.value = true
+    login(form).then((res) => {
+      store.commit("user/setToken", res.data.token);
+      store.dispatch("user/refreshInfo");
+      store.commit("setRouteLoaded", false);
+      localStorage.setItem("pm_token", res.data.token);
+      router.push("/")
+    }).finally(() => {
+      loading.value = false;
+    })
   })
 }
 </script>
 
+
 <style scoped>
 
 </style>