0
点赞
收藏
分享

微信扫一扫

SpringBoot+Vue3 项目实战，打造企业级在线办公系统 学习总结

南柯Taylor 2022-03-20 阅读 42
springredisdockerWindows系统/运维

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

学习完之后，总结一下。

经过对SpringBoot及VUE的学习，我们已经对他们的开发流程有了一定的了解，我们将这两个框架进行整合，并实现一个简单的前后的开发案例“HelloWorld”。这个案例我们主要实现：（1）系统的登陆、退出；（2）用户的查询、新增、修改、删除。系统架构如下图所示：

从架构图中可以看到前端UI采用VUE框架开发， vue框架整合了mock、validator、vuex等组件。后端包括：控制层、业务服务层和数据访问层，基于SpringBoot2开发，控制层主要实现了rest的http服务以及权限控制；业务服务层主要用于实现业务逻辑，同时也具备了日志、事物、缓存等功能；数据访问层采用mybatis框架实现。本节案例开发采用mysql作为数据库。
3.1 后端开发
3.1.1 创建工程
后端框架采用SpringBoot2+mybatis+redis整合框架开发，可以参照我们在SpringBoot开发的第一个工程，我们创建一个helloworld的后端工程。结构如下：
3.1.2 工程配置
SpringBoot工程的主要配置文件包括maven的POM文件和application.properties配置文件。
pom文件内容为：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.5.RELEASE</version>
<relativePath/>
</parent>
<modelVersion>4.0.0</modelVersion>
<artifactId>helloworld</artifactId>
<packaging>jar</packaging>
<version>1.0.1.RELEASE</version>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
<lombok.version>1.16.18</lombok.version>
<commons-lang3.version>3.8.1</commons-lang3.version>
<commons-collections.version>3.2.1</commons-collections.version>
<redis.version>2.9.0</redis.version>
<fastjson.version>1.2.21</fastjson.version>
<swagger2.version>2.2.2</swagger2.version>
<oracle.version>11.2.0.3</oracle.version>
<mysql.version>8.0.11</mysql.version>
<druid-starte.version>1.1.1</druid-starte.version>
<junit.version>4.12</junit.version>
<log4j.version>1.2.15</log4j.version>
<net.minidev.json-smart.version>2.2.1</net.minidev.json-smart.version>
<net.minidev.asm.version>1.0.2</net.minidev.asm.version>
<httpclient.version>4.5.2</httpclient.version>
<shiro.version>1.4.0</shiro.version>
<shiro-redis.version>3.1.0</shiro-redis.version>
<mybatis-spring.version>1.3.2</mybatis-spring.version>
<mybatis-mapper.version>3.4.0</mybatis-mapper.version>
<mybatis-pagehelper.version>1.2.10</mybatis-pagehelper.version>
<guava.version>18.0</guava.version>
<jwt.verson>0.9.0</jwt.verson>
<docker.host>http://127.0.0.1:2375</docker.host>
<docker.repostory>127.0.0.1:5000</docker.repostory>
<docker.registry.name>zone7</docker.registry.name>
<docker.plugin.version>0.4.13</docker.plugin.version>
<skipDockerBuild>false</skipDockerBuild>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<exclusions>
<!-- 移除嵌入式tomcat插件，需要增加servlet-api，打包时打开注解 -->
<!--<exclusion>-->
<!--<groupId>org.springframework.boot</groupId>-->
<!--<artifactId>spring-boot-starter-tomcat</artifactId>-->
<!--</exclusion>-->
<!-- 移除springboot自带的logback日志管理 -->
<exclusion>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-logging</artifactId>
</exclusion>
</exclusions>
</dependency>
<!-- 移除嵌入式tomcat插件，需要增加servlet-api，打包时打开注解 -->
<!--<dependency>-->
<!--<groupId>javax.servlet</groupId>-->
<!--<artifactId>javax.servlet-api</artifactId>-->
<!--<version>3.1.0</version>-->
<!--<scope>provided</scope>-->
<!--</dependency>-->
<!-- 引入依赖之后spring.aop.auto默认开启，不需要添加@EnableAspectJAutoProxy来启动 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-aop</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-cache</artifactId>
</dependency>
<!--安全验证相关-->
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-security</artifactId>
<version>2.1.2.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.security.oauth</groupId>
<artifactId>spring-security-oauth2</artifactId>
<version>2.0.14.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.security.oauth.boot</groupId>
<artifactId>spring-security-oauth2-autoconfigure</artifactId>
<version>2.1.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.security</groupId>
<artifactId>spring-security-jwt</artifactId>
<version>1.0.10.RELEASE</version>
</dependency>
<!--解析JWT-->
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>${jwt.verson}</version>
</dependency>
<!-- 安全相关 -->
<!-- log4j2日志管理 (springboot1.4以上不支持log4j) -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-log4j2</artifactId>
</dependency>
<dependency>
<groupId>com.lmax</groupId>
<artifactId>disruptor</artifactId>
<version>3.4.1</version>
</dependency>
<!-- log4j2日志管理-->
<!--junit-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>net.minidev</groupId>
<artifactId>json-smart</artifactId>
<version>2.2.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>net.minidev</groupId>
<artifactId>asm</artifactId>
<version>1.0.2</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>${junit.version}</version>
</dependency>
<!--junit-->
<!-- mybatis -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>${mybatis-spring.version}</version>
</dependency>
<!-- mybatis -->
<!-- mybatis通用mapper -->
<dependency>
<groupId>tk.mybatis</groupId>
<artifactId>mapper</artifactId>
<version>${mybatis-mapper.version}</version>
</dependency>
<!-- mybatis通用mapper -->
<!-- mybatis pagehelper -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper-spring-boot-starter</artifactId>
<version>${mybatis-pagehelper.version}</version>
</dependency>
<!-- mybatis pagehelper -->
<!--druid-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>${druid-starte.version}</version>
</dependency>
<!--druid-->
<!--fastjson-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>${fastjson.version}</version>
</dependency>
<!--fastjson-->
<!--oracle-->
<dependency>
<groupId>com.oracle</groupId>
<artifactId>ojdbc6</artifactId>
<version>${oracle.version}</version>
</dependency>
<!--oracle-->
<!-- mysql -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>${mysql.version}</version>
</dependency>
<!-- mysql -->
<!--redis-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-redis</artifactId>
</dependency>
<!--redis-->
<!-- mongodb -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-mongodb</artifactId>
</dependency>
<!-- mongodb -->
<!--swagger2-->
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger2</artifactId>
<version>${swagger2.version}</version>
</dependency>
<dependency>
<groupId>io.springfox</groupId>
<artifactId>springfox-swagger-ui</artifactId>
<version>${swagger2.version}</version>
</dependency>
<!--swagger2-->
<!--shiro-->
<dependency>
<groupId>org.apache.shiro</groupId>
<artifactId>shiro-spring</artifactId>
<version>${shiro.version}</version>
</dependency>
<!--shiro redis支持-->
<dependency>
<groupId>org.crazycake</groupId>
<artifactId>shiro-redis</artifactId>
<version>${shiro-redis.version}</version>
</dependency>
<!--shiro-->
<!--httpclient-->
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
<version>${httpclient.version}</version>
</dependency>
<!--httpclient-->
<!-- 监控 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-actuator</artifactId>
</dependency>
<!--guava-->
<dependency>
<groupId>com.google.guava</groupId>
<artifactId>guava</artifactId>
<version>${guava.version}</version>
</dependency>
<!--guava-->
<!-- rabbitmq -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-amqp</artifactId>
<version>2.1.0.RELEASE</version>
</dependency>
<!-- rabbitmq -->
<!--lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>${lombok.version}</version>
</dependency>
<!--lombok-->
<!--commons-->
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>${commons-lang3.version}</version>
</dependency>
<dependency>
<groupId>commons-collections</groupId>
<artifactId>commons-collections</artifactId>
<version>${commons-collections.version}</version>
</dependency>
<dependency>
<groupId>commons-beanutils</groupId>
<artifactId>commons-beanutils</artifactId>
<version>1.9.3</version>
</dependency>
<!--commons-->
<dependency>
<groupId>dom4j</groupId>
<artifactId>dom4j</artifactId>
<version>1.6.1</version>
</dependency>
<dependency>
<groupId>net.sf.ezmorph</groupId>
<artifactId>ezmorph</artifactId>
<version>1.0.6</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-autoconfigure</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
<build>
<finalName>app</finalName>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<source>${java.version}</source>
<target>${java.version}</target>
<encoding>${project.build.sourceEncoding}</encoding>
</configuration>
</plugin>
<!-- 设置资源文件的编码方式 -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-resources-plugin</artifactId>
<version>2.4.3</version>
<executions>
<execution>
<phase>compile</phase>
</execution>
</executions>
<configuration>
<encoding>${project.build.sourceEncoding}</encoding>
</configuration>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<fork>true</fork>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.20.1</version>
<configuration>
<!-- 不指定单元测试 -->
<skipTests>true</skipTests>
</configuration>
</plugin>
<plugin>
<groupId>com.spotify</groupId>
<artifactId>docker-maven-plugin</artifactId>
<version>${docker.plugin.version}</version>
<executions>
<execution>
<id>build-image</id>
<phase>package</phase>
<goals>
<goal>build</goal>
</goals>
</execution>
<execution>
<id>push-image</id>
<phase>deploy</phase>
<goals>
<goal>push</goal>
</goals>
<configuration>
<imageName>${docker.repostory}/${docker.registry.name}/${project.artifactId}:${project.version}</imageName>
</configuration>
</execution>
</executions>
<configuration>
<registryUrl>${docker.repostory}</registryUrl>
<pushImage>true</pushImage>
<dockerHost>${docker.host}</dockerHost>
<dockerDirectory>${project.basedir}/src/main/docker</dockerDirectory>
<imageName>${docker.repostory}/${docker.registry.name}/${project.artifactId}:${project.version}</imageName>
<imageTags>
<imageTag>${project.version}</imageTag>
</imageTags>
<resources>
<resource>
<targetPath>/</targetPath>
<directory>${project.build.directory}</directory>
<include>${project.build.finalName}.jar</include>
</resource>
</resources>
</configuration>
</plugin>
</plugins>
</build>
</project>
4
application.properties配置文件，在这里我们将其配置为dev模式，同时在resources下增加一个application-dev.properties的配置文件，用于配置开发测试期间的参数。
文件application.properties
spring.profiles.active=dev
1
2
文件application-dev.properties
#================​​ server ​=================#

