@unicom-blockchain/app-base

项目简介

@unicom-blockchain/app-base 是一个基于 Vue 3、Vue Router、Pinia、Element Plus 和 Axios 的库，封装了管理系统的登录与主页面运行流程，以及接口的规范响应。

功能

• 登录流程管理
• 主页面运行流程
• API 接口的规范响应

安装

使用 pnpm 安装：

pnpm i @unicom-blockchain/app-base

使用示例

import {
  registerRunner,
  LoginRunner,
  registerLoginView,
  MainRunner,
  registerMain,
  FakeUserCenterAPI,
  registerUserCenterAPI,
  runMain,
  registerRouter,
} from '@unicom-blockchain/app-base';
import { createRouter, createWebHistory } from 'vue-router';
import { createApp, defineComponent, h } from 'vue';
import APP from './App.vue';
import { createPinia } from 'pinia';
import './runnerPage/page1';
import './runnerPage/page2';

const router = createRouter({
  history: createWebHistory(),
  routes: [],
});

registerRouter(router);
registerUserCenterAPI(new FakeUserCenterAPI());

registerLoginView(
  defineComponent({
    emits: ['success'],
    setup(_props, { emit }) {
      return () =>
        h('div', [
          'login',
          h(
            'button',
            {
              onClick() {
                emit('success', 'TOKEN');
              },
            },
            ['click'],
          ),
        ]);
    },
  }),
);

registerRunner(LoginRunner);
registerMain('/dashboard');
registerRunner(MainRunner);

runMain();

const app = createApp(APP);
app.use(router);
app.use(createPinia());
app.mount('#app');

注册路由实例

由于路由实例是项目的基础，需要提前注入

import { createRouter, createWebHistory } from 'vue-router';
import { registerRouter } from '@unicom-blockchain/app-base';
const router = createRouter({
  history: createWebHistory(),
  routes: [],
});
registerRouter(router);

API

内置用户中心API

组件实现了用户中心的接口方法，仅需要指定参数即可快速使用,第一个参数是baseUrl,第二个参数是菜单的id；

import { UserCenterAPI } from '@unicom-blockchain/app-base';
const api = new UserCenterAPI('/userCenter', '5466');

假数据API

在项目开发初期，用户中心可能没有配置好，提供了模拟API以保证顺利登录。

import { FakeUserCenterAPI } from '@unicom-blockchain/app-base';
const api = new FakeUserCenterAPI();

注册API

注册用户中心API，以供框架使用。

import { FakeUserCenterAPI, registerUserCenterAPI } from '@unicom-blockchain/app-base';
registerUserCenterAPI(new FakeUserCenterAPI());

普通API实例

为了规范API行为一致，可以使用普通API实例。其中service属性为AxiosInstance

import { getAPI } from '@unicom-blockchain/app-base';
const api = getAPI(import.meta.env.VITE_APP_BASE_API);
api.service.interceptors.request.use(
  (config) => {
    //其他的逻辑
    return config;
  },
  (err) => {
    // 请求错误处理
    return Promise.reject(err);
  },
);
export api.service;

API 框架处理

响应： 1、当没有code或者code为200时，直接返回response 2、当code为1003时提示错误并删除token并跳回/login 3、其余情况提示系统出错 请求： 1、添加Authorization header字段

登录组件

一般登录逻辑封装在LoginRunner中，添加了/login路由，将token存储到localStorage中，登录成功后跳转/,可支持配置视图组件。仅需要视图组件支持emit success 并传入token即可。

import { h } from 'vue';
import { registerRunner, LoginRunner, registerLoginView } from '@unicom-blockchain/app-base';
registerLoginView(
  defineComponent({
    emits: ['success'],
    setup(_props, { emit }) {
      return () =>
        h('div', [
          'login',
          h(
            'button',
            {
              onClick() {
                emit('success', 'TOKEN');
              },
            },
            ['click'],
          ),
        ]);
    },
  }),
);

registerRunner(LoginRunner);

主界面组件

页面展示的主框架

import { MainRunner, registerMain } from '@unicom-blockchain/app-base';
registerMain('/dashboard');
registerRunner(MainRunner);

注册主界面的页面

使用Layout、Route、Page装饰器来注册页面

import { Layout, Route, Page } from '@unicom-blockchain/app-base';
import { Layout as layoutComponent } from '@unicom-blockchain/common-layout';
@Route({
  name: 'buckets',
  path: '/buckets',
  meta: { title: 'Buckets 管理' },
})
@Layout(layoutComponent)
@Page()
export class BucketListService {
  component = () => import('./BucketList.vue');
}

如果需要使用自定义菜单

import { Menu } from '@unicom-blockchain/app-base';
@Menu({
  name: '菜单',
  path: '/test',
  parent: 'parentMenu',
})
export class BucketListService {
  component = () => import('./BucketList.vue');
}

运行项目

import { runMain } from '@unicom-blockchain/app-base';
runMain();
const app = createApp(APP);
app.use(router);
app.use(createPinia());
app.mount('#app');

使用用户数据

import { useUserStore } from '@unicom-blockchain/app-base';
const store = useUserStore();
// store.nickname
// store.token
// ...