spring boot + Vue + iView前后端分离架构(Mac版) — (二)登录页面与国际化

大家好，又见面了，我是你们的朋友全栈君。

spring boot + Vue + iView前后端分离架构(Mac版) – (二) 登录页面与国际化

[小景哥哥博客][http://www.jinglisen.top]

接下来我们首先实现国际化，然后实现登录页面。

一、实现国际化

打开项目hep-admin-web工程，在src目录下创建一个local的目录，再在local目录下创建lang的文件夹，此文件夹用于存放国际化文件，国际化文件包括三个en-US.js、zh-CN.js、zh-TW.js，文件内容分别如下：

//en-US.js
export default { 
   
  login:{ 
   
    loginAccount:'please enter login',
    loginPassword:'please enter password'
  }
}

//zh-CN.js
export default { 
   
  login:{ 
   
    loginAccount:'请输入登录账号',
    loginPassword:'请输入登录的密码'
  }
}

//zh-TW.js
export default { 
   
  login:{ 
   
    loginAccount:'请输入登录账号（TW）',
    loginPassword:'请输入登录密码（TW）'
  }
}

在local文件夹下创建index.js文件，内容如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import customZhCn from './lang/zh-CN'
import customZhTw from './lang/zh-TW'
import customEnUs from './lang/en-US'
import zhCnLocale from 'iview/src/locale/lang/zh-CN'
import enUsLocale from 'iview/src/locale/lang/en-US'
import zhTwLocale from 'iview/src/locale/lang/zh-TW'

Vue.use(VueI18n)

// 自动根据浏览器系统语言设置语言
const navLang = navigator.language
const localLang = (navLang === 'zh-CN' || navLang === 'en-US') ? navLang : false
let lang = window.localStorage.lang || localLang || 'zh-CN'

Vue.config.lang = lang

// vue-i18n 6.x+写法
Vue.locale = () => { 
   
}
const messages = { 
   
  'zh-CN': Object.assign(zhCnLocale, customZhCn),
  'zh-TW': Object.assign(zhTwLocale, customZhTw),
  'en-US': Object.assign(enUsLocale, customEnUs)
}
const i18n = new VueI18n({ 
   
  locale: localStorage.getItem("lang") || lang,
  messages
})
export default i18n

然后修改main.js，内容修改如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iView'
//引入国际化包
import i18n from './local'
import 'iview/dist/styles/iview.css'

Vue.use(iView)

Vue.config.productionTip = false
//引入iView的国际化
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({ 
   
  el: '#app',
  router,
  i18n,
  components: { 
    App },
  template: '<App/>'
})

验证国际化，在App.vue中增加组件：

<Button type="primary">{
  
  {$t('login.loginAccount')}}</Button>

运行项目cnpm run dev，并访问http://localhost:8080，即可看到效果。

二、国际化组件的编写

考虑到国际化组件会在很多地方用到，因此我们基于iView的Dropdown组件编写一个Language组件，该组件主要实现语言切换时，实现各个对应语言页面的展示。在components目录下创建一个language文件夹，同时在language文件夹中创建index.js和Language.vue文件，两者的代码分别如下：

//index.js
import Language from './language.vue'
export default Language

//Language.vue
<template>
  <div>
    <Dropdown trigger="click" @on-click="selectLang">
      <a href="javascript:void(0)">
        { 
   { 
    title }}
        <Icon :size="18" type="md-arrow-dropdown" />
      </a>
      <DropdownMenu slot="list">
        <DropdownItem v-for="(value, key) in localList" :name="key" :key="`lang-${key}`">{ 
   { 
    value }}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
export default { 
   
  name: 'Language',
  props: { 
   
    lang: String
  },
  data () { 
   
    return { 
   
      langList: { 
   
        'zh-CN': '语言',
        'zh-TW': '語言',
        'en-US': 'Lang'
      },
      localList: { 
   
        'zh-CN': '中文简体',
        'zh-TW': '中文繁体',
        'en-US': 'English'
      }
    }
  },
  watch: { 
   
    lang (lang) { 
   
      this.$i18n.locale = lang
    }
  },
  computed: { 
   
    title () { 
   
      return this.langList[this.lang]
    }
  },
  methods: { 
   
    selectLang (name) { 
   
      this.$emit('on-lang-change', name)
    }
  }
}
</script>

到此，就完成了国际化切换插件的编写。

三、登录页面的编写

在src-->view-->login目录下创建login.vue文件，代码如下：

<template>
  <div class="layout">
    <Layout>
      <Header class="layout-header" id="layout-header-scroll">
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo">
            <img height="50px" width="50px" src="../../assets/logo.png"/>
          </div>
          <div class="layout-nav">
            <language @on-lang-change="setLanguage" style="margin-right: 10px;" :lang="local"/>
          </div>
          <div class="layout-nav">
            <MenuItem name="1" style="font-size: 30px;">
              欢迎使用沪尔浦后台管理系统
            </MenuItem>
          </div>
        </Menu>
      </Header>
      <Content :style="{ background: '#fff', minHeight: '500px'}">
        <div style="float: right;margin: 100px 100px 0">
          <Card title="欢迎使用沪尔浦后台管理系统">
            <Form ref="loginForm" :model="loginForm" :rules="loginFormRule">
              <div>
                <FormItem prop="loginAccount">
                  账号：<Input v-model="loginForm.loginAccount" prefix="ios-contact"
                            :placeholder="$t('login.loginAccount')"
                            style="width: 200px;"/>
                </FormItem>
                <FormItem prop="loginPassword">
                  密码：<Input v-model="loginForm.loginPassword" prefix="ios-compass" type="password"
                            :placeholder="$t('login.loginPassword')" style="width: 200px;"/>
                </FormItem>
              </div>
            </Form>
            <div style="margin-top: 20px;">
              <Button type="primary" @click="loginSystem" :long=true>登录</Button>
            </div>
          </Card>
        </div>
      </Content>
    </Layout>
  </div>
</template>
<script>
  import Language from '../../components/language';

  export default {
    components: {
      Language
    },
    data() {
      return {
        local: localStorage.getItem("lang"),
        loginForm: {
          loginAccount: '',
          loginPassword: ''
        },
        loginFormRule: {
          loginAccount: [
            {required: true, message: '请输入账号', trigger: 'blur'},
            {type: 'string', max: 30, message: '账号允许输入最大长度为30个字符', trigger: 'blur'}
          ],
          loginPassword: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {type: 'string', max: 50, message: '密码允许输入最大长度为50个字符', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      loginSystem() {
        this.$refs['loginForm'].validate((valid) => {
          if (valid) {
            console.log('实现用户登录')
          }
        })
      },
      setLanguage(lang) {
        this.local = lang
        localStorage.setItem('lang', lang)
      }
    },
    mounted() {
    }
  }
</script>
<style scoped>

  .layout-header {
    position: relative;
    z-index: 999;
    height: 60px;
  }

  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }

  .layout-nav {
    width: auto;
    float: right;
    margin: 0 auto;
    margin-right: 20px;
  }

  .layout-logo {
    width: 100px;
    height: 30px;
    border-radius: 10px;
    float: left;
    position: relative;
    left: 20px;
    top: 5px;
  }
</style>

使用Vue路由实现页面的跳转，在src-->router-->index.js中增加路由配置：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({ 
   
  routes: [
    { 
   
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    { 
   
      path: '/login',
      name: 'login',
      component: resolve => { 
   
        require(['../view/login/login.vue'], resolve);
      }
    }
  ]
})

修改App.vue文件，代码如下：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

重启项目cnpm run dev，并访问http://www.localhost:8080/#/login即可访问。