server.port=8080
#server.context-path=/springboot
#================ mybatis ===================#

mybatis.mapper-locations=classpath:mappers/**/*.xml
mybatis.configuration.map-underscore-to-camel-case=true
#============== mybatis pagehelper ============#

pagehelper.helper-dialect=mysql
pagehelper.reasonable=true
pagehelper.support-methods-arguments=true
pagehelper.params=count=countSql
#================ database =================#
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/zone-demo
spring.datasource.username=root
spring.datasource.password=zgq
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
#初始化大小，最小，最大
spring.datasource.initialSize=5
spring.datasource.minIdle=5
spring.datasource.maxActive=20

配置获取连接等待超时的时间

spring.datasource.maxWait=60000

配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒

spring.datasource.timeBetweenEvictionRunsMillis=60000

配置一个连接在池中最小生存的时间，单位是毫秒

spring.datasource.minEvictableIdleTimeMillis=300000
spring.datasource.validationQuery=SELECT 1 FROM DUAL
spring.datasource.testWhileIdle=true
spring.datasource.testOnBorrow=false
spring.datasource.testOnReturn=false

打开PSCache，并且指定每个连接上PSCache的大小

spring.datasource.poolPreparedStatements=true
#================ redis =================#

redis 单节点地址

spring.redis.host=localhost

