vue-element-admin与vue 的学习使用记录（四）

最新推荐文章于 2023-08-16 07:00:00 发布

小黄瓜要编程

最新推荐文章于 2023-08-16 07:00:00 发布

阅读量313

点赞数 1

分类专栏： # Vue JavaScript HTML&CSS 文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/l1158513573/article/details/119963633

版权

JavaScript 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

Vue

5 篇文章 1 订阅

订阅专栏

HTML&CSS

1 篇文章 0 订阅

订阅专栏

vue-element-admin与vue 的使用记录

vue-element-admin与vue 的学习使用记录（一）
vue-element-admin与vue 的学习使用记录（二）
vue-element-admin与vue 的学习使用记录（三）
vue-element-admin与vue 的学习使用记录（四）

项目场景：

前面已经说过了，我们是开发一个博客管理系统，我们需要集成一个MarkDown编辑器，编写好文档后，由MarkDown文件编辑器生成静态的网页。当我们集成完markdown后，我们就需要开始处理网页的获取和文章的生成等内容了。

解决方案：

获取MarkDown中的内容的html，先在我们的组件代码methods中暴露一个获取方法

  getPreviewedHTML:function(){
                return this.editor.getPreviewedHTML()
            }

在markdown.vue中引用组件的地方添加ref属性

  <markdown-editor ref="editormd" v-model="content1" height="300px" />

在markdown.vue的获取html方法中进行输出测试，获取成功，这样获取MarkDown内容的html方法就准备好了，等待使用中，我们接下来准备一些其他需要方法。
（当然，也可以直接通过this.$refs.editormd.editor.getPreviewedHTML();进行获取，这样就不需要去每一个editor自带的方法都要进行暴露了，需要暴露的方法可能是我们自己需要特殊定制的一些方法）

     getPreviewedHTML() {
      this.html = this.$refs.editormd.getPreviewedHTML();
      console.log(this.html)
    }

接下来我们处理一下图片上传的问题,markdown配置文件配置图片上传地址

 imageUploadURL: process.env.VUE_APP_API_BASE_URL + '/blogApi/MarkDown/UpImage', //修改了image.js的提交方式

在MarkDown中上传，发现了跨域问题，了解了一下，网上相关的教材很多，主要是需要修改image-dialog.js中的提交方式，改成ajax提交就能解决问题。参考链接
修改后，上传正常，但是预览失败了，为什么呢，应为我们直接上传到了我们本地自己的服务器中，服务器存好图片后，需要配置一个正常的预览回调地址，这个地址后面我们会放到服务端代码来说，最终会考虑上传到云服务器的obs或者oos之类的对象存储中。
现在我们就需要提交保存文档，配置好相应的服务器地址，选取我们需要的文章标题和内容，就可以上传了。我们上传到服务端的代码，除了我们需要用来生成Blog的静态页面的MarkDown内容的html外，还需要另存一份需要后期修改的MarkDown格式内容。提交的内容代码（部分）如下：

    //提交发布文件
     //提交发布文件
    SubmitPublish: function() {
      var html_val = this.loceditor.getPreviewedHTML();
      var md_val = this.loceditor.getValue();
      var that = this;
      if (that._mk == null) {
        that._mk = {};
        that._mk.htmlName = "";
      }
      upMarkDownData({
        MKID: that.md_id,
        TextTitle: that.md_title,
        KindsID: that.md_keyid,
        MarkDownContent: md_val,
        HtmlContent: html_val,
        HtmlName: that._mk.htmlName
      })
        .then(res => {
          if (res.value) {
            localStorage.removeItem(that.md_localmk);
            //成功提交 提示框

            this.$notify({
              title: "成功提交",
              message: "成功提交，已经保存",
              type: "success"
            });
          } else {
            localStorage.setItem(that.md_localmk, mk_val);
            this.$notify.error({
              title: "提交失败",
              message: "提交失败，保存本地，清空缓存后将丢失！"
            });
          }
        })
        .catch(err => {
          localStorage.setItem(that.md_localmk, md_val);
          //失败存本地 提示框
          this.$notify.error({
            title: "提交失败",
            message: "提交失败，保存本地，清空缓存后将丢失！"
          });
        });
    },

如何没有网络或者提交出错，我们辛辛苦苦写的文章不能就这样没有了啊，所以，当我们提交失败的时候，我们选择将数据暂存在本地localStorage中

    localStorage.setItem(that.md_localmk, mk_val);//md_localmk本地缓存key

