实战22 集成MarkDown和多级评论

目录

1、数据库表设计

2、markdown组件安装和注册

3、组件使用

---

1、数据库表设计

2、markdown组件安装和注册

npm install mavon-editor -S

main.js引入注册组件

3、组件使用

前端新增和编辑弹窗

  <el-dialog title="文章信息" :visible.sync="dialogFormVisible" width="60%">
      <el-form label-width="80px" size="small">
        <el-form-item label="文章标题">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="文章内容">
          <mavon-editor ref="md" v-model="form.content" :ishljs="true" @imgAdd="imgAdd"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="文章信息" :visible.sync="viewDialogVis" width="60%">
      <el-card>
        <div>
          <mavon-editor 
          class="md" 
          :value="content" 
          :subfield="false" 
          :defaultOpen ="'preview'"
          :editable="false" 
          :scrollStyle="true" 
          :ishljs="true"
          />
        </div>

      </el-card>
    </el-dialog>

前端:Article.vue 

<template>
  <div style="color: #666;">
    <div style="margin: 10px 0;">
      <el-input suffix-icon="el-icon-search" style="width: 300px;" placeholder="请输入名称" class="search" v-model="name"
        clearable></el-input>
      <el-button class="ml-5" type="primary" @click="load">查询</el-button>
      <el-button class="ml-5" type="warning" @click="reset">重置</el-button>
    </div>
    <div style="margin: 10px 0;">
      <div style="padding: 20px 0; border-bottom: 1px dashed #ccc; " v-for="item in tableData" :key="item.id">
        <div class="pd-10" style="font-size: 20px; color: #3F5EFB; cursor: pointer;" @click="$router.push('/front/articleDetail?id='+item.id)">{{item.name }}</div>
        <div style="font-size: 14px; margin-top:10px ;">
          <i class="el-icon-user-solid"></i><span>{{item.user }}</span>
          <i class="el-icon-time" style="margin-left: 10px ;"></i><span>{{item.time }}</span>
        </div>
      </div>

    </div>
    <div style="padding: 10px 0;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-sizes="[2, 5, 10, 20]" :page-size="pageSize" layout="total, prev,pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Article',
  data() {
    return {
      form: {},
      tableData: [],
      name: '',
      multipleSelection: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      dialogFormVisible: false,
      teachers: [],
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      content: '',
      viewDialogVis: false
    }
  },
  created() {
    this.load();

  },
  methods: {
    view(content) {
      this.content = content
      this.viewDialogVis = true
    },
    
    load() {
      this.request.get("/article/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name
        }
      }).then(res => {
        console.log(res);
        this.tableData = res.data.records;
        this.total = res.data.total;
      })
    },
    reset() {
      this.name = '',
        this.load();
    },

  }

}
</script>
<style scoped></style>

ArticleDetail.vue

<template>
  <div style="color: #666; margin:20px 0">
    <div>
      <div class="pd-10" style="margin:20px 0;font-size: 20px; color: #3F5EFB; cursor: pointer;">{{ article.name }}</div>
      <div style="font-size: 14px; margin-top:10px ;">
        <i class="el-icon-user-solid"></i><span>{{ article.user }}</span>
        <i class="el-icon-time" style="margin-left: 10px ;"></i><span>{{ article.time }}</span>
      </div>
    </div>
    <div style="margin: 20px 0;">
      <mavon-editor class="md" :value="article.content" :subfield="false" :defaultOpen="'preview'" :editable="false"
        :scrollStyle="true" :ishljs="true" />
    </div>

  </div>
</template>
<script>
export default {
  name: 'Article',
  data() {
    return {
      article: {},
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
    }
  },
  created() {
    this.load();

  },
  methods: {
    load() {
      const id = this.$route.query.id
      this.request.get("/article/" + id).then(res => {
        this.article = res.data
      })
    }
  }
}

</script>
<style scoped></style>