3.Abp vNext 地磅无人值守 vue 前端搭建

地磅无人值守项目 系列文章目录

---

---

前言

ABP vNext 框架搭建好api接口后，着手整理Vue前端事项。前端使用vue 2.6，框架使用element ui 2.13。
vue 前端作为管理者后台，数据集中管理，可以提供数据统计报表，导入，导出等功能，方便用户实时及过往经营情况。
该文章适合对vue有一定了解的读者。本人才疏学浅，欢迎各大道友前来交流、斧正，拜谢。

---

一、Vue概要

官网文档：https://v2.cn.vuejs.org/
MVVM的框架，数据双向绑定，就是爽。需自行体验。

二、文件夹简单说明

主要说明常用的文件夹：
api文件夹：接口管理
router文件夹：路由管理
store文件夹：存储常用数据
utils文件夹：工具类，例如时间，axios请求，表单校验等
views文件夹：前端开发的页面位置
permission.js文件：权限模块，过滤路由跳转

api示例

以车辆信息接口为例

import request from '@/utils/request'
import { transformAbpListQuery } from '@/utils/abp'

export function getCar(query) {
  return request({
    url: '/api/app/car',
    method: 'get',
    params: transformAbpListQuery(query)
  })
}

export function getCarTreeview(query) {
  return request({
    url: '/api/app/car/treeview',
    method: 'get',
    params: transformAbpListQuery(query)
  })
}

export function getCarById(id) {
  return request({
    url: `/api/app/car/${id}`,
    method: 'get'
  })
}

export function getOrders(query) {
  return request({
    url: '/api/app/car/orders',
    method: 'get'
  })
}

export function createCar(payload) {
  return request({
    url: '/api/app/car',
    method: 'post',
    data: payload
  })
}

export function updateCar(payload) {
  return request({
    url: `/api/app/car/${payload.id}`,
    method: 'put',
    data: payload
  })
}

export function deleteCar(id) {
  return request({
    url: `/api/app/car/${id}`,
    method: 'delete'
  })
}

views示例

router示例

1.router/modules文件夹下加入cars.js，代码如下：

import Layout from '@/layout'

const newsRouter = {
  path: '/cars',
  component: Layout,
  redirect: 'noRedirect',
  alwaysShow: true,
  name: 'Cars',
  meta: {
    title: 'FloorScale["Menu:Car"]',
    icon: 'el-icon-truck',
    policy: ''
  },
  children: [
    {
      path: 'type',
      component: () => import('@/views/cars/type'),
      name: 'CarType',
      meta: { title: 'FloorScale["CarType"]', icon: 'el-icon-tickets', policy: 'FloorScale.Car' }
    },
    {
      path: 'info',
      component: () => import('@/views/cars/info'),
      name: 'CarInfo',
      meta: { title: 'FloorScale["Car"]', icon: 'el-icon-bicycle', policy: 'FloorScale.Car' }
    }
  ]
}
export default newsRouter

policy是接口里的权限 编码

2.router/index.js文件加入

import carsRouter from './modules/cars'
export const asyncRoutes = [
  /** 加入车辆路由模块 **/
  carsRouter
]

permission.js

使用abp框架自带的权限脚本即可。

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import getPageTitle from '@/utils/get-page-title'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist

router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title)

  let abpConfig = store.getters.abpConfig
  if (!abpConfig) {
    abpConfig = await store.dispatch('app/applicationConfiguration')
  }

  if (abpConfig.currentUser.isAuthenticated) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done() // hack: https://github.com/PanJiaChen/vue-element-admin/pull/2939
    } else {
      // user name
      const userName = store.getters.userName

      if (userName) {
        if (!store.getters.email) {
          await store.dispatch('user/getInfo')
        }
        next()
      } else {
        try {
          // get user info
          await store.dispatch('user/getInfo')

          store.dispatch('user/setRoles', abpConfig.currentUser.roles)

          const grantedPolicies = abpConfig.auth.grantedPolicies

          // generate accessible routes map based on grantedPolicies
          const accessRoutes = await store.dispatch(
            'permission/generateRoutes',
            grantedPolicies
          )

          // dynamically add accessible routes
          router.addRoutes(accessRoutes)

          // hack method to ensure that addRoutes is complete
          // set the replace: true, so the navigation will not leave a history record
          next({ ...to, replace: true })
        } catch (error) {
          // remove token and go to login page to re-login
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      // in the free login whitelist, go directly
      next()
    } else {
      // other pages that do not have permission to access are redirected to the login page.
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  // finish progress bar
  NProgress.done()
})

utils示例

store示例

此模块存储来自api的配置参数，暂时没发现别的用处。

---

总结

前后端分离模式，职能分工比较明确，系统横向扩展会好些。性能还没使用过专业工具测试，不好说。用户体验层次个人感觉会高些。
一个人开发着实累，各种千奇百怪的问题，要学的东西又多了些。
个人相信兴趣是最好的老师吧。只要功夫深，铁柱磨成针。

前端：https://dibang.caishiben.com
接口服务：https://scaleapi.caishiben.com
接口文档：https://scaleapi.caishiben.com/swagger/index.html