redis 集群

#spring.redis.cluster.nodes=192.168.177.128:7001,192.168.177.128:7002,192.168.177.128:7003
#spring.redis.cluster.max-redirects=3

Redis 数据库

spring.redis.database=0

Redis 端口

spring.redis.port=6379

Redis 密码

spring.redis.password=

连接池最大连接数（使用负值表示没有限制）

spring.redis.jedis.pool.max-active=8

连接池最大阻塞等待时间（使用负值表示没有限制）

spring.redis.jedis.pool.max-wait=-1

连接池中的最大空闲连接

spring.redis.jedis.pool.max-idle=8

连接池中的最小空闲连接

spring.redis.jedis.pool.min-idle=0

连接超时时间（毫秒）

spring.redis.timeout=3000
#================ cache =================#

spring.cache.type=redis
#================ RabbitMq =================#

spring.rabbitmq.host=localhost
spring.rabbitmq.port=5672
spring.rabbitmq.username=admin
spring.rabbitmq.password=admin
spring.rabbitmq.listener.concurrency=10
spring.rabbitmq.listener.max-concurrency=20
spring.rabbitmq.listener.prefetch=50
#================ RabbitMq 队列配置 =================#

mq.env=local
basic.info.mq.exchange.name=${mq.env}:basic:info:mq:exchange
basic.info.mq.routing.key.name=${mq.env}:basic:info:mq:routing:key
basic.info.mq.queue.name=${mq.env}:basic:info:mq:queue
#================ mongoDB 配置 =================#

spring.data.mongodb.host=localhost
spring.data.mongodb.port=27017
spring.data.mongodb.database=test
#================ slf4j日志配置 =================#

路径

logging.path=/Users/zgq/logs
logging.file=helloworld.log
#location of config file (default classpath:logback.xml for logback)
#logging.config=

