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
即可访问。