首页 > 其他分享 >Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建

时间:2023-09-18 15:31:57浏览次数:36  
标签:wiki 10 Spring Boot --- https com

前言:

接下来又得被迫开启新的一门课程的学习了,上半年末尾淘汰又即将拉开序幕【已经记不清经历过多少次考试了】,需要去学习其它领域的技术作为考试内容,我选了spring boot相关技术,所以。。总之作为男人,不能轻易言败,尽力而为,抱怨解决不了任何问题,逆境使人进步,我坚信这点,

效果:

在正式学习之前,需要让自己有动力坚持把它学完,所以提前知道一下最终做出来的产品效果会比较好,这块可以点击此链接进行体验:http://wiki.courseimooc.com/,项目比较“简单”,当然你要将它做出来也不是那么简单的,对于一个纯小白来说,用业务简单一点的项目进行学习反倒更好,因为让你坚持的动力更足,其实springboot这块的入门在之前android架构中接触过:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_02

这也是为啥我选择用它进行考试的原因,压力小点,多少有一点点小基础,不过,一年过去了,基本上又忘得差不多了,因为我平常的工作是移动开发。。所以正好也可以利用这次公司考试的机会再对它进行一个巩固扩展,先简单贴几张效果图:

1、首页:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_03

2、用户管理:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_04

3、电子书管理:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_05

对于纯小白的我来说,要真的前后端都自己搞,有点难~~所以接下来准备攻克它。

新建SpringBoot项目:

接下来就直接开始创建项目了,没有啥好说的,打开IntelliJ IDEA:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_06

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_07

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_08

接下来SpringBoot工程就创建好了,其中为了保证跟课程的版本一致,这里先来将springboot的版本号改一下:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_09

其中它有一个启动类,直接点击运行就可以了:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_10

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_11

接下来在浏览器访问一下:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_12

如果能看到它说明SpringBoot的工程就创建成功了,由于目前还木有写相关的接口,所以报404了。

想当初学习“SSH”来搭建后台项目时是多么的麻烦,现在用Spring Boot来搭建,真是秒秒钟,其中连tomcat服务器都给内嵌好了,真是方便:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_13

项目初始配置:

在正式进行Spring boot开发之前,先有一些项目配置相关的工作需要做一下,下面一一来看一下。

编码配置:

需要将所有的编码都改成utf-8,具体改的地方如下:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_14

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_15

Maven配置:

对于Maven来说,我们可以配置阿里云的镜像,下载jar则会更加快速,就像Android中的gradle通常我们也会引入一些国内的资源镜像,这里需要准备一个settings.xml文件,文件的内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
          xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0     http://maven.apache.org/xsd/settings-1.0.0.xsd">
    <localRepository>/Users/你自己的用户名/.m2/repository</localRepository>

    <pluginGroups>
    </pluginGroups>
    <proxies>
    </proxies>
    <servers>
    </servers>

    <mirrors>
        <mirror>
            <id>alimaven</id>
            <mirrorOf>central</mirrorOf>
            <name>aliyun maven</name>
            <url>http://maven.aliyun.com/nexus/content/repositories/central</url>
        </mirror>

        <mirror>
            <id>alimaven</id>
            <name>aliyun maven</name>
            <url>http://maven.aliyun.com/nexus/content/groups/public</url>
            <mirrorOf>central</mirrorOf>
        </mirror>

        <mirror>
            <id>central</id>
            <name>Maven Repository Switchboard</name>
            <url>http://repo1.maven.org/maven2</url>
            <mirrorOf>central</mirrorOf>
        </mirror>

        <mirror>
            <id>repo2</id>
            <mirrorOf>central</mirrorOf>
            <name>Human Readable Name for this Mirror.</name>
            <url>http://repo2.maven.org/maven2</url>
        </mirror>

        <mirror>
            <id>ibiblio</id>
            <mirrorOf>central</mirrorOf>
            <name>Human Readable Name for this Mirror.</name>
            <url>http://mirrors.ibiblio.org/pub/mirrors/maven2</url>
        </mirror>

        <mirror>
            <id>jboss-public-repository-group</id>
            <mirrorOf>central</mirrorOf>
            <name>JBoss Public Repository Group</name>
            <url>http://repository.jboss.org/nexus/content/groups/public</url>
        </mirror>

        <mirror>
            <id>google-maven-central</id>
            <name>Google Maven Central</name>
            <url>https://maven-central.storage.googleapis.com
            </url>
            <mirrorOf>central</mirrorOf>
        </mirror>

        <!-- 中央仓库在中国的镜像 -->
        <mirror>
            <id>maven.net.cn</id>
            <name>one of the central mirrors in china</name>
            <url>http://maven.net.cn/content/groups/public</url>
            <mirrorOf>central</mirrorOf>
        </mirror>
    </mirrors>

    <profiles>
        <profile>
            <id>jdk-1.8</id>
            <activation>
                <activeByDefault>true</activeByDefault>
                <jdk>1.8</jdk>
            </activation>
            <properties>
                <maven.compiler.source>1.8</maven.compiler.source>
                <maven.compiler.target>1.8</maven.compiler.target>
                <maven.compiler.compilerVersion>1.8</maven.compiler.compilerVersion>
            </properties>
        </profile>
        <profile>
            <id>repository_set</id>
            <repositories>
                <repository>
                    <snapshots>
                        <enabled>false</enabled>
                    </snapshots>
                    <id>public</id>
                    <name>Public Repository</name>
                    <url>http://maven.aliyun.com/nexus/content/groups/public</url>
                </repository>
            </repositories>
            <pluginRepositories>
                <pluginRepository>
                    <releases>
                        <updatePolicy>never</updatePolicy>
                    </releases>
                    <snapshots>
                        <enabled>false</enabled>
                    </snapshots>
                    <id>public</id>
                    <name>Public Repository</name>
                    <url>http://maven.aliyun.com/nexus/content/groups/public</url>
                </pluginRepository>
            </pluginRepositories>
        </profile>

    </profiles>

</settings>

其中注意,需要将这个改成你自己的用户名:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_16

接下来则需要到这块进行设置:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_17

这样配置之后,以后下载jar包就可以走国内的阿里云的镜像,会比较快。 

启动日志优化:

对于Spring Boot控制台的日志,可以加一些人性化的修改。

logback日志样式修改:

这里先准备一个“logback-spring.xml”,放到这个位置:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_18

其内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <!-- 修改一下路径-->
    <property name="PATH" value="./log"></property>

    <appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender">
        <encoder>
<!--            <Pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} %highlight(%-5level) %blue(%-50logger{50}:%-4line) %thread %green(%-18X{LOG_ID}) %msg%n</Pattern>-->
            <Pattern>%d{ss.SSS} %highlight(%-5level) %blue(%-30logger{30}:%-4line) %thread %green(%-18X{LOG_ID}) %msg%n</Pattern>
        </encoder>
    </appender>

    <appender name="TRACE_FILE" class="ch.qos.logback.core.rolling.RollingFileAppender">
        <file>${PATH}/trace.log</file>
        <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
            <FileNamePattern>${PATH}/trace.%d{yyyy-MM-dd}.%i.log</FileNamePattern>
            <timeBasedFileNamingAndTriggeringPolicy class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
                <maxFileSize>10MB</maxFileSize>
            </timeBasedFileNamingAndTriggeringPolicy>
        </rollingPolicy>
        <layout>
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} %-5level %-50logger{50}:%-4line %green(%-18X{LOG_ID}) %msg%n</pattern>
        </layout>
    </appender>

    <appender name="ERROR_FILE" class="ch.qos.logback.core.rolling.RollingFileAppender">
        <file>${PATH}/error.log</file>
        <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
            <FileNamePattern>${PATH}/error.%d{yyyy-MM-dd}.%i.log</FileNamePattern>
            <timeBasedFileNamingAndTriggeringPolicy class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
                <maxFileSize>10MB</maxFileSize>
            </timeBasedFileNamingAndTriggeringPolicy>
        </rollingPolicy>
        <layout>
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} %-5level %-50logger{50}:%-4line %green(%-18X{LOG_ID}) %msg%n</pattern>
        </layout>
        <filter class="ch.qos.logback.classic.filter.LevelFilter">
            <level>ERROR</level>
            <onMatch>ACCEPT</onMatch>
            <onMismatch>DENY</onMismatch>
        </filter>
    </appender>

    <root level="ERROR">
        <appender-ref ref="ERROR_FILE" />
    </root>

    <root level="TRACE">
        <appender-ref ref="TRACE_FILE" />
    </root>

    <root level="INFO">
        <appender-ref ref="STDOUT" />
    </root>
