spring boot+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()
			},
			currentChange(val){
				this.current=val;
				this.limitSelect()
			},
			/* 分页获取博客 */
			limitSelect(){
				blog.limitSelect(this.current,this.size).then(response=>{
					this.blogs=response.data.data.limitBlog.records//获取所有博客数据
					this.total=response.data.data.limitBlog.total//获取total
					this.size=response.data.data.limitBlog.size//获取size
					this.current=response.data.data.limitBlog.current//获取current
				})
			},
			/* 查看博客详情页面 */
			blogDetail(id){
				this.$router.push({name:"BlogDetail",params:{BlogId:id}});
			},
			/* 删除博客 */
			deleteBlogById(id,userId){
				if(this.userId===userId){//表示当前博客是自己的可以删除
					this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  type: 'warning'
					}).then(() => {
						blog.deleteBlogById(id).then(response=>{
							if(response.data.code===20000){
								this.$message({
								          message: '删除成功',
								          type: 'success'
								        });
								this.init();
							}else{
								this.$message.error(response.data.message);
							}
						}).catch(error=>{
							this.$message.error(error.data.message);
						})
					}).catch(() => {
					  this.$message({
						type: 'info',
						message: '已取消删除',
						});
					  });
				}else{
					this.$message.error("你没有权限删除此博客");
				}
				
			},
			/* 修改博客 */
			updateBlogById(id,userId){
				if(this.userId===userId){//表示当前博客是自己的可以修改
					this.$router.push({name:"BlogEdit",params:{BlogId:id}});
				}else{
					this.$message.error("这篇文章不是你的哦！");
				}
				
			},
			/* 保存博客 */
			blogDetailsave(){
				if(this.$store.state.loginFlag){//如果为true表示已登录
					this.$router.push({name:"BlogAdd"})
				}else{
					this.$message({
							type: 'info',
							message: '请登录',
							});
					this.$router.push({name:"Login"})
				}
			}
		}
	}
</script>

<style>
	#handler{
		position: relative;
	}
	.blog{
		  background-image:url(http://www.lzqcode.com/templets/static/image/index_bg.jpg);/* 首页背景图片 */
		  background-position: center;/* 背景图片位置始终居中显示 */
		  background-attachment: fixed;/* 背景固定 */
		  background-repeat: no-repeat;/* 不平铺 */
		  position: relative;/* 相对定位 */
		  height: 100vh;/* 100vh表示正好和浏览器窗口大小一致 */
	}
	.block{
		height: 80vh;
	}
	#item{
		min-width: 500px;
		border:0;
		background-color: rgba(0,0,0,0.5);
		box-shadow: 5px 5px 5px rgba(0,0,0,0.5); 
		color: rgba(255,255,255,0.8);
		transition: 0.5s;
		overflow:hidden;
		position: relative;
		
	}
	#item:hover{
		box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
		transform: translateY(-10%);
		transform: scale(1.02,1.02);
	}
	#item h4,#item p{
		text-align: left;
		text-shadow: 5px 5px 9px rgba(255,255,255,0.5);
		font-family: "agency fb";
		transition: 0.5s;
	}
	#item:hover h4,#item:hover p{
		text-shadow: 5px 5px 9px rgba(255,255,255,1);
	}
	.buttonC{
		display: inline-block;
		position: absolute;
		right: 2.5%;
		bottom: 30%;
	}
	#a{
		transition: 0.5s;
		box-shadow:1px 2px 15px rgba(255,255,255,0.7);
		opacity: 0.5;
	}
	#a:hover{
		box-shadow:1px 2px 15px rgba(255,255,255,1);
		opacity: 1;
	}
</style>

二、博客编辑

1、整合mavon-editor编辑器

安装依赖
npm install mavon-editor --save

main.js中引入

import mavonEditor from 'mavon-editor'

import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor)

2、博客编辑页面

