Vue 2.x 实战之后台管理系统开发(二)-阿里云开发者社区

开发者社区> 开发与运维> 正文

Vue 2.x 实战之后台管理系统开发(二)

简介: 在上一篇文章中,我详细叙述了如何创建项目框架和引入各种后台常用插件,做好这些准备工作后,我们就可以着手进行页面的开发了。在开发过程中,会遇到一些常见的需求和问题,我整理了一下,有以下几点。

1. 导语

承接上文:Vue 2.x 实战之后台管理系统开发(一)

在上一篇文章中,我详细叙述了如何创建项目框架和引入各种后台常用插件,做好这些准备工作后,我们就可以着手进行页面的开发了。在开发过程中,会遇到一些常见的需求和问题,我整理了一下,有以下几点。

2. 常见需求

01. 父子组件通信

a. 父 -> 子(父组件传递数据给子组件)



使用 props,具体查看文档 - 使用 Prop 传递数据(cn.vuejs.org/v2/guide/co…

b. 父 -> 子(在父组件上调用子组件内的方法)


使用 ref,具体查看文档 - 子组件索引(cn.vuejs.org/v2/guide/co…
<!--父组件 template-->
<div id="parent">
  <!--子组件-->
  <user-profile ref="profile"></user-profile>
</div>
// 父组件 script
this.$refs.profile.someMethod();
注意:如果在子组件上设置 ref 属性,则可以通过 this.$refs 获取到该子组件对象,如果在普通的 html 标签上设置 ref 属性,则获取到的是 Dom 节点。


c. 子 -> 父(在父组件上获取子组件内的数据)


// 父组件 script
let childData = this.$refs.profile.someData;

d. 子 -> 父(子组件内触发事件,父组件监听事件)



父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件,具体查看文档 - 使用 v-on 绑定自定义事件(cn.vuejs.org/v2/guide/co…
<!--父组件 template-->
<div id="parent">
  <!--子组件-->
  <user-profile @childTrigger="parentHandle"></user-profile>
</div>
// 父组件 script
methods: {
    parentHandle(params){
        // 这个方法在子组件 emit childTrigger 事件后会执行
        // params 为子组件里触发事件时传的参数
    }
}
// 子组件 user-profile script
this.$emit('childTrigger', params);


e. 子 -> 父(子组件传值,父组件里使用,具体实现见 03

01总结:
应用场景示例:在父组件上打开侧边栏子组件,可以传 prop visible(true)来控制侧边栏打开;侧边栏内部有关闭按钮,就在点击关闭按钮后触发一个事件,父组件监听事件执行方法将 data visible 改为 false
PS:父组件传值到子组件,传的值是 Object 类型,子组件使用 v-model 可以修改该值(将某个表单元素的 v-model 设为该值),父组件可直接获取到改变后的值。

02. 全局函数

有时候会用到一些工具类函数,希望可以全局调用,而不是局限于某个组件中。

Step 1:
项目根目录/static/js/ 目录下新建一个 util.js 文件,将常用的工具函数写在这里面。

Step 2:
index.html 里面引入 util.js,就可以在 .vue 文件里使用那些方法了,如下:



<body>
  <div id="app"></div>
  <!-- 引入常用 js 方法 -->
  <script type="text/javascript" src="/static/js/util.js"></script>
   <!-- built files will be auto injected -->
</body>

02总结:
使用这个方法可以使得一些使用频率高的函数可以在所有 .vue 文件中被调用,笨拙而又简单。


03. slot

以前看文档时一直不理解如何使用 slot,现在用多了 elementui 的组件之后,就渐渐发现了它的实用性。
简单来说,使用 slot 可以使我们做到:在父组件里使用子组件时,在子组件里插入一些自定义的内容(html 代码啥的),具体查看文档:cn.vuejs.org/v2/guide/co…
更神奇的功能是 作用域插槽,可以让我们在父组件里使用子组件时,获取子组件传来的数据,具体查看文档:cn.vuejs.org/v2/guide/co…

简单应用示例



<!-- a-button 子组件 -->
<button type="button" class="a-button" @click="$emit('btn-click')"><slot></slot></button>
<!-- 这里监听了 button 的 click 事件,然后又触发了 btn-click 事件 -->


<!-- 父组件 -->
<a-button @btn-click="handleClick">这里写的东西会覆盖子组件里的 slot 标签所在的位置</a-button>
<!-- 这里监听了子元素触发的 btn-click 事件,然后执行 handleClick 函数 -->

渲染结果:


<button type="button" class="a-button">这里写的东西会覆盖子组件里的 slot 标签所在的位置</button>

可以应用简单的 slot 来达到为不同的按钮填充文字的目的:


<a-button @click="handleClick">详情</a-button>
<a-button @click="handleClick">搜索</a-button>

<!-- 渲染结果 -->
<button type="button" class="a-button">详情</button>
<button type="button" class="a-button">搜索</button>

作用域插槽示例


<!-- 子组件 -->
<div class="child">
  <!-- slot 这个位置会在子组件被使用时被父组件传来的 html 代码覆盖 -->
  <!-- slot 上的 text/child 就相当于传给父组件的 props (假设 name 为子组件的 data,name: someChild) -->
  <slot text="hello from child" :child="name"></slot>
</div>


在父级中,具有特殊属性 scope 的 <template> 元素,表示它是作用域插槽的模板。scope 的值对应一个临时变量名,此变量接收从子组件中传递的 prop 对象:


<!-- 父组件 -->
<div class="parent">
  <child>
    <template scope="props">
      <span>hello from parent</span>
      <span>{{ props.text }}</span>
      <span>{{ props.child }}</span>
    </template>
  </child>
</div>

渲染结果:


<div class="parent">
  <div class="child">
    <span>hello from parent</span>
    <span>hello from child</span>
    <span>someChild</span>
  </div>
</div>

03总结:
应用场景示例:elementui 的 button 组件中有简单插槽的使用,table 组件则使用到了 作用域插槽


<!-- button 组件 -->
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="text">文字按钮</el-button>

<!-- table 组件 -->
<el-table
  :data="tableData">
  <el-table-column
    prop="zip"
    label="邮编"
    width="120">
  </el-table-column>
  <el-table-column
    fixed="right"
    label="操作"
    width="100">
    <template scope="scope">
      <el-button
        <!-- 可以通过 scope.$index 获取到当前行的索引 -->
        @click.native.prevent="deleteRow(scope.$index)">
        移除
      </el-button>
    </template>
  </el-table-column>
</el-table>

04. router 使用小记

vue-router 的使用,简单来说就是通过配置,实现在不同的 url 路径下,页面渲染不同的组件。具体查看文档:vue-router 2

使用示例
一级路由:


<!-- App.vue -->
<!-- 该组件为最高级父组件,使用 router-view 来根据路径确定要显示的子组件 -->
<template>
  <div id="app">
    <!-- router-view 位置用来显示组件,如显示下面的 index.vue -->
    <router-view></router-view>
  </div>
</template>

二级路由(路由可嵌套):


<!-- page/index.vue -->
<!-- 该组件包含一个顶部栏和侧边菜单栏,内容区使用 router-view 来根据 url 路径显示子组件 -->
<template>
  <div class="index">
    <!-- 顶部导航条 -->
    <header class="main-header">
      ...
    </header>
    <!-- /顶部导航条 -->
    <!-- 侧边导航栏 -->
    <aside class="main-sidebar sidebar-gradient">
      ...
    </aside>
    <!-- /侧边导航栏 -->
    <!-- 根据页面一级菜单的点击而进行切换的内容区 -->
    <transition name="fade">
      <!-- router-view 位置用来显示组件 --> 
      <router-view></router-view>
    </transition>
    <!-- /内容区 -->
  </div>
</template>

router 配置:


// router/index.js

import Vue from 'vue';
import Router from 'vue-router';
// 引入组件
import index from 'page/index'; // 该组件包含一个顶部栏和侧边菜单栏,内容区使用 router-view 来根据 url 路径显示子组件
import notFoundComponent from 'page/404'; // 该组件为 404 页面,当你路由使用 history 模式时需要用到
import monitorIndex from 'page/monitor/index'; // 该组件为一个监控页面,用于显示在 page/index.vue 页面上的 router-view 处(即页面的内容区域)

Vue.use(Router);

// 定义 scrollBehavior 方法
const scrollBehavior = (to, from, savedPosition) => {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

export default new Router({
  mode: 'history',
  // mode 默认 hash 值,但是 hash (url中包含 # 符号)不太好看也不符合我们一般的网址浏览习惯
  // 当你使用 history 模式时,URL 就像正常的 URL,例如 http://yoursite.com/user/id,也好看!

  linkActiveClass: 'active',
  // 默认值: 'router-link-active',就是当前组件被激活,相应路由会自动添加类 'router-link-active',这里是为了全局设置激活类名,如果不设置,直接用默认的也是可以的
  // 如:使用 router-link 组件来导航,通过传入 `to` 属性指定链接
  // <router-link to="/foo">Go to Foo</router-link>
  // <router-link> 默认会被渲染成一个 `<a>` 标签,'/foo' 路由下的组件显示时,该 a 标签上会自动添加类 'active'

  scrollBehavior: scrollBehavior,
  // 通过这个属性(是个函数),可以让应用像浏览器的原生表现那样,在按下 后退/前进 按钮时,简单地让页面滚动到顶部或原来的位置,如果不设置,则组件切换时滚动条位置不变

  routes: [
    {
      // 一级路由
      path: '/',
      component: index,
      children: [
        // 二级路由
        // -----------默认首页-------------
        // 当 / 匹配成功,monitorIndex 会被渲染在 index 的 <router-view> 中
        { path: '', component: monitorIndex, alias: 'index.html' },
        // 这里的 alias 'index.html' 为当前页面的别名
        // http://localhost:8080/index.html 等同于 http://localhost:8080/ 

        // -----------监控中心-------------
        {
          // 当 /monitor 匹配成功,
          // monitorIndex 会被渲染在 index 的 <router-view> 中
          path: 'monitor',
          name: '监控中心',
          component: monitorIndex
        }
      ]
    },

    // 同一个路径可以匹配多个路由,此时,匹配的优先级就按照路由的定义顺序:谁先定义的,谁的优先级就最高
    // 因此下面的路由配置为备用,如果某个路径未被配置显示相应的组件,则显示 404 页面
    { path: '*', component: notFoundComponent }
  ]
});

引入 router 配置:


// main.js 

import Vue from 'vue';

// 引入 element ui 组件
import { Dropdown, DropdownMenu ...} from 'element-ui';

// 引入 App.vue
import App from './App';

// 引入 router 配置
import router from './router'; // 默认会找到 router 文件夹下的 index.js 文件

// 引入项目图标的 sprite css,可以简单的通过这种方式引入 css 文件
import './assets/css/sprite.css'

// 使用 element ui 组件
Vue.use(Dropdown)
Vue.use(DropdownMenu)
...

new Vue({
  el: '#app',
  router, // 使用 router 配置
  template: '<App/>',
  components: { App },
});

引入 router 配置:



// main.js 

import Vue from 'vue';

// 引入 element ui 组件
import { Dropdown, DropdownMenu ...} from 'element-ui';

// 引入 App.vue
import App from './App';

// 引入 router 配置
import router from './router'; // 默认会找到 router 文件夹下的 index.js 文件

// 引入项目图标的 sprite css,可以简单的通过这种方式引入 css 文件
import './assets/css/sprite.css'

// 使用 element ui 组件
Vue.use(Dropdown)
Vue.use(DropdownMenu)
...

new Vue({
  el: '#app',
  router, // 使用 router 配置
  template: '<App/>',
  components: { App },
});

04总结:
关于 vue-router 的使用,看文档一般都能解决你的疑问,vue-router 2
其他参考文章:Vue.js系列之vue-router(中)(4)
PS:使用 history 模式的话,还需要 后台配置 支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404(因为的确找不到该页面),这就不好看了。并且在后台配置后,还需要前端来提供 404 页面,我上面的示例代码中有提到,可供参考。

05. 测试接口

使用 Vue 开发单页应用时,前后端分离开发,进度不一。因此前端有时候就需要自己模拟接口的 json 文件,然后直接使用异步请求方法(如 ajax) 去获取数据,渲染页面,测试代码等。

Step 1:
在 项目根目录/static/api/ 目录下新建一个 test.json 文件,写入模拟的接口数据:


{
  "status": true,
  "data": {
    ...
  }
}

Step 2:
在 .vue 组件文件里任意需要请求数据的方法里(如 created 钩子,或者某个 methods 方法里)编写相关代码:


let vm = this;
// ajax 请求数据
$.ajax({
    type: 'GET',
    url: 'static/api/test.json',
    data: '',
    beforeSend: function() {
      // 显示 Loading
      vm.loading = true;
    },
    complete: function() {
      // 隐藏 Loading
      vm.loading = false;
    },
    success: function(data) {
      // 处理返回数据
      ...
    },
    error: function() {
      // 数据请求失败,给用户适当的反馈信息
      ...
    },
    dataType: 'json'
});

05总结:
在后端尚未提供接口时,我都是用这个方法来测试前端获取数据和处理数据的代码是否正确。

3. 零碎问题

01. prop 传值小技巧

我们可以为组件的 props 指定验证规格。如果传入的数据不符合规格,Vue 会发出警告。当组件给其他人使用时,这很有用。

示例如下:



  props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字,有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }

愚蠢的我每次想要传 Number 或者 Boolean 类型的值到子组件时,都在父组件里定义好值,然后再绑定到子组件上:


// 这样会报错,因为 show type 为 Boolean,rows type 为 Number
// 默认情况下直接传值,子组件接收到的都是 String 类型

// template
<child show="true" rows="6"></child>
// 于是我这样做:

// template
<child :show="show" :rows="rows"></child>

// script
show: true,
rows: 6
// 实际上可以直接这样做:

// template
<child :show="true" :rows="6"></child>

// 官网如是说:如果想传递一个实际的 number,需要使用 v-bind ,从而让它的值被当作 JavaScript 表达式计算。


小技巧:当某个 prop 类型为 Boolean 时,可以直接把该 prop 的名称写在组件上,默认会传 true,不写的话默认为 false。比如 <child show :rows="6"></child> 这么写,子组件内部就能收到 show 为 true。

02. autoprefixer

有些人会问如何在项目里使用 autoprefixer 插件,事实上使用 vue-cli 的 webpack模板生成的项目里已经带有 autoprefixer 的使用了,如下图:

5d0e225634b02f4e43b4532a6d83a88433e0952e

03. build 时不生成 .map 文件

对项目进行 npm run build 操作后,发现生成的文件超大(比想象中的大),尤其是那些 .map 文件,不过,我们可以通过配置选择不生成该类文件。


// 项目根目录/config/index.js

var path = require('path')

module.exports = {
  build: {
    ...
    productionSourceMap: false, // 将该值设为 false,就不会生成 .map 文件了

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    ...
  },
  dev: {
    ...
  }
}

4. 总结

一句话,有空多看文档,可以避免很多实践中的问题。

原文发布时间为:2017年04月16日
原文作者:掘金
本文来源:掘金 如需转载请联系原作者

 













版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章