# resultsManagementSys

**Repository Path**: kiana-k423/resultsManagementSys

## Basic Information

- **Project Name**: resultsManagementSys
- **Description**: 创新创业基地的成果管理项目
- **Primary Language**: JavaScript
- **License**: ISC
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2020-01-06
- **Last Updated**: 2025-10-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 双创中心成果管理系统

## Project setup 项目初始化node_modules
```
yarn install / npm install
```

### Compiles and hot-reloads for development 开发下预览
```
yarn serve  / npm run serve
```

### Compiles and minifies for production    编译
```
yarn build  / npm run build
```

### Lints and fixes files   自动校验语法
```
yarn lint   / npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

### 目录结构

```
├── api   #接口文件
|  ├── api.js  #接口具体实现
|  └── index.js   #接口基础设置，baseUrl,拦截等
├── App.vue   #vue的入口文件
├── assets    #静态资源文件
├── components    #组件
|  ├── forms  #表单组件
|  |  ├── LoginForm.vue   #登录表单
|  |  └── ResultForm.vue  #成果表单
|  └── home   #主页
|     ├── HomeAside.vue   #主页侧栏
|     ├── HomeContainerBtns.vue   #主页内容顶部搜索框组
|     ├── HomeContainerTable.vue  #主页内容表格
|     ├── HomeFooter.vue    #主页底部
|     └── HomeHeader.vue    #主页头部
├── config    #配置文件
|  ├── apiConfig.js   #接口地址配置
|  ├── collegeNames.js    #学院名称配置
|  ├── excelTableHead.js  #excel表格头配置
|  ├── formRules.js   #表单规则配置
|  ├── globalLoadingOptions.js    #全局加载配置
|  ├── patentCategory.js    #专利类型配置
|  ├── priceRank.js   #获奖等级配置
|  ├── ResultsConfig.js   #成果类型具体配置，包括了表单项，搜索项，CUDR
|  ├── TableHeaderConfig.js   #表格头配置
|  └── typeConfig.js    #成果类型配置
├── excel   #引用的excel导入文件
|  └── Export2Excel.js
├── main.js   #vue主入口
├── router    #路由
|  └── index.js
├── store   #vueX
|  └── index.js
├── utils   #工具类
|  ├── formatJson.js    #格式化JSON目的是为了下载到Excel中
|  ├── transImgBaseUrl.js   #图片基地址转换
|  └── typeNameChange.js    #类型中英文名称转换
└── views   #视图
   ├── Home.vue #主页视图
   ├── HomeContainerViews #主页内容
   |  ├── ChartsView.vue  #图表
   |  └── ResultsView.vue #成果类型
   └── Login.vue  #登录页
```
### 备注
* 对Vue 有一定的了解，习惯自己阅读插件文档
* 请先掌握ES6中promise async/await 的使用方法
* 对Ajax有一定的了解
* 不会的多google
* 关键的地方都添加的注释，其他页面具体参考competition类型

### 文档参考链接
* [Vue](https://cn.vuejs.org/v2/guide/)
    * [vueRouter 路由](https://router.vuejs.org/zh/guide/)
    * [vueX  全局状态管理](https://vuex.vuejs.org/zh/guide/)
* [elmentUI一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库](https://element.eleme.cn/#/zh-CN/component/installation)
* [基于 promise 的 HTTP 客户端 axios ](https://www.kancloud.cn/yunye/axios/234845)
* [基于 Vue2.0 和 echarts 封装的 v-charts 图表组件](https://v-charts.js.org/#/)
* [Vue 导出 excel的解决方案](https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/excel.html)

### 部署优化
* nginx 开启浏览器缓存，gzip压缩等，具体配置如下
  ```
	# gzip 配置
	gzip on;                        #开启gzip压缩
	gzip_disable "MSIE [1-6]\."     #ie1-6无效
	gzip_vary on;                   #表示在传送数据时，给客户端说明我使用了gzip压缩
 	gzip_min_length 1k;             #设置允许压缩的页面最小字节数; 这里表示如果文件小于1k，就不用压缩，因为没有意义，本来就很小
	gzip_comp_level 5;              #压缩等级越大传输速率越快但是处理时间也越多(1-9)
	gzip_buffers 4 16k;             #缓冲区大小，这里指的是4个16k的
	gzip_http_version 1.1;          #识别http协议的版本,早期浏览器可能不支持gzip自解压,用户会看到乱码
	gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon image/jpeg image/jpg image/png;         #制定压缩的类型,线上配置时尽可能配置多的压缩类型!
  ```
  ---
  ```
     # nginx 配置示例
     server {
        listen       8081;  #监听的端口
        server_name  127.0.0.1;  #监听地址
        root         /home/resultManagerSys/dist;   #根目录
        index      index.html   #设置默认主页

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        #vue的官方配置示例
        location / {
	        try_files $uri $uri/ @router;
            index index.html;
 	        add_header Cache-Control 'no-cache,private'; #打开新窗口时候重新访问服务器
        }
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #缓存资源到浏览器
        location ~ \.(htm|html|gif|jpg|jpeg|png|bmp|ico|css|js|txt)$ {
    	root /home/resultManagerSys/dist;
    	expires 24h;
       }
        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
  ```
* 压缩静态图片资源大小
* 路由懒加载，组件懒加载
  ```
    //示例
    const Login = () => import("../views/Login.vue");
    const routes = [
    {
        path: "/login",
        name: "login",
        component: Login
    }]
  ```
* 采用CDN导入的方式，减少main.js下的全局导入，这样可以最大幅度减小编译后的文件大小，需注意的是尽量锁定CDN引入的版本，避免后续更新影响项目依赖
  ```
    //首先在index.html中引入外部CDN(要注意依赖关系,例如elmentui依赖vue,所以vue也需要采用CDN导入的方式,尽量锁定版本号)
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10"></script>
  ```
  ---
  ```
    //新建vue.config.js文件，和src同级(不要建至src下)
    module.exports = {
        configureWebpack: {
            externals: {
                vue: "Vue",             #左侧为你在代码中使用的名称，右侧为导入外部CDN暴露的全局变量名称(右边名称一定不能自定义，得是外部CDN暴露的全局变量名称)
                "vue-router": "VueRouter",
                vuex: "Vuex",
                axios: "axios",
                "element-ui": "ELEMENT",
                "v-charts": "VeIndex",
                xlsx: "XLSX"
                }
        }
    };
    //main.js下使用左侧你定义的名称
    import VCharts from "v-charts";
    import ELEMENT from "element-ui";
    Vue.use(ELEMENT);
    Vue.use(VCharts);
  ```