财务管理后台

项目介绍

这个物流（社区团购）财务管理后台是一个全栈项目，使用 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 部署.

环境安装

1. 安装 vscode

   • https://code.visualstudio.com/download

2. 安装 git

   • https://git-scm.com/downloads

3. 安装 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

   PS D:\Desktop\erp-management> node -v
   v14.19.3

4. 安装 docker

   • https://www.docker.com/products/docker-desktop/
   • https://www.runoob.com/docker/docker-tutorial.html

5. 安装 python2.7

   • https://www.python.org/downloads/release/python-2718/

   PS D:\Desktop\erp-management> python --version
   Python 2.7.18

图表说明

ERP 管理系统 Docker 部署架构图

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

阿里云 Nginx Docker Compose 流程图

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

其中，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 环境之间的通信。

如上图所示，将 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 参数实现。可以在项目的配置文件中设置，如下所示：

$ git config --global core.ignorecase false

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

$ 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 使用路由懒加载的写法如下：

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，用于在开发环境下方便地进行调试和分析，同时在生产环境中使代码更具有可读性。

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