Vue.js前端框架项目实战（微课版） 课件 第六章 联调与部署

6.1前后端联调前端框架技术与应用FrontendFrameworks联调与部署在前端开发中，联调和部署是关键环节，确保应用与后端服务有效对接，并完成上线和交付。联调主要包括前后端对接、测试应用功能和性能，而部署则是将经过测试的应用上线供用户使用。本章节将介绍前端开发的联调和部署环节。通过实践开发到部署的全过程，读者将学习如何使用Vue.js实现前后端数据对接，掌握联调与部署的基本方法，并将应用成功部署至生产环境，完成应用系统的上线交付。前言前后端分离是现代软件开发的常用策略，将前端界面与后端数据处理分离，提升开发效率和可维护性。前端团队专注用户界面和交互，常用Vue.js、React等框架；后端团队负责业务逻辑和数据处理，可采用Node.js、Java等技术。前后端通过API接口通信，前端以HTTP请求与后端交互，后端处理后返回数据，这种模式增强应用的可扩展性、灵活性，提升性能和安全性，且服务器或API网关可保护通信，简化维护和更新流程，前后端能独立更新优化。前后端分离在现代Web开发中广受欢迎，支持快速迭代部署，助力团队灵活应对市场和用户需求，前端开发者需掌握前后端联调技术以保障软件开发完整流程。前言1Axios简介2Axios基本用法3模拟后端接口目录|CONTENTAxios是一个基于Promise的HTTP客户端，用于浏览器和Node.js环境中进行网络请求。它是一个流行的网络请求库，以其易用性、功能丰富和强大的错误处理能力而受到前端开发者的青睐。1Axios简介Axios的概念Axios的特点如下：（1）基于Promise：Axios使用Promise来处理异步请求，这使得异步操作更加直观和易于管理。（2）请求拦截：Axios允许在请求发送前后执行拦截器，可以用于修改请求配置、响应数据或取消请求。（3）响应拦截：Axios提供了响应拦截器，可以在响应到达后执行统一的处理逻辑。（4）错误处理：Axios会自动将HTTP错误状态码转换为JavaScript错误，简化了错误处理。（5）取消请求：Axios支持请求取消功能，允许开发者在请求发出后取消正在进行的请求。（6）自动转换JSON：Axios自动转换JSON数据，无需手动解析或序列化。浏览器和Node.js兼容：Axios可以在浏览器和Node.js环境中使用，提供了广泛的兼容性。1Axios简介Axios的特点2Axios基本用法Axios的使用（1）安装Axios在VSCode中打开Vite创建的Vue项目，在终端中输入以下命令，等待执行结束：npminstallaxios完成安装后，Axios就会作为项目的依赖项，就可以在代码中引入它。（2）配置代理在vite.config.js文件中配置xy，来设置开发服务器的代理。具体配置如下：2Axios基本用法Axios的使用以下是每个配置项的解释：'/api'：这是一个路径前缀，表示所有以'/api'开头的请求都会被代理到目标服务器。target:''：目标服务器的地址。所有匹配'/api'前缀的请求都会被转发到这个地址。

