前端工程化（YApi，Node.Js，VueCLI，项目打包部署（Nginx部署））简介

DAWN_T17

已于 2024-08-03 01:48:11 修改

阅读量641

点赞数 16

分类专栏： JavaWeb 文章标签：前端 vue node.js

于 2024-08-02 00:22:29 首次发布

本文链接：https://blog.csdn.net/2303_80480614/article/details/140852708

版权

JavaWeb 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Author：Dawn_T17🥥

补充：vue-cli创建的Vue项目使用Axious异步处理

六.Vue项目打包部署(Nginx)

1.打包

2.部署

一.前后端混合开发

介绍：

前后端混合开发是一种融合了前端和后端开发技术的应用开发方式。它打破了传统的前后端分离模式，使开发者能够在同一个项目中同时处理前端和后端的功能。

在这种开发模式中，开发者可以使用一套技术栈来完成整个应用的构建。例如，使用 JavaScript 及其相关框架（如 Express、Koa 等）既可以处理后端的服务器逻辑、数据库操作，又可以构建前端的用户界面和交互逻辑。

这种开发方式能够实现前后端之间的无缝衔接，减少了数据传输和接口调用的复杂性，提高了开发效率和应用的响应速度。同时，开发者可以更灵活地根据业务需求在前后端之间切换和协调工作。

缺点：

技术门槛提高：要求开发者同时精通前端和后端的多种技术，包括但不限于前端的 HTML、CSS、JavaScript 以及后端的数据库操作、服务器配置等，这对于开发者的技术广度和深度都有较高的要求。
- 比如，一个只擅长前端开发的人员，在面对后端的数据库优化和服务器部署时，可能会感到力不从心。
代码结构复杂：前后端代码混合在一个项目中，可能导致代码的组织结构不够清晰，增加了代码的维护难度和可读性。
- 当项目规模增大时，难以区分和管理前后端的不同功能模块。
安全风险：由于前后端代码紧密结合，一旦出现安全漏洞，可能会影响到整个应用的安全性。
- 例如，前端的错误输入验证可能会导致后端数据库受到攻击。
团队协作难度：对于团队开发来说，不同技术背景的成员可能在理解和修改对方的代码时存在困难，影响团队的协作效率。
- 比如，后端开发人员可能不熟悉前端的框架和设计模式，导致在协作中出现误解和冲突。

二.前后端分离开发(主流)

前后端分离开发是当前主流的应用开发模式之一。在这种模式下，前端和后端的开发工作被明确划分开来，各自专注于自己的领域。

前端主要负责用户界面的设计和交互体验的实现。使用 HTML、CSS 和 JavaScript 等技术构建页面，通过各种前端框架（如 Vue.js、React、Angular 等）来提高开发效率和用户体验。前端通过发送 HTTP 请求与后端进行数据交互。

后端则专注于业务逻辑的处理、数据的存储和管理，以及提供接口供前端调用。后端通常使用编程语言如 Python、Java、Node.js 等，结合相关的框架和数据库进行开发。

优点：

提高开发效率：前端和后端开发人员可以并行工作，互不干扰，大大缩短了开发周期。
- 例如，前端团队可以在后端接口尚未完成的情况下，使用模拟数据进行页面开发和调试。
易于维护和扩展：前后端代码分离，各自的代码结构更加清晰，便于维护和后续的功能扩展。
- 当需要对后端业务逻辑进行修改时，不会影响到前端的页面展示。
技术选型灵活：前端和后端可以根据各自的需求选择最适合的技术栈，而不受彼此的限制。
- 后端可以选择性能优越的数据库和框架，前端可以选择用户体验好的 UI 框架。
更好的团队协作：明确的分工使不同技术背景的团队成员能够专注于自己擅长的领域，提高团队整体的协作效率。

缺点：

增加了通信成本：前后端通过接口进行通信，需要确保接口的定义清晰准确，否则可能会导致数据不一致或功能异常，增加了沟通和调试的成本。比如接口的参数变更没有及时通知前端，可能导致前端调用失败。
初始开发成本较高：需要搭建前后端分离的开发环境和部署架构，对于小型项目来说可能会增加一定的复杂度。包括配置反向代理、设置跨域访问等。
对前端性能要求高：由于前端需要承担更多的交互逻辑和数据处理，对前端的性能优化要求较高。大量的数据处理可能导致页面卡顿，影响用户体验。

三.YApi

YApi 是一个高效、易用、功能强大的可视化接口管理平台。

它为开发团队提供了诸多便利：

