Web2.0 TA 问题记录

记录一下上学期在当Web2.0 TA的时候遇到过的小朋友们问过的问题，可能会成为以后我开发上遇到的问题。

1. 元素的背景默认是boader origin的，也就是说是从边框开始延伸的。

但如果对body设置margin和背景的话，会发现body的背景也会延伸到margin的部分。（这是误区，实际上并不是“延伸到margin的部分”）

body{background:#069; margin:100px; border:30px solid #093;}

原因：当html标签无背景样式时，它就没有被激活，body类似于根结点，则body的背景色就被浏览器“俘获了”。一旦对html标签设定了背景样式，则此时html标签就称为最顶级，其背景被浏览器获取，成为浏览器的背景。

html{background:#999;}
body{background:#069; margin:100px; border:30px solid #093;}

参考：对html与body的一些研究与理解

2. nodeJS读取css和js文件：通过后缀名进行判断

nodeJS读取文件——fs.readFile，由于是异步的，所以读取完毕之后的动作放入回调函数中。其响应动作有三个步骤：

1. 写头：response.writeHead(200, {"Content-Type": "XXXX"}) ，200表示成功状态，不同的文件类型使用不同的Content-Type
2. 写数据：response.write(data)，data就是回调函数中的参数（存有文件数据）
3. 结束响应：response.end()

var http = require("http");
var fs = require("fs");
var url = require("url");

// 建立服务器
http.createServer(function (request, response) {
  // 获得请求的url
  var pathname = url.parse(request.url).pathname;
  // 获得请求文件的后缀名
  var ext = pathname.match(/(\.[^.]+|)$/)[0];
  switch(ext) {
    case '.css':
    case '.js':
      fs.readFile("."+request.url, "utf-8", function (err, data) {
        if (err) throw err;
        response.writeHead(200, {
          "Content-Type": {
            ".css": "text/css",
            ".js": "application/javascript",
          }[ext]
        });  // ext是哪个，就选择对应的那个Content-Type
        response.write(data);
        response.end();
      });
      break;
    default:
      fs.readFile("./index.html", "utf-8", function (err, data) {
        if (err) throw err;
        response.writeHead(200, {"Content-Type": "text/html"});
        response.write(data);
        response.end();
      });
  }
}).listen(8888);
console.log("server start...");

参考：node.js一个简单的页面输出

3. mouseleave事件和mouseout事件

当鼠标指针离开元素时，会发生mouseleave事件，该事件通常与mouseenter事件一起使用。

与mouseout事件有所不同，如果鼠标指针离开任何子元素，同样会触发mouseout事件。

4. app.use（或router.use）用于加载路由和加载各种中间件，中间件简单来说就是函数，在没有传入路径的情况下这个函数在任何get/post请求下都会执行。

var app = express();
var router = express.Router();

// 没有挂载路径的中间件，通过该路由的每个请求都会执行该中间件
router.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();
});

// 一个中间件栈，显示任何指向 /user/:id 的 HTTP 请求的信息
router.use('/user/:id', function(req, res, next) {
  console.log('Request URL:', req.originalUrl);
  next();
}, function (req, res, next) {
  console.log('Request Type:', req.method);
  next();
});

// 一个中间件栈，处理指向 /user/:id 的 GET 请求
router.get('/user/:id', function (req, res, next) {
  // 如果 user id 为 0, 跳到下一个路由
  if (req.params.id == 0) next('route');
  // 负责将控制权交给栈中下一个中间件
  else next();}, function (req, res, next) {
  // 渲染常规页面
  res.render('regular');
});

// 处理 /user/:id， 渲染一个特殊页面
router.get('/user/:id', function (req, res, next) {
  console.log(req.params.id);
  res.render('special');
});

// 将路由挂载至应用
app.use('/', router);

中间件又分为应用级中间件和路由级中间件（区别暂时未知，以后有空可填坑），简单来说用use的时候，无论是get还是post的请求都要执行，一般用于通用中间件。而页面渲染显然是只有get请求才需要用到，所以就不用use而用get（也就是说只有get请求或者只有post请求才会调用的中间件，就用get/post而不用use）

参考：使用Express中间件

5. mongo命令行简单使用

1. mongo ：进入mongo命令行
2. show dbs ：查看有哪些数据库
3. use signin ：使用 signin 数据库
4. db.user.find({id: 1}) ：查找user collection里id为1的字段

6. 前后端协同开发

一般来说，后台只提供数据，前端来渲染视图有以下好处：

1. 如果页面局部刷新频繁，可以节省一点IO(不需要每次都fetch html结构而只是数据)
2. 纯数据接口比输出html的接口具有更好的扩展性，比如可以直接给移动app端或是更多形式的客户端使用

基于angular的应用一般是使用以上的方式进行前后端协同开发

7. angular中的ng-view：angular的路由使用的是哪个template，就会把那个template填到ng-view中

8. 在express2中，res.download里面的路径需要填绝对路径，而且不能出现".."。另外__dirname能获得当前目录的绝对路径。所以下载的话需要把要下载的文件放在定义路由中间件的文件中（以Web.doc为例），并且 res.download(__dirname + "/Web.doc");

9. 使用express-session这个包，如果要实现关闭浏览器还保存登陆状态，要把它的maxAge设置了，官方原文：

By default cookie.maxAge is null, meaning no "expires" parameter is set so the cookie becomes a browser-session cookie. When the user closes the browser the cookie (and session) will be removed.

app.use(cookieParser());
app.use(session({
  secret: 'keyboard',
  resave: true,
  cookie: {maxAge: 60000*100}
})); 

10. 在chrome下使用连字符连接的单词会被分开，而在火狐下则不会。