</configuration>

它主要是干了这么几下事:

1、将日志输出风格做了精简:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_19

很明显就跟默认创建SpringBoot的日志输出不一样了,更加精简。

2、error级别的日志会生成本地log文件:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_20

输出的位置在工程的这个目录:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_21

此时运行就可以看到这工程的这块多了相关的文件了:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_22

 

3、日志的堆栈信息也写入文件:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_23

这个文件其实在上面就已经看到了,就是它:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_24

也就是把控制台上看到的信息原封不动的写到日志文件里了。 

增加启动成功日志:

对于SpringBoot的启动在控制台上没有相关访问地址的提示,看一下:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_25

所以,接下来修改一下启动类,加入如下代码行:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_26

package com.cexo.wiki;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.core.env.Environment;

@SpringBootApplication
public class Application {

    private static final Logger LOG = LoggerFactory.getLogger(Application.class);

    public static void main(String[] args) {
        SpringApplication app = new SpringApplication(Application.class);
        Environment env = app.run(args).getEnvironment();
        LOG.info("启动成功!!");
        LOG.info("地址: \thttp://127.0.0.1:{}", env.getProperty("server.port"));
    }

}

然后在这块配置一下服务器的端口号:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_27

此时再启动,就变得人性一些了:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_28

修改启动图案:

最后,修改一下图案,经常看到后端的开发人员在IDE启动时看到默认启动的提示文案不是目前看到的这个:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_29

而是那个阿弥陀佛,永远bug那个,其实这块是可以改的,接下来就是改一个比较人性化一点的图案,做法也比较简单,就是在这个位置新建一个文件:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_30

其中这个图案的内容如下:

___ _____  ___  _    _  ___
  |_  |_   _|/ _ \| |  | |/ _ \
    | | | | / /_\ \ |  | / /_\ \
    | | | | |  _  | |/\| |  _  |
