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 相关文章推荐
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 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
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
Ext grid 添加右击菜单
2009/11/26 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
用js实现放大镜效果
2020/10/28 Javascript
python生成二维码的实例详解
2017/10/29 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
python的继承知识点总结
2018/12/10 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
Python绘制数码晶体管日期
2021/02/19 Python
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
任课老师推荐信范文
2013/11/24 职场文书
基层干部十八大感言
2014/01/19 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
用python批量解压带密码的压缩包
2021/05/31 Python
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript