财务管理后台

项目介绍

这个物流（社区团购）财务管理后台是一个全栈项目，使用 Vue 和 Node.js express 构建，部署使用 docker-compose 和 Jenkins。

线上地址：https://erp.ffffee.com/
用户名：李钟意
密码：123456

适合那些人

具有一定前端基础和学完 Vue 的同学
想要从前端走向全栈的同学
想要学习 Node.js 的同学
想要学习 Docker 部署项目的同学
想要学习 Jenkins 部署项目的同学

技术栈

前端: Vue2, ElementUI, Vue-cli, Echarts, Axios, Eslint, Prettier
后端: Node.js, Express, Mongodb, Mongoose, Postman
CICD: Jenkins
部署: Docker, Docker-compose, Nginx, 云服务器

项目亮点、难点

前端亮点：打包优化 gzip、chunk 代码分块、多环境配置、请求拦截、前端权限、token 处理、element UI 二次封装、axios 图片上传、docker-compose 部署、jenkins 自动化流水线、git 工作流、echarts 图表、excel 表格导入导出、vue 复杂表单、反向代理、代码格式化校验、换肤.
前端难点：从零到一项目搭建、前端权限、动态复杂表单、组件封装、token 处理、node-sass 安装失败.
后端亮点：RESTful API 设计、Node.js 服务器搭建、MongoDB 数据存储、Postman 接口测试、JWT 身份验证、Mongoose 数据模型、文件上传、Express 动态路由、Docker 部署、Jenkins 自动化部署、Git 代码管理.
后端难点：从零到一项目搭建、RESTful API 设计、Node.js 服务器搭建、JWT 身份验证、文件上传、Docker 部署.

环境安装

安装 vscode
- https://code.visualstudio.com/download
安装 git
- https://git-scm.com/downloads
安装 nodejs v14.19.3
- https://nodejs.org/zh-cn/download/
- Windows 用户：https://nodejs.org/dist/v14.19.3/node-v14.19.3-x64.msi
- Mac 用户：https://nodejs.org/dist/v14.19.3/node-v14.19.3.pkg
bash
```
PS D:\Desktop\erp-management> node -v
v14.19.3
```
安装 docker
- https://www.docker.com/products/docker-desktop/
- https://www.runoob.com/docker/docker-tutorial.html
安装 python2.7
- https://www.python.org/downloads/release/python-2718/
bash
```
PS D:\Desktop\erp-management> python --version
Python 2.7.18
```

图表说明

ERP 管理系统 Docker 部署架构图

mermaid

graph LR
  subgraph erp-management
    erp_money_frontend["erp_money_frontend"]
    erp_money_backend["erp_money_backend"]
    erp_money_mongo["erp_money_mongo"]
    erp_money_nginx["erp_money_nginx"]
  end
  subgraph 阿里云nginx
    aly_nginx["aly_nginx"]
  end

  aly_nginx --erp.ffffee.com 反向代理--> erp_money_nginx
  erp_money_nginx -- / 反向代理 --> erp_money_frontend
  erp_money_nginx -- /api 反向代理 --> erp_money_backend
  erp_money_backend --> erp_money_mongo

这个流程图显示了如何通过 erp_money_nginx 容器将请求路由到 erp_money_frontend 和 erp_money_backend 服务。同时，erp_money_backend 依赖于 erp_money_mongo 服务。

阿里云 Nginx Docker Compose 流程图

以下是 erp-management 和阿里云 nginx 的流程图：

mermaid

graph LR
  subgraph erp-management
    erp_money_frontend((erp_money_frontend))
    erp_money_backend((erp_money_backend))
    erp_money_mongo((erp_money_mongo))
    erp_money_nginx((erp_money_nginx))

    erp_money_frontend --> erp_money_backend
    erp_money_backend --> erp_money_mongo
    erp_money_frontend --> erp_money_nginx
  end

  subgraph 阿里云nginx
    aly_nginx((aly_nginx))

    aly_nginx --> share_docs_nginx
  end

  share_docs_nginx(share_docs_nginx)

  erp_money_frontend -.-> vue-express
  erp_money_backend -.-> vue-express
  erp_money_backend -.-> express-mongo
  erp_money_mongo -.-> express-mongo
  erp_money_nginx -.-> vue-express


  aly_nginx --> aly_net
  share_docs_nginx --> aly_net

其中，erp-management 和阿里云 nginx 是两个子图，share_docs_nginx 是它们共用的网络。erp-management 中包括四个服务，erp_money_frontend、erp_money_backend、erp_money_mongo、erp_money_nginx，它们之间通过不同的网络进行通信。阿里云 nginx 中只包含一个服务 aly_nginx，它连接到 share_docs_nginx 网络，并将 80 和 443 端口映射到主机的对应端口上。

erp-management 和阿里云 nginx 是如何通信的？

在 erp-management 和阿里云 nginx 之间的通信，通过定义了一个名为 share_docs_nginx 的自定义 Docker 网络实现。erp-money-nginx 与 share_docs_nginx 网络连接，而 aly_nginx 也通过 share_docs_nginx 网络与 aly_net 网络相连，这就实现了两个 Docker Compose 环境之间的通信。

mermaid

flowchart LR
  subgraph erp-management
    erp_money_frontend((erp_money_frontend))
    erp_money_backend((erp_money_backend))
    erp_money_mongo((erp_money_mongo))
    erp_money_nginx((erp_money_nginx))

    erp_money_frontend --> erp_money_backend
    erp_money_backend --> erp_money_mongo
    erp_money_frontend --> erp_money_nginx
  end

  subgraph 阿里云nginx
    aly_nginx((aly_nginx))

    aly_nginx --> share_docs_nginx
  end

  subgraph share_docs_network
    share_docs_nginx(share_docs_nginx)

    erp_money_nginx --> share_docs_nginx
    aly_nginx --> share_docs_nginx
  end

  erp_money_frontend -.-> vue-express
  erp_money_backend -.-> vue-express
  erp_money_backend -.-> express-mongo
  erp_money_mongo -.-> express-mongo
  erp_money_nginx -.-> vue-express


  aly_nginx --> aly_net
  share_docs_nginx --> aly_net

如上图所示，将 share_docs_nginx 网络放到了一个独立的子图中，并添加了标题 share_docs_network，以更好地说明这个网络的作用。同时，将 erp_money_nginx 和 aly_nginx 连接到这个网络中，以强调这两个服务是通过这个网络进行通信的。

常见问题

MVC 架构详解：模型-视图-控制器概念

MVC 指的是模型-视图-控制器，是一种用于开发应用程序的软件架构模式。这是一种将应用程序划分为三个相互关联部分的设计模式：

模型：这是应用程序的数据层。模型代表应用程序的数据和业务逻辑。它负责存储和检索数据，以及对其执行操作。
视图：这是应用程序的呈现层。视图负责向用户呈现数据。它是存储在模型中的数据的视觉表示。
控制器：控制器作为模型和视图之间的中介。它负责处理用户输入并相应地更新模型和视图。控制器从用户接收输入，更新模型，并将更新后的数据传递给视图以进行呈现。

在 Node.js 应用程序中，MVC 模式用于以结构化的方式组织代码并使其更易维护。Node.js 提供了许多支持 MVC 架构的库和框架，包括 Express.js、Koa.js 和 Meteor.js 等。

RESTful API 是什么？

RESTful API 是一种软件设计架构，用于 Web 应用程序接口的设计。它遵循 Representational State Transfer (REST) 架构风格，借鉴了 HTTP 协议的一些思想和特性。RESTful API 通过使用 HTTP 请求，例如 GET、POST、PUT 和 DELETE，来对资源进行操作，并使用 HTTP 状态代码表示 API 的响应。

RESTful API 是目前使用最广泛的 API 设计风格，因为它比较简单，易于理解和使用，并且能够与任何平台和语言结合使用。

docker 是什么？

Docker 是一个开源的软件容器平台。容器是一种轻量级的虚拟化技术，允许开发人员在单独的容器中运行他们的应用程序，而不需要在操作系统层面上进行虚拟化。

Docker 可以让您简化开发、测试和部署的流程，因为它可以在任何环境中保证应用程序的一致性。您可以在本地开发和测试 Docker 容器，然后在生产环境中部署它们，而不需要担心环境的不一致。Docker 还提供了一个公共仓库，您可以在其中找到和使用其他人创建的容器镜像。

另外，Docker 还支持容器编排，您可以使用 Docker Compose 等工具在多个容器间进行协调，以实现复杂的分布式应用程序。

总的来说，Docker 是一种非常有用且易于使用的技术，可以帮助您提高开发效率，并且提供了强大的部署和管理能力。

如何解决 git 默认文件名称忽略大小写 bug

解决 Git 默认文件名称大小写忽略的 bug 可以通过设置 core.ignorecase 参数实现。可以在项目的配置文件中设置，如下所示：

bash

$ git config --global core.ignorecase false

如果是在某个特定的仓库中设置，可以使用以下命令：

bash

$ git config core.ignorecase false

请注意，这个设置只对当前仓库有效，因此如果您需要在所有仓库中都启用它，则需要在每个仓库中都进行设置。

vip 直播会员问：`什么是路由懒加载` 以及我的源码里面为什么下面这么写，没有见过

// 需要远程获取
export const asyncRoutesMap = {
    [LAYOUT]: () => import(/* webpackChunkName: "layout" */ '@/layout/index'),
    [HOME]: () => import(/* webpackChunkName: "home" */ '@/views/home/index'),
    // [BILL]: () => import(/* webpackChunkName: "bill" */ '@/views/bill/index'),
    [BILL_EDIT]: () => import(/* webpackChunkName: "bill-edit" */ '@/views/bill/index'),
    [BILL_DETAIL]: () => import(/* webpackChunkName: "bill" */ '@/views/bill/detail'),
    [PLATFORM]: () => import(/* webpackChunkName: "platform" */ '@/views/bill/platform/index'),
    [REVENUE]: () => import(/* webpackChunkName: "revenue" */ '@/views/revenue/index'),

什么是 `Vue 什么是路由懒加载` ?

Vue 是一种流行的 JavaScript 框架，用于构建单页面应用程序（SPA）。Vue 路由是 Vue.js 的一个官方插件，它提供了路由系统，可以通过管理 URL 来实现视图之间的切换。

路由懒加载是一种优化技术，用于减少初始页面加载时间和文件大小。通常情况下，当应用程序启动时，会将所有组件和代码一起加载。这会导致初始加载时间过长和初始 bundle 大小过大，影响应用程序的性能。

使用路由懒加载，可以使应用程序更快。当访问一个路由时，只有该路由所需的组件和代码才会被加载。这将减少初始加载时间和文件大小，提高应用程序的性能。

在 Vue 中，可以使用 Webpack 的动态导入（dynamic import）功能实现路由懒加载。通过在路由配置中使用() => import()的形式来加载路由对应的组件，可以使应用程序实现路由懒加载。

vue-cli vue 路由懒加载的写法写法

Vue CLI 使用路由懒加载的写法如下：

javascript

const Foo = () => import('./Foo.vue');

const router = new VueRouter({
  routes: [{path: '/foo', component: Foo}]
});

在上面的代码中，Foo 组件将在路由被访问时被动态加载。使用 import()语法，可以将组件打包成单独的块并按需加载。这将使应用程序加载更快，并在需要时动态加载组件。

() => import(/_ webpackChunkName: "account-alipay" _/ '@/views/account/alipay/index') vue-cli 为什么这么写

这段代码是为了实现路由懒加载和代码分割，从而提高应用的性能。

在这段代码中，箭头函数 () => import() 会在该路由被访问时，动态地异步加载 @/views/account/alipay/index 这个组件，而不是在应用程序启动时加载所有组件。这样可以减少初始加载时间和初始 bundle 大小，使应用程序更快。

webpackChunkName 是 Webpack 提供的一个特殊注释，它可以为异步加载的模块命名一个特定的 chunk，用于在开发环境下方便地进行调试和分析，同时在生产环境中使代码更具有可读性。

总之，这段代码的写法能够优化应用程序的性能，提高用户体验。

快速实践指南

入门指南

基础知识

构建镜像

Node.js

Java

Dockerfile最佳实践

直播讲解 docker + nginx

咨询/接单/bug修复/学习交流群

财务管理后台 ​

项目介绍 ​

适合那些人 ​

技术栈 ​

项目亮点、难点 ​

环境安装 ​

图表说明 ​

ERP 管理系统 Docker 部署架构图 ​

阿里云 Nginx Docker Compose 流程图 ​

erp-management 和 阿里云 nginx 是如何通信的？ ​

常见问题 ​

MVC 架构详解：模型-视图-控制器概念 ​

RESTful API 是什么？ ​

docker 是什么？ ​

如何解决 git 默认文件名称忽略大小写 bug ​

vip 直播会员问：什么是路由懒加载 以及 我的源码里面为什么下面这么写，没有见过 ​

什么是 Vue 什么是路由懒加载 ? ​

vue-cli vue 路由懒加载的写法写法 ​

() => import(/_ webpackChunkName: "account-alipay" _/ '@/views/account/alipay/index') vue-cli 为什么这么写 ​

财务管理后台

项目介绍

适合那些人

技术栈

项目亮点、难点

环境安装

图表说明

ERP 管理系统 Docker 部署架构图

阿里云 Nginx Docker Compose 流程图

erp-management 和阿里云 nginx 是如何通信的？

常见问题

MVC 架构详解：模型-视图-控制器概念

RESTful API 是什么？

docker 是什么？

如何解决 git 默认文件名称忽略大小写 bug

vip 直播会员问：`什么是路由懒加载` 以及我的源码里面为什么下面这么写，没有见过

什么是 `Vue 什么是路由懒加载` ?

vue-cli vue 路由懒加载的写法写法

() => import(/_ webpackChunkName: "account-alipay" _/ '@/views/account/alipay/index') vue-cli 为什么这么写