# 综合管理平台 **Repository Path**: liuyaxiang/integrated-management-platform ## Basic Information - **Project Name**: 综合管理平台 - **Description**: Vue 全家桶 、webSocket、webTopo - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-09-07 - **Last Updated**: 2024-05-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 项目文档 项目描述：集成的管理系统、由管理实时项目，与项目本身的管理平台。 本项目使用 `vue-admin-tampleate` 作为基础模板 使用技术栈： `Vue-cli` `Vue` `Vuex` `Vue-router` `ElementUI` `Axios` `scss` `ES2015+` `mockjs` `js-xlsx` `file-saver` `script-loader` 项目文件结构 ``` sh ├── build # 构建相关 ├── mock # 项目mock 模拟数据 ├── public # 静态资源 │ │── favicon.ico # favicon图标 │ └── index.html # html模板 ├── src # 源代码 │ ├── api # 所有请求 │ ├── assets # 主题 字体等静态资源 │ ├── components # 全局公用组件 │ ├── directive # Vue全局指令 │ ├── filters # 全局 filter │ ├── icons # 项目所有 svg icons │ ├── lang # 国际化 language │ ├── layout # 全局 layout │ ├── router # 路由 │ ├── store # 全局 store管理 │ ├── styles # 全局样式 │ ├── utils # 全局公用方法 │ ├── vendor # 公用vendor │ ├── views # views 所有页面 │ ├── App.vue # 入口页面 │ ├── main.js # 入口文件 加载组件 初始化等 │ ├── setting.js # 项目title与侧边栏控制配置 │ └── permission.js # 权限管理 ├── tests # 测试 ├── .env.xxx # 项目环境变量配置 ├── .eslintrc.js # eslint 配置项 ├── .babelrc # babel-loader 配置 ├── .travis.yml # 自动化CI配置 ├── vue.config.js # vue-cli 配置 ├── postcss.config.js # postcss 配置 └── package.json # package.json ``` # 项目基本配置说明 - 在维护项目时请确保环境配置 使用 Node的 `Npm` 进行项目依赖包的管理 ```sh # 下载好后确保已经部署完毕 $ node -v $ npm -v $ npm install # 下载项目包 # 如果下载过慢请使用淘宝镜像 $ npm config set registry https://registry.npm.taobao.org/ $ npm config get registry #查看当前npm下载源 # 下载完成后 cd 到当前目录下 $ npm run dev # 启动开发模式的启动服务 ``` - 代码格式化使用统一的 ESlint 来进行代码校验 - 如果需要格式化工具自行配置 Vetur + Prettier ```json /* VsCode 配置项 */ { "vetur.format.defaultFormatter.html": "prettyhtml", "vetur.format.defaultFormatter.js": "prettier-eslint", "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, /* prettier的配置 */ "prettier.printWidth": 200, // 超过最大值换行 "prettier.tabWidth": 2, // 缩进字节数 "prettier.useTabs": false, // 使用单引号代替双引号 // "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行 "prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号 "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }" "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验 "prettier.htmlWhitespaceSensitivity": "ignore", "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中 "prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行 "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号 "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验 "prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号） "prettier.tslintIntegration": false, "prettier.useEditorConfig": false, "prettier.semi": false, "prettier.singleQuote": true } ``` ## 路由表与页面风格设计 ### 项目展示设计 一级路由为 前台数据展示页面 登录页面 404页面等 二级路由为 后台管理页面使用Layout布局组件 # 鉴权管理 (permission.js) - 控制页面登录权限的匹配文件 - 基于`Vue Router` 进行判断，当前用户与路由页面的关系以及权限使用. - 此处待处理，鉴权需要与后端配合进行 # 请求配置 - `Vue-cli` 跨域代理 - 项目使用API模块单独分装请求并使用`Axios`拦截器进行请求与响应处理，处理完成后不需要在接口调用中进行返回值和判断。 - 最终解决方案 `async` 和 await 同步化promise异步请求` axios `同步化 ```js 1.在项目的 main.js 中引入 // axios配置 import axios from 'axios' // 默认请求根地址 axios.defaults.baseURL = 'http://192.168.1.101' // 挂载 Vue.prototype.$http = axios // 在组件中使用 async function () { try { const result = await this.$http.post("URL", {params}); console.log(result) }catch (err) { console.log(err) } } ``` - 本项目将`Axios` 进行单独封装并设置 响应拦截进行请求与数据处理`utils/requist.js` ## 请求环境配置 - 前端主要区分为两个环境，开发环境(`.env.development`)和生产环境(`.env.production`) ```bash # 环境变量 ，值为 development 或 production 等环境 $ process.env.NODE_ENV #使用此方法来获取当前运行环境 ``` - 开发环境实际上就是本地开发用的环境，要求并不高，在进入生产模式时就需要真实的数据 - 所以在进行区分时可以在环境变量中设置 - 项目中已存在环境文件需要修改直接在文件中新增或者修改 # 样式修改注意点 ## 覆盖 element - 如果需要覆盖Element 样式，推荐使用第二种方式进行修改 - 在全局样式用修改`style/element-ui.scss` - 在当前组件中声明新的 style 标签并不能设置为scoped插槽 ## 样式中的文件引用 - @ 为Vue.config.js中设置的路径别名,指定为源文件根目录 - 需要在style中使用需要在 @ 符前添加 ~ 否者不识别 ` background: url(~@/assets/images/login-bg.jpg)` # 虚拟数据 mock.js - 项目为前后端分离项目，在无后端接入时，使用 mock虚拟数据，相关注意点在项目中有标注 # 数据缓存与本地数据存储 项目公用数据使用`VueX`进行组件通信，用户信息使用本地存储（`localStorage`），页面级数据使用`date(){}`进行管理 ## `VueX`结构 - 在`store` 下一共modules getters.js index.js 三部分 - modules为数据模块，为数据模块添加了 `namespaced` 为高封闭性模块。 - getters.js 为数据快捷访问配置 - index.js 为实例挂载配置 # 问题记录 项目地址 `http://47.100.82.95:8080/layuimini/back.html` 1. 类型管理 作为管理主菜单项 ， 不作为项目内管理项。 图片上传 文件分类 # Excel 导入导出 ​ 使用 js-xlsx 组件 ``` sh $ npm i xlsx ``` # 动态路由（刷新掉当前路由问题） 1、动态路由的添加在刷新浏览器后置空了路由数据 ​ 解决思路： 1. 在 premission.js 中 创建一个变量初始化为0，用于记录当前刷新操作，在刷新后这个字段将为0 1. 根据字段与公共数据中的路由数据进行判断然后条用方法进行再次的路由添加并跳转至 ``` js //定义变量判断是否已经动态添加过，如果刷新后load永远为 0 let load = 0 //导航守卫 router.beforeEach((to, from, next) => { // 获取菜单 const menuTree = store.getters.getMenuTree //非登录、有菜单数据、 没有进行添加（或者刷新了） if (load === 0 && menuTree.length && to.name!=='Login') { load++ //再次调用存储菜单数据(前提是在存储的地方有调用添加路由规则)、或者直接调用动态添加路由规则事件 store.dispatch("SAVE_MENUTREE", menuTree); //添加后跳转到应访问的地址 next({path: to.path}) } }) ``` # 关于IP地址以及请求BaseURL - IP修改以一下文件中的字段进行修改 - ![image-20220822102156742](.\src\assets\redame\image-20220822102156742.png) - ![image-20220822102223454](.\src\assets\redame\image-20220822102223454.png) - ![image-20220822102247761](.\src\assets\redame\image-20220822102247761.png) - 线上环境 - IP地址不需要修改,端口号更改时需要修改重新打包.