这个网址是聚合数据公司提供的API服务的入口，开发者可以通过访问该网址来获取相关接口信息，并利用这些接口开发应用程序，实现各种功能，如获取数据、进行特定操作等。在这里当我们没有可用的后端接口时，可以用该接口服务来进行Axios的学习。changeOrigin:true：这个选项表示是否修改请求头中的Origin字段。设置为true时，代理服务器会将请求头中的Origin字段修改为目标服务器的地址。这在处理跨域请求时非常有用。rewrite:(path)=>path.replace(/^\/api/,'')：这个函数用于重写请求路径。它会将路径中以'/api'开头的部分替换为空字符串。比如，'/api/users'会被重写为users，然后再转发到目标服务器。通过这种配置，可以让开发者在开发环境中方便地处理跨域请求，将前端请求代理到后端服务器，而不需要在前端代码中显式地指定后端服务器的地址，这有助于保持代码的简洁和一致性。2Axios基本用法Axios的使用（3）配置Axios新建文件src/utils/http.js，在该文件中写入以下代码来配置Axios：2Axios基本用法Axios的使用（3）在组件中使用Axios新建文件src/components/Weather.vue，在该文件中写入以下代码来使用Axios：2Axios基本用法Axios的使用（3）在组件中使用Axios另外，我们还需要到路由配置文件src/router/index.js中，配置路由：到主组件src/App.vue中，添加页面入口：3模拟后端接口Mock.js简介在前后端分离的开发模式中，前端开发往往需要依赖后端提供的API接口来获取数据。然而，在开发初期，后端接口可能尚未完成或不稳定，这会给前端开发带来不便。为了提高开发效率，我们可以利用Mock.js来模拟后端接口。Mock.js是一个灵活且轻量级的数据模拟库，它允许开发者定义模拟数据和模拟HTTP请求的响应。通过Mock.js，开发者可以在本地开发环境中模拟真实的后端行为，在没有后端接口的情况下进行开发和测试，从而使得前后端联调测试更加高效和可控。3模拟后端接口Mock.js的应用场景独立开发在后端API未完成时，Mock.js允许前端开发者独立于后端进行开发。在单元测试或集成测试中，Mock.js可以用来模拟后端服务的响应，确保测试的准确性。测试通过模拟后端响应，Mock.js避免了不必要的网络请求，从而提高开发效率。性能优化Mock.js允许你预设各种错误情况，帮助前端开发者在开发中提前处理潜在的后端错误。错误处理3模拟后端接口Mock.js的使用（1）安装Mock.js在项目中安装Mock.js非常简单，可以使用npm来安装，安装命令如下：npminstallmockjs（2）管理模拟接口为了更好地管理模拟数据和请求，建议将所有相关定义集中在一个文件或文件夹中。例如，在src目录下创建一个名为mocks的文件夹，并在其中新建文件src/mocks/index.js，写入以下代码来集中管理所有的模拟数据和请求：另外，还需在主配置文件src/main.js中引入这些模拟数据：import'./mocks';3模拟后端接口Mock.js的使用（3）创建模拟接口通过

