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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
javascript与CSS复习(三)
Jun 29 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
浅谈Cookie的生命周期问题
Aug 02 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 Javascript
ES6新特性四:变量的解构赋值实例
Apr 21 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 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
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
vuex入门最详细整理
2020/03/04 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python类继承用法实例分析
2015/05/27 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
使用Python写一个量化股票提醒系统
2018/08/22 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
保密协议书范本
2014/04/22 职场文书
安全教育演讲稿
2014/05/09 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
Python如何导出导入所有依赖包详解
2021/06/08 Python