springboot+vue实现《个人小博客》发布小文章（添加文章）功能

案例目录 《个人小博客》
1、登录注册（带验证码）
2、发布小文章（添加文章）
3、文章管理（删改查）

项目技术栈介绍
前端：vue3+elementplus
后端：springboot+mybatisplus
jdk：1.8以上
数据库：mysql

演示开始

前端部分

第一：前端部分（效果图）

实现代码也非常简单
addarticle.vue

div class="manage-container">
        <div class="button_info">
            <el-col>
                <el-card shadow="hover">
                    <h3>添加文章</h3>
                </el-card>
            </el-col>
        </div>
        <el-card>

            <el-form :model="form" label-width="120px">
                <el-row justify="start">
                    <el-col :span="20">
                        <el-form-item label="文章标题">
                            <el-input v-model="form.title" />
                        </el-form-item>
                    </el-col><br />
                    <el-col :span="20">
                        <el-form-item label="文章内容">
                            <div id="content"></div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button @click="Reset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>

addarticle.vue

我们是使用了editor富文本编辑器 ，主要是开源免费的
let editor;
const createEditor = () => {
    editor = new E("#content");
    editor.config.zIndex = 0;
    editor.config.width = 700;
    editor.create();
};
const onSubmit = () => {
    var param = {
        title: form.title,
        content: editor.txt.html(),
        userId:local.getssontItem("userinfo").id
    }
    console.log(param)
    article(param).then(res => {
        if (res.retCode == 1) {
            ElMessage({
                message: "添加成功",
                type: 'success',
            })
            }else {
                ElMessage({
                    message: res.msg,
                    type: 'error',
            })
        }
    })
}

后端部分

开发步骤

后端部分

开发步骤

• 创建文章表，将发布的博客存入文章表中
• 创建文章实体类

