业务后台商业组件ViewUI（iView）入门

1 安装View UI组件

1.1 什么是View UI

后台管理信息系统（MIS）是软件开发的一个重要领域，如OA、ERP、商城后台等等都属于MIS系统。业务人员需要在MIS系统中操作大量的表单和数据，传统的服务器（同步）页面伴随着大量刷新，用户体验很差，所以开发界喜欢选择以vue为代表的新一代前后端分离技术以实现流程的操作。

在MIS系统开发中，需要大量的表单、表格、日历、选项卡等复杂组件来完成业务功能，这些组件实现起来都比较复杂，作为普通程序员，一般会选择现成的商业组件。

业界比较成熟的后台商业组件主要有：Element UI、View UI 和 Ant Design，这些组件的功能和使用方式都大同小异，这里介绍View UI给大家使用。

官网：iView - A high quality UI Toolkit based on Vue.js

View UI的前身是iView，至今已经是4.0版，由于最新版引入了商业模式，因此代码更新较快。

1.2 安装View UI

官方的安装教程：https://www.iviewui.com/docs/guide/install

为vue项目安装View UI组件有很多方式，这里使用最简便得方法，就是直接使用vue-cli得ui向导来完成安装。新版得vue-cli不仅可以通过命令行来完成项目创建，还可以通过web可视化方式创建，View UI可以作为vue-cli的插件添加到项目中。

（1）使用vue-cli可视化项目管理器

在命令行中输入以下指令：

vue ui

（2）添加插件：axios 和 view-ui

完成上述操作后，一个包含view-ui插件库的vue工程就创建好了，正常进入项目目录执行：

npm run serve

2 项目布局：

2.1 栅格系统

类似BootStrap中的12栅格系统，View UI通用把页面分为行（Row）和列（Col），使用24栅格进行布局。

官方的栅格教程：https://www.iviewui.com/components/grid

2.2 设置路由：

（1）分层次创建组件

（2）设置父子级别路由：

const routes = [
2{
3path: '/',
4name: 'home',
5component: Home,
6children:[
7{
8path:'/',
9name:'default',
10component:Default,
11meta:{
12title: '后台首页'
13}
14},
15{
16path:'/categories',
17name:'categories',
18component:Categories,
19meta:{
20title: '分类管理'
21}
22},
23{
24path:'/products',
25name:'products',
26component:Products,
27meta:{
28title: '商品管理'
29}
30},
31]
32},
33{
34path:'/login',
35name:'login',
36component:Login
37}
38]

2.3 布局

业务系统通常由比较严谨的布局，View UI为我们准备好了多种布局风格，这里使用“顶部-侧边布局”作为示例：

https://www.iviewui.com/components/layout#DB-CBBJ

<style scoped>
2
......
3
.layout-logo{
4......
5color:#fff;
6line-height: 30px;
7text-align: center;
8
}
9
......
10
</style>
11
<template>
12<div class="layout">
13<Layout>
14<Header>
15<Menu mode="horizontal" theme="dark" active-name="1">
16<div class="layout-logo">
17<router-link to="/"><h3>趣物网 - 后台管理</h3></router-link>
18</div>
19<div class="layout-nav">
20<MenuItem name="1">
21<Icon type="ios-navigate"></Icon>
22Item 1
23</MenuItem>
24<MenuItem name="2">
25<Icon type="ios-keypad"></Icon>
26Item 2
27</MenuItem>
28<MenuItem name="3">
29<Icon type="ios-analytics"></Icon>
30Item 3
31</MenuItem>
32<MenuItem name="4">
33<Icon type="ios-paper"></Icon>
34Item 4
35</MenuItem>
36</div>
37</Menu>
38</Header>
39<Layout :style="{padding: '0 50px'}">
40<Breadcrumb :style="{margin: '16px 0'}">
41<BreadcrumbItem>后台管理</BreadcrumbItem>
42<BreadcrumbItem>{{$route.meta.title}}</BreadcrumbItem>
43</Breadcrumb>
44<Content :style="{padding: '24px 0', minHeight: '280px', background: '#fff'}">
45<Layout>
46<Sider hide-trigger :style="{background: '#fff'}">
47<Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
48<Submenu name="1">
49<template slot="title">
50<Icon type="ios-navigate"></Icon>
51商品信息管理
52</template>
53<MenuItem name="1-1">
54<router-link to="/categories">分类管理</router-link>
55</MenuItem>
56<MenuItem name="1-2">
57<router-link to="/products">商品管理</router-link>
58</MenuItem>
59</Submenu>
60<Submenu name="2">
61<template slot="title">
62<Icon type="ios-analytics"></Icon>
63客户订单管理
64</template>
65</Submenu>
66</Menu>
67</Sider>
68<Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
69<router-view></router-view>
70</Content>
71</Layout>
72</Content>
73</Layout>
74<Footer class="layout-footer-center">2011-2016 &copy; TalkingData</Footer>
75</Layout>
76</div>
77
</template>
78
<script>
79export default {}
80
</script>

