组件继承----基于Vue和PHP打造前后端分离的通用管理系统(七)

不知不觉已写到第7篇。前面6篇都是探索性的实现,是学习理论的过程,从这篇开始,开始用理论来指导实践了。
接上篇,我们现在通过组件继承实现Admin页面内导航。

动态导航

我们要的导航,是根据登录用户的权限,显示不同的导航菜单。根据职能分工,菜单内容的确定由后端来做更符合实践,前端只需要实现动态渲染菜单即可。好在这是Vue擅长的。


页内跳转.PNG

在components目录下新建Aside.vue。在Aside.vue中放置一个el-menu,我们先用一个静态的占个位,然后实现成动态的。静态的我们直接用ElemenUI自己的例子好了。






Admin.vue

name: 'App',
  components: {
    Aside,
  },

修改下Admin.vue中的背景色,否则太难看

.el-aside {
  background-color: #545c64;/*这里*/
  color: #333;
  text-align: center;
}

现在,npm run dev,正常的话,显示效果已经出来了!
下面来实现动态效果。
现在修改Aside.vue来实现自定义菜单






我们的菜单已经是通过一个数组menus来自定义了,根据vue特性,修改menus菜单就会变化哦,现在我们先不测试这个,留待将来在测试。我们这个有更重要的,菜单点击后会向Admin组件发布redirect消息,我们修改Admin组件,处理这个消息。
Admin组件添加响应消息的地方

Admin组件添加几个临时组件方便效果展示


const Table = {
  template: '

Table

', }; const Form = { template: '

Form

', }; const Chart = { template: '

Chart

', }; export default { components: { Aside, Table, Form, Chart, }, data() {...

突发奇想,就想修改下Http.js(HttpSend参数格式变了)

/**
   * 远程调用的核心方法
   * @returns {Promise}
   */
  static HttpSend = (action = {}) => {
    /** @type {boolean} */
    const withValue = action && action.value;
    const option = {
      url: Http.createUrl((action) ? action.url : undefined),
    };
    if (action && action.post) {
      option.method = 'post';
      if (withValue) option.data = Qs.stringify(action.value);
      option.headers = { 'Content-Type': 'application/x-www-form-urlencoded' };
    } else {
      if (withValue) option.params = JSON.parse(JSON.stringify(action.value));
      option.method = 'get';
    }
    // 开启跨域cookie
    option.withCredentials = true;
    option.paramsSerializer = params => Qs.stringify(params, { arrayFormat: 'brackets' });
    return $http(option).then((response) => {
      const data = response.data;
      // 判断返回结果信息
      if ((function isError(v) {
        if (typeof v !== 'object') return false;
        if (v.status === false) return true;
        return (v.status && Number(v.status) <= 0);
      })(data)) return Http.onError(data, '操作无效');
      return Http.onReceive(data);
    }, error => Http.onError(error, '数据获取失败'))
      .catch(error => Http.onError(error, '内部错误'));
  };

  /**
   * 触发钩子函数
   * @type {Function}
   * @param {Object}  data
   * @returns {Object}
   */
  static onReceive = (data) => {
    Http.receivers.forEach(receiver => receiver(data));
    return data;
  }

  /**
   * 插件安装函数
   */
  static install(Vue) {
    this.vue = Vue;

    this.createUrl = this.vue.createUrl || (url => url);

    this.vue.prototype.$httpGet = (url, value = null) => this.HttpSend({ url, value });
    this.vue.prototype.$HttpPost = (url, value = null) => this.HttpSend({ url, value, post: true });
    this.vue.prototype.$HttpSend = Http.HttpSend;

    this.vue.prototype.$addReceiver = receiver => this.receivers.push(receiver);

    this.vue.prototype.$removeReceiver = id => this.receivers.splice(id, 1);
  }

看看神奇的效果吧。原来的几个按钮,因为Http.js的修改,失效了,改起来很简单,不会就问我。

这样呢,App和Admin有一部分重复的功能,我们提取出来


取名叫Container.vue放在components下。
修改App.vue

import Father from './components/Container';
...
export default {
  name: 'App',
  extends: Father,
  data() {
    return {
      trace: {
        rows: [],
      },
    };
  },
  ...
  methods: {
    passUp() {
      return false;
    },
  },
};

修改Admin.vue

export default {
  extends: Father,
   ...
  methods: {
    submit() {
      this.$emit('redirect', { url: '/login.json' });
    },
  },
};

看看效果,妈呀,组件继承就这么简单!!!

你可能感兴趣的:(组件继承----基于Vue和PHP打造前后端分离的通用管理系统(七))