接下来就是处理文章更改的逻辑了，当我们从文章列表跳转到重新编辑时，仍然是在该页面（创建文章页面）进行处理，那么逻辑又是怎么样呢？先完成一个文章列表页面吧，在完成文章列表页面的同时，我们将目前修改的MarkDown模块从示例组件中迁移到综合示例的创建文章模块，如下图部分

在这里插入图片描述
8. 修改文章列表页面，代码如下

<template>
  <div class="app-container">
    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="序号ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.mkid }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="300px" label="文章标题">
        <template slot-scope="scope">
          <router-link :to="'/example/create?mkid='+scope.row.mkid" class="link-type">
            <span>{{ scope.row.textTitle }}</span>
          </router-link>
        </template>
      </el-table-column>

       <el-table-column min-width="300px" label="文章关键字">
        <template slot-scope="scope">
      <span>{{ scope.row.keyWords }}</span>
        </template>
      </el-table-column>

         <el-table-column min-width="300px" label="文章概览">
        <template slot-scope="scope">
         <span>{{ scope.row.htmlName }}</span>
        </template>
      </el-table-column>

      <el-table-column width="180px" align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
            <el-table-column width="180px" align="center" label="修改时间">
        <template slot-scope="scope">
          <span>{{ scope.row.updateTime}}</span>
        </template>
      </el-table-column>

 


      <el-table-column align="center" label="Actions" width="120">
        <template slot-scope="scope">
          <router-link :to="'/example/create?mkid='+scope.row.mkid">
            <el-button type="primary" size="small" icon="el-icon-edit">
              编辑
            </el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="totalCount>0" :total="totalCount" :page.sync="pageIndex" :limit.sync="pageSize" @pagination="getList" />
  </div>
</template>

<script>
import { fetchList } from '@/api/article'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'ArticleList',
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      totalCount: 0,
      listLoading: true,
       

      pageCount: 0, //总页数
      pageIndex: 1, //当前页数
      pageSize: 15, //每页行数
      articleKinds: [],
      loading: true,
      loadingMore: false,
      data: new Array(),
      condition: '',
      conditionType: 'kinds',
      pageIndexConst: 1,
      pageSizeConst: 2
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
       var that = this;
      this.listLoading = true;
      fetchList({
          ConditionType: that.conditionType,
          Condition: that.condition,
          PageIndex: that.pageIndex.toString(),
          PageSize: that.pageSize.toString()
      }).then(response => {
        this.list = response.data.data
        this.totalCount =  parseInt(response.data.totalCount)
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>

页面效果在这里插入图片描述

当我们点击编辑时跳转到创建页面进行处理，通过url传递文章列表的ID，页面加载时逻辑如下,通过id获取文件的内容，如果ID为空就尝试去本地缓存获取没有成功提交的文章内容

getMarkDownInfoByID() {
      //如果有id 就获取
      var that = this;
      var mkid = that.$route.query.mkid;
      if (mkid != "" && mkid != undefined && mkid != null) {
        that.md_id = mkid;
        //根据ID获取数据
        getMarkDownInfoByID({
            Condition: mkid
          })
          .then(res => {
            that.md_tempMD = res.data[0];

            console.log( that.loceditor)
            that.setEditeMarkDown();
          });
      }else{//读取本地缓存
        //获取本地缓存
        var _localmk = localStorage.getItem(that.md_localmk)
        if (_localmk != '' && _localmk != undefined && _localmk != null) {
           this.md_initData=_localmk;
        }
      }
    },

到此我们对于博客的管理文件列表编辑，发布的基本前端框架和代码就算OK，接下来会处理后台相应的逻辑，然后以此为基础继续继续扩充完善！持续更新中……

小黄瓜要编程

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue-element-admin与vue 的学习使用记录（四）

vue-element-admin 的使用记录vue-element-admin与vue 的学习使用记录（一）vue-element-admin与vue 的学习使用记录（二）vue-element-admin与vue 的学习使用记录（三）项目场景：前面已经说过了，我们是开发一个博客管理系统，我们需要集成一个MarkDown编辑器，编写好文档后，由MarkDown文件编辑器生成静态的网页。当我们集成完markdown后，我们就需要开始处理网页的获取和文章的生成等内容了。解决方案：获取MarkD
复制链接

扫一扫