方便接口文档的编写和维护，使开发人员能够清晰准确地记录接口的各种信息，如请求方法、参数、返回值等。
支持团队协作，多个成员可以同时对接口进行管理和更新，提高工作效率。
提供了接口的测试功能，方便开发人员在开发过程中对接口进行调试和验证。

例如，在一个大型的 Web 开发项目中，前端和后端开发人员可以通过 YApi 来统一管理接口，避免因为接口信息不一致而导致的开发问题。又比如，在进行接口更新时，相关人员可以在 YApi 中及时修改文档并通知到所有团队成员，确保整个开发流程的顺畅进行。

总的来说，YApi 在接口管理方面发挥着重要作用，有助于提升开发团队的工作效率和项目的质量。

API 接口管理：

API 接口管理是对应用程序编程接口（API）进行有效组织、监控、版本控制和文档化的过程。

其主要作用包括：

确保接口的一致性和规范性：制定统一的接口设计标准，包括参数格式、返回数据结构等，使不同开发者开发的接口具有一致性，便于使用和维护。
- 例如，规定所有接口的请求都采用 JSON 格式传递数据。
版本控制：当接口需要更新或修改时，通过版本号进行管理，以确保旧版本接口的兼容性和新版本接口的顺利推广。
- 比如，将接口从 v1 升级到 v2 时，为 v1 接口提供一段时间的支持，方便依赖旧接口的应用进行调整。
监控和性能分析：实时监测接口的调用情况，包括调用频率、响应时间、错误率等，以便及时发现和解决性能问题。
- 若某个接口的响应时间突然变长，可以通过监控数据快速定位问题所在。
安全管理：控制接口的访问权限，防止未经授权的访问和滥用。
- 采用 API 密钥、OAuth 等认证方式保障接口安全。

Mock 服务：

Mock 服务是一种模拟真实 API 接口行为的服务。（比如前端做好，后端没做好，先用Mock服务模拟的数据和接口行为，测试前端代码）

它的主要用途有：

前端开发并行：在后端接口尚未完成开发时，前端开发人员可以使用 Mock 服务提供的模拟数据进行页面的开发和调试，不依赖于后端接口的实际完成。
- 例如，前端需要获取用户信息接口的数据来展示页面，通过 Mock 服务模拟用户数据，前端就可以先进行页面布局和交互的开发。
测试隔离：在进行单元测试或集成测试时，使用 Mock 服务可以隔离其他依赖的外部接口，专注于测试当前模块的功能。
- 假设测试一个订单处理模块，使用 Mock 服务模拟支付接口的返回结果，只关注订单处理的逻辑是否正确。
降低依赖：减少对不稳定或不可控的外部接口的依赖，提高开发和测试的稳定性和效率。
- 当外部接口经常出现故障或响应不稳定时，Mock 服务可以保证开发和测试工作的正常进行。

API 接口管理和 Mock 服务在软件开发过程中都起着重要的作用，有助于提高开发效率、保证接口质量和提升软件的整体稳定性。

1.添加项目

2.添加分类

3.添加接口

4.请求参数和返回数据的设置

5.Mock应用

一般自动生成的数据比较宽泛（离谱）

可以在高级Mock里自己设置期望的数据

6.总结

四.Node.Js

介绍

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

它具有以下几个重要特点和优势

非阻塞 I/O 和事件驱动
- 能够高效处理大量并发连接，非常适合构建实时性要求高的网络应用，如聊天服务器、在线游戏等。
- 例如，在一个 Web 服务器中，当处理一个请求时，不需要等待该请求完成，可以继续处理其他请求，提高了服务器的响应能力。
跨平台
- 可以在 Windows、Linux、Mac 等多种操作系统上运行，使得开发的应用具有更广泛的部署可能性。
丰富的模块生态系统
- 通过 npm 包管理工具，可以轻松获取和使用大量的第三方模块，涵盖了各种功能领域，如数据库操作、文件处理、Web 开发框架等。比如 Express 是一个广泛使用的 Web 开发框架。{npm（Node Package Manager）：用于管理 Node.js 项目的依赖包，包括安装、更新、卸载等操作}
前端和后端使用相同的语言
- 对于熟悉 JavaScript 的开发者，可以在前后端使用同一种语言进行开发，减少了学习成本和技术切换的复杂性。
轻量级和高效
- 占用资源相对较少，启动速度快，能够快速构建和部署应用。

Node.js 在以下场景中得到了广泛的应用：

Web 应用开发
- 构建高性能的 Web 服务器和 API 服务。
实时应用
- 如实时聊天、在线协作工具等。
命令行工具
- 开发各种实用的命令行工具，提高开发效率。

