DjangoVue前后分离_markdown编辑器（搭建博客步骤三）

@TOC

django

在django的app中引入mdeditor

django-mdeditor

pip安装

$ pip install django-mdeditor

setting.py引入mdeditor

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'users',#用户
    'article',#文章
    'corsheaders',#跨域问题
    'mdeditor',#Markdown编辑
]

model使用markdown
MDTextField()

from django.db import models
from django.utils import timezone
from users.models import Users
from mdeditor.fields import MDTextField
# Create your models here.


class Articles(models.Model):
    P_var=(
        ('开心','开心'),
        ('奥里给','奥里给')
        )
    kind = models.CharField(choices=P_var,blank=True, null=True,max_length=8)
    #种类
    title=models.CharField(blank=True, null=True, max_length=20)
    #文章名字
    describe=models.TextField(blank=True,null=True)
    #描述
    count = models.BigIntegerField(default=0)  # 点赞数量
    #点赞数量
    body = MDTextField()
    #文章内容 markdown
    image = models.ImageField(upload_to='static/media/product/image/', blank=True, null=True)
    #文章封面
    publish=models.DateTimeField(default=timezone.now)
    #当前时间自动存储
    user=models.ForeignKey(Users,related_name='user_article',on_delete=models.CASCADE)
    #外码关联person，级联删除
    class Meta:
        ordering=("-publish",)#反向查询
        db_table = 'Article'

进入admin后台即可编辑

vue

vue项目引入markdown相关包

使用vue-markdown

$ npm install --save vue-markdown
$ npm install github-markdown-css
$ npm install highlight.js

main.js引入

import 'github-markdown-css/github-markdown.css'
import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'
// Vue.use(hljs)
Vue.directive('highlight', function(el) {
   
   
    const blocks = el.querySelectorAll('pre code')
    blocks.forEach(block => {
   
   
        hljs.highlightBlock(block)
    })
})

展示markdown的vue组件中，添加components

<template>
  <div class="mavoneditor">
    <div class="markdown-body" >
      <!-- {
   
   % if v-for="item in md_data"%} -->
      <VueMarkdown :source="value" v-highlight></VueMarkdown>
    </div>
  </div>
</template>
import VueMarkdown from "vue-markdown";
export default {
   
   
  components: {
   
   
    VueMarkdown,
  },
  data(){
   
   
  return{
   
   
  value:'md的原生语句'
}
  }

vue展示django的md内容

  created(){
   
   
      let that = this;
      console.log("测试created！");
      axios
        .get(that.baseurl)
        .then((res) => {
   
   
          console.log("获取Article");
        //   console.log(res,res.data,res.data.msg);

          that.md_data.push(res.data.article); //markdown值传递
        })
        .catch((res) => {
   
   
          console.log(res);
        }); //get log
    }