创建文章表

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for article
-- ----------------------------
DROP TABLE IF EXISTS `article`;
CREATE TABLE `article`  (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '文章主键id',
  `title` varchar(1000) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NOT NULL COMMENT '文章标题',
  `content` text CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NULL COMMENT '文章内容',
  `user_id` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_bin NULL DEFAULT NULL COMMENT '作者id',
  `lable_id` int(11) NULL DEFAULT NULL COMMENT '文章标签id',
  `create_time` datetime(0) NOT NULL COMMENT '创建时间',
  `update_time` datetime(0) NOT NULL COMMENT '更新时间',
  `is_delete` int(11) NULL DEFAULT 0 COMMENT '是否删除 0-未删除，1-已删除',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 6 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_bin ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

表结构如图

实体类创建

Article.java

@Data
@EqualsAndHashCode(callSuper = false)
@TableName("article")
@ApiModel(value="article对象", description="")
public class Article{

    private static final long serialVersionUID = 1L;

    @TableId(value = "id", type = IdType.AUTO)
    @ApiModelProperty(value = "文章主键id")
    private Integer id;

    @TableField("title")
    @ApiModelProperty(value = "文章标题")
    private String title;

    @TableField("content")
    @ApiModelProperty(value = "文章内容")
    private String content;

    @TableField("user_id")
    @ApiModelProperty(value = "作者id")
    private String userId;

    @TableField("lable_id")
    @ApiModelProperty(value = "文章标签id")
    private Integer lableId;

    @TableField(value = "create_time",fill = FieldFill.INSERT)
    @ApiModelProperty(value = "创建时间")
    private Date createTime;

    @TableField(value = "update_time",fill = FieldFill.INSERT_UPDATE)
    @ApiModelProperty(value = "更新时间")
    private Date updateTime;

    @TableField("is_delete")
    @ApiModelProperty(value = "是否删除 0-未删除，1-已删除")
    private Integer isDelete;

}

有四个DTO，只用QueryDTO举例
ArticleQueryDTO.java

@Getter
@Setter
public class ArticleQueryDTO {

	@ApiModelProperty("文章主键id")
	private Integer id;

	@ApiModelProperty("文章标题")
	private String title;

	@ApiModelProperty("文章内容")
	private String content;

	@ApiModelProperty("作者id")
	private String userId;

	@ApiModelProperty("文章标签id")
	private Integer lableId;

	@ApiModelProperty("创建时间")
	private Date createTime;

	@ApiModelProperty("更新时间")
	private Date updateTime;

	@ApiModelProperty("是否删除 0-未删除，1-已删除")
	private Integer isDelete;

}

ArticleVO.java

@Getter
@Setter
public class ArticleVO {

    @ApiModelProperty("文章主键id")
    private Integer id;

    @ApiModelProperty("文章标题")
    private String title;

    @ApiModelProperty("文章内容")
    private String content;

    @ApiModelProperty("作者id")
    private String userId;

    @ApiModelProperty("文章标签id")
    private Integer lableId;

    @ApiModelProperty("创建时间")
    @JsonFormat(pattern = "yyyy年MM月dd日 HH时mm分ss秒",timezone="GMT+8")
    private Date createTime;

    @ApiModelProperty("更新时间")
    @JsonFormat(pattern = "yyyy年MM月dd日 HH时mm分ss秒",timezone="GMT+8")
    private Date updateTime;

    @ApiModelProperty("是否删除 0-未删除，1-已删除")
    private Integer isDelete;

}

新增文章代码编写

ArticleController.java

@RestController
@Api(tags = {""})
@RequestMapping("/article")
public class ArticleController {

    @Autowired
    private ArticleService articleService;

    @RequestMapping(value = "/add", method = RequestMethod.POST)
    @ApiOperation("新增")
    public ResultData<String> add(@RequestBody @Valid ArticleInsertDTO dto, BindingResult bindingResult) throws IOException {
        if(bindingResult.hasErrors()){
            return ResultData.error(bindingResult.getFieldError().getDefaultMessage());
        }
        return articleService.add(dto);
    }

}

ArticleServiceImpl.java

@Service
public class ArticleServiceImpl extends ServiceImpl<ArticleMapper, Article> implements ArticleService {

    @Resource
    private ArticleMapper articleMapper;

    @Override
    public ResultData<String> add(ArticleInsertDTO dto) {
        Boolean result = this.save(BeanUtils.copyProperties(dto,Article.class));
        if (!result) {
            return ResultData.error("添加失败！");
        }
        return ResultData.success("添加成功！");
    }


}

查询文章详情代码编写

ArticleController.java

@RestController
@Api(tags = {""})
@RequestMapping("/article")
public class ArticleController {

    @Autowired
    private ArticleService articleService;

    @RequestMapping(value = "/queryDetail", method = RequestMethod.POST)
    @ApiOperation("获取详情")
    public ResultData<ArticleVO> queryDetail(@RequestParam String id) {
        ResultData<ArticleVO> detailResult = articleService.queryDetail(id);
        return detailResult;
    }

}

ArticleServiceImpl.java

@Service
public class ArticleServiceImpl extends ServiceImpl<ArticleMapper, Article> implements ArticleService {

    @Resource
    private ArticleMapper articleMapper;

    @Override
    public ResultData<ArticleVO> queryDetail(String id) {
        if(StringUtils.isBlank(id)){
            return ResultData.error("传入参数为空！");
        }
        return ResultData.success("查询成功",BeanUtils.copyProperties(this.getById(id), ArticleVO.class));
    }

}

查询文章列表编写

ArticleController.java

@RestController
@Api(tags = {""})
@RequestMapping("/article")
public class ArticleController {

    @Autowired
    private ArticleService articleService;

    @RequestMapping(value = "/queryPageList", method = RequestMethod.POST)
    @ApiOperation("获取分页列表")
    public ResultData<PageResult<ArticleVO>> queryPageList(@RequestBody PageRequest<ArticleQueryDTO> pageRequest) {
        ResultData<PageResult<ArticleVO>> pageResult = articleService.queryPageList(pageRequest);
        return pageResult;
    }
}

ArticleServiceImpl.java

@Service
public class ArticleServiceImpl extends ServiceImpl<ArticleMapper, Article> implements ArticleService {

    @Resource
    private ArticleMapper articleMapper;

    @Override
    public ResultData<PageResult<ArticleVO>> queryPageList(PageRequest<ArticleQueryDTO> pageRequest) {
        Page<Article> page = PageUtil.getPage(pageRequest);
        QueryWrapper<Article> queryWrapper = new QueryWrapper<>(BeanUtils.copyProperties(pageRequest.getData(), Article.class));
        queryWrapper.select(Article.class, article -> !article.getColumn().equals("content"));

        IPage<ArticleVO> resultDate = this.page(page, queryWrapper)
        .convert(article -> BeanUtils.copyProperties(article, ArticleVO.class));

        PageResult<ArticleVO> pageResult = PageUtil.getPageResult(resultDate);
        return ResultData.success("查询成功", pageResult);
    }

}

源码获取地址（以上前后端代码已经全部打包好了）

https://gitee.com/xuxiaofei1996/case-source-code.git

为了方便大家更好的学习，本平台经常分享一些完整的单个功能案例代码给大家去练习，如果本平台没有你要学习的功能案例，你可以联系小编，提供你的小需求给我，我安排我们这边的开发团队免费帮你完成你的案例。