介绍一个有趣的 Web 框架:Zero

BaconSharon 发布于12天前
0 条问题

名字就看着很有趣。

所谓Zero的意思是零配置、零烦恼,就是说直接写业务代码即可,其他的事情都交给Zero来搞定。它的官网地址是Zero Server。

Hello World

依照惯例,总是先看Hello World。

npm install -g zero

这个框架需要全局安装。

新建一个文件夹,然后在里面新建一个time.js文件,输入

// time.js
const moment = require("moment");

module.exports = (req, res) => {
    var time = moment().format("LT");
    res.send({ time: time });
};

注意此时什么依赖都没有安装,moment这个包在当前路径下不存在,并且甚至于package.json文件都没有建出来(当然在执行zero命令后,这个文件还是会被它新建的)。

在文件夹下执行命令zero,它都一条龙帮你搞定。

介绍一个有趣的 Web 框架:Zero

打开 http:// localhost:3000/time ,可以看到当前时间的JSON字符串,注意路由/time就是和文件名time.js相对应的。

更为可怕的还在后面,zero还能支持如下内容

  • Node.js (JavaScript & TypeScript)
  • React (JavaScript & TypeScript)
  • HTML
  • Markdown / MDX
  • Vue
  • Python

不用重启zero,新建一个index.jsx文件,输入

// index.jsx
import React from "react";

export default class extends React.Component {
    static async getInitialProps() {
        var json = await fetch("/time").then(resp => resp.json());
        return { time: json.time };
    }

    render() {
        return <p>Current time is: {this.props.time}</p>;
    }
}

打开http://localhost:3000/,直接看到页面内容

介绍一个有趣的 Web 框架:Zero

也就是说,你可以在一个工程里任意写React,Vue,Python等,6得飞起。

特点

自动配置 :这个刚才已经见过了,什么配置文件和配置属性都没加入。

基于文件的路由 :这个有点像next.js之类的SSR框架的行为,把文件路径和路由对应,/api/login就对应到文件系统里的./api/login.js(或者其他格式,比如jsx、vue)。

自动处理依赖 :我们不需要自己先去安装依赖,可以直接引入。圣斗士年代,大喊名称再放招式的时代一去不复返了。不过zero默认只会安装最新版本,要定制版本还是需要自己去package.json里修改。

支持多种语言(框架) :刚才已经列举了。

改进的错误处理 :每个路由入口都是独立的,处在自己的进程里,/api/login的崩溃不会影响到/api/chat。崩溃后下次用户访问时会自动重启。

路由重写机制

这一点可能在实际开发中造成一些错误理解或出乎意料的bug。在zero里,如果一个路由对应的文件找不到,那它会向上找最接近的父文件。

比如访问/user/luke,但是在文件系统里找不到./user/luke.js或者相关的文件,那么zero会去找./user.js同时把luke视作传给/user的一个参数。而访问/user/luke/messages时,/user的req.params就等于['luke', 'message']。

这个还是好理解的,就类似于/user/:name这种路由形式。

.zeroignore配置

类似于.gitignore文件,这个文件里的内容不会被zero当成服务内容暴露出来。比如文件系统里有个components文件里面是基础组件,那么就要把components配置到.zeroignore里。

端口修改

修改环境变量PORT即可。

本来还想做个例子的,不过这张官网的动图足以体现zero的有趣了

介绍一个有趣的 Web 框架:Zero

刚才又看了下React和Vue的用法,感觉真的跟同构框架很像,它们分别有方法static async getInitialProps和asyncData: async function({ req, url, user })可以用来在渲染前获取到数据,而不是全部留给浏览器来执行渲染。

查看原文: 介绍一个有趣的 Web 框架:Zero

  • reddog
  • yellowsnake
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。