手把手教你搭建个人在线技术沉淀文档博客

持续更新：预计开发时间结束时间2022.09.08，博客输出完结时间2022.09.10

第一章 ：从零搭建springboot后端项目
第二章：完善后端架构
第三章：搭建前端项目(基于VUE3+AntDev)
第四章：

本文主要以图文的方式进行讲解，每一章都会有总结和在开发过程中踩过的一些坑来帮助以后避坑，更加通俗易懂。有问题的地方希望各位大佬再评论区批评指正，我会尽快跟进修改完善

---

---

前言

• 使用第三方平台个人博客与独立博客的优缺点
  – 其实使用第三方平台个人博客的优点也是独立博客的缺点，独立博客的优点也是使用第三方平台个人博客的缺点。

• 使用第三方平台个人博客的优点
  – 节省大量的前期投入，包括时间与金钱成本
  – 在不投入推广的情况下，只要自己的博客质量有保证，能带来可观的流量

• 独立博客的优点
  – 独立博客的展示程度与效果本身便是个人能力的直接体现，由于独立博客的独立性，可以作出非常个性化的博客与内容
  – 相比较使用第三方平台的个人博客，独立博客的价值在于自由，不会受到第三方平台的限制

---

第一章 ：从零搭建springboot后端项目（步骤如图进行）

一：搭建IDE项目

创建项目

导入基础依赖

• spring-web项目
• lombok提高开发效率
  

二、将项目交给git管理

交给本地git仓库管理


文件变红，表示已经准备好给git管理了

add添加到暂存区

变绿添加成功

commit将暂存区的代码commit到本地分支，添加一些描述


去创建远程仓库，建议使用gitHub或者gitee（国内建议使用gitee）

创建成功，使用命令行将本地git管理的代码推送远程gitee

使用idea中的命令行输入框【输入以上命令】

会弹框输入账户

push推送成功【命令行显示和远程仓库查询】


使用idea中git查询推送的日志

开发中要有master和dev分支的区分，dev用来开发【先拉新分支】


将该分支推送到远程，并查看结果


到开发分支进行开发【搭建最基本的三层架构】

三、添加热部署，提高开发效率

【1】添加pom依赖

【2】setting编译

【3】第一种，试用idea21版本之前的，勾选运行时编译代码



第二种，21版本的，在setting中

【4】pom文件添加build配置

四、启动banner.txt和日志配置

添加启动类日志打印

• 可以自己添加启动的图案banner.txt【字符图案生成器：http://patorjk.com/software/taag/】
• 添加logback日志，在当前项目的子目录生成log文件夹
  
  添加日志logback

<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>
        encoder>
    appender>

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

    <appender name="ERROR_FILE" class="ch.qos.logback.core.rolling.RollingFileAppender">
        <file>${PATH}/error.logfile>
        <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
            <FileNamePattern>${PATH}/error.%d{yyyy-MM-dd}.%i.logFileNamePattern>
            <timeBasedFileNamingAndTriggeringPolicy class="ch.qos.logback.core.rolling.SizeAndTimeBasedFNATP">
                <maxFileSize>10MBmaxFileSize>
            timeBasedFileNamingAndTriggeringPolicy>
        rollingPolicy>
        <layout>
            <pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} %-5level %-50logger{50}:%-4line %green(%-18X{LOG_ID}) %msg%npattern>
        layout>
        <filter class="ch.qos.logback.classic.filter.LevelFilter">
            <level>ERRORlevel>
            <onMatch>ACCEPTonMatch>
            <onMismatch>DENYonMismatch>
        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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

五、git中.gitignore使用

忽略log文件夹的git管理【.gitignore文件中添加文件夹】

六、第一章坑点总结

一、启动项的位置（启动项只能扫描其所在包中子包的文件原因如下）