/\__/ /_| |_| | | \  /\  / | | |
\____/ \___/\_| |_/\/  \/\_| |_/


                    _ooOoo_
                   o8888888o
                   88" . "88
                   (| -_- |)
                   O\  =  /O
                ____/`---'\____
              .'  \\|     |//  `.
             /  \\|||  :  |||//  \
            /  _||||| -:- |||||-  \
            |   | \\\  -  /// |   |
            | \_|  ''\---/''  |   |
            \  .-\__  `-`  ___/-. /
          ___`. .'  /--.--\  `. . __
       ."" '<  `.___\_<|>_/___.'  >'"".
      | | :  `- \`.;`\ _ /`;.`/ - ` : | |
      \  \ `-.   \_ __\ /__ _/   .-` /  /
 ======`-.____`-.___\_____/___.-`____.-'======
                    `=---='
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
              Buddha Bless, No Bug !

而这个图案可以上https://patorjk.com/software/taag/#p=display&f=Graffiti&t=Type%20Something%20网站动态生成,比如:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_31

关于这个图案网上可以找,下面运行看一下效果:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_32

注意:如果发现没有生效,记得重新编译一下工程既可。

开发Hello World接口:

前面完成了一些项目的基本配置之后,接下来就可以开发了,由于是纯小白,所以从写一个Hello World接口开始。

1、Application更换一个名称:

也就是它准备改一个名称:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_33

改成带项目前缀的见名之义一点:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_34

2、新建Controller:

对于Spring Boot中接口的实现都是放到Controller中对吧,所以:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_35

里面定义一个简单的测试方法:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_36

而要想让此方法变成一个接口,则需要加注解@RequestMapping,如下:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_37

有了这个注解还不够,还需要在类上加个注解@RestController声明它是一个Controller:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_38

其中还有另一个类似的注解:@Controller:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_39

它其实是返回一个页面,而不是一个字符串,由于现在的前后端都是分离的,所以这个注解通常用不到,基本都是用@RestController来返回接口请求的结果字符串,这里做个了解。

3、运行:

接下来运行看一下:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_40

4、底层探究:

在这个controller编写中用到了两个注解,下面来进一步了解它们。

@RestController:

点开查看一下,发现可以发现它跟@Controller注解是有关系的:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_41

也就是其实我们也可以用标红的这俩注解来代替它,而其中@RequestBody它表示的是用来返回字符串或者JSON对象,所以这也是为啥@RestController它返回的是字符串类型了。

@RequestMapping:

对于一个请求通常来说是分为这四种:GET、POST、PUT、DELETE对吧,那这个注解表示的是所有方式都支持,如果说只想支持GET请求,则需要这样来写:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_42

而其它的方式改下method既可,另外还有一种写法,就是不同的注解对应不同的方式,如下:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_43

这里如果我们改成post请求,在浏览器访问就会报405错了,如下:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_44

这里还是将其还原成GET方式。

@ComponentScan:

有木有想过这么一个问题,就是我们自己写的Controller是如何被Spring给扫描到的呢?其实是这个注解内部有相关的扫码注解:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_45

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_46

接下来做一个实验,来体会一下该注解的用处,就是将Appliation的这个类放到一个新的包名中,如下:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_47

也就是controller不是在WikiApplication所在层级的子包中了,运行再来访问咱们的这个接口,报错了。。

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_48

原因就是由于默认只会扫码Application同一级的类及子包的类,而要想解决此问题,就需要用到这个注解了,如下:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_49

而如果有多个包名需要加入扫描,可以这样写:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_50

这里还是将其还原一下,其中还有一个细节,就是这块报警告了:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_51

这是因为IDE识别不了这个“cexo”的单词,为了不报警告,咱们可以将其加到字典库中,如下:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_52

这样警告就消除了。

使用HTTP Client测试接口:

概述:

目前我们在测试接口时是需要切到浏览器进行访问,另外也可能使用PostMan进行模拟请求,而且浏览器测试只支持get方式,对于post就无法用浏览器来访问了,那有木有一种直接在IDEA中进行接口测试而不用切到其它工具呢?有的,那就是使用它:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_53

如果你熟悉Android,一看到这个HttpClient,就非常的面熟对吧,因为对于Android的网络如果不使用三方框架来写的话也是用的HttpClient。

测试Get请求:

接下来咱们来使用它来测试一下咱们写的Get请求,这里其实可以不用上述的菜单来打开Http Client,其实直接可以这样:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_54

也就是在工程中创建一个http结尾的文件IDE就可以自动识别它是一个http client测试文件,咱们来在里面发起一个GET请求,如下:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_55

测试Post请求:

好,接下来再来模拟一下post请求,先来改一下测试接口:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_56

然后此时重启一下服务器,再来编写测试代码:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_57

输出日志及断言:

其实还有一种用法,就是可以进行日志输出及断言,具体测试代码是如下编写的:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_58

运行貌似报错了:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_59

其实原因是:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_60

所以,这里将Accept给去掉再执行一下:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_61

整个测试成功,是不是非常之方便。

Live Template效率加快利器:

对于这样的测试用例编写,是不是你不一定记得住,而且比较麻烦,其实有一种高效输入测试用例的办法,就是使用IDE的Live Template,也就是将常见的测试代码给弄成一个快捷键:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_62

 

这里新建一个:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_63

试试效果:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_64

是不是非常方便,下面再来把POST请求也弄成一个快捷方式:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_65

POST http://$HOST$/$PATH$
Content-Type:$HEADER_VALUE$

$BODY$

###

效果:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_66

另外对于post请求还有个传参的,这个用得会比较多,所以也将其加入:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_67

POST http://$HOST$/$PATH$
Content-Type:application/x-www-form-urlencoded

$PARAM1$=$VALUE1$&$PARAM2$=$VALUE2$

###

效果:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_68

也就是如果未来对于经常要用的代码,就可以利用这功能将其定义成快捷键,可以大大增加开发效率,这个就看个人的爱好了。

SpringBoot配置文件【自定义配置项】:

默认支持的配置文件:

对于咱们新建的SpringBoot工程中有这么一个配置文件:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_69

接下来就来对这种配置文件进行一个全面的了解,其实不止这么一种配置。

SpringBoot:

application.properties/yml:

除了application.preperties这个配置文件之外,其实还支持yml格式的,也就是:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_70

而它里面的配置内容格式就不是之前preperties的那种了,需要改成它:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_71

为了测试效果,我们将application.perperties中的配置内容给注掉,然后启动看一下这个yml配置文件配置的内容有木有生效:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_72

生效了,那问题来了,对于properties目前只有一个简单的端口配置改成yml格式的比较简单,那如果配置非常复杂,转成yml的工作量就很大了,有木有一种能相互转换的工具呢?有的:https://toyaml.com/index.html

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_73

这样,对于两种风格的配置那就写起来无压力的~~

config/application.properties/yml:

此外,还支持另外两种路径下的配置,也就是将其放到config下:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_74

其优先级,自己可以尝试,这里就做个了解。

SpringCloud:

另外对于SpringCloud架构下的SpringBoot应用,还可以读以下四种配置:

bootstrap.properties/yml:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_75

 

config/bootstrap.properties/yml:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_76

由于SpringCloud目前还没学,所以这里就做一个扩展,bootstrap一般用于动态配置,线上可以实时修改实时生效的配置,一般可配合上nanos使用。这里还是将这些不相关的配置项给删除掉,仅作为一个了解。

自定义配置项:

对于目前的配置项只配了一个服务器的端口属性对吧:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_77

它是SpringBoot内置的配置项,那我如果定义一个自定义的配置项呢,比如:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_78

那在程序中如何能读到该配置内容呢?其实可以这样用:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_79

下面咱们来测试一下看是否真的能读到?启动一下服务器,发现我本机8880端口已经被其它程序占用了:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_80

所以,咱们将端口号改一下,改为8881,再重启貌似就好了,咱们来访问一下:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_81

另外,对于配置项如果没有读到,在启动时则会报错,比如我们将刚才咱们定义的自定义项给注释掉:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_82

启动服务器时就会报:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_83

所以,为了解决自定义配置木有读到时报错的问题,这里其实可以加个默认值,如下:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_84

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_85

 

集成热部署:

目前有一个问题,就是我们只要改动一点小代码,都需要重启服务器才能够生效对吧,很明显这种方式很影响效果,有木有一种方式能不用重启代码也能生效呢?答案就是集成热部署,下面来看一下如何集成。

引入依赖包:

先添加依赖,在这:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_86

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_87

同步一下,此时你会发现这里的依赖库木有指定版本对吧?其实它是依赖于parent的版本的,也就是:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_88

点击它跟进去看一下:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_89

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_90

又有一个parent,再跟进去:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_91

开启静态自动编译:

接下来需要到这进行开启:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_92

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_93

开启动态自动编译:

这个开启是通过双击Shift键,打开下面这个窗口找它

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_94

注意是找Registry,而不是Register哟,然后点击就会到这个界面:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_95

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_spring_96

由于我是使用的IntelliJ IDEA是2021版的,而如果比它要老的版本关于这块设置可能是在这块:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_97

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_sed_98

这块可以根据自己IDE的情况来选择。

测试效果:

至此,热部署就已经配置好了,接下来咱们重启一下程序,然后看一下效果:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_99

可以看到在启动服务器之后,再修改代码时,只需要重启点击它就可以触发重新编译而不用重启服务器:

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建_maven_100

或者按保存也可以触发热部署,具体喜欢哪个可以根据自己的喜爱,这样就可以大大的加快开发测试的效率了。 

总结:

这次Springboot的入门篇主要是在搞环境配置了,具体接口的编写就放到下次继续了。 

标签:wiki,10,Spring,Boot,---,https,com
From: https://blog.51cto.com/u_15456329/7511247

相关文章

  • RestTemplate【Spring 提供的用于访问Rest 服务的模板类】
    RestTemplate基本介绍RestTemplate是Spring提供的用于访问Rest服务的模板类RestTemplate提供了多种便捷访问远程Http服务的方法老韩说明:小伙伴可以这样理解,通过RestTemplate,我们可以发出http请求(支持Restful风格),去调用Controller提供的API接口,就像我们使......
  • sprintboot启动项目 错误: 找不到或无法加载主类 com............
    启动SpringBoot项目时,出现了找不到或无法加载主类的提示,解决的方法: maven信息不正确点击项目的目录,鼠标右键选择Maven->ReloadProject,重新启动项目,解决 ......
  • Spring Boot&Vue3前后端分离实战wiki知识库系统<十三>--单点登录开发二
    接着SpringBoot&Vue3前后端分离实战wiki知识库系统<十二>--用户管理&单点登录开发一继续往下。登录功能开发: 接下来则来开发用户的登录功能,先准备后端的接口。后端增加登录接口:1、UserLoginReq:先来准备用户登录的请求实体:packagecom.cexo.wiki.req;importjavax.validation.co......
  • 解密Spring Boot:JPA vs. MyBatis,哪个更适合你的项目?
    Hello大家好,我是小米!今天我要和大家聊聊一个在Java开发中经常会遇到的问题,那就是如何在SpringBoot项目中区分何时该使用JPA,何时该使用MyBatis。这个问题一直困扰着很多开发者,但其实只要理清一些基本概念和场景,就能轻松解决。废话不多说,让我们一起深入探讨吧!了解JPA和MyBatis首先,让......
  • springboot vue电子班牌系统源码,以云平台、云服务器为基础,融合课程管理、物联控制、
    随着时代进步,数字信息化不断发展,很多学校都开始了数字化的转变。智慧校园电子班牌系统是电子班牌集合信息化技术、物联网、智能化,电子班牌以云平台、云服务器为基础,融合了班级文化展示、课程管理、物联控制、教务管理、考勤管理、素质评价、资源管理、家校互联等一系列应用。实现了......
  • struts2.1 + Spring 3.X + hibernate3.X架构搭建问题记录
    目前正在试图搭建一个SSH的架构,之前在myeclipse8.6+ssh(struts2.1,spring2.5,hibernate3) +mysql+tomcat6.0做过例子,当时有老师带着,遇到问题也都解决了。而且,自己练习单表的增删改查时也能独立完成了。但是现在换成了myeclipse2014+orcle后,就是通不过去,郁闷中:现在想一遍解......
  • Spring,SpringMVC,SpringBoot,SpringCloud有什么区别?
    简单介绍Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架。Spring使你能够编写更干净、更可管理、并且更易于测试的代码。SpringMVC是Spring的一个模块,一个web框架。通过DispatcherServlet,ModelAndView和ViewResolver,开发web应用变得很容易。主要针对的......
  • 深入探讨Spring Cloud Config的分布式事件
    介绍SpringCloudConfig是一个分布式配置管理工具,它可以将应用程序的配置集中管理,并提供了RESTAPI和Web界面来访问这些配置。在分布式系统中,配置管理是非常重要的,因为它可以帮助我们快速地修改应用程序的配置,而不需要重新部署应用程序。在本文中,我们将深入探讨SpringCloudConf......
  • Springboot简单功能示例-4 自定义加密进行登录验证
    springboot-sample介绍springboot简单示例-自定义加密进行登录验证跳转到发行版软件架构(当前发行版)Springboot3.1.3hutoolbcprov-jdk18on安装教程gitclone--branch自定义加密进行登录验证[email protected]:simen_net/springboot-sample.git主要功能使用SM2库......
  • 2023年了,复习了一下spring boot配置使用mongodb
    前言MongoDB是一个基于分布式文件存储的开源数据库系统,使用C++语言编写。它是一个介于关系数据库和非关系数据库之间的产品,具有类似关系数据库的功能,但又有一些非关系数据库的特点。MongoDB的数据模型比较松散,采用类似json的bson格式,可以灵活地存储各种类型的数据MongoDB的优......