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 02 Javascript
用javascript getComputedStyle获取和设置style的原理
Oct 10 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
vue+iview/elementUi实现城市多选
Mar 28 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 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/01/06 PHP
浅析php header 跳转
2013/06/17 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
python发送邮件接收邮件示例分享
2014/01/21 Python
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
python实现rsa加密实例详解
2017/07/19 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
class类在python中获取金融数据的实例方法
2020/12/10 Python
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
网站编辑求职信
2013/10/17 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书