openEuler系统管理与运维（AI协同）（微课版）-教案 项目8 部署前后端分离的Web项目

博学谷——让IT教学更简单，让IT学习更有效PAGE12PAGE6《openEuler系统管理与运维》教学设计课程名称：授课年级：授课学期：教师姓名：年月课题名称项目8部署前后端分离的Web项目任务8-1部署数据库服务计划课时5课时教学引入前后端分离已成为现代Web项目开发的主流架构模式，尤其适用于大型应用程序的开发与维护。在前后端分离架构中，前端和后端各自独立开发，极大提高了开发效率和系统可扩展性。前端通常使用现代化的JavaScript框架，如Vue.js、React等，后端则常用SpringBoot等框架来处理业务逻辑和数据存储。本项目首先部署了数据库服务，然后打包和运行前后端项目，通过Nginx配置前后端代理转发，确保前端请求能够正确转发到后端服务。教学目标【知识目标】（1）掌握Mariadb关系型数据库的主要功能。（2）掌握Redis缓存数据库的主要功能。（3）掌握Mariadb数据库集群的功能和分类。【技能目标】（1）能够配置Mariadb数据库的主从复制。（2）能够配置Mycat实现主从数据库的读写分离。【素养目标】（1）通过配置Mariadb数据库的主从复制，培养学生的系统高可用性和数据安全性思维。（2）通过配置主从数据库的读写分离，培养学生不断探索和精益求精的品质。教学重点配置Mariadb数据库的主从复制教学难点配置Mycat实现主从数据库的读写分离教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程任务8-1部署数据库服务※通过直接引入的方式导入新课在运行Web应用时，数据库起着至关重要的作用，它不仅存储和管理应用的核心数据，还能够确保数据的一致性和完整性，随着用户量的增加，数据库的性能和高可用性变得尤为重要，技术主管要求王亮部署Mariadb主从数据库、配置Mycat实现Mariadb数据库的读写分离，同时部署Redis缓存数据库，将高频访问、变更不频繁的数据加载到内存中，减轻Mariadb数据库的查询压力。※新课讲解一、教师通过PPT的方式讲解1.Mariadb关系型数据库的主要功能Mariadb是一个功能强大的开源关系型数据库管理系统，提供了丰富的功能来满足不同规模应用的需求。作为MySQL的分支，Mariadb继承了MySQL的优点，并进一步增强了性能、可靠性和扩展性。它支持大规模数据处理，适用于从小型网站到大型企业级应用的各种场景。Mariadb还支持高级特性，如地理空间数据处理、用户自定义函数以及与外部工具的无缝集成。凭借高可用性、丰富的安全功能和强大的性能优化，Mariadb成为开发者和企业的首选数据库解决方案之一，主要功能如下。（1）SQL查询支持（2）事务处理（3）存储引擎（4）复制功能（5）分区表（6)高可用性和灾难恢复(7)全文搜索(8)安全性(9)性能优化2.Redis缓存数据库的主要功能Redis作为一个高效的内存数据存储系统，它将数据直接存储在内存中，实现了极高的读写速度，主要用于加速数据访问、管理会话状态、构建分布式队列和消息中间件，以及实现实时分析等功能，Redis已经成为现代分布式系统、Web应用和高并发场景中的重要组成部分，主要功能如下。（1）缓存（2）会话存储（3）队列系统（4）支持多种数据结构（5）实时数据分析（6）分布式锁（7）排行榜和计数器（8）地理位置服务（9）持久化存储3.Mariadb数据库集群的功能和分类Mariadb集群通过不同的复制技术和架构来优化数据库的性能、可扩展性、容错性和高可用性，通过集群配置，系统能够在高并发的环境下保持高性能、保证数据的一致性和系统的稳定性，Mariadb通常分为以下几种类型。（1）主从复制在Master-Slave架构中，只有主节点能够处理写操作，从节点用于处理读操作。主节点与从节点通过异步复制保持数据一致性。在这种架构中，从节点可以提供读负载均衡，减轻主节点的压力，但由于复制是异步的，可能存在延迟的风险，这种方式适用于读写分离的场景。（2）双主复制Master-Master复制是双主模式，其中两个数据库节点互为主节点，既可以处理写操作，又可以处理读操作。这种模式适合需要高可用性和负载均衡的应用，避免了单点故障，并能有效分担写操作的负载。它通常适用于高并发的应用，但需要注意数据冲突和同步问题。（3）Galera集群Galera集群是一种同步多主复制架构，其中所有节点都可以进行读写操作，并且每个节点都实时同步数据。这种架构能够有效地保证数据一致性，避免了传统主从复制中的延迟和数据不一致问题。GaleraCluster适用于需要高可用性和高数据一致性的应用场景，特别是在多个节点需要同时处理大量读写请求时。（4）NDB集群NDB集群是一种分布式数据库架构，采用了内存存储引擎，以支持极高的读写性能。NDBCluster提供了自动数据分片、故障恢复和节点扩展能力，特别适合大规模、高并发的应用场景，如电商平台、大型社交媒体和实时数据处理系统。NDBCluster通过分布式数据存储和容错机制，确保高可用性和横向扩展能力。二、部署和运维Mariadb数据库1.创建database服务器（1）创建服务器在盘符E上（根据实验环境选择）创建目录任务8-1，在任务8-1目录下创建子目录database，使用openEuler.ova模板机创建名称为database的服务器，保存到E:\任务8-1\database目录下，如图8-2所示。图8-2任务8-1创建database服务器（2）配置database服务器IP地址使用VMwareWorksation打开database服务器，登录后修改ens32网卡配置文件，配置IP地址为4/24，网关为，DNS为，如图8-3所示。图8-3任务8-1配置database服务器的IP地址完成后，重新加载网络连接配置并激活名称为ens32的网卡，查看IP地址，结果如图8-4所示。图8-4任务8-1查看database服务器的IP地址2.安装启动Mariadb数据库（1）安装服务启动并登录database服务器，安装Mariadb数据库的服务端和客户端，如下所示。[root@database~]#dnfinstallmariadbmariadb-server-y（2）防火墙放行服务Mariadb安装完成后，需要将数据库服务的3306端口加入到防火墙放行列表，如下所示。[root@database~]#firewall-cmd--add-port=3306/tcp--permanentsuccess加入完成后，重新启动防火墙，如下所示。[root@database~]#firewall-cmd--reloadsuccess（3）关闭selinux为了确保后续服务配置生效，在终端上临时关闭selinux，命令如下所示。[root@database~]#setenforce0（4）启动服务启动Mariadb服务并设置为开机自启，命令如下。[root@database~]#systemctlstartmariadb&&systemctlenablemariadb3.运维Mariadb数据库（1）初始化数据库在安装并启动Mariadb数据库服务后，执行初始化数据库服务的命令，如下所示。[root@database~]#mysql_secure_installation执行后在Entercurrentpasswordforroot(enterfornone):提示符后输入回车，表时当前密码为空。（2）授权用户远程登录在初始化数据库并配置了root登录数据库的密码之后，在本机使用mysql客户端登录命令登录数据库服务，如下所示。[root@database~]#mysql-uroot-p1其中-uroot表示使用root用户,-p1表示使用密码1，结果如图8-5所示。图8-5任务8-1在本机使用root用户登录数据库服务（3）创建数据库在data_backup客户端上登录数据库服务后，查看当前的数据库，如下所示。MariaDB[(none)]>showdatabases;++|Database|++||information_schema||mysql||performance_schema|++4rowsinset(0.001sec)（4）创建数据表在student表中创建grade表，如下所示。MariaDB[(none)]>usestudent;MariaDB[student]>createtablegrade(idint,mathfloat,physicsfloat,englishfloat);创建完成后，查看当前student库下的数据表，如下所示。MariaDB[student]>showtables;++|Tables_in_student|++|grade|++1rowinset(0.001sec)从结果中可以发现，当前数据库中包含一个名称为grade的数据表。（5）向表中插入数据在student数据库创建了grade表格后，向表中添加一条数据，如下所示。MariaDB[student]>insertintograde(id,math,physics,english)values(1,90.5,88.0,92.0);三、配置Mariadb数据库主从复制为了减轻database数据库的访问压力，可以再创建一台database_slave服务器，安装Mariadb数据库服务，当应用程序访问数据库时，将写操作的任务分配到database服务器上，将读操作的任务分配到database_slave服务器上，实现数据库访问流量的负载分担，以下将database服务器安装的数据库成为主数据库，将database_slave服务器安装的数据库成为从数据库。1.在databaseslave服务器上安装启动mariadb（1）创建服务器在盘符E上（根据实验环境选择）创建目录任务8-1，在任务8-1目录下创建子目录database_slave，使用openEuler.ova模板机创建名称为data_slave的服务器，保存到E:\任务8-1\database_slave目录下，如图8-6所示。图8-6任务8-1创建database_slave服务器（2）配置database_slave服务器IP地址使用VMwareWorksation打开file服务器，登录后修改ens32网卡配置文件，配置IP地址为5/24，网关为，DNS为，如图8-7所示。图8-7任务8-1配置database_slave服务器的IP地址完成后，重新加载网络连接配置并激活名称为ens32的网卡，查看IP地址，结果如图8-8所示。图8-8任务8-1查看database_slave服务器的IP地址（3）安装Mariadb数据库服务使用Xshell工具登录到database_slave服务器上，修改计算机的名称为database_slave，如下所示。[root@localhost~]#hostnamectlset-hostnamedatabase_slave（3）防火墙放行服务httpd软件安装完成后，需要将服务加入到防火墙放行列表，如下所示。[root@database_slave~]#firewall-cmd--add-port=3306/tcp--permanentsuccess加入完成后，重新启动防火墙，如下所示。[root@database_slave~]#firewall-cmd--reloadsuccess（4）关闭selinux为了确保后续服务配置生效，在终端上临时关闭selinux，命令如下所示。[root@database_slave~]#setenforce0（5）启动服务启动httpd服务并设置为开机自启，命令如下。[root@database_slave~]#systemctlstartmariadb&&systemctlenablemariadb(6)服务初始化启动完成后，初始化Mariadb数据库服务，如下所示。[root@database_slave~]#mysql_secure_installation执行后在Entercurrentpasswordforroot(enterfornone):提示符后输入回车，表时当前密码为空。（7）授权root用户远程登录权限为了使root用户可以远程登录到数据库服务，需要授权远程登录的权限，首先登录数据库服务，如下所示。[root@database_slave~]#mysql-uroot-p1登录后，授权root用户的远程登录权限，使root用户具备所有库和表的操作权限.2.配置Mariadb主数据库（1）修改配置文件使用exit退出Mariadb数据库服务，打开Mariadb的配置文件，如下所示。[root@database~]#vi/etc/f.d/f在[mysqld]选项下添加以下3行配置，21、22表示行号+21log-bin=mysql-bin22server-id=1配置完成后，重新启动Mariadb数据库服务。（2）创建复制用户再次使用root用户进入数据库服务，创建一个主从复制用户，名称为repl，密码为1，允许从5（database_slave)主机上连接主数据库，如下所示。MariaDB[(none)]>createuser'repl'@'5'identifiedby'1';授予repl用户所有库和表的复制权限，如下所示。MariaDB[(none)]>grantreplicationslaveon*.*to'repl'@'5';刷新权限，使授权立即生效，如下所示。MariaDB[(none)]>flushprivileges;（3）查看主数据库状态配置完成后，查看主数据库的状态，如下所示。MariaDB[(none)]>showmasterstatus;+++++|File|Position|Binlog_Do_DB|Binlog_Ignore_DB|+++++|mysql-bin.000002|342|||+++++1rowinset(0.000sec)在配置从数据库时，需要使用以上结果中的File字段和Position字段。3.配置Mariadb从数据库（1）修改配置文件在database_slave服务器上，使用vi打开Mariadb的配置文件，如下所示。[root@database_slave~]#vi/etc/f.d/f在[mysqld]选项下，加入以下配置。server-id=2server-id为当前服务器设置唯一的ID，必须与主库不同，确保主从复制的正常运行，配置完成后，重新启动数据库服务，如下所示。[root@database_slave~]#systemctlrestartmariadb（2）设置从数据库连接主数据库使用root用户登录从数据库，如下所示。[root@database_slave~]#mysql-uroot-p1执行以下命令，配置从数据库到主数据库的连接。MariaDB[(none)]>changemastertomaster_host='4',master_user='repl',master_password='1',master_port=3306,master_log_file='mysql-bin.000002',master_log_pos=342;QueryOK,0rowsaffected(0.005sec)配置完成后，启动复制，如下所示。MariaDB[(none)]>startslave;完成后，查看从数据库复制状态信息，命令如下。MariaDB[(none)]>showslavestatus\G;结果如图8-9所示。图8-9任务8-1查看从数据库复制状态信息从结果中可以发现，Slave_IO_Running和Slave_SQL_Running的值都为Yes，表示从数据库的复制进程运行正常。4.验证主从复制（1）在主数据库服务上创建db1数据库使用root用户登录database服务器上的数据库服务，如下所示。[root@database~]#mysql-uroot-p1创建数据库，名称为db1，如下所示。MariaDB[(none)]>createdatabasedb1;（2）查看从数据库服务上的数据库在从数据库服务上，查看数据库信息，如下所示。MariaDB[(none)]>showdatabases;++|Database|++|db1||information_schema||mysql||performance_schema|++4rowsinset(0.000sec)从结果中发现，从数据库服务上已经存在db1数据库了，说明主从复制已经配置成功了。四、配置Mycat实现主从数据库的读写分离配置了Mariadb主从数据库之后，通过配置Mycat可以将数据库的写操作分配到主数据库，数据库的读操作分配到从数据库，实现流量的负载分担。1.配置数据库集群（1）上传Mycat工具到database数据库由于机器资源有限，所以将Mycat工具直接部署到database数据库上，上传教材资源项目6中的mycat-server.tar.gz到database的/root目录下，如下所示。[root@database~]#lsanaconda-ks.cfgmycat-server.tar.gz上传完成后，解压缩文件，如下所示。[root@database~]#tar-zxfmycat-server.tar.gz解压缩完成后，查看/root目录，发现mycat目录已经解压成功了，如下所示。[root@database~]#lsanaconda-ks.cfgmycatmycat-server.tar.gz（2）配置主从数据库使用vi打开mycat/conf/schema.xml配置文件，如下所示。[root@database~]#vimycat/conf/schema.xml使用:%d删除所有内容后，复制如图8-10内容到文件中，配置文件会在教学资源中提供。图8-10任务8-1配置集群主从数据库（3）创建mycat用户设置主库和从库的读写分离之后，还需要配置客户端登录mycat的用户名和密码，使用vi打开server.xml配置文件，如下所示。[root@database~]#vimycat/conf/server.xml使用:%d清除内容后，输入如图8-11所示内容。图8-11任务8-1配置mycat_db数据库的用户和密码（4）启动mycatmycat是由java语言编写的，所以首先安装java的运行环境，如下所示。[root@database~]#dnfinstall-yjava-1.8.0-openjdk安装完成后，启动mycat，如下所示。[root@database~]#./mycat/bin/mycatstart启动后，查看mycat的启动状态，如下所示。[root@database~]#./mycat/bin/mycatstatusMycat-serverisrunning(18195).完成后，重新启动防火墙。[root@database~]#firewall-cmd--reloadsuccess2.验证读写分离（1）客户端登录mycat在database服务器上，使用mysql命令登录mycat主从数据库，如下所示。[root@database~]#mysql-umycat-p1-h-P8066其中-umycat指明了连接mycat的用户名是mycat，-p1指明了密码为1,-h表明mycat在本地部署，-P8066指明了连接的端口号是8066，连接完成后，查看数据库信息，如图8-12所示。图8-12任务8-1查询当前的数据库从结果中发现，当前的数据库名称为mycat_db，即在schema.xml文件中配置的schemaname值，后端对应真实的主从数据库db1。（2）验证写入操作①在database上启用数据库日志在复制的会话上，使用root用户登录Mariadb服务，如下所示。[root@database~]#mysql-uroot-p1开启全局日志配置，如下所示。MariaDB[(none)]>SETGLOBALgeneral_log='ON';完成后，使用tail-f命令观察数据库服务日志变化，如下所示。[root@database~]#tail-f/var/lib/mysql/database.log②mycat服务执行写操作在登录mycat服务的终端上，使用mycat_db数据库，如下所示。MySQL[(none)]>usemycat_db;创建一个数据表test，如下所示。MySQL[mycat_db]>createtabletest(idint,valvarchar(255));向其中写入2条数据，如下所示。MySQL[mycat_db]>insertintotest(id,val)values(1,'mycatwrite');MySQL[mycat_db]>insertintotest(id,val)values(2,'mycatwrite');在复制的会话中，查看database数据库服务的日志，过滤mycat的内容，如下所示。[root@database~]#cat/var/lib/mysql/database.log|grepmycat在结果中可以发现以下内容。1090Query insertintotest(id,val)values(1,'mycatwrite')1085Query insertintotest(id,val)values(2,'mycatwrite')说明mycat已经将写操作分配给database主数据库服务了。（3）验证读操作①查看主从复制效果使用root用户登录database_slave从数据库服务，如下所示。[root@database_slave~]#mysql-uroot-p1使用db1数据库，如下所示。MariaDB[(none)]>usedb1;查看db1数据库中的表，如下所示。MariaDB[db1]>showtables;++|Tables_in_db1|++|test|从结果中发现，database_salve从数据库已经将主数据库中test表复制到本地。②启用数据库日志在database_slave上启用数据库日志，如下所示。MariaDB[db1]>SETGLOBALgeneral_log='ON';③mycat服务执行读操作在mycat服务登录终端，查询数据表内容，如下所示。MySQL[mycat_db]>select*fromtest;+++|id|val|+++|1|mycatwrite||2|mycatwrite|+++在database_slave从数据库服务器上查看过滤查询日志，如下所示。[root@database_slave~]#cat/var/lib/mysql/database_slave.log|grep"select*"可以观察到如下内容。1081Query select*fromtest说明mycat服务已经将读操作分配到database_slave从数据库服务器了。五、使用智能体安装配置Redis缓存数据库当应用使用Redis缓存数据库后，可以将高频访问、变更不频繁的数据加载到内存中，从来减轻Mariadb数据库的查询压力，实现快速查询和响应，以下使用智能体来安装和配置Redis缓存数据库。创建redis服务器（1）创建服务器在任务8-1目录下创建子目录redis，使用openEuler.ova模板机创建名称为redis的服务器，保存到E:\任务8-1\redis目录下，如图8-14所示。图8-14任务8-1创建redis服务器（2）配置redis服务器IP地址使用VMwareWorksation打开file服务器，登录后修改ens32网卡配置文件，配置IP地址为6/24，网关为，DNS为，如图8-15所示。图8-15任务8-1配置redis服务器的IP地址完成后，重新加载网络连接配置并激活名称为ens32的网卡，查看IP地址，结果如图8-16所示。图8-16任务8-1查看redis服务器的IP地址大模型提问打开“智能运维助手”智能体，在连接大语言模型和IP地址为6的redis服务器之后，在“问题输入”提示框中输入问题。输入完成后，单击“提问”按钮，大语言模型返回命令到终端输出，结果如图8-17所示。图8-17任务5-2大模型返回问题结果大模型返回的配置中，首先安装了redis服务，然后设置了任务主机都可以通过密码1访问，防火墙放行了redis服务的6379端口，启动了redis服务，使用&&链接命令的目的是保证所有命令都能按序执行。执行命令单击“执行命令”按钮，执行大语言模型返回的命令，结果如图8-18所示。图8-18任务8-1执行大模型返回配置验证效果打开database_slave服务器，首先安装redis服务，如下所示。[root@database_slave~]#dnfinstallredis-y安装完成后，登录位于6上的redis服务，如下所示。[root@database_slave~]#redis-cli-h6-p6379-a1其中redis-cli作为客户端登录命令，-h指定了登录的服务器地址，-p指定了登录的端口号，-a指定了登录的密码，登录后，使用info查看redis服务信息，结果如图8-19所示。图8-19任务8-1使用info命令查看redis服务信息从结果中可以发现，登录成功后，使用info命令成功返回了redis服务的信息。※归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。※布置作业教师通过超星学习通平台布置本节课作业以及下节课的预习作业教学小结本任务中介绍了SpringBoot项目打包和部署，由于SpringBoot项目需要使用Mariadb和Redis服务，所以一定要启动数据库服务并正确配置项目与数据库的连接。课题名称项目8部署前后端分离的Web项目任务8-2部署Springboot后端项目计划课时3课时教学引入前后端分离架构将前端和后端的开发解耦，能够有效提高开发效率和团队协作水平，因此在企业级项目中越来越受到青睐。王亮近期为一家公司部署基于SpringBoot和Vue的前后端分离项目（若依管理系统），项目主管要求他首先完成SpringBoot后端项目的部署工作，确保后端服务的正确运行。教学目标【知识目标】（1）了解前后端分离项目优势。（2）掌握SpringBoot开发工具的特点。（3）掌握Maven工具的功能。【技能目标】（1）能够配置后端项目与数据库和缓存连接。（2）能够打包并运行后端项目。【素养目标】（1）通过配置后端项目与数据库和缓存连接，培养遇到新问题时，能够快速学习和适应的素养。（2）通过打包并运行后端项目，培养学生对技术发展的敏感度和适应能力。教学重点配置后端项目与数据库和缓存连接教学难点打包并运行后端项目教学方式任务驱动，案例教学教学过程任务8-2部署Springboot后端项目※通过直接引入的方式导入新课前后端分离架构将前端和后端的开发解耦，能够有效提高开发效率和团队协作水平，因此在企业级项目中越来越受到青睐。王亮近期为一家公司部署基于SpringBoot和Vue的前后端分离项目（若依管理系统），项目主管要求他首先完成SpringBoot后端项目的部署工作，确保后端服务的正确运行。※新课讲解教师通过PPT的方式讲解。1、前后端分离项目优势前后端分离项目是一种软件开发架构模式，它将应用的前端和后端功能分别实现，并通过API进行通信。这种架构模式的主要特点和优势包括。（1）独立开发与部署前端和后端可以独立开发，使用不同的技术栈和开发工具。前端可以使用现代的JavaScript框架（如React、Angular、Vue.js）开发用户界面，而后端可以使用各种后端语言和框架（如Node.js、JavaSpringBoot、PythonFlask等）处理业务逻辑和数据存储。（2）松耦合前后端分离架构降低了前端和后端之间的耦合度。前端只需关注用户界面和用户体验，后端则专注于数据处理、业务逻辑和安全性。（3）提升开发效率分离后，团队可以并行开发，加快整体项目的开发速度。前端开发人员可以专注于界面设计和交互逻辑，而后端开发人员则专注于服务端逻辑和数据管理。（4）灵活性和可扩展性前后端分离架构使得系统更容易扩展和维护。可以根据需求独立扩展前端或后端的功能，而不影响整体系统的稳定性和运行效率。（5）适应多平台需求由于前后端分离，前端可以轻松适配不同的终端设备和平台，如Web、移动端等，而后端则只需处理业务逻辑和数据服务，为不同平台提供统一的接口。2.SpringBoot开发工具的特点SpringBoot是SpringFramework的一个重要子项目，旨在简化Java应用程序的开发，与传统的Spring开发方式相比，SpringBoot消除了繁琐的配置工作，提供了一个开箱即用的开发环境，使开发者能够快速启动并构建Java应用程序，核心特点如下。（1）简化配置管理(2)无代码生成（3）起步依赖（4）内嵌服务器3.Maven工具的功能Maven是一个功能强大的构建工具，它的核心功能包括自动化构建、依赖管理、标准化项目结构、插件扩展和持续集成支持。通过使用Maven，开发者可以更高效地管理项目，确保构建过程的一致性，减少手动操作，提高代码质量。(1)依赖管理Maven最革命性的功能是其强大的依赖管理机制，它在pom.xml配置文件集中声明项目所依赖的所有外部库，Maven会自动从本地缓存、公司服务器、远程仓库下载这些依赖项，智能地处理它们之间的依赖关系，解决了传统手动管理Jar包时版本冲突、缺失、难以协作等难题。（2）标准化构建Maven预设了清晰的构建生命周期，其中包含如验证、编译、测试、打包、安装、部署等多个阶段。开发者无需编写复杂的构建脚本，只需输入简单的命令（如mvncleanpackage），Maven就会自动执行该命令之前的所有阶段，极大地简化了构建流程。（3）项目结构与多模块管理Maven强制约定了一套标准的项目目录结构，所有遵循此约定的项目都拥有相同的布局，这使得开发者能够快速理解任何Maven项目。（4）生态扩展Maven拥有一个极其丰富的插件生态系统，完成代码质量检查、生成项目站点、打包镜像等多种需求。Maven能够基于源代码和测试报告，动态生成详细的项目文档、测试覆盖率报告、依赖关系列表等，提供一个全面的项目信息视图，极大地便利了项目管理和团队协作。二、配置后端项目的数据库和缓存连接1.创建后端项目服务器（1）创建java服务器在盘符E上（根据实验环境选择）创建目录任务8-2，在任务8-2目录下创建子目录java，使用openEuler.ova模板机创建名称为java的服务器，保存到E:\任务8-2\java目录下，如图8-20所示。图8-20任务8-2创建java服务器（2）配置服务器IP地址使用VMwareWorksation打开java服务器，登录后修改ens32网卡配置文件，配置IP地址为9/24，网关为，DNS为，如图8-21所示。图8-21任务8-2配置java服务器的IP地址完成后，重新加载网络连接配置并激活名称为ens32的网卡，查看IP地址，结果如图8-22所示。图8-22任务8-2查看java服务器的IP地址2.创建项目数据库并导入数据（1）创建数据库使用VMwareWorkstaion打开任务8-1中创建的database和database_slave服务器，在database服务器上，登录Mariadb数据库管理系统，如下所示。[root@database~]#mysql-uroot-p1登录成功后，创建名称为ry的数据库，并指定该数据库使用utf8mb4字符集，如下所示。MariaDB[ry]>createdatabaserycharactersetutf8mb4collateutf8mb4_unicode_ci;（2）导入数据①在主数据库上创建数据库并导入数据上传教学资源中提供的ruoyi.zip项目文件到root目录下，使用unzip命令解压缩ruoyi.zip文件，结果如下所示。[root@database~]#lsanaconda-ks.cfgmycatmycat-server.tar.gzruoyiruoyi.zip其中ruoyi目录是解压缩后的项目目录，查看项目中的sql文件，如下所示。[root@database~]#lsruoyi/sql/quartz.sqlry_20250522.sql登录Mariadb管理系统后，使用ry数据库，如下所示。MariaDB[(none)]>usery;通过source命令导入ry_20250522.sql文件,如下所示。MariaDB[ry]>source/root/ruoyi/sql/ry_20250522.sql②在从数据库上验证主从复制在database_slave服务器上登录Mariadb管理系统，如下所示。[root@database_slave~]#mysql-uroot-p1查看数据库，如下所示。MariaDB[(none)]>showdatabases;++|Database|++|db1||information_schema||mysql||performance_schema||ry|++从结果发现，从数据库已经同步了ry数据库。3.修改后端项目配置文件（1）上传项目使用VMwareWorkdation打开java服务器，通过Xshell工具登录到java服务器，修改计算机的名称为java，如下所示。[root@localhost~]#hostnamectlset-hostnamejava查看ruoyi目录内容，如下所示。[root@java~]#lsruoyibinLICENSEREADME.mdruoyi-commonruoyi-generatorruoyi-systemry.batsqldocpom.xmlruoyi-adminruoyi-frameworkruoyi-quartzruoyi-uiry.sh其中ruoyi-common、ruoyi-generator、ruoyi-system、ruoyi-framework、ruoyi-quartz、ruoyi-admin都是后端项目模块目录，ruoyi-admin是主应用模块，ruoyi-ui是前端项目目录。（2）配置后端项目与Mariadb数据库连接打开项目连接数据库的配置文件，如下所示。[root@java~]#viruoyi/ruoyi-admin/src/main/resources/application-druid.yml打开文件后，修改主数据库的连接地址、数据库名称、用户名、密码，打开从数据库，配置登录的用户名和密码，如图8-23所示。图8-23任务8-2修改连接主数据库和从数据库的配置文件完成后保存配置，由于SpringBoot项目中集成了主从数据库的读写分离功能，所以这里并没有使用mycat服务。（3）配置后端项目与redis缓存连接使用VMwareWorkstaion打开项目6中创建的redis服务器，在java服务器上，打开项目配置文件，如下所示。[root@java~]#viruoyi/ruoyi-admin/src/main/resources/application.yml打开后，查看第19行内容，如下所示。19port:8080表明服务启动后，监听的是8080端口，移动到67行，修改连接redis的配置，如图8-24所示。图8-24任务8-2增加连接redis缓存的配置完成后保存配置。三、打包并运行后端项目1.配置基础环境（1）安装Java项目运行环境在8.2.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代码的运行环境。（2）配置Maven工具环境变量①上传并解压缩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的版本信息，结果如图8-25所示。图8-25任务8-2查看maven工具版本2.打包运行项目（1）打包项目进入到后端项目的源码目录，如下所示。[root@java~]#cdruoyi使用mvn命令打包项目，如下所示。[root@javaruoyi]#mvncleanpackage-Dmaven.test.skip=true构建完成后，结果如图8-26所示。图8-26任务8-2打包构建成功（2）运行项目进入到后端项目的主应用模块目录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（3）防火墙放行8080端口由于该项目运行后，会监听8080端口的访问，所以需要配置防火墙放行tcp协议的8080端口，如下所示。[root@javatarget]#firewall-cmd--add-port=8080/tcp--permanentsuccess[root@javatarget]#firewall-cmd--reloadsuccess（4）验证效果打开一个测试服务器，这里选择已经开启的database服务器，在database服务器上使用curl命令测试java服务器上启动的应用，结果如图8-27所示。图8-27任务8-2成功访问后端项目服务从结果中可以发现，在database服务器上已经能够成功的访问java服务器上的后端项目服务了。※归纳总结教师回顾本节课所讲的知识，并通过测试题的方式引导学生解答问题并给予指导。※布置作业教师通过超星学习通平台布置本节课作业以及下节课的预习作业教学小结本任务中介绍vue.js前端项目的打包和部署，使用智能体配置了前端和后端代理。课题名称项目8部署前后端分离的Web项目任务8-3部署Vue.js前端项目计划课时3课时教学引入在成功部署了后端管理系统后，项目主管要求王亮部署若依管理系统的前端项目，王亮首先需要构建若依管理系统的前端代码，生成静态资源文件，并将其部署到Nginx服务器上，通过在Nginx配置中设置反向代理规则，将前端请求转发到后端API接口，使前端能够正确获取后端数据，配置完成后测试整个系统，确保前后端能够正常交互。教学目标【知识目标】（1）了解Vue.js前端开发框架的特点。（2）掌握JavaScript项目的包管理工具。【技能目标】（1）能够配置打包前端项目代码。（2）能够配置前后端代理转发。【素养目标】（1）通过打包前端项目代码，培养学生独立分析和解决问题的素养。（2）通过配置前后端代理转发，培养学生理解事物之间的关系和拆解问题的能力。教学重点配置打包前端项目代码教学难点配置前后端代理转发教学方式课堂教学以PPT讲授为主，并结合多媒体进行教学教学过程任务8-3部署Vue.js前端项目※通过直接引入的方式导入新课在成功部署了后端管理系统后，项目主管要求王亮部署若依管理系统的前端项目，王亮首先需要构建若依管理系统的前端代码，生成静态资源文件，并将其部署到Nginx服务器上，通过在Nginx配置中设置反向代理规则，将前端请求转发到后端API接口，使前端能够正确获取后端数据，配置完成后测试整个系统，确保前后端能够正常交互。※新课讲解一、教师通过PPT的方式讲解1.Vue.js前端开发框架的特点Vue.js是一个渐进式的JavaScript框架，主要用于构建用户界面和单页应用。Vue.js提供了简洁而强大的组件，使开发者可以高效、灵活地构建现代Web应用。以下是Vue.js框架的主要特点。（1）组件化开发Vue.js的组件是应用的基本构建块，将HTML、CSS和JavaScript封装在一个独立的单元中，形成一个独立的功能模块。组件之间通过props属性和events事件进行通信，有效地提高代码的复用性和可维护性。（2）指令和事件处理Vue.js提供了丰富的指令，如v-if、v-for、v-bind和v-model等，允许开发者在模板中通过简洁的语法来动态绑定数据到DOM元素的属性，控制DOM元素的显示与隐藏，实现表单控件的双向数据绑定。（3）声明式渲染与数据绑定Vue.js提供了声明式渲染的功能，允许开发者通过模板语法将数据与DOM结构直接绑定。通过Vue的双向数据绑定，使视图（UI）和模型（数据）保持同步。这种数据绑定方式大大简化了开发者的工作，使得开发过程更加直观和高效。（4）生态系统和插件支持Vue.js拥有丰富的生态系统，提供了大量的官方插件和第三方库，帮助开发者实现各种功能。这些插件和工具大大简化了开发流程，使得开发者可以专注于业务逻辑，而不必从头开始构建每个功能。2.Javascript项目的包管理工具(1)NPM包管理工具NPM（NodePackageManager）是JavaScript项目的包管理工具，提供管理JavaScript项目依赖、自动化执行脚本等功能，简化了开发和部署流程，具体功能如下。①依赖包管理npm的核心功能之一是管理项目的依赖包。在JavaScript项目中，常常需要使用到第三方的库或工具，开发者可以使用npminstall<package-name>命令来安装项目所需的包。②版本管理npm通过package.json文件来管理项目的依赖和版本，确保项目在不同的开发环境和部署环境中使用一致的依赖版本，避免了版本冲突和不一致的问题。③发布和管理npm不仅仅是一个包管理工具，它还允许开发者将自己编写的JavaScript包发布到npm的公共或私有仓库中，以便其他开发者使用。④脚本管理与执行npm提供了强大的脚本管理功能，开发者可以在package.json文件中定义脚本命令。这些命令可以用于执行各种常见任务，如启动服务器、运行测试、构建项目等。(2)Yarn包管理工具Yarn也是JavaScript包管理工具，它优化了npm中的多个性能瓶颈，设计目标是提高安装速度、保证依赖的稳定性，并提供更好的团队协作支持,解决了包管理中遇到的一些问题，如重复下载、版本冲突等，主要特点如下。①更快的安装速度Yarn在安装依赖时使用并行处理，显著提高了安装效率。它还会缓存已下载的包，后续安装时不需要重新下载依赖，提升了开发体验。②版本一致性Yarn使用yarn.lock文件锁定每个依赖包的确切版本，确保团队中的每个人都能安装相同版本的依赖，避免了由版本差异引发的错误。③离线支持Yarn会缓存已安装的包，因此即使在没有网络连接的情况下，开发者也可以继续安装依赖。④安全性Yarn在安装包时进行校验，确保包的完整性，防止包被篡改或损坏。二、打包前端项目1.创建前端项目服务器（1）创建ui服务器在盘符E上（根据实验环境选择）创建目录任务8-3，在任务8-3目录下创建子目录ui，使用openEuler.ova模板机创建名称为ui的服务器，保存到E:\任务8-3\ui目录下，如图8-28所示。图8-28任务8-3创建ui服务器（2）配置服务器IP地址使用VMwareWorksation打开java服务器，登录后修改ens32网卡配置文件，配置IP地址为9/24，网关为，DNS为，如图8-29所示。图8-29任务8-3配置ui服务器的IP地址完成后，重新加载网络连接配置并激活名称为ens32的网卡，查看IP地址，结果如图8-30所示。图8-30任务8-3查看ui服务器的IP地址2.安装项目依赖（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安装依赖在前端项目的package.json文件中，列出了运行项目的依赖包，需要使用Npm或Yarn等包管理工具下载安装这些依赖，这里采用Npm工具，Node.js环境自带了Npm包管理工具，所以首先安装Node.js环境，如下所示。[root@ui~]#dnfinstallnodejs-y进入到/ruoyi/ruoyi-ui前端项