安装mavon-editor
基于Vue的markdown编辑器mavon-editor
输入命令cnpm install mavon-editor --save
安装
然后在main.js中全局注册:
// 全局注册
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
然后就可以在需要渲染的地方使用:
views\BlogDetail.vue
<template>
<div class="m-container">
<Header></Header>
<div class="mblog">
<h2>{{ blog.title }}</h2>
<el-link icon="el-icon-edit" v-if="ownBlog"><router-link :to="{name: 'BlogEdit', params: {blogId: blog.id}}">编辑</router-link></el-link>
<el-divider></el-divider>
<div class="content markdown-body" v-html="blog.content"></div>
</div>
</div>
</template>
<script>
import 'github-markdown-css/github-markdown.css' // 然后添加样式markdown-body
import Header from "@/components/Header";
export default {
name: "BlogDetail",
components: {
Header
},
data() {
return {
blog: {
userId: null,
title: "",
description: "",
content: ""
},
ownBlog: false
}
},
methods: {
getBlog() {
const blogId = this.$route.params.blogId
const _this = this
this.$axios.get('/blog/' + blogId).then((res) => {
console.log(res)
console.log(res.data.data)
_this.blog = res.data.data
var MarkdownIt = require('markdown-it'),
md = new MarkdownIt();
var result = md.render(_this.blog.content);
_this.blog.content = result
// 判断是否是自己的文章,能否编辑
_this.ownBlog = (_this.blog.userId === _this.$store.getters.getUser.id)
});
}
},
created() {
this.getBlog()
}
}
</script>
博客详情
博客详情中需要回显博客信息,然后有个问题就是,后端传过来的是博客内容是markdown格式的内容,我们需要进行渲染然后显示出来,这里我们使用一个插件markdown-it,用于解析md文档,然后导入github-markdown-c,所谓md的样式。
用于解析md文档
cnpm install markdown-it --save
md样式
cnpm install github-markdown-css
views\BlogDetail.vue
<template>
<div class="m-container">
<Header></Header>
<div class="mblog">
<h2>{{ blog.title }}</h2>
<el-link icon="el-icon-edit" v-if="ownBlog"><router-link :to="{name: 'BlogEdit', params: {blogId: blog.id}}">编辑</router-link></el-link>
<el-divider></el-divider>
<div class="content markdown-body" v-html="blog.content"></div>
</div>
</div>
</template>
<script>
import 'github-markdown-css/github-markdown.css' // 然后添加样式markdown-body
import Header from "@/components/Header";
export default {
name: "BlogDetail",
components: {
Header
},
data() {
return {
blog: {
userId: null,
title: "",
description: "",
content: ""
},
ownBlog: false
}
},
methods: {
getBlog() {
const blogId = this.$route.params.blogId
const _this = this
this.$axios.get('/blog/' + blogId).then((res) => {
console.log(res)
console.log(res.data.data)
_this.blog = res.data.data
var MarkdownIt = require('markdown-it'),
md = new MarkdownIt();
var result = md.render(_this.blog.content);
_this.blog.content = result
// 判断是否是自己的文章,能否编辑
_this.ownBlog = (_this.blog.userId === _this.$store.getters.getUser.id)
});
}
},
created() {
this.getBlog()
}
}
</script>
具体逻辑还是挺简单,初始化create()方法中调用getBlog()方法,请求博客详情接口,返回的博客详情content通过markdown-it工具进行渲染。
再导入样式:
`import 'github-markdown.css'
路由权限拦截
src\permission.js
import router from "./router";
// 路由判断登录 根据路由配置文件的参数
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requireAuth)) { // 判断该路由是否需要登录权限
const token = localStorage.getItem("token")
console.log("------------" + token)
if (token) { // 判断当前的token是否存在 ; 登录存入的token
if (to.path === '/login') {
} else {
next()
}
} else {
next({
path: '/login'
})
}
} else {
next()
}
})
通过之前我们再定义页面路由时候的的meta信息,指定requireAuth: true,需要登录才能访问,因此这里我们在每次路由之前(router.beforeEach)判断token的状态,觉得是否需要跳转到登录页面。
{
path: '/blog/add', // 注意放在 path: '/blog/:blogId'之前
name: 'BlogAdd',
meta: {
requireAuth: true
},
component: BlogEdit
}
然后我们再main.js中import我们的permission.js
import './permission.js' // 路由拦截
本文暂时没有评论,来添加一个吧(●'◡'●)