levels for loggers, e.g. "logging.level.org.springframework=DEBUG" (TRACE, DEBUG, INFO, WARN, ERROR, FATAL, OFF)

logging.level.com.zone7=INFO
#================ 默认密码 =================#

system.default.password=123456
#================ 监控 =================#
#actuator端口
management.server.port=8310
#修改访问路径，2.0之前默认是/，2.0默认是/actuator
management.endpoints.web.base-path=/actuator
#开放所有页面节点 ，默认只开启了health、info两个节点
management.endpoints.web.exposure.include=*
#显示健康具体信息，默认不会显示详细信息
management.endpoint.health.show-details=always
3.1.3 代码开发
3.1.3.1 用户安全验证
首先我们沿用第一章的SpringBoot工程，在 “/src/main/java/com/zone7/demo/helloworld/config/filter”下新增加一个安全过滤器，在实际应用中可以采用Oauth2、SpringSecurity或者Shiro来实现，这里只使用了session保存用户状态，并通过一个Filter的实现类来获取用户是否处于登陆状态来控制系统的安全访问。代码如下所示：
package com.zone7.demo.helloworld.config.filter;
import com.google.common.collect.Sets;
import com.zone7.demo.helloworld.sys.common.RequestHolder;
import com.zone7.demo.helloworld.sys.vo.SysUserVo;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
import java.util.Set;
/**

  • RequestFilter
  • 请求过滤器
  • 安全认证
  • @author: zone7
  • @time: 2019.02.19

*/
@WebFilter(filterName = "RequestFilter", urlPatterns = "/*")
public class RequestFilter implements Filter {
private static Set<String> URL_WHITE_LIST = Sets.newHashSet();
@Override
public void init(FilterConfig filterConfig) throws ServletException {
//忽略不过旅的路径
URL_WHITE_LIST.add("/unauth");
URL_WHITE_LIST.add("/login");
URL_WHITE_LIST.add("/logout");
URL_WHITE_LIST.add("/sys/unauth");
URL_WHITE_LIST.add("/sys/login");
URL_WHITE_LIST.add("/sys/logout");
URL_WHITE_LIST.add("/static");
URL_WHITE_LIST.add("/actuator");
URL_WHITE_LIST.add("/oauth");//oauth2.0默认接口
URL_WHITE_LIST.add("/api"); // 外部接口采用oauth进行权限验证
}
private boolean isWhiteUrl(String requestUrl){
if (URL_WHITE_LIST.contains(requestUrl)){
return true;
}
for(String str:URL_WHITE_LIST){
if(requestUrl.startsWith(str)){
return true;
}
}
return false;
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) servletRequest;
HttpServletResponse response = (HttpServletResponse) servletResponse;
String requestUrl = request.getRequestURI();
if (isWhiteUrl(requestUrl)) {
filterChain.doFilter(servletRequest, servletResponse);
return;
}
SysUserVo userVo = (SysUserVo) request.getSession().getAttribute("user");
if (userVo == null) {
request.getRequestDispatcher("/unauth").forward(request, response);
return;
}
RequestHolder.add(userVo);
RequestHolder.add(request);
filterChain.doFilter(servletRequest, servletResponse);
}
@Override
public void destroy() {
}
}
3.2 前端开发
采用vue-cli 命令生成工程脚手架（创建命令：vue init webpack helloworld_web），前端工程的名称为“helloworld_web” 。采用IDEA工具打开工程，默认的结构如下图所示：
工程目录默认有了router、compotent、assets，我们还需要增加api、views、store、utils目录。api目录用于存放采用mock实现的前后端交互脚本，views用于存放功能页面vue模板，store用于存放采用vuex实现的状态管理功能，utils用于存放通用工具脚本。工程目录结构如下图所示：

举报

相关推荐

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

spring零配置立即下载Windows系统/运维

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

spring boot后端java

企业级在线办公系统搭建开发环境

物联网智能路由器工业4G路由器上网CPE4G转有线

SpringBoot SSM vue 在线办公系统

Javaspringbootvue后端开发

Vue企业级项目开发axios

javaintellij-idea

企业级API网关学习总结

java

企业级DevOps实战

devops运维

【13章】SpringBoot打造企业级一体化SaaS系统

企业级基础设施商业Java后端开发

[开源]企业级在线办公系统，基于实时音视频完成在线视频会议功能

web安全安全笔记网络安全网络python学习

网盘分享完整SpringBoot与Vue3打造企业级一体化SaaS系统

企业级数据开发者Vue.js前端开发
0 条评论