VueBlog
强德厚
目录
以上方法查询出来的是嵌套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>
类似资料：