spring boot+vue个人博客六：博客页面，观看博客，博客编辑功能

SpringBoot与Vue搭建个人博客

最新推荐文章于 2025-09-20 03:20:16 发布

原创

最新推荐文章于 2025-09-20 03:20:16 发布 · 998 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #java #elementui

本文详细介绍了如何使用SpringBoot后端框架和Vue前端框架搭建个人博客网站，包括权限整合、页面设计、多节点部署等内容，适合初学者和开发者快速上手。

系列大纲
GitHub（还没开发完成）
在线演示www.yzpnb.top
第一章：(后端)搭建spring boot脚手架：https://blog.youkuaiyun.com/grd_java/article/details/107452826
第二章：权限整合shiro+jwt，完成后端接口：https://blog.youkuaiyun.com/grd_java/article/details/107481570
第三章：搭建前端vue整合element ui脚手架：https://blog.youkuaiyun.com/grd_java/article/details/107498140
第四章：首页和公共头部组件：https://blog.youkuaiyun.com/grd_java/article/details/107507213
第五章：完成登陆注册页面，nginx网关对接后端：https://blog.youkuaiyun.com/grd_java/article/details/107515437
第六章：博客页面，观看博客，博客编辑功能：https://blog.youkuaiyun.com/grd_java/article/details/107525128
第七章：打包部署，多节点部署方案：https://blog.youkuaiyun.com/grd_java/article/details/107533253

一、博客展示

在这里插入图片描述

1、api接口

在这里插入图片描述

import request from '@/utils/request.js'
export default {
   
   
  limitSelect(current,size) {
   
   
    return request({
   
   
      url: `/service_blog/m-blog/limitSelect/${
     
     current}/${
     
     size}`,
      method: 'get'
    })
  },
  blogById(id){
   
   
	  return request({
   
   
		  url:`/service_blog/m-blog/blogById/${
     
     id}`,
		  method:'get',
	  })
  },
  deleteBlogById(id){
   
   
	  return request({
   
   
		  url:`/service_blog/m-blog/blogById/${
     
     id}`,
		  method:'delete',
	  })
  },
  updateBlogById(data){
   
   
  	  return request({
   
   
  		  url:`/service_blog/m-blog/blogById`,
  		  method:'put',
  		  data
  	  })
  },
  insertBlog(data){
   
   
	  return request({
   
   
		  url:`/service_blog/m-blog/insertBlog`,
		  method:'post',
		  data
	  })
  },
 }

2、代码

在这里插入图片描述

<template>
	<div class="blog">
		<Handler id="handler"></Handler>
		<el-row type="flex"  justify="center">
		  <el-col :span="18">
			  <div class="block">
				  <el-timeline>
					<el-timeline-item timestamp="" placement="top">
					  <el-card id="item" @click="blogDetailsave()">
						<h4 style="text-align: center;" @click="blogDetailsave()">编辑一篇新的博客</h4>
						<div class="buttonC"></div>
					  </el-card>
					</el-timeline-item>
					<el-timeline-item v-for="blog in blogs" :key="blog.id" :timestamp="blog.gmtModified" placement="top">
					  <el-card id="item">
						<h4 @click="blogDetail(blog.id)">{
   
   {
   
   blog.title}}</h4>
						<p @click="blogDetail(blog.id)">名字 提交于 {
   
   {
   
   blog.gmtModified}}</p>
						<div class="buttonC">
							<el-button id="a" type="primary" icon="el-icon-edit" circle @click="updateBlogById(blog.id,blog.userId)"></el-button>
							<el-button id="a" type="success" icon="el-icon-check" circle @click="blogDetail(blog.id)"></el-button>
							<el-button id="a" type="danger" icon="el-icon-delete" circle @click="deleteBlogById(blog.id,blog.userId)"></el-button>
						</div>
					  </el-card>
					</el-timeline-item>
				  </el-timeline>
				</div> 
				<el-pagination
				  :page-size="size"
				  :current-page="current"
				  background
				  @current-change="currentChange"
				  style="opacity: 0.5;box-shadow: 5px 5px 5x #000000; "
				  layout="prev, pager, next"
				  :total="total">
				</el-pagination>
		  </el-col>
		</el-row>
	</div>
</template>

<script>
	import Handler from '@/components/Handler.vue'
	import blog from '@/api/blog.js'
	export default{
   
   
		data(){
   
   
			return{
   
   
				current:1,//当前页
				size:3,//每页记录
				total:1,//总记录数
				blogs:{
   
   },//博客数据
				userId:0,//用户id
			}
		},
		components:{
   
   
			Handler
		},
		created() {
   
   
			if(this.$store.state.userInfo!=null||this.$store.state.userInfo!=undefined){
   
   //如果有用户信息
				this.userId=this.$store.state.userInfo.id//获取用户id
			}
			this.init()
		},
		methods:{
   
   
			init(){
   
   
				this.limitSelect