总之，Node.js 是一个能在服务器端运行 JavaScript 代码的平台。它允许使用 JavaScript 来创建服务器端的应用程序。比如，你可以用 Node.js 来搭建一个网站的服务器，处理用户的请求，返回网页内容。还能用于创建网络应用，像实时聊天工具，它能快速处理大量用户同时发送的消息。也可以用于开发命令行工具，执行各种系统任务。

Node.js 拓展了 JavaScript 的应用范围，从浏览器端延伸到了服务器端，让开发者能用熟悉的语言进行服务器端的开发工作。

下载和配置

官网下载长期运行版本

NodeJS 安装完毕后，会自动配置好环境变量

配置npm的全局安装路径，在以管理员身份打开cmd（指定通过 npm 安装的全局模块（即可以在系统的任何位置使用的模块）的存放位置）

npm 是 Node.js 的包管理工具

它主要有以下几个重要作用：

安装依赖包
可以轻松地获取和安装各种第三方库和模块，以增强项目的功能。比如，运行 npm install lodash 就能把 lodash 这个常用的工具库安装到项目中。
管理项目依赖
会在项目的 package.json 文件中记录项目所依赖的包及其版本信息，方便项目的迁移和复现。
版本控制
支持指定包的版本范围，确保项目在不同环境中的稳定性。
发布包
开发者可以将自己开发的模块通过 npm 发布到公共仓库，供其他人使用。
执行脚本命令
在 package.json 中定义的脚本，如 npm start 用于启动项目，npm test 用于运行测试等。

例如，在一个前端项目中，通过 npm 安装 Vue.js 框架和相关的组件库，然后利用定义的脚本进行项目的构建、启动和测试。

切换npm的淘宝镜像

切换 npm 的淘宝镜像意味着将 npm 在下载包时默认访问的官方源地址，修改为淘宝提供的镜像源地。通常，npm 从官方源下载包，但由于网络等原因，下载速度可能较慢或者不稳定。而淘宝镜像会同步官方源的包数据，并在国内提供更快的下载服务。

比如说，原本 npm 下载一个较大的包可能需要几分钟甚至更久，还可能因为网络波动导致下载失败。但切换到淘宝镜像后，可能只需要几十秒就能完成下载，并且失败的几率大大降低。

这样做主要是为了提高在国内获取 npm 包的效率和稳定性，让开发过程更加顺畅。

图中淘宝镜像已经过期，后文操作会显示下载失败

五.vue-cli

介绍

vue-cli 是 Vue.js 官方提供的一个快速搭建 Vue 项目架构的脚手架工具。

Vue CLI 的全称是 Vue Command Line Interface ，即 Vue 命令行界面

它具有以下几个主要功能和特点：

项目初始化
- 可以通过一系列的交互选项，快速创建一个具有基本结构和配置的 Vue 项目。
预设模板选择
- 提供了多种项目模板，如普通的 Vue 项目模板、基于 Vue Router 的 SPA 模板、基于 Vuex 的状态管理模板等，方便根据项目需求进行选择。
自动化配置
- 自动配置 Webpack、Babel 等开发工具和相关的加载器、插件，减少手动配置的繁琐工作。
插件扩展
- 支持通过安装和使用各种插件来扩展项目的功能，如单元测试插件、代码规范检查插件等。

例如，如果您要创建一个简单的 Vue 单页面应用（SPA），使用 vue-cli 可以快速生成项目的目录结构、基本的配置文件（如 package.json 、 .babelrc 、 webpack.config.js 等）以及示例的组件和页面代码，让您能够迅速开始开发工作，而无需从零开始搭建整个项目架构。

简单来说，Vue 是框架本身，而 Vue CLI 是帮助开发者更高效地使用 Vue 进行项目开发的工具。使用 Vue CLI 可以减少项目初始化和配置的繁琐工作，让开发者能够更专注于业务逻辑和功能的实现。

TIP：

脚手架

脚手架（Scaffolding） 在软件开发中，通常指的是一种能够快速搭建项目基本架构的工具或框架。

它的主要作用包括：

提供基础结构
为项目创建初始的目录结构、文件布局，包括配置文件、入口文件、模板文件等。
配置预设
提前设置好一些常见的开发配置，如构建工具（如 Webpack）的配置、代码检查工具（如 ESLint）的规则等。
节省时间和精力
让开发者不必从空白开始逐步创建和配置项目，能够更快地进入核心的业务逻辑开发。

