项目8 部署前后端分离的Web项目

PowerPointDesign2026年主讲人：时间：项目8部署前后端分离的Web项目部署Springboot后端项目部署Vue.js前端项目0102目录CONTENTS

任务思维导图PowerPointDesign任务01部署Springboot后端项目（1）调查任务（2）调查目的调查任务和目的（1）任务背

（2）调查内容（3）分析影响（4）任务步骤（5）报告内容（6）报告格式具体任务要求（1）内容全面性（2）分析深度（3）结构与表达（4）创新性评价标准调查人工智能在生活中的应用（1）了解前后端分离项目优势。（2）掌握SpringBoot开发工具的特点。（3）掌握Maven工具的功能。【知识目标】（1）能能配置后端项目与数据库和缓存连接。（2）能够打包并运行后端项目。【技能目标】（1）通过配置后端项目与数据库和缓存连接，培养遇到新问题时，能够快速学习和适应的素养。（2）通过打包并运行后端项目，培养学生对技术发展的敏感度和适应能力。【素养目标】学习目标前后端分离项目优势前后端分离项目是一种软件开发架构模式，它将应用的前端和后端功能分别实现，并通过API进行通信。这种架构模式的主要特点和优势包括。（1）独立开发与部署前端和后端可以独立开发，使用不同的技术栈和开发工具。前端可以使用现代的JavaScript框架（如React、Angular、Vue.js）开发用户界面，而后端可以使用各种后端语言和框架（如Node.js、JavaSpringBoot、PythonFlask等）处理业务逻辑和数据存储。（2）松耦合前后端分离架构降低了前端和后端之间的耦合度。前端只需关注用户界面和用户体验，后端则专注于数据处理、业务逻辑和安全性。（3）提升开发效率分离后，团队可以并行开发，加快整体项目的开发速度。前端开发人员可以专注于界面设计和交互逻辑，而后端开发人员则专注于服务端逻辑和数据管理。（4）灵活性和可扩展性前后端分离架构使得系统更容易扩展和维护。可以根据需求独立扩展前端或后端的功能，而不影响整体系统的稳定性和运行效率。（5）适应多平台需求由于前后端分离，前端可以轻松适配不同的终端设备和平台，如Web、移动端等，而后端则只需处理业务逻辑和数据服务，为不同平台提供统一的接口。（1）简化配置管理SpringBoot采用外部化配置的方法，将配置信息保存到配置文件中，SpringBoot自动读取这些配置，并根据环境的不同加载不同的配置，开发者还可以通过配置文件、环境变量、命令行参数等方式灵活地调整应用配置，使得开发、测试和生产环境的配置管理变得更加清晰和简便。(2)无代码生成SpringBoot通过约定优于配置的理念，避免了传统框架中的代码生成方式，SpringBoot会自动为用户配置和连接所需的组件，使开发者可以自由编写Java代码。（3）起步依赖为了简化依赖管理，SpringBoot引入Starters（起步）概念，它是一个依赖包集合，用于集成常见功能。如用户可以引入spring-boot-starter-data-jpa加载数据库连接，通过引入spring-boot-starter-web进行web应用开发。通过这种方式，SpringBoot让开发者无需手动配置各个依赖和版本，只需要添加对应的starter，便能自动获得所需的功能组件。（4）内嵌服务器在SpringBoot中，内嵌了Tomcat、Jetty、Undertow等服务器，开发者只需关注应用代码的开发，无需单独配置Web服务器。SpringBoot会自动打包成一个可执行的Jar文件，使得部署变得更加简单，用户只需通过命令行运行该Jar文件即可启动应用。SpringBoot开发工具的特点(1)依赖管理Maven最革命性的功能是其强大的依赖管理机制，它在pom.xml配置文件集中声明项目所依赖的所有外部库，Maven会自动从本地缓存、公司服务器、远程仓库下载这些依赖项，智能地处理它们之间的依赖关系，解决了传统手动管理Jar包时版本冲突、缺失、难以协作等难题。（2）标准化构建Maven预设了清晰的构建生命周期，其中包含如验证、编译、测试、打包、安装、部署等多个阶段。开发者无需编写复杂的构建脚本，只需输入简单的命令（如mvncleanpackage），Maven就会自动执行该命令之前的所有阶段，极大地简化了构建流程。（3）项目结构与多模块管理Maven强制约定了一套标准的项目目录结构，所有遵循此约定的项目都拥有相同的布局，这使得开发者能够快速理解任何Maven项目。（4）生态扩展Maven拥有一个极其丰富的插件生态系统，完成代码质量检查、生成项目站点、打包镜像等多种需求。Maven能够基于源代码和测试报告，动态生成详细的项目文档、测试覆盖率报告、依赖关系列表等，提供一个全面的项目信息视图，极大地便利了项目管理和团队协作。Maven工具的功能必备知识创建后端项目服务器（1）创建java服务器在盘符E上（根据实验环境选择）创建目录任务7-1，在任务7-1目录下创建子目录java，使用openEuler.ova模板机创建名称为java的服务器，保存到E:\任务7-1\java目录下（2）配置服务器IP地址使用VMwareWorksation打开java服务器，登录后修改ens32网卡配置文件，配置IP地址为9/24，网关为，DNS为使用VMwareWorkstaion打开项目6中创建的database和database_slave服务器，在database服务器上，登录Mariadb数据库管理系统，如下所示。[root@database~]#mysql-uroot-p1①在主数据库上创建数据库并导入数据②在从数据库上验证主从复制创建项目数据库并导入数据（1）上传项目（2）配置后端项目与Mariadb数据库连接（3）配置后端项目与redis缓存连接修改后端项目配置文件配置后端项目的数据库和缓存连接在7.1.3中上传的ruoyi目录是后端项目的源代码，需要使用Maven工具打包成可执行代码后，运行在服务器上，无论是运行项目打包后的可执行代码，还是使用Maven工具打包项目，都需要依赖Java运行环境，所以首先安装Java运行环境，如下所示。[root@java~]#dnfinstalljava-21-openjdk-y其中openjdk提供了Java编程语言的核心库和运行时环境，java-21是openjdk的版本，安装完成后，查看openjdk的版本，如下所示。[root@java~]#java--version结果如下所示。openjdk21.0.72025-04-15OpenJDKRuntimeEnvironmentBiSheng(build21.0.7+6)OpenJDK64-BitServerVMBiSheng(build21.0.7+6,mixedmode,sharing)从结果中发现，已经安装成功了Java代码的运行环境。安装Java项目运行环境①上传并解压缩maven工具上传教材资源中提供的apache-maven-3.9.11-bin.tar.gz到/root目录下，安装tar命令，如下所示。[root@java~]#dnfinstalltar-y解压缩apache-maven-3.9.11-bin.tar.gz文件，如下所示。[root@java~]#tarxfapache-maven-3.9.11-bin.tar.gz解压完成后，查看/root目录内容，如下所示。[root@java~]#lsanaconda-ks.cfgapache-maven-3.9.11apache-maven-3.9.11-bin.tar.gzruoyiruoyi.zipapache-maven-3.9.11目录即为加压缩完成后的maven工具目录。②配置环境变量打开系统的全局环境配置文件/etc/profile，如下所示。[root@java~]#vi/etc/profile在文件的末尾增加以下内容。exportMVN_HOME=/root/apache-maven-3.9.11exportPATH=$MVN_HOME/bin:$PATH其中第1行设置了MVN_HOME环境变量，指向Maven工具目录/root/apache-maven-3.9.11，第2行将Maven的bin目录添加到系统的PATH环境变量中，完成后重新加载配置文件，如下所示。[root@java~]#source/etc/profile完成后可以在终端中直接运行mvn命令，无需输入完整路径，如使用mvn--version查看maven的版本信息，结果配置Maven工具环境变量打包并运行后端项目进入到后端项目的源码目录，如下所示。[root@java~]#cdruoyi使用mvn命令打包项目，如下所示。[root@javaruoyi]#mvncleanpackage-Dmaven.test.skip=true其中clean命令会清除先前构建的输出文件，在项目每次构建之前运行clean，确保不会有过时的文件残留，保证构建的干净性。package阶段会执行项目的构建过程，将源码编译成字节码，然后执行其他任务（如资源文件复制、依赖管理等），最终打包生成一个JAR或WAR文件。-Dmaven.test.skip=true:告诉Maven跳过测试阶段，即跳过执行单元测试的过程，仅进行编译和打包的操作。构建完成后，结果打包项目进入到后端项目的主应用模块目录ruoyi-admin，查看目录内容，如下所示。[root@javaruoyi]#cdruoyi-admin[root@javaruoyi-admin]#lspom.xmlsrctarget从结果中发现，已经成功的生成了target目录，进入到target目录并查看内容，如下所示。[root@javaruoyi-admin]#cdtarget/[root@javatarget]#lsclassesgenerated-sourcesmaven-archivermaven-statusnohup.outruoyi-admin.jarruoyi-admin.jar.originalruoyi.log在结果中发现，target目录下生成了ruoyi-admin.jar的文件，启动ruoyi-admin.jar文件，如下所示。[root@javatarget]#nohupjava-jarruoyi-admin.jar>ruoyi.log2>&1&其中java-jarruoyi-admin.jar是核心执行部分，负责启动Java应用；通过nohup保证终端关闭或用户退出登录，进程也不会被中断；>ruoyi.log将程序正常运行的所有输出信息重定向保存到ruoyi.log日志文件中；2>&1确保错误信息也一同被保存到同一日志文件，方便问题排查；最后的&符号让整个命令在后台执行，不占用当前终端界面。运行项目打包并运行后端项目由于该项目运行后，会监听8080端口的访问，所以需要配置防火墙放行tcp协议的8080端口，如下所示。[root@javatarget]#firewall-cmd--add-port=8080/tcp--permanentsuccess[root@javatarget]#firewall-cmd--reloadsuccess防火墙放行8080端口打开一个测试服务器，这里选择已经开启的database服务器，在database服务器上使用curl命令测试java服务器上启动的应用，结果如图从结果中可以发现，在database服务器上已经能够成功的访问java服务器上的后端项目服务了。验证效果打包并运行后端项目部署Vue.js前端项目PowerPointDesign任务02（1）调查任务（2）调查目的调查任务和目的（1）任务背

