2021-11-21

2021SC@SDUSC

智能研究中心快递柜学习笔记8

 Config文件是通过各种程序使用的通用配置文件。它包含的设置和配置信息以及不同的程序可以以不同的格式存储这些数据。

前后端分离开发方式前端拥有更高的控制权
随着前端框架技术的飞速发展，Router被迅速普及到前端项目中，在早期前后端没有分离的时候，并没有明确的路由概念，前端页面跳转大多是通过后端进行请求转发的，前端需要一个超链接，链接的href=/manager，这样这个超链接被转发到scs/waitFollowed路径指定的页面。前后的分离后，前端页面跳转不再需要后端处理了，数据交换方式也改变了，由此前端需要定义Router配置文件，需要定义API配置文件。在项目的权限配置管理中，完全不需要后端了，权限配置表可以单独拿出来由前端维护。

比如url字段，在前后端不分离的情况下，严重依赖于后端，url就是后端接口地址，如果需要更改就需要后端修改代码修改接口地址，现在，前端可以自由控制url的值了。
在接口层面，前端也会有自己的配置文件，可以对后端提供的接口进行重命名，组合等。
前端都统一使用模块名+接口名的方式管理

Vue.js中的API、Router配置
在Vue.js项目下，所有的接口都定义在api.config.js配置文件里面，随着业务推进，接口快速膨胀，文件越来越大，这时候迫切需要拆分。router配置在router.config.js中，拆分后，每个模块管理它自己领域的router、api，router.config.js和api.config.js就大大瘦身了，也降低了命名冲突的问题和将来混乱的问题。

/**
 * 基础路由
 * @type { *[] }
 */
export const constantRouterMap = [
  {
    path: '/user',
    component: UserLayout,
    redirect: '/user/login',
    hidden: true,
    children: [
      {
        path: 'login',
        name: 'login',
        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
      },
      {
        path: 'register',
        name: 'register',
        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')
      },
      {
        path: 'register-result',
        name: 'registerResult',
        component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult')
      },
      {
        path: 'alteration',
        name: 'alteration',
        component: () => import(/* webpackChunkName: "user" */ '@/views/user/Alteration')
      },
    ]
  },

报表组件文档
柱状图
引用方式

import Bar from '@/components/chart/Bar'

参数列表

参数名	类型	必填	说明
title	string		报表标题
dataSource	array	✔️	报表数据源
height	number		报表高度，默认254

dataSource 示例

[
    {
        "x": "1月",
        "y": 320
    },
    {
        "x": "2月",
        "y": 457
    },
    {
        "x": "3月",
        "y": 182
    }
]

代码示例

<template>
    <bar title="柱状图" :dataSource="dataSource" :height="420"/>
</template>

<script>
    import Bar from '@/components/chart/Bar'

    export default {
        name: 'ChartDemo',
        components: {
            Bar
        },
        data() {
            return {
                dataSource: [
                    {
                        "x": "1月",
                        "y": 320
                    },
                    {
                        "x": "2月",
                        "y": 457
                    },
                    {
                        "x": "3月",
                        "y": 182
                    }
                ]
            }
        }
    }
</script>

<style></style>

 多列柱状图

引用方式

import BarMultid from '@/components/chart/BarMultid'

 参数列表

参数名	类型	必填	说明
title	string		报表标题
fields	array		主列字段列表
dataSource	array		报表数据源
height	number		报表高度，默认254

 迷你柱状图

不带标题和数据轴的柱状图

引用方式

import MiniBar from '@/components/chart/MiniBar'

参数列表

参数名	类型	必填	说明
width	number		报表宽度度，默认自适应宽度
height	number		报表高度，默认200
dataSource	array		报表数据源

dataSource 示例

[
    {
        "x": "1月",
        "y": 320
    },
    {
        "x": "2月",
        "y": 457
    },
    {
        "x": "3月",
        "y": 182
    }
]

面积图

引用方式

import AreaChartTy from '@/components/chart/AreaChartTy'

参数列表

参数名	类型	必填	说明
title	string		报表标题
dataSource	array	✔️	报表数据源
height	number		报表高度，默认254
lineSize	number		线的粗细，默认2

dataSource 示例

[
    {
        "x": "1月",
        "y": 320
    },
    {
        "x": "2月",
        "y": 457
    },
    {
        "x": "3月",
        "y": 182
    }
]

进度条

引用方式

import MiniProgress from '@/components/chart/MiniProgress'

参数列表

参数名	类型	必填	说明
percentage	number		当前进度百分比，默认0，最高100
target	number		目标值，默认10
height	number		进度条高度，默认10
color	string		进度条颜色，默认 #13C2C2