例如，在前端开发中，像 Vue CLI 是 Vue 项目的脚手架，Create React App 是 React 项目的脚手架；在后端开发中，某些框架也会提供脚手架工具来快速生成项目的基础架构。

再比如，如果您要开发一个大型的 Web 应用，使用合适的脚手架可以在短时间内为您生成项目的框架，包括路由设置、数据存储的基本配置等，您只需要在此基础上添加具体的功能模块和业务逻辑代码即可。

热部署

热部署（Hot Deployment） 是一种在软件开发过程中，无需重新启动整个应用程序就能使新的代码更改立即生效的技术。

它具有以下几个显著的优点：

提高开发效率
开发者无需频繁地停止和重新启动应用，节省了等待应用重新启动的时间，能够更快地看到代码更改的效果，从而加快开发迭代的速度。
减少中断
对于正在运行的应用，尤其是生产环境中的应用，热部署可以在不中断服务的情况下更新部分功能，保证了应用的连续性和稳定性。
便于调试
能够更及时地验证代码修改是否正确，方便快速定位和解决问题。

例如，在一个基于 Java 的 Web 应用中，使用热部署技术，当开发者修改了一个 Java 类的方法实现或者修改了一个 JSP 页面时，服务器能够自动检测到这些更改，并立即加载新的代码或页面，而无需重新启动整个 Web 应用服务器。

又比如，在一个 Node.js 应用中，通过某些模块和配置，可以实现当修改了部分 JavaScript 代码后，应用能够自动重新加载这些更改的部分，而无需手动重启服务器。

下载安装

原来的 https://registry.npm.taobao.org 已替换为 https://registry.npmmirror.com （实测2024可用）

最新的配置淘宝镜像的淘宝官方提供的方法

1.首先，确保您的计算机已经安装了较新且兼容的 Node.js 版本

2.以管理员身份打开cdm窗口

3.用此命令行下载，这个过程中，会联网下载，可能会耗时几分钟

 npm install -g @vue/cli

因为淘宝镜像换了，我也是尝试了好久，后来换镜像网站才成功（囧）

尝试的痕迹：。。。。。

4.判断是否安装成功：

成功的话返回vuecli的版本号

—使用—

创建Vue项目

两种方式通过vuecli创建vue项目

推荐使用图形化界面方式

在目标文件夹内打开cmd窗口

加载完成后会在浏览器窗口打开Vue项目管理器

创建新项目

包管理器选择npm

选择第一only

创建完成，可以关闭Vue项目管理器了

效果

用vscode打开文件夹，即可开始项目

Vue项目目录结构

my-vue-project/
├── node_modules/          # 项目依赖的模块
├── public/
│   ├── favicon.ico        # 网站图标
│   └── index.html         # 单页面应用的模板
├── src/
│   ├── assets/            # 静态资源，如图片、样式表等
│   ├── components/        # 可复用的组件
│   ├── views/             # 页面级组件
│   ├── router/            # 路由配置
│   ├── store/             # 状态管理（Vuex）
│   ├── App.vue            # 根组件
│   └── main.js            # 应用入口文件
├──.gitignore             # 指定哪些文件或文件夹不会被 Git 跟踪
├── babel.config.js        # Babel 配置文件
├── package.json           # 项目的依赖和脚本配置
├── package-lock.json      # 锁定安装的依赖版本
├── README.md              # 项目说明文档
└── vue.config.js          # Vue 项目的配置文件（可选）

详解：

node_modules/：
这个目录用于存放项目所依赖的各种第三方模块和库。当您运行 npm install 或 yarn install 命令安装项目依赖时，相关的模块会被安装到这个目录中。

public/：

favicon.ico：网站的图标，在浏览器标签页中显示。
index.html：这是应用的模板页面，它是整个应用的入口点。Vue 应用会被挂载到这个页面的某个特定元素上。

src/：

assets/：存放项目中的静态资源，比如图片、字体、CSS 样式表（非模块化的）等。
- 例如，项目中使用的背景图片 background.jpg 可以放在这里。
components/：包含可复用的 Vue 组件。
- 比如，一个通用的按钮组件 ButtonComponent.vue 可能会存放在这里。
views/：通常用于存放页面级别的组件，每个文件代表一个完整的页面。
- 例如，HomeView.vue 可能是项目的首页组件。
router/：包含路由配置相关的文件，用于定义应用的不同页面路径和对应的组件。
- 比如，定义了从 /home 到 HomeView.vue 的路由映射。
store/：如果使用了 Vuex 进行状态管理，相关的状态、actions、mutations 等会在这里配置。
- 例如，定义了全局的用户信息状态及修改它的方法。
App.vue：这是应用的根组件，其他组件会在这个组件内部进行组合和渲染。
main.js：应用的入口文件，在这里进行 Vue 实例的创建、引入各种插件和配置等。

