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 鼠标拖动图标技术
Feb 07 Javascript
input:checkbox多选框实现单选效果跟radio一样
Jun 16 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
React四级菜单的实现
Apr 08 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
浅谈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实现网上点歌(二)
2006/10/09 PHP
php预定义常量
2006/12/25 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
php实现微信小程序授权登录功能(实现流程)
2019/11/13 PHP
Jquery AJAX 框架的使用方法
2009/11/03 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
jQuery封装的tab选项卡插件分享
2015/06/16 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
node.js学习之事件模块Events的使用示例
2017/09/28 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
JS将网址url转化为JSON格式的方法
2018/07/02 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
Django Rest framework之权限的实现示例
2018/12/17 Python
python代码中怎么换行
2020/06/17 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
办公室文书岗位职责
2013/12/16 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
初三物理教学反思
2014/01/21 职场文书
便利店投资创业计划书
2014/02/08 职场文书
买房子个人收入证明
2014/10/12 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
介绍信样本
2015/01/31 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
Python基本的内置数据类型及使用方法
2022/04/13 Python
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL