前后台分离开发，你会了吗？

1. 前后台分离开发介绍

前端开发有2种方式：

• 前后台混合开发
• 前后台分离开发

前后台混合开发，顾名思义就是前台后台代码混在一起开发，前后台混合开发模式有如下缺点：

• 沟通成本高：后台人员发现前端有问题，需要找前端人员修改，前端修改成功，再交给后台人员使用
• 分工不明确：后台开发人员需要开发后台代码，也需要开发部分前端代码。很难培养专业人才
• 不便管理：所有的代码都在一个工程中
• 不便维护和扩展：前端代码更新，和后台无关，但是需要整个工程包括后台一起重新打包部署。

所以我们目前基本都是采用的前后台分离开发方式，那么可能小伙伴会问我一个写后端的人为啥要学习一下前端?

在现在这个卷王之王的当下，我们可以不精通前端，但是前端基础的curd(增删改查)操作，最好可以实现自己编写

那么基于前后台分离开发的模式下，我们后台开发者开发一个功能的具体流程如何呢？如下图所示：

图片

• 需求分析：首先我们需要阅读需求文档，分析需求，理解需求。
• 接口定义：查询接口文档中关于需求的接口的定义，包括地址，参数，响应数据类型等等
• 前后台并行开发：各自按照接口文档进行开发，实现需求
• 测试：前后台开发完了，各自按照接口文档进行测试
• 前后段联调测试：前段工程请求后端工程，测试功能

2. 前端工程化

2.1. 前端工程化介绍

如果我们只学过Html,CSS和JS(前端三剑客)，使用前端三剑客开发存在如下问题：

• 每次开发都是从零开始，比较麻烦
• 多个页面中的组件共用性不好
• js、图片等资源没有规范化的存储目录，没有统一的标准，不方便维护

所以现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点

• 模块化：将js和css等，做成一个个可复用模块
• 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
• 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
• 自动化：项目的构建，测试，部署全部都是自动完成

所以对于前端工程化，说白了，就是在企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。从而提升开发效率，降低开发难度等等。接下来我们就需要学习vue的官方提供的脚手架帮我们完成前端的工程化。

3. NodeJS安装

vue前端工程化是通过官方提供的脚手架Vue-cli来完成的，用于快速的生成一个Vue的项目模板

Vue-cli主要提供了如下功能：

• 统一的目录结构
• 本地调试
• 热部署
• 单元测试
• 集成打包上线

我们需要运行Vue-cli，需要依赖NodeJS，NodeJS是前端工程化依赖的环境。所以我们需要先安装NodeJS，然后才能安装Vue-cli

给大家演示安装的nodejs版本是node-v16.17.1-x64.msi，如果大家没有该虚拟机软件，可以在公众号发VM获取下载地址。

图片

3.1. NodeJS安装步骤

【步骤一】:双击node-v16.17.1-x64.msi

图片

【步骤二】:选择安装目录

图片

图片

【步骤三】:验证NodeJS环境变量

NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功， 通过：

node -v

图片

【步骤四】:配置npm的全局安装路径

图片

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set prefix "D:\allsoftware\install\nodejs"

注意：D:\allsoftware\install\nodejs 这个目录是NodeJS的安装目录

【步骤5】:切换npm的淘宝镜像

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set registry https://registry.npm.taobao.org

【步骤6】:安装Vue-cli

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm install -g @vue/cli

注意：这个过程中，会联网下载，可能会耗时几分钟，耐心等待。

图片

4. Vue项目-创建

Vue项目-创建方式

• 命令行

## vue create 项目名称
vue create vue-project01

• 图形化界面

vue ui

本次介绍对初学者比较友好的图形化界面创建项目

4.1. Vue-图形化界面项目创建步骤

【步骤一】：打开UI界面

在命令行中，执行如下指令：

vue ui

图片

【步骤二】：创建项目

图片

图片

图片

创建项目的过程，需要联网进行，这可能会耗时比较长的时间，请耐心等待。 windows的命令行，容易卡顿，我们可以敲击一下键盘

图片

最后我们只需要等待片刻，即可进入到创建创建成功的界面，如下图所示：

图片

4.2. vue项目目录结构介绍

我们通过VS Code打开之前创建的vue文件夹，打开之后，呈现如下图所示页面：

图片

vue项目的标准目录结构以及目录对应的解释如下图所示:

图片

其中我们平时开发代码就是在src目录下

4.3. 运行vue项目

那么vue项目开发好了，我们应该怎么运行vue项目呢？

• 通过VS Code提供的图形化界面 ，如下图所示：（注意：NPM脚本窗口默认不显示，可以参考本节的最后调试出来）

图片

点击之后，我们等待片刻，即可运行，在终端界面中，我们发现项目是运行在本地服务的8080端口，我们直接通过浏览器打开地址

图片

最终浏览器打开后，呈现如下界面，表示项目运行成功

图片

4.4. 修改启动端口

对于8080端口，经常被占用，所以我们可以去修改默认的8080端口。我们修改vue.config.js文件的内容，添加如下代码

devServer:{
    port:7000
}

如下图所示，然后我们关闭服务器，并且重新启动

图片

重新启动如下图所示：

图片

补充：NPM脚本窗口调试出来

通过设置/用户设置/扩展/MPM更改NPM默认配置，如下图所示

图片

然后重启VS Code，并且双击打开package.json文件，然后点击资源管理器处的3个小点，勾选npm脚本选项，如图所示

图片

然后就能都显示NPM脚本小窗口了。