（2）调查内容（3）分析影响（4）任务步骤（5）报告内容（6）报告格式具体任务要求（1）内容全面性（2）分析深度（3）结构与表达（4）创新性评价标准调查人工智能在生活中的应用（1）了解Vue.js前端开发框架的特点。（2）掌握JavaScript项目的包管理工具。【知识目标】（1）能够配置打包前端项目代码。（2）能够配置前后端代理转发。【技能目标】（1）通过打包前端项目代码，培养学生独立分析和解决问题的素养。（2）通过配置前后端代理转发，培养学生理解事物之间的关系和拆解问题的能力。【素养目标】学习目标必备知识（1）组件化开发Vue.js的组件是应用的基本构建块，将HTML、CSS和JavaScript封装在一个独立的单元中，形成一个独立的功能模块。组件之间通过props属性和events事件进行通信，有效地提高代码的复用性和可维护性。（2）指令和事件处理Vue.js提供了丰富的指令，如v-if、v-for、v-bind和v-model等，允许开发者在模板中通过简洁的语法来动态绑定数据到DOM元素的属性，控制DOM元素的显示与隐藏，实现表单控件的双向数据绑定。TensorVue.js前端开发框架的特点Flow（3）声明式渲染与数据绑定Vue.js提供了声明式渲染的功能，允许开发者通过模板语法将数据与DOM结构直接绑定。通过Vue的双向数据绑定，使视图（UI）和模型（数据）保持同步。这种数据绑定方式大大简化了开发者的工作，使得开发过程更加直观和高效。（4）生态系统和插件支持Vue.js拥有丰富的生态系统，提供了大量的官方插件和第三方库，帮助开发者实现各种功能。这些插件和工具大大简化了开发流程，使得开发者可以专注于业务逻辑，而不必从头开始构建每个功能。TensorVue.js前端开发框架的特点Flow必备知识NPM（NodePackageManager）是JavaScript项目的包管理工具，提供管理JavaScript项目依赖、自动化执行脚本等功能，简化了开发和部署流程，具体功能如下。①依赖包管理npm的核心功能之一是管理项目的依赖包。在JavaScript项目中，常常需要使用到第三方的库或工具，开发者可以使用npminstall<package-name>命令来安装项目所需的包。②版本管理npm通过package.json文件来管理项目的依赖和版本，确保项目在不同的开发环境和部署环境中使用一致的依赖版本，避免了版本冲突和不一致的问题。③发布和管理npm不仅仅是一个包管理工具，它还允许开发者将自己编写的JavaScript包发布到npm的公共或私有仓库中，以便其他开发者使用。④脚本管理与执行npm提供了强大的脚本管理功能，开发者可以在package.json文件中定义脚本命令。这些命令可以用于执行各种常见任务，如启动服务器、运行测试、构建项目等。⑤安全检查和版本控制随着项目的不断发展，依赖包可能会出现安全漏洞，npm可以检查项目中的依赖是否存在已知的安全漏洞，npm还可以帮助开发者管理依赖包的更新，保持项目的最新状态。⑥缓存管理npm使用缓存来加速包的安装过程。当开发者安装依赖时，npm会将下载的包存储在本地缓存中，后续安装相同的包时会直接从缓存中读取，而无需再次下载。NPM包管理工具Yarn也是JavaScript包管理工具，它优化了npm中的多个性能瓶颈，设计目标是提高安装速度、保证依赖的稳定性，并提供更好的团队协作支持,解决了包管理中遇到的一些问题，如重复下载、版本冲突等，主要特点如下。①更快的安装速度Yarn在安装依赖时使用并行处理，显著提高了安装效率。它还会缓存已下载的包，后续安装时不需要重新下载依赖，提升了开发体验。②版本一致性Yarn使用yarn.lock文件锁定每个依赖包的确切版本，确保团队中的每个人都能安装相同版本的依赖，避免了由版本差异引发的错误。③离线支持Yarn会缓存已安装的包，因此即使在没有网络连接的情况下，开发者也可以继续安装依赖。④安全性Yarn在安装包时进行校验，确保包的完整性，防止包被篡改或损坏。Yarn包管理工具(1）创建ui服务器在盘符E上（根据实验环境选择）创建目录任务7-2，在任务7-2目录下创建子目录ui，使用openEuler.ova模板机创建名称为java的服务器，保存到E:\任务7-2\ui目录下（2）配置服务器IP地址使用VMwareWorksation打开java服务器，登录后修改ens32网卡配置文件，配置IP地址为9/24，网关为，DNS为打包前端项目(1）上传项目使用Xshell远程登录工具登录ui服务器后，修改服务器的名称为ui，如下所示。[root@localhost~]#hostnamectlset-hostnameui将教材资源中的ruoyi.zip文件上传到/root目录下，解压缩ruoyi.zip，如下所示。[root@ui~]#unzipruoyi.zip解压缩完成后，在ruoyi目录下的ruoyi-ui就是前端项目目录，查看该目录内容，如下所示。[root@ui~]#lsruoyi/ruoyi-ui/babel.config.jsbinbuildpackage.jsonpublicREADME.mdsrcvue.config.js(2)安装依赖在前端项目的package.json文件中，列出了运行项目的依赖包，需要使用Npm或Yarn等包管理工具下载安装这些依赖，这里采用Npm工具，Node.js环境自带了Npm包管理工具，所以首先安装Node.js环境，如下所示。[root@ui~]#dnfinstallnodejs-y进入到/ruoyi/ruoyi-ui前端项目目录，如下所示。[root@ui~]#cdruoyi/ruoyi-ui/在项目目录下通过Npm命令安装项目依赖，如下所示。[root@uiruoyi-ui]#npminstall--registry=这里在使用npm下载安装依赖时，指定了阿里巴巴提供的国内镜像站，下载和安装包的速度比官方站点更快，等待一会后，成功下载并安装了依赖，保存到项目目录下的node_modules目录，如下所示。[root@uiruoyi-ui]#lsbabel.config.jsbinbuildnode_modulespackage.jsonpackage-lock.jsonpublicREADME.mdsrcvue.config.js安装项目依赖(1）修改配置由于前端和后端部署在不同的服务器，所以需要在前端项目中配置后端服务器的地址，打开项目目录下的隐藏文件.duction，该文件配置生产环境下的环境变量，将文件中第8行内容修改如下。VUE_APP_BASE_API='9:8080（2）打包项目配置文件后，将源代码打包成静态文件，如下所示。[root@uiruoyi-ui]#npmrunbuild:prod完成后，在项目目录中生成了可用于上线部署的dist前端项目目录，如下所示。[root@uiruoyi-ui]#lsbabel.config.jsbinbuilddistnode_modulespackage.jsonpackage-lock.jsonpublicREADME.mdsrcvue.config.js查看dist目录下的内容，如下所示。[root@uiruoyi-ui]#lsdist/favicon.icohtmlindex.htmlindex.html.gzrobots.txtstaticstyles打包项目打包前端项目（1）安装Nginx服务在打包了前端源代码并生成dist前端项目目录后，需要将dist部署到Web服务器上，首先部署Nginx，作为Web服务器，如下所示。[root@uiruoyi-ui]#dnfinstallnginx-yNginx默认网站目录是/usr/share/nginx/html/，将dist目录下的所有内容拷贝到该目录下，如下所示。[root@uiruoyi-ui]#cp-rdist/*/usr/share/nginx/html/在提示是否覆盖index.html文件时，输入y，确认覆盖，如下所示。cp:是否覆盖'/usr/share/nginx/html/index.html'？y安装前端Web服务（3）关闭selinux为了确保后续服务配置生效，在终端上临时关闭selinux，命令如下所示。[root@ui~]#setenforce0为重启后仍然关闭selinux，使用sed-i修改配置文件，如下所示。[root@ui~]#sed-i's/^SELINUX=enforcin