<template>
	<div class="blogEdit">
		<Handler id="handler"></Handler>
		<el-container>
		  <el-header >
			  <el-form id="BlogForm" :inline="true" :model="blogMD" class="demo-form-inline" style="min-width: 950px;">
			    <el-form-item id="el-item" label="">
			      <el-input  v-model="blogMD.title" placeholder="标题" style="min-width: 90vh;"></el-input>
			    </el-form-item>
				<el-form-item id="el-item" label="">
			      <el-button type="primary" @click="save()">{{saveTitle}}</el-button>
				</el-form-item>
				<el-form-item id="el-item" label="">
				  <el-button type="success" @click="publish()">{{publishTilte}}</el-button>
				</el-form-item>
			    <el-form-item id="el-item" label="">
			      <el-input v-model="blogMD.description" placeholder="简介" style="min-width: 117vh;"></el-input>
			    </el-form-item>
			  </el-form>
		  </el-header>
		  <div >
			  <mavon-editor v-model="blogMD.content" id="editor" @fullScreen="fullScreen()"></mavon-editor>
		  </div>
		  <!-- <el-footer>Footer</el-footer> -->
		</el-container>
	</div>
</template>

<script>
	import Handler from '@/components/Handler.vue'
	import blog from '@/api/blog.js'
	export default{
		data(){
			return{
				blogMD:{
					id:'',//博客id
					userId:'',//用户id
					title:'',//标题
					description: "test",//简介
				    content: "rest",//内容
				    status: 0,//发布状态
				},
				saveFlag:true,//true表示新建博客，false表示编辑已有博客
				saveTitle:'保存',//如果是新建就保存，不是新建就显示完成修改
				publishTilte:'未发布',//如果发布状态为0显示未发布，1显示已发布
				screenFlag:false,//当前是否是全屏模式
			}
		},
		created() {
			if(this.$route.params.BlogId===undefined||
				this.$route.params.BlogId===null||
				this.$route.params.BlogId==="")
			{//如果没有id，说明是新建博客
				this.blogMD.userId=this.$store.state.userInfo.id;//获取当前用户id
			}else{
				//有id就是修改博客
				this.saveFlag=false
				this.saveTitle="修改完成"
				this.blogMD.id=this.$route.params.BlogId
				//回显数据
				this.blogById();
			}
			if(this.blogMD.status===1){//等于1表示已经发布了
				this.publishTilte="已发布";
			}else{
				this.publishTilte="未发布";
			}
		},
		methods:{
			/* 根据博客id获取博客信息 */
			blogById(){
				blog.blogById(this.$route.params.BlogId).then(response=>{
						if(response.data.code===20000){
							const data=response.data.data.blog
							this.blogMD.userId=data.userId
							this.blogMD.title=data.title
							this.blogMD.description=data.description
							this.blogMD.content=data.content
							this.blogMD.status=data.status
						}else{
							this.$message.error(response.data.message);
						}
					}).catch(error=>{
						this.$message.error(error.data.message);
					})
			},
			publish(){
				if(this.blogMD.status===0){
					this.blogMD.status=1;//将发布状态改为1，表示已发布
					this.save();//保存
				}else{
					this.save();
				}
				
			},
			/* 保存博客 */
			save(){
				if(this.saveFlag){//如果为true，就调用保存的api
					blog.insertBlog(this.blogMD).then(response=>{
						if(response.data.code===20000){
							this.$message({
							          message: '保存成功',
							          type: 'success'
							        });
							this.$router.push({name:"Blog"})
						}else{
							this.$message.error(response.data.message);
						}
					}).catch(error=>{
						this.$message.error(error.data.message);
					})
				}else{//如果是else，就调用修改接口
					blog.updateBlogById(this.blogMD).then(response=>{
						if(response.data.code===20000){
							this.$message({
							          message: '修改成功',
							          type: 'success'
							        });
							this.$router.push({name:"Blog"})
						}else{
							this.$message.error(response.data.message);
						}
					}).catch(error=>{
						this.$message.error(error.data.message);
					})
				}
			},
			/* 全屏编辑模式 */
			fullScreen(){
				let a=document.querySelector("#editor");
				if(this.screenFlag===true){//如果是true表示当前是全屏，点击按钮后，需要缩小
					this.screenFlag=false;
					a.style.maxWidth=130+'vh'
				}else{//表示现在是小屏幕
					this.screenFlag=true;
					a.style.maxWidth=300+'vh'
				}
			}
		},
		components:{
			Handler
		}
	}
