SpringBoot+Vue3 项目实战，打造企业级在线办公系统（含笔记）

SpringBoot加vue3在线办公の系统の项目实战K_E下——栽

Download: SpringBoot+Vue3 项目实战，打造企业级在线办公系统

SpringBoot入门实战

Spring Boot 是由 Pivotal 团队提供的全新框架。Spring Boot 是所有基于 Spring Framework 5.0 开发的项目的起点。Spring Boot 的设计是为了让你尽可能快的跑起来 Spring 应用程序并且尽可能减少你的配置文件。

设计目的： 用来简化新 Spring 应用的初始搭建以及开发过程。

从最根本上来讲，Spring Boot 就是一些库的集合，它能够被任意项目的构建系统所使用。它使用 “习惯优于配置” （项目中存在大量的配置，此外还内置一个习惯性的配置）的理念让你的项目快速运行起来。用大佬的话来理解，就是 spring boot 其实不是什么新的框架，它默认配置了很多框架的使用方式，就像 maven 整合了所有的 jar 包，spring boot 整合了所有的框架，总结一下及几点：

（1）为所有 Spring 开发提供一个更快更广泛的入门体验。

（2）零配置。无冗余代码生成和XML 强制配置，遵循“约定大于配置” 。

（3）集成了大量常用的第三方库的配置， Spring Boot 应用为这些第三方库提供了几乎可以零配置的开箱即用的能力。

（4）提供一系列大型项目常用的非功能性特征，如嵌入式服务器、安全性、度量、运行状况检查、外部化配置等。

（5）Spring Boot 不是Spring 的替代者，Spring 框架是通过 IOC 机制来管理 Bean 的。Spring Boot 依赖 Spring 框架来管理对象的依赖。Spring Boot 并不是Spring 的精简版本，而是为使用 Spring 做好各种产品级准备

Spring Boot 在应用中的角色 Spring Boot 是基于 Spring Framework 来构建的，Spring Framework 是一种 J2EE 的框架（什么是 J2EE？） Spring Boot 是一种快速构建 Spring 应用 Spring Cloud 是构建 Spring Boot 分布式环境，也就是常说的云应用 Spring Boot 中流砥柱，承上启下

在这里插入图片描述

环境准备 （1）JDK 环境必须是 1.8 及以上，传送门：jdk1.8.191 下载 （2）后面要使用到 Maven 管理工具 3.2.5 及以上版本，所以会先介绍 Maven 的安装与配置 （3）开发工具建议使用 IDEA，也可以 MyEclipse，为了实现一站式服务，传送门：

IDEA 破解（原文是PyCharm的，步骤完全一样，Webstorm 也可以破解） MyEclipse 2018 安装与破解 Maven 安装与环境变量配置 （1）Maven 安装：

在官网下载：maven.apache.org/download.cg… 在这里插入图片描述

（2）Maven 配置环境变量：

解压到一个路径，然后配置环境变量：

新建变量名：MAVEN_HOME 变量值：D:serverapache-maven-3.6.0（这是我的 MAVEN 路径） 编辑变量名：Path 在最前面加上：%MAVEN_HOME%bin （3）检查是否配置成功：

在命令行输入：

mvn -V

• 1

然后会一大堆东西： 在这里插入图片描述

（4）配置 maven 仓库：

1.打开 maven 文件夹下的 config 文件夹下的 settings.xml； 2.找到 localRepository 标签，此时是被注释掉的，我们解除注释，然后配置一个路径，例如：D:/space/MavenRepository/maven_jar，这样以后 MAVEN 管理下载的jar 包都会在这个路径下。 【注意】：注意结点的位置，先找到注释掉的部分，贴在下面

<localRepository>D:spaceMavenRepositorymaven_jar</localRepository>

• 1

在这里插入图片描述

3.配置远程仓库，找到 mirrors 标签

<!--远程仓库--> <mirror> 　　<id>aliyun</id> 　　<name>aliyun Maven</name> 　　<mirrorOf>*</mirrorOf> <url>http://maven.aliyun.com/nexus/content/groups/public/</url> </mirror> 在这里插入图片描述

4.当然我们需要先建这样一个目录结构，然后还要把settings.xml 复制一份到 D:/space/MavenRepository 下

在这里插入图片描述

（5）在 idea 配置 maven： 点击【File】>【Settings】>搜索【Maven】，按截图配置安装目录和选择刚刚 settings 配置文件； 在这里插入图片描述

选择完settings之后，本地仓库自动改成settings文件中配置的；点击apply，再点击ok即配置完成。

使用 idea 快速搭建 Spring Boot 第一步：新建 Spring Initializr 项目：

在这里插入图片描述

（1）选择 Spring Initializr （2）选择 SDK，点击【new】这里就是使用 JAVA SDK 要求版本 1.8+，选择你默认安装在 C:Program FilesJavajdk1.8.0_191 目录： 在这里插入图片描述

（3）然后选择默认的 url （不用管）点击【Next】：

在这里插入图片描述