.gitignore：
用于指定在 Git 版本控制中应该被忽略的文件和文件夹，避免不必要的文件被提交到代码仓库。

babel.config.js：
Babel 的配置文件，用于将 ES6+ 的语法转换为浏览器能够理解的旧版本语法。

package.json：
包含项目的元数据，如项目名称、版本、依赖、脚本命令等。通过它可以方便地管理项目的依赖和运行各种开发命令。

package-lock.json：
锁定安装的依赖版本，确保在不同的环境中安装的依赖版本一致。

README.md：
项目的说明文档，通常包含项目的介绍、安装步骤、使用说明等重要信息。

vue.config.js：
Vue 项目的自定义配置文件，您可以在这里进行一些项目级别的配置，如修改打包输出路径、配置代理等。（改变端口号，后文）

当我运行后。。疯狂爆红（囧）

解决办法：在设置，用户里把package manager改为npm并重启电脑

成功，这个界面就是App.vue根组件的实现

端口号默认80端口，可以自己定义端口号

自定端口号

在vue.config.js里设置端口号

localhost已经改为了7000

开发流程

mount用来挂载对象

主要操作的是vue文件

.vue文件的一般形式

<template>
  <!-- 这里定义了组件的模板结构，用于描述组件的外观 -->
  <div>
    <!-- 放置组件的 HTML 内容和子组件 -->
  </div>
</template>

<script>
export default {
  data() {
   
    };
  },
  methods: {
    
  },

</script>

<style>

 
</style>

TIP：这里script里data是函数，不是对象

在 App.vue 或其他 Vue 组件中，data 被定义为一个函数而不是一个对象，主要有以下几个重要原因：

1.组件复用性
当一个组件可能被多次复用的时候，如果 data 是一个对象，那么多个组件实例将会共享同一个 data 对象，这会导致数据的混乱和不可预测性。将 data 定义为函数，每次创建组件实例时都会返回一个新的独立的数据对象，确保每个组件实例都有自己独立的数据空间，互不干扰。

例如，如果 data 是对象，两个相同组件实例中的数据可能会相互影响，导致错误的结果。

2.避免数据污染
如果多个组件共享同一个 data 对象，当一个组件修改了数据，可能会意外地影响到其他组件的数据。使用函数可以确保每个组件都有自己独立的数据副本，从而避免这种数据污染的情况。

假设您有一个列表组件，多个列表组件实例共享一个对象形式的 data ，当一个列表组件添加或删除了一项数据，其他列表组件也会受到影响，这显然不符合预期。

3.符合 JavaScript 的作用域规则
函数可以创建一个独立的作用域，更好地封装和管理组件的数据，符合 JavaScript 中关于作用域和闭包的概念，使得数据的管理更加清晰和可控。

总的来说，将 data 定义为函数是为了保证 Vue 组件的独立性、可复用性和数据的安全性，从而构建出更可靠和可维护的应用程序。

补充：vue-cli创建的Vue项目使用Axious异步处理

前提：有Node.Js环境

1.终端安装

2.导入axious（库）

六.Vue项目打包部署(Nginx)

1.打包

完成打包后,会生成一个dist文件,点开文件如上图所示

2.部署

使用Nginx部署

下载完Nginx后,打开文件夹,目录如下

将文件复制到目标文件夹,启动可执行文件

打开任务管理器,若发现Nginx没有被启动(logs文件里有error文件)

则可能是端口号被占用了,打开命令介板,查询端口号.找到占用此端口的程序

打得过就干死它(停止它),打不过就绕道(换端口号)

换端口号

在 conf目录下找到核心配置文件nginx.conf更改端口号后重新启动

然后打开任务管理器,若发现Nginx启动了,则成功了

打开浏览器输入目标端口,就成功打开了网页.

DAWN_T17

关注

16
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
前端工程化（YApi，Node.Js，VueCLI，项目打包部署（Nginx部署））简介

Author：Dawn_T17🥥前后端分离开发是当前主流的应用开发模式之一。在这种模式下，前端和后端的开发工作被明确划分开来，各自专注于自己的领域。前端主要负责用户界面的设计和交互体验的实现。使用 HTML、CSS 和 JavaScript 等技术构建页面，通过各种前端框架（如 Vue.js、React、Angular 等）来提高开发效率和用户体验。前端通过发送 HTTP 请求与后端进行数据交互。
复制链接

扫一扫

专栏目录