</script>

<style>
	#handler{
		position: relative;
	}
	.blogEdit{
		  background-image:url(http://www.lzqcode.com/templets/static/image/index_bg.jpg);/* 首页背景图片 */
		  background-position: center;/* 背景图片位置始终居中显示 */
		  background-attachment: fixed;/* 背景固定 */
		  background-repeat: no-repeat;/* 不平铺 */
		  position: relative;/* 相对定位 */
		  height: 100vh;/* 100vh表示正好和浏览器窗口大小一致 */
		  overflow-y: scroll;
	}
	#editor{
		/* 居中方案 */
		position: absolute;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		
		min-height: 70vh;
		max-width: 130vh;
		
		overflow: hidden;
	}
	.el-header, .el-footer {
	    color: #333;
	    text-align: center;
	    line-height: 60px;
		min-height: 15vh;
	}
	.el-header{
		margin-top: 2%;
	}
    .el-main {
	  color: #333;
	  text-align: center;
	  line-height: 160px;
    }
	#BlogForm{
		position: relative;
		/* top: 10%; */
	}
	#el-item{
		margin: 0 1vh;
	}  
</style>

三、博客详情页面

1、安装依赖

用来解析md格式文档
用于解析md文档 npm install markdown-it --save
md样式 npm install github-markdown-css

2、开发页面

<template>
	<div class="blogDetail">
		<Handler id="handler"></Handler>
		<div class="mblog">
		  <h2>{{ blogMD.title }}</h2>
		  <!-- <el-divider></el-divider> -->
		  <div class="content markdown-body" id="content" v-html="blogMD.content"></div>
		</div>
	</div>
</template>

<script>
	import 'github-markdown-css/github-markdown.css' // 然后添加样式markdown-body
	import Handler from '@/components/Handler.vue'
	import blog from '@/api/blog.js'
	export default{
		data(){
			return{
				blogMD:{
					id:'',//博客id
					userId:'',//用户id
					title:'',//标题
					description: "test",//简介
				    content: "rest",//内容
				    status: 0,//发布状态
				},
			}
		},
		created() {
			this.blogById()
		},
		methods:{
			/* 根据博客id获取博客信息 */
			blogById(){
				blog.blogById(this.$route.params.BlogId).then(response=>{
					if(response.data.code===20000){
						const data=response.data.data.blog
						this.blogMD.userId=data.userId
						this.blogMD.title=data.title
						this.blogMD.description=data.description
						/*初始化编辑器*/
						var MarkdownIt = require('markdown-it'),
						md = new MarkdownIt();
						var result = md.render(data.content);//生成转换后的内容
						this.blogMD.content = result//将转换后的内容给content
						this.blogMD.status=data.status
					}else{
						this.$message.error(response.data.message);
					}
				}).catch(error=>{
					this.$message.error(error.data.message);
				})
			},
		},
		components:{
			Handler
		}
	}
</script>

<style>
	#handler{
		position: relative;
	}
	.blogDetail{
		  background-image:url(http://www.lzqcode.com/templets/static/image/index_bg.jpg);/* 首页背景图片 */
		  background-position: center;/* 背景图片位置始终居中显示 */
		  background-attachment: fixed;/* 背景固定 */
		  background-repeat: no-repeat;/* 不平铺 */
		  position: relative;/* 相对定位 */
		  height: 100vh;/* 100vh表示正好和浏览器窗口大小一致 */
		  overflow-y: scroll;
	}
	#content{
		background-color: rgba(255,255,255,0.5);
		box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
		border-radius: 50px;
		text-align: left;
		margin: 0 10%;
		padding: 5% 0;
		min-width: 70vh;
		min-height: 80vh;
	}
</style>