Mock.mock(url,type,template)方法来创建模拟接口，其中三个参数分别代表：url：请求路径。type：请求类型，如get、post、delete、put等。template：生成的响应数据，可以是对象或函数。若为函数，则需返回相应数据。Mock.js还提供了Mock.Random工具类，用于生成各种随机数据。Mock.Random方法在数据模板中称为『占位符』，书写格式为：@占位符(参数[,参数])例如：bio:'@csentence(10,20)',//生成随机个人简介，10到20个字之间的一句话3模拟后端接口Mock.js的使用（3）创建模拟接口根据不同功能模块，创建对应的JS文件，例如用户相关接口，我们通过新建文件src/mocks/user.js，并写入以下代码，来创建获取用户信息的模拟接口：这段代码定义了一个模拟的GET请求/api/user，并返回了一个包含用户信息的JSON对象。其中随机生成数据的写法，也可以是下面这种形式：3模拟后端接口Mock.js的使用（4）调用模拟接口新建文件src/views/user/index.vue，在该文件中写入以下代码：3模拟后端接口Mock.js的使用（4）生成随机列表数据下面我们通过开发用户列表和详情页面，来展示Mock.js提供的更多的数据生成方式。首先，在src/mocks/user.js文件中添加以下代码，来随机生成用户列表数据：需要注意的是：在使用Mock.js生成随机列表数据时，务必采用函数形式来生成属性值，以确保每次生成的数据都是动态的，避免因使用静态值而导致列表数据重复。3模拟后端接口Mock.js的使用（4）生成随机列表数据创建两个模拟接口，分别用来获取用户列表数据和根据用户id获取用户信息：需要注意的是：当创建接口并需要从请求URL中提取参数的，应使用正则表达式匹配URL，从而准确获取参数。3模拟后端接口Mock.js的使用（4）生成随机列表数据接下来，创建用户列表和用户详情这两个页面。用户详情组件src/views/user/Detail.vue用户列表组件src/views/user/List.vue3模拟后端接口Mock.js的使用（4）生成随机列表数据到路由配置文件src/router/index.js中，添加以下代码来配置两个页面的路由：最后到主组件src/App.vue中，添加用户列表页面入口：3模拟后端接口Mock.js的使用（4）生成随机列表数据感谢观看前端框架技术与应用FrontendFrameworks6.2项目打包部署前端框架技术与应用FrontendFrameworks联调与部署6.2项目打包部署前端框架技术与应用FrontendFrameworks联调与部署在前端开发中，当我们完成了项目的开发和联调后，接下来重要的一步就是将项目部署到服务器上，以便能够被用户访问。下面，我们将学习如何使用Nginx在本地计算机上部署Vue前端项目。前言1项目打包2基于Nginx部署目录|CONTENT在前端开发中，项目打包是将开发环境下的代码转换为生产环境可部署代码的关键步骤。对于使用Vite创建的Vue项目，打包过程不仅优化了代码，还提高了应用的加载速度和性能。项目打包的主要目的是将开发环境下的代码进行优化和压缩，生成适合生产环境的代码。这包括：代码压缩：减少文件大小，提高加载速度。代码分割：按需加载，减少初始加载时间。资源优化：优化图片、字体等静态资源，提高加载效率。环境变量：设置生产环境变量，确保应用在生产环境中的正确运行。1项目打包（1）项目打包的必要性Vite提供了简单的命令来打包项目。在项目根目录下，运行以下命令：npmrunbuild1项目打包（2）Vite打包命令（3）打包过程清理旧的构建文件：Vite会自动清理dist目录，确保生成的文件是最新的。编译代码：Vite使用Rollup进行代码打包，将Vue组件、JavaScript、CSS等文件编译成生产环境可用的代码。代码会被压缩和优化，生成更小的文件大小。生成静态资源：静态资源（如图片、字体等）会被复制到dist目录，并进行优化处理。例如，图片可能会被压缩，字体文件可能会被转换为更高效的格式。生成HTML文件：Vite会生成一个或多个HTML文件，这些文件包含了打包后的JavaScript和CSS文件的引用。生成的HTML文件会被放置在dist目录中，可以直接部署到服务器。Vite提供了丰富的配置选项，可以在vite.config.js文件中进行自定义配置。以下是一些常见的配置示例：1项目打包（4）配置打包选项本地部署：使用Nginx或其他静态服务器在本地部署项目，例如使用Nginx部署.生产环境部署：将dist目录中的文件上传到生产服务器的静态资源目录。配置生产环境的静态服务器，确保应用能够正确加载静态资源。1项目打包（5）部署打包后的项目打包文件过大：使用代码分割和懒加载技术，减少初始加载时间。优化静态资源，如压缩图片、字体等。打包后页面空白：检查HTML文件中的资源路径是否正确。确保所有静态资源都已正确生成并放置在dist目录中。打包后功能异常：检查打包后的JavaScript和CSS文件是否包含错误。使用浏览器的开发者工具检查网络请求和控制台输出。通过以上步骤，我们可以轻松地将Vite创建的Vue项目打包，用于部署到生产环境，这不仅提高了应用的性能，还确保了用户能够获得最佳的使用体验。（6）常见问题及解决方案Nginx是一款轻量级的高性能Web服务器、反向代理服务器以及电子邮件（IMAP/POP3）代理服务器。它以其高性能、稳定性和低资源消耗而闻名，被广泛应用于各类网站和应用的部署。我们以部署本地计算机为例，演示如何使用Nginx进行前端项目的部署，步骤如下：2基于Nginx部署Nginx是什么首先，我们需要在本地计算机上安装Nginx。从Nginx的官方网站下载适合本地计算机操作系统（本书以Windows系统为例）的版本，如下图所示：将下载得到的压缩包进行解压，可放在计算机任意目录下。在该Nginx目录下，打开命令行工具，输入

nginx-v

命令，会显示Nginx的版本信息。2基于Nginx部署（1）安装Nginx在Nginx目录下，进入conf目录，打开n