3 常见组件的使用：

3.1 Table - 数据表格

表格组件通过columns属性绑定列，通过data属性绑定行数据。以分类管理组件（Categories.vue）为例：

 <Table border :columns="columns" :data="categories">
2<template slot="operation" slot-scope="{row}">
3<Button type="primary" @click="showEdit(row)">修改</Button>&nbsp;
4<Button type="error" @click="deleteCategory(row)">删除</Button>
5</template>
6</Table>

背后绑定的数据：

export default {
2name:'categories',
3data(){
4return {
5columns:[
6{title:'分类ID', key:'id'},
7{title:'分类名称', key:'name'},
8{title:'操作', slot:'operation', align: 'center'}
9],
10categories:[]
11}
12},

其中 coloumns中每一个对象代表一个列，title是列标题，key是该列绑定的对象属性名。

如果列中由其它组件组成，则可以定义为插槽（slot），让后再通过Table组件中的模板（template）去定制slot中的结构。

template中的slot属性需要和columns中对用列的slot属性向对应，template中的slot-scope则用于定义Table向slot中传入的上下文数据。

3.2 Form - 表单组件

表单组件可以绑定数据和数据校验。以登录组件（Login.vue）为例：

<template>
2
<div>
3<h1 class="title">趣物网-登录</h1>
4<Row>
5<Col span="8" offset="8">
6<Card>
7<p slot="title">
8<Icon type="ios-film-outline"></Icon>用户登录
9</p>
10<Form ref="loginForm" :model="user" :rules="ruleValidate" :label-width="80">
11<FormItem label="用户名" prop="username">
12<Input v-model="user.username" placeholder="用户名..." />
13</FormItem>
14<FormItem label="密码" prop="password">
15<Input type="password" v-model="user.password" placeholder="密码..." />
16</FormItem>
17<FormItem>
18<Button @click="login" type="primary">登录</Button>
19</FormItem>
20</Form>
21</Card>
22</Col>
23</Row>
24
</div>
25
</template>

（1）Form的 :model="user" 用于设置绑定对象，:rules="ruleValidate" 用于设置绑定验证；

（2）其中FormItem的 prop="username" 用于指定当前项需要验证的属性名，即ruleValidate中的属性名；

（3）为了方便调用验证，我们使用 ref="loginForm" 为表单对象设置了引用名，于是下面的代码可以通过 “this.$refs['loginForm'].validate( (valid)=>{...} )” 来显式调用表单验证。

<script>
2
import UserInfo from '@/js/UserInfo.js'
3
const userInfo = new UserInfo();
4
5
export default {
6name:'login',
7data(){
8return{
9user:{
10username:'',
11password:''
12},
13ruleValidate:{
14username:[{required:true, message:'请填写用户名', trigger:'blur'}],
15password:[{required:true, message:'请填写密码', trigger:'blur'}],
16}
17}
18},
19methods:{
20login(){
21this.$refs['loginForm'].validate((valid)=>{
22if(valid){
23this.axios.post('/api/auth/login', this.user).then(res=>{
24if(res.data.roleName!='管理员'){
25alert('您不是管理员，无法进入后台');
26}else{
27userInfo.saveLoginUser(res.data);
28let redirect ='/'
29if(this.$route.query.redirect){
30redirect = this.$route.query.redirect;
31}
32this.$router.push({path: redirect});
33}
3435}).catch(()=>alert('用户名或密码有误'));
36}
37});
38}
39}
40
}
41
</script>

3.3 Modal - 模态框

模态框可以通过简单的布尔属性绑定实现显示和隐藏。继续实现分类管理（Categories.vue）中的分类信息编辑功能：

<Modal
2v-model="showModal"
3title="商品分类编辑">
4<Form ref="categoryForm" :model="editCategory" :rules="editValidate" :label-width="100">
5<input type="hidden" v-model="editCategory.id" />
6<FormItem label="分类名称" prop="name">
7<Input v-model="editCategory.name" placeholder="分类名称..." />
8</FormItem>
9</Form>
10<div slot="footer">
11<Button @click="showModal=false">取消</Button>
12<Button type="primary" @click="saveCategory">保存</Button>
13</div>
14</Modal>

以下是分类编辑的代码，值得注意的是：

vue是支持双向绑定的，如果编辑对象是既显示在Table中，又可以被Form元素修改，则会产生联动问题，即使最终放弃了Form中的变更，也会导致Table中的数据发生变化，因此需要克隆一份数据副本进行修改。

export default {
2name:'categories',
3data(){
4return {
5......
6showModal: false,
7editCategory:{},
8editValidate:{
9name:[{required:true, message:'请填写分类名称', trigger:'blur'}],
10}
11}
12},
13methods:{
14......
15saveCategory(){     //保存编辑信息
16this.$refs['categoryForm'].validate( valid=>{
17if(valid){
18this.axios.post('/api/admin/categories', this.editCategory).then(()=>{
19this.editCategory = {};
20this.showModal = false;
21this.loadCategories();
22});
23}
24});
25},
26showEdit(item){ //弹出编辑框并传入编辑数据
27if(item){
28this.editCategory = JSON.parse(JSON.stringify(item)); //克隆副本再做绑定
29}else{
30this.editCategory = {};
31}
32this.showModal = true;
33}
34}
35
}

4 客户端权限：为路由设置拦截器

为了避免未登陆用户能访问后台页面，我们需要为后台路由设置守卫（拦截器）。利用router中的beforeEach事件钩子，我们可以添加守卫。

（1）在程序入口router/index.js中添加路由钩子

import UserInfo from '@/js/UserInfo.js'
2
const userInfo = new UserInfo()
3
......
4
//设置路由拦截
5
router.beforeEach((to, from, next) => {
6if (to.meta.anonymous) {  // 判断该路由是否允许匿名访问
7next();
8}
9else {
10if (userInfo.isLogin()) {  // 检查是否已登录，已登录继续
11next();
12}
13else {
14next({
15path: '/login',
16query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，保留被拦截路径URL
17})
18}
19}
20
});

（2）在路由设置router.js中，允许匿名访问的路由项（比如 "/login"），添加meta自定义属性标识（比如"anonymous:true"）

 const routes = [
2......
3{
4path:'/login',
5name:'login',
6component:Login,
7meta:{
8anonymous:true      //添加标识符，允许匿名
9}
10}
11]

附：解决eslint语法报错“Parsing error: x-invalid-end-tag”问题。

问题原因：vue将标签渲染为原生html标签时，由于这些标签是自闭合的，所以有end标签会报错。

解决办法：在“.eslintrc.js” 配置文件的rules配置节中添加“'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }]”

module.exports = {
2......
3rules: {
4......
5'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }]
6},
7
}
8

业务后台商业组件ViewUI（iView）入门相关推荐

应用逻辑（业务、商业逻辑）抽象出来
那东西主要就是将应用逻辑(业务.商业逻辑)抽象出来,与前端表现界面分开,从而体现三层.多层结构的易拓展.易维护性的特性. 业务逻辑又分为业务规则和业务外观分开设计的目的是提高应用程序的可伸缩性和可维 ...
iview图表_Vue高效UI组件库—iView开发实践
前段时间在微软参加活动,分享了 TalkingData 开源的基于 Vue.js 的高效 UI 组件库 iView 的一些开发经验,现整理成文,和大家探讨. 关于 iView 开发历程和命名 Talk ...
vue2 + vue-router + vuex + iview 入门项目
简单的vue2 + vue-router + vuex + iview 入门项目,一个移动端平台的简易考试系统.灵感来源于近期工作项目中开发的一套考试平台系统.欢迎大家来issues指出错误共同进步. ...
QQ亿级日活跃业务后台核心技术揭秘
引言作为本次技术开放日后台架构专场的出品人我今天给大家带来<构造高可靠海量用户服务-SNG数亿级日活跃业务后台核心技术揭秘>,一起探讨怎么从可用性的维度提升海量服务的可靠性及海量服务的故 ...
.NET平台开源项目速览(6)FluentValidation验证组件介绍与入门(一)
原文:.NET平台开源项目速览(6)FluentValidation验证组件介绍与入门(一) 在文章:这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,给大家初步介绍了一下F ...
做一个广告业务后台需要几天，5天吗？不，用PhalApi开源框架，1天就能做好
来自客户的项目需求有一天,有位客户和我说,他想做一个H5激励视频广告业务后台,经过沟通,梳理的后台需求如下: [H5激励视频广告] 1.一套H5激励视频广告接口 1)获取广告接口,进行展示,提供给客 ...
业务和商业才是技术的驱动力
2019独角兽企业重金招聘Python工程师标准>>> 黄鑫,EGO会员,极光推送CTO兼首席科学家,曾就职于汽车之家.飞信.豆瓣等多家互联网公司,参与多个产品的开发和算法设计.目前 ...
非计算机转后台开发并入职字节跳动（四）--再回业务后台开发，头条工作体验
比较顺利的通过了头条的社招面试,当时头条筛简历的时候还有个小插曲,因为同时在官网投了两个岗位,开始收到了简历不过的短信,没过多久又收到了面试预约的电话.也就是大厂都是不同部门的同一个岗位要求不一样.同 ...
利用Mono.Cecil动态修改程序集来破解商业组件（仅用于研究学习）
原文:利用Mono.Cecil动态修改程序集来破解商业组件(仅用于研究学习) Mono.Cecil是一个强大的MSIL的注入工具,利用它可以实现动态创建程序集,也可以实现拦截器横向切入动态方法,甚至还 ...

业务后台商业组件ViewUI（iView）入门

业务后台商业组件ViewUI（iView）入门相关推荐

最新文章

热门文章