npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fis3-jinja2

v0.0.5

Published

如题所示,使用 fis3,与 python 的 jinja2 框架,模拟站点运行。 因为不怎么了解 fis3 的服务器开发,所以把 express 内置在代码包中,充当服务器。

Downloads

7

Readme

fis3-jinja2

如题所示,使用 fis3,与 python 的 jinja2 框架,模拟站点运行。 因为不怎么了解 fis3 的服务器开发,所以把 express 内置在代码包中,充当服务器。

如果有熟悉的同学,恳请指点

使用

确保本机已经安装了 python 以及 jinja2

参考了 fis3-smarty 的设计,只需要在 fis-config.js 中,引入 fis3-jinja2 代码包,添加参数配置,即可

  const fisJ = require('fis3-jinja2')(fis, {
    'namespace': '', // 目标目录,生成 map.json 的前缀名字
    'static': '/static', // fis3 release 后,静态资源目录,用于初始化 express 的静态资源访问路径,所有需要静态访问的资源,都应该放于此目录
    'staticDir': '', //  fis3 release 后,静态资源目录,默认为空,去 static 相同的值,如果不为空,则代替 static 的值,指向真实的路径
    'template': '/template', // fis3 release 后,jinja2 模板所在的目录
    'server': '/server.cf', // fis3 release 后,jinja2 的服务器配置文件
    'data': '/test', // fis3 release 后,jinja2 读取模拟数据的目录
    'jinja2': '',  // fi3 release 后,jinja2 读取渲染模板的 .py 文件,如果没有设置,会使用默认的渲染文件
    'jinja2Opts': {}, // fis3 jinja2 运行模板的额外参数,默认参数: paths: '[模板的绝对目录地址]', nameTemplate: 模版名字, dataFilepath: '临时数据文件的路径'
  }, {
    port: 8080, // express 的端口号
    open: fis.project.currentMedia() === 'dev' // 是否启动 express
  });

  // 接下来就是项目自己的配置

以上,就已经是 fis3-jinja2 配置的全部内容了。

关于 server.cf 的配置

看下面代码:

# 注释,以井号开始

# GET 方式,访问 http://localhost:8080/,使用模板目录的 /index.html,使用数据目录的 /index.js 进行渲染,如果 /index.js 不存在,则不进行 jinja2 的渲染
GET / /index.html
# GET 方式,访问 http://localhost:8080/child,使用模板目录的 /second/child.html,使用数据目录的 /second/child.js 进行渲染,如果 /second/child.js 不存在,则不进行 jinja2 的渲染
GET /child /second/child.html

# GET 方式,访问 http://localhost:8080/index2 使用模板目录的 /index.html 文件,使用数据目录的 /data/index2.js 进行渲染
GET /index2 /index.html /data/index2.js

# GET 方式,访问 http://localhost:8080/index3 使用模板目录的 /index.html 文件,使用数据目录的 /data/index3.json 进行渲染
GET /index3 /index.html /data/index3.json

内置了三种访问方式: GET,POST,ALL。

如果三种方式,无法满足需求,可以在 fis-config.js 中,进行拓展:

const fs = require('fs-extra');
const path = require('path');
fisJ.server.addCaptureRule('JSON', function(args) {
  // 在 server.cf 中,使用方式: JSON /data /json/data.json
  // args = [ '/data', '/json/data.json' ]
  const urlpath = args[0], filepath = args[1];
  // 取得当前数据目录
  const dirData = fisJ.get('dirData');

  if (urlpath && filepath) {
    // this = /lib/server/router/matcher.js
    // 拥有 .get/.post/.all 常用方法,用来给当前路由器,动态添加捕获规则,与 express 的写法一致
    // 上面的3个方法,是 .addRule(method, urlpath, callback) 的语法糖,需要支持更多的方法,可以使用该函数
    this.get(urlpath, (req, res, next) => {
      let filenameTarget = path.join(dirData, './' + filepath);
      if (fs.existsSync(filenameTarget)) {
        res.send(fs.readFileSync(filenameTarget).toString());
      } else {
        res.send('{}');
      }
    });
  }
});

配置完成后,可以试试访问 http://localhost:8080/data 查看效果了。

关于 fis3-jinja2 的方法

const fisJ = require('fis3-jinja2')(fis, {...});

fisJ 对方暴露了以下几个方法:

  • .get(key, defaultValue) 获取当前设置的某个值,如果此值不存在,返回 defaultValue
  • .set(key, value) 给 fisJ 数据总线中,设置某个值,可通过 .get 重新获取
  • .server 对象,express 的服务器对象,如果服务器没开启,使用该对象的方法,可能会出问题。所以使用前,请检查服务器是否已经开启
    • .addCaptureRule(type, fn) 添加服务器捕获规则
    • .reload() 刷新页面
    • .start() 启动服务器,如果在初始化时,已经设置自动开启服务器,那么禁止重复调用
    • .updateRouter() 更新配置文件,已经集成在 .reload() 的逻辑中,一般不需要自己调用

数据模拟文件

数据文件,默认支持 .js 和 .json 两种形式。

对应 .js 文件,必须返回可运行的函数,或者 json 形式的数据。

例如:

  module.exports = { title: '测试' };

又或者:

  module.exports = function(done, req, res, next) {
    // 如果调用了 next,代表不处理本次请求,抛给 express 的下一个中间件处理
    // 如果 调用了 done,则需要保证不调用 next
    done({
      title: '测试'
    });
  };

测试

进入 test/src 目录,运行命令: fis3 release -d ../dest -w

访问浏览器: http://localhost:8080 查看效果

修复日志

  • 2017/04/10|0.0.5 添加 static 服务相关参数,添加 jinja2 运行文件额外参数配置
  • 2017/03/16|0.0.3 修复jinja2模板,寻址路径问题。把 fis3 依赖包,移到开发环境。