个人博客项目笔记_01
1. 工程搭建
前端的工程运行流程:
进入项目目录执行cmd命令:
若是第一次启动需要依次输入如下命令:
之后直接执行 npm run dev 即可!
1.1 新建maven工程
新建maven工程blog作为父工程,然后在父工程中创建子工程blog-api
向父工程的pom.xml文件中导入依赖。
1.2 配置
- 在子工程的resources文件夹下创建application.properties文件:
mybatis-plus.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl:打印日志
mybatis-plus.global-config.db-config.table-prefix=ms_:标识数据库中表名的前缀为 ms_
- 在com.cherriesovo.blog下创建config包,创建MybatisPlusConfig配置类,用于配置MyBatis-Plus 的分页插件,使得在使用 MyBatis-Plus 进行数据库操作时能够支持分页查询功能:
跨域配置是指在 Web 开发中处理跨域资源共享的设置和策略。当一个网页通过 AJAX 请求获取其他域名下的资源时,如果目标资源所在的域名、协议、端口与当前页面不一致,就会出现跨域请求。为了加强安全性,浏览器会阻止跨域请求,除非目标服务器允许来自其他域的请求。
在 Vue 项目中,当前端代码部署在一个域名下,而后端 API 服务部署在另一个域名下时,就会涉及到跨域请求。为了解决跨域问题,需要在后端服务器上进行跨域配置,以允许特定来源(origin)的请求访问资源。
常见的跨域配置包括:
- 设置响应头:后端服务器可以在 HTTP 响应头中添加特定的字段,如
Access-Control-Allow-Origin
、Access-Control-Allow-Methods
等,来指定允许跨域请求的来源、请求方法等信息。- 使用代理:在开发环境中,可以配置代理服务器来转发 API 请求,使得前端代码和后端 API 请求处于同一个域名下,避免跨域问题。
- JSONP 跨域请求:JSONP 是一种跨域请求的方式,通过动态创建
<script>
标签实现跨域数据获取,不受同源策略的限制。- CORS 中间件:一些后端框架提供了专门用于处理 CORS 的中间件或插件,通过简单的配置即可实现跨域资源共享。
- 在config包下,创建WebMVCConfig跨域配置类:
1.3 启动类
2. 首页-文章列表
2.1 接口说明
接口url:/articles
请求方式:POST
请求参数:
参数名称 | 参数类型 | 说明 |
---|---|---|
page | int | 当前页数 |
pageSize | int | 每页显示的数量 |
返回数据:
2.2 编码
2.2.1 表结构
文章表:
标签表:
用户表:
- 创建包com.cherriesovo.blog.dao.pojo和com.cherriesovo.blog.dao.mapper;
文章实体类:
用户实体类:
标签实体类:
2.2.2 Controller
在 Spring Boot 项目中,
vo
目录通常用来存放值对象(Value Object)。值对象是一种用于封装多个属性或字段的简单对象,通常用于数据传输、数据展示或领域模型中。值对象的特点是它们是不可变的(Immutable),也就是说一旦创建之后,其属性值就不能再被修改。这种不可变性使得值对象更加安全和可靠,可以避免出现意外的状态变化。
在项目中,
vo
目录可能包含一些用于表示业务领域中的概念或承载某个特定用途的值对象。这些值对象可以用于封装一些复杂的数据结构,提供更加清晰和可读性强的代码。例如,一个电子商务系统中的订单对象可以包含多个属性,如订单号、下单时间、商品列表等。为了方便传输和展示,可以定义一个
OrderVO
值对象,其中包含上述属性的对应字段。在业务逻辑中,可以使用OrderVO
对象进行数据传输和展示,并且保持其不可变性。总之,
vo
目录用来存放值对象,将复杂的数据结构封装起来,提高代码的可读性和可维护性。
- 创建包com.cherriesovo.blog.vo.params;在该包下创建实体类PageParams用来存放页面参数;
- 在包com.cherriesovo.blog.vo.params下创建实体类Result用来存放返回结果;
- 创建文章控制类ArticleController
1、@RequestBody这个注解用于将 HTTP 请求的内容(JSON 格式的数据)绑定到 PageParams 对象上。HTTP 请求的内容包含page和pageSize两个参数,PageParams 是一个值对象。
2、
articleService.listArticlesPage(pageParams)
:调用ArticleService
中的listArticlesPage
方法,传入PageParams
对象,以获取文章列表。3、
Result.success(articles)
:Result
是一个统一结果返回的工具类,Result.success
方法用于返回成功的结果,该结果也是一个Result类,其中包含文章列表数据。这个方法会将文章列表转换为 JSON 格式并返回给客户端
- 创建ArticleVo来接收页面的数据(data)
2.2.3 Service
分页查询文章列表
1、QueryWrapper
queryWrapper = new QueryWrapper<>()详解:
QueryWrapper<Article>
是 MyBatis-Plus 提供的一个查询条件构造器,用于构建数据库查询条件。在这段代码中,
QueryWrapper<Article> queryWrapper = new QueryWrapper<>();
创建了一个QueryWrapper
对象,并指定其泛型为Article
,表示要查询的是Article
数据库表。
QueryWrapper
类提供了一系列方法,可以通过链式调用来设置查询条件,例如eq()
、ne()
、like()
等。这些方法可以根据需要来组合使用,构建出复杂的查询条件。在这里,
queryWrapper
对象是用于分页查询文章数据的条件构造器,但是在代码中没有显式地设置任何查询条件。这种情况下,如果不设置任何查询条件,QueryWrapper
会默认查询整个表的数据,即相当于SELECT * FROM Article
。如果想要添加具体的查询条件,可以在
queryWrapper
上使用相应的方法进行设置。例如,可以使用eq("column", value)
方法来设置等于某个字段值的查询条件。示例:
最后,在分页查询时将
queryWrapper
对象传递给selectPage()
方法,这样可以在查询过程中应用设置的查询条件。2、Page
page = new Page<>(pageParams.getPage(), pageParams.getPageSize())详解: 该语句创建了一个
Page
对象,用于表示分页查询的相关信息。
Page
是 MyBatis-Plus 提供的一个分页对象,它包含了分页查询所需的各种信息,如当前页码、每页大小、总记录数等。在这段代码中,
pageParams
是传入的分页参数对象,其中包括了当前页码和每页大小。通过调用getPage()
和getPageSize()
方法,可以获取分页参数的具体值。然后,将获取到的当前页码和每页大小作为参数传递给
Page
的构造方法new Page<>(pageParams.getPage(), pageParams.getPageSize())
,从而创建了一个Page
对象page
。这个
page
对象会在后续的分页查询中被传递给selectPage()
方法,用于告知数据库查询时的分页信息,以及接收数据库返回的分页查询结果。
copy
方法用于将Article
对象转换为ArticleVo
对象,并根据参数isAuthor
、isBody
和isTags
决定是否需要拷贝作者信息、文章正文和标签信息。
- 使用
BeanUtils.copyProperties
方法将Article
对象article
的属性复制到articleVo
中。这里使用了 Spring 的BeanUtils
工具类来实现属性的拷贝。- 将
Article
对象的创建时间属性createDate
转换为指定格式的字符串,并设置到articleVo
对象的createDate
属性中。这里使用了 Joda-Time 库的DateTime
类来进行日期时间的格式化。- 如果
isTags
参数为true
,则通过tagService.findTagsByArticleId(articleId)
方法获取该文章的标签信息,并设置到articleVo
对象的tags
属性中。- 如果
isAuthor
参数为true
,则通过sysUserService.findUserById(authorId)
方法获取作者的用户信息,并从中获取昵称(使用getNickname()
方法),然后将昵称设置到articleVo
对象的author
属性中- listArticlesPage分页查询文章列表,并将查询结果转换为对应的
ArticleVo
对象列表返回给调用方。
- 首先创建了一个
QueryWrapper<Article>
对象queryWrapper
,用于构建查询条件。然后创建了一个Page<Article>
对象page
,表示要查询的分页信息- 调用
articleMapper.selectPage(page, queryWrapper)
方法进行分页查询文章数据。这里使用了 MyBatis-Plus 提供的selectPage
方法,它会根据传入的Page
对象和查询条件进行分页查询,并返回一个分页后的文章数据对象articlePage
- 通过调用
getRecords()
方法,可以获取当前页的记录列表,即符合查询条件的文章记录列表。这个方法会返回一个List<Article>
对象,其中包含了当前页的所有文章记录。- 将分页查询得到的文章记录列表
articlePage.getRecords()
传入copyList()
方法中,同时传入三个布尔类型的参数
2.2.4 Dao
ArticleMapper
TagMapper
SysUserMapper
com.cherriesovo.blog.dao,mapper.TagMapper.xml
(注意:xml文件的目录结构要与其对应的Mapper保持一致。)
出现的问题:
org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.cherriesovo.blog.dao.mapper.TagMapper.findTagsByArticleId
解决方法:
手动将resources文件夹设置为资源目录
2.2.5 测试
3. 首页-最热标签
3.1 接口说明
接口url:/tags/hot
请求方式:GET
请求参数:无
返回数据:
3.2 编码
3.2.1 Controller
3.2.2 Service
3.2.3 Dao
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· DeepSeek “源神”启动!「GitHub 热点速览」
· 上周热点回顾(2.17-2.23)
2021-04-08 团队作业项目介绍