（4）然后填写一下项目的信息：

在这里插入图片描述

（5）先勾选上 Web 依赖： 在这里插入图片描述

（6）勾选 SQl 下的 MySQL，MyBatis 依赖： （根据自己的项目选择，后面可加） 在这里插入图片描述

（7）选择好项目的位置，点击【Finish】：

在这里插入图片描述

（7）如果是第一次配置 Spring Boot 的话可能需要等待一会儿 IDEA 下载相应的 依赖包，默认创建好的项目结构如下：

在这里插入图片描述

项目结构还是看上去挺清爽的，少了很多配置文件，我们来了解一下默认生成的有什么：

SpringbootApplication： 一个带有 main() 方法的类，用于启动应用程序 SpringbootApplicationTests：一个空的 Junit 测试了，它加载了一个使用 Spring Boot 字典配置功能的 Spring 应用程序上下文 application.properties：一个空的 properties 文件，可以根据需要添加配置属性 pom.xml： Maven 构建说明文件 第二步：HelloController

在 【main/java/com.xpwi.springboot】包下新建一个【HelloController】：

在这里插入图片描述

`package com.xpwi.springboot;

import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;

/**

• 测试控制器

• @author: @肖朋伟CSDN

• @create: 2018-11-18 */ @RestController public class HelloController {

  @RequestMapping("/hello") public String hello() { return "Hello Spring Boot!"; } }`

第三步：利用 IDEA 启动 Spring Boot

SpringBoot+Vue3 项目实战安装部署

1、Linux环境准备 有条件买云服务器，没条件用VMWare。我这里用后者演示。 如果用阿里云服务器唯一区别就是需要添加安全组，其他都大同小异。 我用的CentOS7 （1）首先安装系统镜像参考：虚拟机安装CentOS7教程 （2）配置网络 Net或桥接 参考我的另一篇文章：Net模式&桥接模式的配置教程 这里演示用Net模式

2、Nginx安装与配置 1）官网下载Linux版本的：nginx.org/en/download.... 图片.png

在Linux官网下载对应版本地nginx压缩包（以tar.gz结尾），将其上传到Linux服务器上，使用如下命令解压 nginx 安装包(根据下载的nginx版本更换对应版本)：

tar -zxvf nginx-1.18.0.tar.gz 进入nginx-1.18.0目录

cd nginx-1.18.0 make 编译安装它:

./configure make make install 安装 zlib 库

cd ~ wget www.zlib.net/zlib-1.2.11… tar -zxvf zlib-1.2.11.tar.gz cd zlib-1.2.11 ./configure make make install 安装 SSL

yum -y install openssl openssl-devel 安装 pcre

yum -y install pcre-devel 或者这一条命令搞定：

yum -y install make zlib-devel gcc-c++ libtool openssl openssl-devel nginx 服务的常用命令

cd /usr/local/nginx/sbin/ ./nginx 启动 ./nginx -s stop 停止 ./nginx -s quit 安全退出 ./nginx -s reload 重新加载配置文件 ps aux|grep nginx 查看nginx进程 这个时候访问虚拟机配置的 ip 地址，如果可以打开下面这样一个页面，说明 nginx 启动成功： 图片.png

配置nginx.conf文件

vim /usr/local/nginx/conf/nginx.conf 增加如下配置：

