06月26, 2016

express4的小实践

前言:小胡子哥在老东家分享了一篇如何在业务成长,看了之后,深感认同。

最近老大让我新建一个css文件,来冲掉组件的默认样式。这个css必须做成可定制的(less、scss都可以),前端人员只要改几个变量,就可以形成一套新的css。(不要问我为什么不去改组件的,因为历史原因)。于是,当时在脑子里面形成了这样一个图:

可视化界面

一个可视化的界面,左边改了变量之后,点击“查看效果”,右边就会刷新掉。右上角可以下载css文件。和主管确认后,开干!

这里记录一下期间碰到的问题。

一些思路

  • 必须要的目录结构

目录结构

scss文件夹中mini-customize.scss导入了component里面的文件,最后编译将它编译到css文件夹中即可。example是用来展示对应component的demo演示。出于方便,我们可以将它的文件名和组件名完全一致。

  • 导航

我目前的方案是写死的,其实可以做成动态输出。取scss/component下面的文件名,遍历输出即可。

  • 左下角

通过URL的param来区分不同的component,然后取到compontent的文件,将它的内容写到textarea里面,即可。

  • 右下角

我的处理是iframe,它的src是对应的component的demo示例的URL。

技术选型

想到的是用nodejs来实现这一整套,出于方便、简单,我就用了express,大家也可以用其他的node框架,如KOA之类的。

模板的选择

我选择的是ejs

  • 如何注册ejs模板为html页
//注册ejs模板为html页。简单的讲,就是原来以.ejs为后缀的模板页,现在的后缀名可以//是.html了
app.engine(".html", require("ejs").__express);
//设置视图模板的默认后缀名为.html,避免了每次res.Render("xx.html")的尴尬
app.set("view engine", "html");
  • ejs的写法
<% %>

MS在express4.X之后,它就没法设置写法了,之前想改成"{{"和"}}"来着,但没改成,查了资料说是ejs的版本是1.0才行,最后试了一下,也不可以。

请求

这里涉及到的,只有两个请求

  • 首页
  • 点击“查看效果”的请求

第一个是整个页面render,然后只要把data返回到首页即可,大概的代码片断是这样:

//首页路由
app.get("/" ,function(req, res){
    var key = req.query.key || "form",
        sass_data = fs.readFileSync(sass_base_url+ key + ".scss"),
        show_page_url = example_base_url + key + ".html";
    res.type("text/html");
    res.render("index", {
        sass_data: sass_data.toString(),
        show_page_url: show_page_url,
        key: key
    });
});

这里会去拿url里面的key参数,它的值必须为component里面的文件名。

第二个点击时,发起ajax请求,把key和textarea里面的内容传到node端,根据key,写内容到对应的scss文件中,执行scss编译,编译成功后返回一个json对应给前端,当然编译失误也要传json回去。前端根据返回的json做出处理,如果成功,那就刷新iframe。

app.post("/showResult", function(req, res){
    fs.writeFileSync(sass_base_url + req.body.key + ".scss", req.body.content);
    exec("./node_modules/.bin/gulp", function(err){
        if(err){
            res.json({
                success: false
            });
            return;
        }
        console.log("执行成功");
        res.json({
            success: true
        })
    })
})

这里的编译,因为一开始我就配好了gulp,所以就直接使用它了,大家可以用node-sass的模块进行处理。

另外不得不提的是req.body这个对象,我一开始没加bodyParser,然后得到的值为undefined,后来查了一下资料才知道,post的数据,必须引入body-parse这个模块

//要加上这两句话,才能生效
app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded

下载文件

我们都知道,如果是css、js,高级浏览器的处理是新open一个窗口,那么如果想将它下载的话,只要加个download即可。

<a class="btn btn-default" href="/css/mini-customize.css" download="mini-customize.css" target="_blank">

要注意的是download是表示下载的文件名称,并不是URL地址

一开始其实想做一个另存为的功能,即选择一个文件,将css的内容写到选择的文件里面去。但似乎浏览器都做了安全的限制,不让得到绝对路径,所以就没法往下了。如果大家有更好的方法,请写下你们的留言哈。

美化textarea

这里用的是CodeMirror

必须引入的文件是lib文件夹下面的codemirror.css和codemirror.js。

然后可以进mode文件夹,去找到自己所需语言的高亮demo文件,然后参考它的实现就行了,只需要另外添加些js文件即可,比如css/less/scss/js/vue等(挺丰富的)。

简单示例调用:

var code_textarea = document.getElementById("code");
var editor = CodeMirror.fromTextArea(code_textarea, {
      lineNumbers: true,
      matchBrackets: true,
      mode: "text/x-scss",
});

这里可能需要注意的是,高度的问题,因为codemirror.css把高度写死了,所以可以在自己的css文件中重写高度,甚至宽度。也可以调用:

editor.setSize("600","600")

最后在取值的时候,不要去取textarea这个DOM的value了,而应该是取:

editor.getValue()

本文链接:www.my-fe.pub/post/express4-practice.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。