解释：跟进@SpringBootApplication注解的源码【@ComponentScan扫描范围】
如果一定要移动类的路径也可以使用@ComponentScan(“com.company”)[指定扫描该包下的文件]@ComponentScan详解

第一章 ：完善后端架构（步骤如图进行）

一、建数据库，连接数据库

这里演示的是navica+本地mysql，后面部署会使用云数据库RDS
1、创建一个数据库（选择utf-8mb4）

2、由于root的权限太大，可以添加并且修改用户权限
2.1=>创建

2.2=>创建新用户

2.3=>修改对该库该用户的增删改查的一些权限

2.4=>测试和用该用户创建

2.5=>

3、使用强大的IDE去连接数据库，便于后面去操作
3.1=》创建新的连接


3.2=》连接成功

3.3=》使用IDE去完成对数据的操作，一些简单的操作就不需要通过navicat这些可视化的工具了，直接用IDE就行了【使用console窗口】

3.4=》使用sql创建一张表

二、定下整体的架构风格

1=》构建整体的一写包结构，后面还会加入一些异常包，公共包等【为后面使用微服务提供良好的编码习惯】整体图后面会贴

三、使用myBatis的代码生成工具，生成基础代码

1、基本数据库工作完成，那么就要使用代码去连接我的数据库了
1.1=》添加pom依赖，连接数据库

1.2=》添加配置文件

1.3=》添加代码生成配置文件【这步是为了使用mybatis的代码生成工具，后期我们需要自己去写一个代码生成工具，因为这个代码不太能适用我们企业生成环境下的需求，自己玩一玩是可以的】

DOCTYPE generatorConfiguration
        PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">

<generatorConfiguration>
    <context id="Mysql" targetRuntime="MyBatis3" defaultModelType="flat">

        
        <property name="autoDelimitKeywords" value="true"/>
        <property name="beginningDelimiter" value="`"/>
        <property name="endingDelimiter" value="`"/>

        
        <plugin type="org.mybatis.generator.plugins.UnmergeableXmlMappersPlugin"/>
        
        <plugin type="org.mybatis.generator.plugins.ToStringPlugin"/>

        
        <commentGenerator>
            <property name="suppressAllComments" value="true"/>
        commentGenerator>
        
        <jdbcConnection driverClass="com.mysql.cj.jdbc.Driver"
                        connectionURL="jdbc:mysql://localhost:3306/ebook?serverTimezone=Asia/Shanghai"
                        userId="book"
                        password="book1234">
        jdbcConnection>

        
        <javaModelGenerator targetProject="src\main\java"
                            targetPackage="com.future.book.domain"/>

        
        <sqlMapGenerator targetProject="src\main\resources"
                         targetPackage="mapper"/>

        
        <javaClientGenerator targetProject="src\main\java"
                             targetPackage="com.future.book.mapper"
                             type="XMLMAPPER"/>

        
        <table tableName="ebook"/>
        
        
        
        
        
    context>
generatorConfiguration>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

1.4=》构建代码生成启动项

1.5=》选择maven

1.6=》run位置配置参数如下

1.7=》启动

1.8=》生成成功

三、后端包结构优化坑点

1、使用mybatis的代码生成工具还是和日常企业中的开发有不一样，所以后面要试着自己写一个
2、使用mybatis的代码生成工具时容易点错启动项，所以在开发中当不使用代码生成时尽量将配置文件注释掉，要用的使用再用。

四、总结

1、coding风格，所以要明确后端的一些包结构，养成良好的编码风格和代码洁癖
2、这章总体来说就是，从0到1：建库=》代码连接数据库的过程，也是我们项目最开始要做的事。设计要一个漂亮的数据库结构也会为后面的开发提供一个好的开始
【其中索引等优化可以后续安装项目需求来建】
3、总体的包结构

这是对第二章第二节的补充部分

补充项.添加一些公共的类和异常处理，这里主要是统一前端返回类，和全局异常处理
全局异常处理
封装统一返回结果

