目录
以上方法查询出来的是嵌套list 前端不会接受于是改写了后端代码
技术栈分析
前端:
vue、ajax、Element-ui、mavon-editor、markdown-it 、girhub-markdow-css
后端
SpringBoot、MybatisPlus、shiro、jwt、lombo、hiberna validatior
技术说明
前端
vue:
Vue是一套构建用户界面的轻量级的渐进式框架的前端框架,封装了HTML CSS JS的代码。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
ajax:
使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象,您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果。
Ajax 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
Element-ui
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
mavon-editor
mavon-editor是一款基于vue的markdown编辑器,
markdown-it
markdown-it是一个用来解析markdown的库,它能够将markdown代码编译为html代码。
girhub-markdown-css
github风格的markdown渲染css
后端
校验模式
@Null 被注释的元素必须为null @NotNull 被注释的元素不能为null @NotEmpty 验证注解元素值不为null且不为空(字符串长度不为0、集合大小不为0) @NotBlank 验证注解的元素值不为空(不为null、去除首位空格后长度为0) @AssertTrue 被注释的元素必须为true @AssertFalse 被注释的元素必须为false @Min(value=x) 被注释的元素必须是一个数字,其值必须大于等于指定的最小值 @Max(value=x) 被注释的元素必须是一个数字,其值必须小于等于指定的最大值 @DecimalMin(value=x) 被注释的元素必须是一个数字,其值必须大于等于指定的最小值 @DecimalMax(value=x) 被注释的元素必须是一个数字,其值必须小于等于指定的最大值 @Email 被注释的元素必须是电子邮件地址 @Past 被注释的元素必须是一个过去的日期 @Future 被注释的元素必须是一个将来的日期 @Digits(integer=整数位数, fraction=小数位数) 被注释的元素必须是一个数字,验证注解的元素值的整数位数和小数位数上限 @Pattern(regex=正则表达式, flag=) 被注释的元素必须符合指定的正则表达式。 @Size(min=最小值,max=最大值) 被注释的元素的大小必须在指定的范围内。 @Length(min=最小值, max=最大值) 被注释的字符串的大小必须在指定的范围 @Range(min=最小值, max=最大值) 被注释的元素必须在合适的范围内
@NotEmpty、@NotNull、@NotBlank区别 @NotEmpty :不能为null,且Size>0,@NotEmpty注解的String、Collection、Map、数组是不能为null或长度为0 @NotNull:不能为null,但可以为empty,没有Size的约束,带注释的元素不能为null,接受任何类型 @NotBlank:只用于String,不能为null且trim()之后size>0,纯空格的String也是不符合规则的,此注解只能用于验证String类型
实践笔记
<!-- resultMap最终还是要将结果映射到pojo上,type就是指定映射到哪一个pojo --> <!-- id:设置ResultMap的id --> <resultMap type="order" id="orderResultMap"> <!-- 定义主键 ,非常重要。如果是多个字段,则定义多个id --> <!-- property:主键在pojo中的属性名 --> <!-- column:主键在数据库中的列名 --> <id property="id" column="id" /> <!-- 定义普通属性 --> <result property="userId" column="user_id" /> <result property="number" column="number" /> <result property="createtime" column="createtime" /> <result property="note" column="note" /> </resultMap>
PageHelper整合
添加依赖
<dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.2.12</version> </dependency>
Mapper正常使用list类型查询业务
Service层使用如下
package hua.blog.huablog_admin.service.impl; import com.github.pagehelper.PageHelper; import com.github.pagehelper.PageInfo; import hua.blog.huablog_admin.entity.User; import hua.blog.huablog_admin.mapper.BlogsVoMapper; import hua.blog.huablog_admin.service.BlogsVoService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; /** * <p> * 服务实现类 * </p> * * @author anonymous * @since 2022-01-21 */ @Service public class BlogServiceImpl implements BlogsVoService { @Autowired private BlogsVoMapper blogsVoMapper; public PageInfo<User> getPage(){ //接受分页需求 PageHelper.startPage(1,5); List<User> list = blogsVoMapper.getPage(); //用PageInfo转换一下 PageInfo<User> pageInfo = new PageInfo(list); return pageInfo; } }
xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="hua.blog.huablog_admin.mapper.BlogsVoMapper"> <resultMap id="findAllRM" type="User" autoMapping="true"> <id column="id" property="id"/> <result column="username" property="username"/> <result column="avatar" property="avatar"/> <result column="email" property="email"/> <result column="created" property="created"/> <result column="status" property="status"/> <collection property="blogs" ofType="Blog" autoMapping="true"> <id column="m1.id" property="id"/> <result column="user_id" property="userId"/> <result column="title" property="title"/> <result column="description" property="description"/> <result column="content" property="content"/> <result column="created" property="created"/> <result column="status" property="status"/> </collection> </resultMap> <select id="getPage" resultMap="findAllRM"> SELECT m1.id "m1.id",m1.title,m1.description, m1.content,m1.created,m1.status,m1.user_id,u1.username from m_user u1,m_blog m1 WHERE u1.id=m1.user_id </select> </mapper>
以上方法查询出来的是嵌套list 前端不会接受于是改写了后端代码
新建实体
package hua.blog.huablog_admin.entity; import lombok.Data; import lombok.EqualsAndHashCode; import lombok.experimental.Accessors; import java.time.LocalDateTime; import java.util.List; @Data @EqualsAndHashCode(callSuper = false) @Accessors(chain = true) public class AllBlogs extends Blog { private Long userId; private String username; }
编辑xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="hua.blog.huablog_admin.mapper.BlogMapper"> <resultMap id="getPageBlogsRM" type="AllBlogs" autoMapping="true"> <id column="m1.id" property="id"/> <result column="uid" property="userId"/> <result column="username" property="username"/> <result column="title" property="title"/> <result column="description" property="description"/> <result column="content" property="content"/> <result column="created" property="created"/> <result column="status" property="status"/> </resultMap> <select id="getPageBlogs" resultMap="getPageBlogsRM"> SELECT m1.id "m1.id",m1.title,m1.description, m1.content,m1.created,m1.status,m1.user_id "uid",u1.username from m_user u1,m_blog m1 WHERE u1.id=m1.user_id </select> </mapper>
前端笔记
<el-table-column show-overflow-tooltip="true" 设置只显示一行 prop="content" label="全文" width="400"> </el-table-column>
disabled 无法更改
<el-form-item label="创建时间" prop="created"> <el-input v-model="updateUserModel.created" disabled></el-input> </el-form-item>