使用nodejs + express搭建网站

发表于   |   分类于

最近在一个项目中，经常会遇到一些case需要追查，直接到数据中进行grep，效率太低，耗费大量时间，于是学习了express搭建一个可视化前端，对程序进行打点，追查到底哪一部分出了问题。现在总结一下：

如何入门？

入门可以直接参考byvoid的Nodejs开发指南，内容讲的非常详细，直接有实例代码。需要说明的是express目前生成的模版不是ejs，而是jade。

对于javascript／css／jquery的学习，可以使用xxx菜鸟教程，里面的实例也比较清晰。

如何安装express

目前支持两个版本，之前书上讲的不可用，需要按照下面的方式安装

1
2
npm install -g express-generator@3
npm install -g express-generator@4

一些细节问题

1. 如何从后端向前端传递数据

使用如下方式, 其中key是jade可以拿到的访问数据的key，data是具体的数据

1
2
3
res.render('index',{
    key : data,
});

在jade中获取的数据可以通过#{key}来获取

2. 后端如何获取前端传递过来的数据？

首先，前端的控件，比如文本框，必须要有name字段, 后段是根据name字段来取到最终的数据的。
后端使用方法：

1
2
获取控件上的值 ： req.body.name
打印body全部数据 ： JSON.stringify(req.body）

3. jade中如何使用js

比如弹出一个提示框 && 添加onclick操作(需要在button添加onclick事件)

1
2
3
4
5
script.
  alert('use js in jade');
  function click_func() {
    alert('use js in jade');
  }

另外：jade本身就支持for／if等语法，如果要打印数据需要使用#{xx}来修饰变量

4. 如何使用bootstrap

  1. 安装bootstrap, 在app.js同级目录下执行

    1
    2
    npm install bootstrap --save
    npm install jquery --save

  2. 打开app.js, 找到express.static, 下面添加一行

    1
    2
    #app.use(express.static(path.join(__dirname, 'public')))
    app.use('/lib',express.static(path.join(__dirname, 'node_modules')));

  3. 在views下创建includes目录，在目录下新建head.jade, 写入如下内容

    1
    2
    3
    link(href="/lib/bootstrap/dist/css/bootstrap.min.css", rel="stylesheet")
    script(src="/libs/jquery/dist/jquery.min.js") 
    script(src="/libs/bootstrap/dist/js/bootstrap.min.js")

  4. 在layout.jade中引入head.jade

    1
    2
    3
    4
    5
    6
    7
    8
    doctype html
    html
      head
        title= title
        link(rel='stylesheet', href='/stylesheets/style.css')
        include ./includes/head
      body
        block content

5. 如何同步读取大文件

超过一定大小的文件，直接使用readFileSync会读取失败，网上提供了一些异步readline的方法，如果要同步读取的话，可以使用如下方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var fs = require('fs')
var offset = 0;
var chunkSize = 204800;
var chunkBuffer = new Buffer(chunkSize);
var fp = fs.openSync(path, 'r');
var bytesRead = 0;
while(bytesRead = fs.readSync(fp, chunkBuffer, 0, chunkSize, offset)) {
    offset += bytesRead;
    var str = chunkBuffer.slice(0, bytesRead).toString();
    var arr = str.split('\n');

    #最后一个可能不是完整的一行，需要删掉
    if(arr.length > 1) {
        offset -= arr.pop().length;
    }
}
这个程序的每次读取的大小的代码根据需要微调下。

6. 一些有用的网址

  1. html to Jade : http://html2jade.vida.io/
------ 本文结束 ------
k