server {
        listen       80;
        server_name  localhost;
        #重要
        location / {
            root /usr/local/nginx/html/dist;  #前端项目存放在nginx中的位置
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;  #防止刷新后自动跳到自带404页面
        }

在修改了配置文件后需要重新加载配置文件

/usr/local/nginx/sbin/nginx -s reload 至此nginx就配置好了。

3、安装 JDK1.8 前提：

#查看默认安装的jdk [root@huagang ~]# rpm -qa|grep openjdk -i java-1.7.0-openjdk-headless-1.7.0.261-2.6.22.2.el7_8.x86_64 java-1.8.0-openjdk-headless-1.8.0.262.b10-1.el7.x86_64 java-1.8.0-openjdk-1.8.0.262.b10-1.el7.x86_64 java-1.7.0-openjdk-1.7.0.261-2.6.22.2.el7_8.x86_64 #如果显示如上，先卸载 [root@huagang ~]# rpm -e --nodeps java-1.7.0-openjdk-headless-1.7.0.261-2.6.22.2.el7_8.x86_64 [root@huagang ~]# rpm -e --nodeps java-1.8.0-openjdk-headless-1.8.0.262.b10-1.el7.x86_64 [root@huagang ~]# rpm -e --nodeps java-1.8.0-openjdk-1.8.0.262.b10-1.el7.x86_64 [root@huagang ~]# rpm -e --nodeps java-1.7.0-openjdk-1.7.0.261-2.6.22.2.el7_8.x86_64 [root@huagang ~]# rpm -qa|grep openjdk -i [root@huagang ~]# 1、官网下载JDK1.8：www.oracle.com/java/t...

2、上传到Linux的 /home/ 文件下

3、在/home下创建一个目录java， 然后将压缩包解压到 java目录中

tar -zxvf jdk-8u331-linux-x64.tar.gz -C java 4、将java目录移动到 /usr/local 下

mv java /usr/local 5、配置环境变量（classpath现在不需要配了，配置其他两项就可以了）

vim /etc/profile #java environment export JAVA_HOME=/usr/local/java/jdk1.8.0_331 export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar export PATH=$PATH:$JAVA_HOME/bin 6、让配置文件生效

source /etc/profile 7、java -version 进行验证是否成功

4、安装 MySQL5.7 1、查看是否安装过 rpm -qa |grep -i mysql 查看是否安装mysql安装包 或者 yum list installed | grep mysql 如果有内容说明已经按照 卸载命令： yum remove mysql-community-common-5.7.20-1.el7.x86_64 yum remove mysql-community-client-5.7.20-1.el7.x86_64 yum remove mysql57-community-release-el7-11.noarch yum remove mysql-community-libs-5.7.20-1.el7.x86_64 yum removemysql-community-server-5.7.20-1.el7.x86_64

2 下载并安装MySQL官方的 Yum Repository wget -i -c dev.mysql.com/get/mysql57…

3、安装MySql yum -y install mysql57-community-release-el7-10.noarch.rpm

注意：（在执行安装MySQL服务器命令可能会遇见这个问题） 源 “MySQL 5.7 Community Server” 的 GPG 密钥已安装,但是不适用于此软件包。请检查； 解决方法： rpm --import repo.mysql.com/RPM-GPG-KEY…

4、处理完问题后开始安装MySQL服务器。 yum -y install mysql-community-server

先要安装iptables服务 yum install iptables-services 5、检查是否开机启动Mysql systemctl is-enabled mysqld.service

6、设置开机启动Mysql systemctl enable mysqld.service

7.启动Mysql服务 systemctl start mysqld.service

7、查看默认密码 grep 'temporary password' /var/log/mysqld.log 我这显示 2022-04-29T06:29:20.081674Z 1 [Note] A temporary password is generated for root@localhost: flgJSNaSa4)s （如果没有生成 清理残留内容 rm -rf /var/lib/mysqllue 重启MySQL服务器 systemctl restart mysqld 重新生成初始密码）

8、第一次使用上面的初始密码登录 mysql -uroot -p

9.mysql5.7以后密码不能太简单，我们可以把密码策略改了，这样就可以用123456了 set global validate_password_length=6; set global validate_password_policy=0; ALTER USER 'root'@'localhost' IDENTIFIED BY '123456';

10、开启mysql的远程访问（注意：下面命令开启的IP是 192.168.0.1，如要开启所有的，用%代替IP）： grant all privileges on . to 'root'@'192.168.0.1' identified by '123456' with grant option; grant all privileges on . to 'root'@'%' identified by '123456' with grant option; 然后再输入下面命令（mysql 新设置用户或更改密码后需用flush privileges刷新MySQL的系统权限相关表,否则会出现拒绝访问） flush privileges;

11查看字符编码 show variables like 'chara%';

修改编码： vim /etc/my.cnf [mysqld] character_set_server=utf8 init_connect='SET NAMES utf8'

保存退出并重启mysql服务 systemctl restart mysqld.service

12、如果防火请没有关闭需要开放端口3306，如果防火请关闭了就不需要这一步了 #查询端口是否开放 firewall-cmd --query-port=3306/tcp 开放3306端口 firewall-cmd --permanent --add-port=3306/tcp 移除端口 firewall-cmd --permanent --remove-port=3306/tcp #重启防火墙(修改配置后要重启防火墙) firewall-cmd --reload 参数解释 1、firwall-cmd：是Linux提供的操作firewall的一个工具； 2、--permanent：表示设置为持久； 3、--add-port：标识添加的端口； 做完以上配置后，可以尝试用Navicat连接这个数据库。 然后执行项目的SQL文件导入数据，我相信大家都ok，这就不再演示。

5、Vue项目打包部署 1）修改main.js中的baseURL的localhost以及所有有涉及到localhost的地方均改为申请到的阿里云服务器的公网IP。

2）然后在终端执行命令：

npm run build 打包后的文件在生成的dist文件夹中，前端项目打包完成。

3）将打包好的dist文件夹上传到/usr/local/nginx/html/中

4）启动nginx，在浏览器中访问前端项目。

6、Spring Boot 项目打包部署 1）修改properties.yml文件中的localhost为申请到的阿里云服务器的公网IP或者虚拟机中配置的IP。检查是否需要修改数据库密码。检查无误后打包。 2）使用maven打包成jar包 图片.png

3）将打包好的jar文件上传到Linux服务器中的/home/javaProject，然后执行运行命令：

java -jar cecms.jar 4）让项目一直在云服务器上运行的linux其实一个命令就可以搞定（想了解更多看最下面）：

nohup java -jar 包名.jar &

查看进程编号

ps -ef | grep 包名

杀死进程

kill -9 进程编号