iView-admin2.0 新手教程（二）

7、多语言

你可以为iview-admin设置多语言，当然，你需要提供语言包，为了做示范，iview-admin在部分内容上实现了中文简体、中文繁体和英语的切换，如果你需要在iview-admin中使用多语言，需要将./src/config/index.js里的useI18n设为true，下面来介绍如何使用多语言。

step1

首先在你需要显示文本内容的地方定义这个内容的名称，然后使用vue-i18n在Vue实例中注册的$t()方法来显示你的内容。

例如你要显示这段内容 'Hello World' / '你好，世界'，你需要给他定义一个名称，如hello，然后在模板和脚本中这样定义

<template><h1>{{ $t('hello') }}</h1>
</template>

<script>
export default {name: 'example',methods: {showMessage () {this.$Message.success(this.$t('hello'))}}
}
</script>

step2 制作语言包

你需要在./src/local/lang文件夹下的语言包js文件内定义你刚刚的这个hello对应的内容，如下：

在./src/local/lang/zh-CN.js里定义如下：

export default {hello: '你好，世界'
}

在./src/local/lang/en-US.js里定义如下：

export default {hello: 'Hello World'
}

8、权限控制

权限控制分两种，即整个页面具有权限控制，和页面中单个组件需要权限。

8.1 整个页面访问限制

整个页面的权限控制较为简单，你只需要在路由配置的meta中配置access字段即可，它是一个数组，如果你没有设置access字段，那么该页面是所有用户都可以访问的；如果你设置了该字段，那么只有该字段所设置的数组中包含的权限名称的用户可访问该页面。如下：

{path: '/page1',name: 'page1',component: Main,meta: {access: ['super_admin'] /** 该页面只有权限值为super_admin的用户才能访问* 如果这级路由有子路由，则子路由也只有super_admin才能访问* 如果不设置此字段，则所有用户均可访问*/}
}

8.2 单个组件浏览控制

如果你的一个页面上有多个组件，而不同的组件对于权限的要求又有所不同，那么，你可以使用如下方法给一个组件设置根据权限值配置它的可访问性：

<template><div><component1 v-if="viewAccessAll"></component1><component2 v-if="viewAccessSuper"></component2></div>
</template>
<script>
import { hasOneOf } from '@/libs/tools'
export default {name: 'page',computed: {access () {return this.$store.state.user.access},viewAccessAll () {return hasOneOf(['super_admin', 'admin'], this.access)},viewAccessSuper () {return hasOneOf(['super_admin'], this.access)}}
}
</script>

上面的例子中，admin和super_admin权限的用户都可看到component1组件，而component2只有super_admin可以看到。

9、接口请求

在iview-admin2.0对axios进行了封装，如果你需要调用接口，步骤如下：

step1

在./src/api目录中定义接口调用方法，拿获取表格数据来做示范，在api文件夹下创建data.js，然后在内部定义如下：

import axios from '@/libs/api.request'export const getTableData = () => {return axios.request({  // 这里返回的是一个Promise，request方法传入一个配置对象，配置项可参考axiosurl: 'get_table_data',method: 'get'})
}

step2

在使用的地方如下：

import { getTableData } from '@/api/data'getTableData().then(res => {this.tableData = res.data
}).catch(err => {console.log(err)
})

10、Mock数据模拟

在iview-admin2.0中使用Mock.js来实现AJAX请求拦截并返回模拟数据，方便前端开发人员的快速开发，无需等待后端接口实现。

已用户信息相关接口为例来做介绍，我们的Mock配置都在./src/mock文件夹下，首先在index.js文件中注册url匹配规则，并且设置匹配后的处理回调。

// 将login相关的处理回调引入
import { login } from './login'
// 配置拦截匹配规则和处理回调
Mock.mock(/\/login/, login)

然后在login.js文件中定义处理回调，如下

export const login = req => {req = JSON.parse(req.body)return {code: 200,data: {token: USER_MAP[req.userName].token},msg: ''}
}

11、组件

iView-admin内部封装了很多业务组件，方便使用者使用，这些组件都在./src/components目录下，使用时可使用便捷方式引入，如使用count-to组件时：

<template><count-to :end="12"/>
</template>
<script>
import CountTo from '_c/count-to' // 这里的_c是在./vue.config.js中定义的，等效./src/components
export default {components: {CountTo}
}
</script>

11.1 Icons组件

在我们的项目中，可能需要的图标各式各样，iView内置的图标再多，可能都无法满足我们的需求，所以，使用Icons组件可以支持自定义图标。

11.2 CommonIcon组件

这个组件支持iView内置图标和自定义图标，如果是使用iView内置的图标，则使用方法和使用iView的Icon组件一样；如果是自定义图标，则需要在名字前加上下划线_。该组件实际是对iView内置Icon组件和自定义图标组件Icons的结合，而用来区分这两者的就是type属性开头是否带有下划线。