spring boot+iview 前后端分离架构之登陆页面以及国际化的实现（二）

朴灿烈づ我的快乐病毒、 2022-02-15 18:19 185阅读 0赞

### spring boot 与 iview 前后端分离架构之登陆页面以及国际化的实现（二） ###

*  公众号
 *  登陆页面以及国际化的实现
 *   *  国际化的实现
     *  国际化组件的编写
     *  登陆页面的编写

# 公众号 #

![在这里插入图片描述][20191218155125364.jpg]  
大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg02】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

# 登陆页面以及国际化的实现 #

在上一章节我们实现了前端工程的构建以及IVIEW的引入，本章节主要讲解的是如何在开发自己的系统的时候进行国际化的编写以及登陆页面的实现，本章节的代码是基于上一章节的代码的延续实现的，请大家基于上一章节的代码往下走。

## 国际化的实现 ##

直接打开我们的bg-admin-web的工程，然后在src目录底下创建一个local的目录，接着在local目录下建一个lang的文件夹，该文件及主要是用于存放我们的国际化的文件，我们分别在lang文件夹下面建en-US.js、zh-CN.js、zh-TW.js这三个文件，文件内容分别如下：

export default {
      login:{
        loginAccount:'please enter login',
        loginPassword:'please enter password'
      }
    }

export default {
      login:{
        loginAccount:'请输入登录账号',
        loginPassword:'请输入登录的密码'
      }
    }

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 i18n from './local'
    import iView from 'iview'
    import 'iview/dist/styles/iview.css'
    
    Vue.config.productionTip = false
    // 引入view的国际化
    Vue.use(iView, {
      i18n: (key, value) => i18n.t(key, value)
    })
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      // 国际化初始化
      i18n,
      components: { App },
      template: '<App/>'
    })

接着我们需要验证我们的国际化是否生效，打开我们的App.vue，直接改造我们之前的button按钮如下代码所示：

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

最后我们直接cnpm run dev，然后访问http://localhost:8080，大家可以看到如下的页面，则说明我们的国际化已经生效了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]

## 国际化组件的编写 ##

国际化这个组件我们考虑到后面有许多地方可能会使用到，因此基于iview的Dropdown组件我们编写一个Language组件，该组件主要实现我们选择相应的语言的时候，自动切换到相应的语言进行页面的展示，那么我们直接在components目录底下创建一个language文件夹，同时在language文件夹中创建index.js和Language.vue文件，二者的代码分别如下：

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

<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>

到此处我们就完成了我们国际化切换插件的编写，如果想要弄清楚里面的来龙去脉，需要大家去深入的学习vue才可以真正的理解里面的精髓。

## 登陆页面的编写 ##

编写登陆页面的时候我们首先需要在我们的工程底下建相应的文件夹来存放我们的vue文件，我们直接在src目录底下创建一个view文件夹，接着在view文件夹底下建一个login文件夹，在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;">
                  欢迎使用xxx系统
                </MenuItem>
              </div>
            </Menu>
          </Header>
          <Content :style="{ background: '#fff', minHeight: '500px'}">
            <div style="float: right;margin: 100px 100px 0">
              <Card title="欢迎登录XX系统">
                <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>

接着我们配置我们的route实现我们的页面的跳转，找到我们的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的代码，这样我们的login的页面才可以正常显示，改造完成的代码如下：

<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;
      color: #2c3e50;
    }
    </style>

然后大家这时候再重启启动我们的工程，访问http://localhost:8080/\#/login，大家就可以看到如下的页面，则说明我们的登陆页面已经编写完成，同时我们在该页面切换语言的时候会自动切换我们的账号和密码框的显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]  
到此处我们就完成了我们的登陆页面的代码的编写。  
上一篇文章地址：[spring boot+iview 前后端分离架构之前端工程的构建以及IVIEW的引入（一）][spring boot_iview _IVIEW]  
下一篇文章地址：[spring boot+iview 前后端分离架构之首页的实现（三）][spring boot_iview]

[20191218155125364.jpg]: /images/20220215/0a63b5bc997c43d7810488cbef591938.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20220215/564bc8766bf04f9893756096a5e0fb21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20220215/eac8472f21bb43daa1ea86ce259ceaf6.png
[spring boot_iview _IVIEW]: https://blog.csdn.net/linzhefeng89/article/details/89483368
[spring boot_iview]: https://blog.csdn.net/linzhefeng89/article/details/89576277