Vuejs中使用markdown服务器端渲染的示例


Posted in Javascript onNovember 22, 2017

啊哈,又是来推荐一个 vuejs 的 package,miaolz123/vue-markdown。 对应的应用场景是:你想使用一个编辑器或者是在评论系统中支持 markdown。这个 package 的有点还是挺多了,比如默认就支持 emoji,这个就很完美啦!laravist 的新版就使用了 vue-markdown 来渲染评论。

安装

直接使用 npm 来安装:

npm install --save vue-markdown

使用

也是很简单的,可以直接这样:

import VueMarkdown from 'vue-markdown'

new Vue({
 components: {
  VueMarkdown
 }
})

或者是这样,举一个具象化的例子是:比如我们有一个 Comment.vue 组件用来渲染评论,可以在这个组件中直接指明:

import VueMarkdown from 'vue-markdown';
<template>
 <div>
  <vue-markdown :source="comment.body"></vue-markdown>
 </div>
</template>

export default { // ... other codes
 props:['comment'],
 data(){  
  return {
   comment : this.comment
  }
 }, 
 components: {
  VueMarkdown
 }, 
// ... other codes
}

然后在渲染的时候这个:

<div class="comments">
 <div class="comments" v-for="comment in comments">
  <comment :comment="comment">
  </comment>
 </div>
</div>

这里我们首先通过 comment props 传入整个 comment(这个comment其实就是一个对象) ,然后在 Comment.vue 通过 :source 来给 veu-markdown 组件传入每个评论的 body 字段内容,注意这里的 comment.body 在数据库中保存的就是评论的 markdown 格式的内容。

Vuejs服务器端渲染markdown示例

const Koa = require('koa');
const _ = require('koa-route');
const vsr = require('vue-server-renderer');
const fs = require('fs');
const indexjs = require('./component/index.js');
const Vue = require('vue');
const MD = require('markdown-it')

const server = new Koa();

const route = {
  index: (ctx, id) => {
    // 解析markdown
    const md = new MD().render(fs.readFileSync('./markdown/' + id + '.md', 'utf-8'));
    // vue插入html代码
    const app = new Vue({
      data: {
        main: md
      },
      template: `
      <div>
        <div class="main" v-html="main"></div>
      </div>`
    });
    // 其他变量设置
    const context = {
      htmlTitle: id
    };
    // 加载模板html文件
    const renderer = vsr.createRenderer({
      template: fs.readFileSync('./template/index.template.html', 'utf-8')
    });
    // 渲染
    renderer.renderToString(app, context, (err, html) => {
      if (err) {
        ctx.response.status = 500;
      } else {
        ctx.response.body = html;
      }
    })
  }
};

server.use(_.get('/post/:id', route.index));
server.listen(8080);
<!DOCTYPE html>
<html lang="CH-ZN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>{{htmlTitle}}</title>
</head>

<body>
  <!--vue-ssr-outlet-->
</body>

</html>

总结

本文介绍的 vue-markdown 在某些应用场景中其实超级好用,特别是对于评论系统想支持 markdown 这个需求来说,容易集成,优点多多。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
May 31 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
js实现简单的随机点名器
Sep 17 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 #Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 #Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 #Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 #Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 #Javascript
基于JavaScript实现表格滚动分页
Nov 22 #Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 #Javascript
You might like
求PHP数组最大值,最小值的代码
2011/10/31 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
jQuery 全选效果实现代码
2009/03/23 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
跟我学Nodejs(二)--- Node.js事件模块
2014/05/21 NodeJs
jquery Easyui快速开发总结
2015/08/20 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
Nodejs模块载入运行原理
2018/02/23 NodeJs
JS关于刷新页面的相关总结
2018/05/09 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
Python 字符串定义
2009/09/25 Python
python自动化测试实例解析
2014/09/28 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
python元组的概念知识点
2019/11/19 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
综合内勤岗位职责
2014/04/14 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
品质口号大全
2014/06/17 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
教师先进事迹材料
2014/12/16 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技