初始化

package.json

@@ -22,6 +22,7 @@
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "vue": "2.6.10",
+    "vue-i18n": "^8.28.2",
     "vue-router": "3.0.6",
     "vuex": "3.1.0"
   },

src/api/user.js

@@ -2,7 +2,15 @@ import request from '@/utils/request'
 
 export function login(data) {
   return request({
-    url: '/vue-admin-template/user/login',
+    url: '/login',
+    method: 'post',
+    data
+  })
+}
+
+export function register(data) {
+  return request({
+    url: '/register',
     method: 'post',
     data
   })

src/i18n/index.js

@@ -0,0 +1,21 @@
+// src/i18n/index.js
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+// 导入语言包
+import en from './locales/en.json'
+import zh from './locales/zh.json'
+
+Vue.use(VueI18n)
+
+const messages = {
+  en,
+  zh
+}
+
+const i18n = new VueI18n({
+  locale: 'zh', // 设置默认语言
+  messages
+})
+
+export default i18n

src/i18n/locales/en.json

@@ -0,0 +1,4 @@
+{
+  "mine": "home",
+  "logout": "Logout"
+}

src/i18n/locales/zh.json

@@ -0,0 +1,8 @@
+{
+  "mine": "首页",
+  "logout": "退出",
+  "login": "登录",
+  "switchToRegister": "切换到注册",
+  "switchToLogin": "切换到登录",
+  "register": "注册"
+}

src/layout/components/Navbar.vue

@@ -13,17 +13,14 @@
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
           <router-link to="/">
             <el-dropdown-item>
-              Home
+              {{ $t('mine') }}
             </el-dropdown-item>
           </router-link>
-          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
-            <el-dropdown-item>Github</el-dropdown-item>
-          </a>
-          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
-            <el-dropdown-item>Docs</el-dropdown-item>
-          </a>
+          <el-dropdown-item @click.native="toggleLanguage">
+            <span style="display:block;">{{ currentLanguage === 'zh' ? 'Switch to English' : '切换到中文' }}</span>
+          </el-dropdown-item>
           <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">Log Out</span>
+            <span style="display:block;">{{ $t('logout') }}</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -45,7 +42,10 @@ export default {
     ...mapGetters([
       'sidebar',
       'avatar'
-    ])
+    ]),
+    currentLanguage() {
+      return this.$i18n.locale
+    }
   },
   methods: {
     toggleSideBar() {
@@ -54,6 +54,9 @@ export default {
     async logout() {
       await this.$store.dispatch('user/logout')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    },
+    toggleLanguage() {
+      this.$i18n.locale = this.currentLanguage === 'zh' ? 'en' : 'zh'
     }
   }
 }

src/main.js

@@ -11,7 +11,7 @@ import '@/styles/index.scss' // global css
 import App from './App'
 import store from './store'
 import router from './router'
-
+import i18n from '@/i18n'
 import '@/icons' // icon
 import '@/permission' // permission control
 
@@ -39,5 +39,6 @@ new Vue({
   el: '#app',
   router,
   store,
+  i18n,
   render: h => h(App)
 })

src/router/index.js

@@ -6,30 +6,6 @@ Vue.use(Router)
 /* Layout */
 import Layout from '@/layout'
 
-/**
- * Note: sub-menu only appear when route children.length >= 1
- * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
- *
- * hidden: true                   if set true, item will not show in the sidebar(default is false)
- * alwaysShow: true               if set true, will always show the root menu
- *                                if not set alwaysShow, when item has more than one children route,
- *                                it will becomes nested mode, otherwise not show the root menu
- * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
- * name:'router-name'             the name is used by <keep-alive> (must set!!!)
- * meta : {
-    roles: ['admin','editor']    control the page roles (you can set multiple roles)
-    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
-    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
-    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
-    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
-  }
- */
-
-/**
- * constantRoutes
- * a base page that does not have permission requirements
- * all roles can be accessed
- */
 export const constantRoutes = [
   {
     path: '/login',

src/utils/request.js

@@ -5,7 +5,8 @@ import { getToken } from '@/utils/auth'
 
 // create an axios instance
 const service = axios.create({
-  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  baseURL: 'http://192.168.1.9:8000/docs', // url = base url + request url
+  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
   timeout: 5000 // request timeout
 })

src/views/login/index.vue

@@ -3,9 +3,23 @@
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
 
       <div class="title-container">
-        <h3 class="title">Login Form</h3>
+        <h3 class="title">{{ isLogin ? $t('login') : $t('register') }}</h3>
       </div>
 
+      <el-form-item v-if="!isLogin" prop="email">
+        <span class="svg-container">
+          <svg-icon icon-class="email" />
+        </span>
+        <el-input
+          v-model="loginForm.email"
+          placeholder="Email"
+          name="email"
+          type="email"
+          tabindex="1"
+          auto-complete="on"
+        />
+      </el-form-item>
+
       <el-form-item prop="username">
         <span class="svg-container">
           <svg-icon icon-class="user" />
@@ -16,7 +30,7 @@
           placeholder="Username"
           name="username"
           type="text"
-          tabindex="1"
+          tabindex="2"
           auto-complete="on"
         />
       </el-form-item>
@@ -32,20 +46,21 @@
           :type="passwordType"
           placeholder="Password"
           name="password"
-          tabindex="2"
+          tabindex="3"
           auto-complete="on"
-          @keyup.enter.native="handleLogin"
+          @keyup.enter.native="handleSubmit"
         />
         <span class="show-pwd" @click="showPwd">
           <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
         </span>
       </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
+      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleSubmit">
+        {{ isLogin ? $t('login') : $t('register') }}
+      </el-button>
 
-      <div class="tips">
-        <span style="margin-right:20px;">username: admin</span>
-        <span> password: any</span>
+      <div class="switch-mode" @click="toggleMode">
+        {{ isLogin ? $t('switchToRegister') : $t('switchToLogin') }}
       </div>
 
     </el-form>
@@ -72,12 +87,23 @@ export default {
         callback()
       }
     }
+    const validateEmail = (rule, value, callback) => {
+      const emailPattern = /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/
+      if (!emailPattern.test(value)) {
+        callback(new Error('Please enter a valid email address'))
+      } else {
+        callback()
+      }
+    }
     return {
+      isLogin: true,
       loginForm: {
+        email: '',
         username: 'admin',
         password: '111111'
       },
       loginRules: {
+        email: [{ required: true, trigger: 'blur', validator: validateEmail }],
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],
         password: [{ required: true, trigger: 'blur', validator: validatePassword }]
       },
@@ -86,15 +112,10 @@ export default {
       redirect: undefined
     }
   },
-  watch: {
-    $route: {
-      handler: function(route) {
-        this.redirect = route.query && route.query.redirect
-      },
-      immediate: true
-    }
-  },
   methods: {
+    toggleMode() {
+      this.isLogin = !this.isLogin
+    },
     showPwd() {
       if (this.passwordType === 'password') {
         this.passwordType = ''
@@ -105,11 +126,15 @@ export default {
         this.$refs.password.focus()
       })
     },
-    handleLogin() {
+    handleSubmit() {
       this.$refs.loginForm.validate(valid => {
         if (valid) {
           this.loading = true
-          this.$store.dispatch('user/login', this.loginForm).then(() => {
+          const action = this.isLogin ? 'user/login' : 'user/register'
+          this.$store.dispatch(action, this.loginForm).then(() => {
+            if (!this.isLogin) {
+              this.toggleMode()
+            }
             this.$router.push({ path: this.redirect || '/' })
             this.loading = false
           }).catch(() => {
@@ -176,6 +201,7 @@ $cursor: #fff;
 $bg:#2d3a4b;
 $dark_gray:#889aa4;
 $light_gray:#eee;
+$green: #00ff00;
 
 .login-container {
   min-height: 100%;
@@ -233,5 +259,14 @@ $light_gray:#eee;
     cursor: pointer;
     user-select: none;
   }
+
+  .switch-mode {
+    text-decoration: underline;
+    color: $green;
+    cursor: pointer;
+    user-select: none;
+    text-align: center;
+    margin-top: 20px;
+  }
 }
 </style>