博客网站SpringBoot+Vue项目练习

news2024/11/24 7:52:22

博客网站SpringBoot+Vue简单案例

前言

学了vue后一直没用找到应用的机会，在Github上找到了一个看起来比较友好的项目（其实具体代码我还没看过）。而且这个项目作者的readme文档写的也算是比较好的了。

项目链接：https://github.com/rawchen/Blog

该项目主要运用技术

核心框架：Spring Boot
安全框架：Spring Security
Token 认证：jjwt
持久层框架：MyBatis
分页插件：PageHelper
NoSQL缓存：Redis
Markdown 转 HTML：commonmark-java
离线 IP 地址库：ip2region
定时任务：quartz
UserAgent 解析：yauaa

项目外部文件夹解析

在这里插入图片描述

根目录下的子目录：
blog-api：这是博客API服务的代码目录，包含了API接口的开发文件。
blog-cms：这是博客内容管理系统（CMS）的代码目录，用于管理博客文章和页面等内容。
blog-view：这是博客前端展示的代码目录，负责将博客的内容呈现给用户。
独立文件：
blog.sql：这是一个数据库脚本，用于创建或更新博客的数据库。
README.md：这是一个标记为“MD”的Markdown文档，提供了关于该项目的基本信息和使用指南。
日志文件：
log：这是一个日志文件夹，里面可能包含了项目运行时的日志文件，用于错误跟踪和性能监控。

API内部软件包视图解析

在这里插入图片描述

先跑跑试试

这个项目时刚从github上扒下来是无法正常跑起来的，因为还需要本地的数据库和脚手架搭建协同完成才能正常运行。

连接本地数据库

因为这个项目本身就有Maven加载，所以不用考虑数据库驱动程序版本的差异，这个IDEA也会自动下载正确驱动版本，你只需要配置好你的用户还有密码。
在这里插入图片描述
然后在application-dev.properties 进行数据库用户名和用户密码的配置，还有一个要注意的问题时，代码刚拿下来的时候的属性文件编码可能并不是UTF-8的，而是一个叫ISO-啥啥的，那个编码是无法正常写入中文的，要自己在设置中，查找文件编码设置，然后把属性文件默认编码改成UTF-8。
在这里插入图片描述

运行SQL语句

作者很贴心地为我们提供了创建数据库的表格以及一组初始数据，在blog.sql文件中。不过要注意的是，我们要先自己创建一个数据库，我创建的数据库名就叫blog，文件里的语句只是创建表格并提供一组初始数据，并且我不太建议在IDEA里面执行这些语句，还是SQLyog等比较方便。
在这里插入图片描述
运行完SQL语句后共有19个表，其实有没有全部成功我也没太注意。

脚手架搭建

在这里插入图片描述
这个项目主要有一个后台管理界面blog-cms，还要一个用户使用界面blog-view，所以我们要需要在这两个文件夹都进行一次操作。
右键打开于终端（前提是已经安装好了node.js环境）
执行命令

npm install

npm（node package manager）：node.js 的包管理器，用于node插件管理（包括安装、卸载、管理依赖等），npm 是随同 node.js 一起安装的包管理工具，能解决 node.js 代码部署上的很多问题。

备注：如果是很久之前就安装了node.js并且当时改的镜像地址是淘宝的话，可能会出现证书过期的报错。
一般有更换镜像地址，清楚缓存和忽略SSL验证（可能会使计算机更容易受到攻击）。
前面一种方法较为推荐，但是我执行一系列命令后还是证书过期，所以干脆选了后者。
方法一：

#最新地址 淘宝最新的镜像
npm config set registry https://registry.npmmirror.com

#清楚缓存，会给出警告，不过没事
npm cache clean --force

方法二：

# 不做验证
npm config set strict-ssl false

然后是

npm run serve

这里也可能有一个报错，主要是新版本的允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响.
在node.js V17以前一些可以正常运行的的应用程序,但是在 V17 版本可能会抛出这个异常。
具体可参考博文
digital envelope routines::unsupported

在这里插入图片描述

最简单的解决办法
找到npm install成功后的package.json文件，然后加入一段配置

注意加配置时，前面的逗号哦

"scripts": {
    "serve": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
  }