第三章：搭建前端项目(基于VUE3+AntDev)

一、前言

开发工具：IDE
技术栈：VUE3+AntDev

• Vue3文档 - vuejs
  https://www.vue3js.cn/docs/zh/
  Vue核心功能：数据绑定
  Vue CLI文档
  https://cli.vuejs.org/zh/guide/
  Vue CLI = Vue.js + 一堆组件
• AntDev：
  https://2x.antdv.com/components/layout

二、构建环境

1、安装nodejs（略）
2、安装vue（都是在IDE中的Terminal来敲命令行，比cmd方便）

3、查看vue版本，创建vue项目（这里有个小坑，在IDE中使用vue的命令行可能会失败，这章坑点里又解决方案）
4、


5、启动项目

6、安装AntDev框架（这里也有很多坑点，建议先看后面总结【一、安装的位置二、安装的版本】）
1=》cd 到对应的前端文件夹下，再进行安装

2=》main.ts中引入对应框架，并且要使用该框架

3=》使用该框架


后面去开发了

三、了解项目结构

1、前端的整体项目如下

2、解释：

• 2.1
  app.vue时vue中的初始页面，适合将一些公共页面放到其中
  
• 2.2 main.ts将框架的库使用到当前项目，必须使用use（）去使用
  这个还是比较重要的，将index.html, main.ts, app.vue三者关联，要好好理解
  
  解释一下#app的位置
  
  
• 2.3 就和后端的pom文件一样，导入依赖
  
  和上面配合使用，就是版本的东西，平时不用太多关注
  
• 2.4 public文件夹中主要是一些静态资源，使用如下
  
• 2.5 router文件
  
• 3，小总结
  3.1 index.html, main.ts, app.vue三者关联
  3.2 public和assets两个静态资源文件的引用方法
  3.3 public不参与打包
  3.4 assets会被打包
  3.5 index.html引入外部静态文件用<%= BASE_URL %>
  3.6 子文件里的.gitignore文件是会生效的，里面配置的文件规则，是相对当前.gitingore文件所在位置
  3.7 README.md只有根目录下的生效
  3.8 package.json 作用类似于pom.xml
  3.9 eslintrc.js 是一把双刃剑(约等于代码规约，这个编译不通过就起不来后面有坑点会总结)
  3.10 Vue CLI需要编译才能发布

四、使用开发页面

1、使用前端开发，学会使用对结构的查看（IDE的structrue结构工具）

2、其实和java差不多，就是封装的思想，后面会具体到开发中解释

3、解释封装组件（其实和java一样将公共的部分进行封装，就想我们看到的一些网页他们的头部总有一个导航栏，那么这个就是可以封装的，下面可以实战解释一下）【前端不专业，以自己的理解去弄，页面整出来就行，企业中专业的事情还是给专业的人去做吧~~】


4、路由

5、

• router-view的用法
  相当于一个界面占位符（看app.vue的使用，人话：就是我跳别的路由，别的路由的页面会填充这个位置）
• router-link to的用法
  用于页面跳转

小总结：
1、命名要规范，唯一组件使用the-（）
2、组件的封装和使用总共分四步

• 2.1、封装
• 2.2、import组件
• 2.3、components加入组件
• 2.4、在template使用组件

五、坑点

1、安装AntDev框架时，最好按照官网的按照步骤使用适用当前vue版本的稳定版本
2、安装时特别注意，因为我是在IDE中开发的，所以必须进到前端文件夹中进行
在命令行中cd 到前端文件夹中再安装框架，使用框架时记得再main.js中导入相关的依赖
3、eslintrc.js 是一把双刃剑，导致起不来
报错：

解决：

六、总结

1、环境安装+构建vue项目
2、vue项目结构的了解
3、组件封装等价java封装类
4、使用来填充动态页面
5、路由的理解
6、使用AntDev框架开发

---

总结

提示：这里对文章进行总结：

例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。