express中间层搭建前端项目3

创建路由

文件名称以及路径 routes/index.js

//获取路由中间件
var getMoreMethod = require('../method_routes/getMore-method').getMoreMethod;
module.exports = function(app, domain) {
    //domain来处理异常
    app.use(function(req, res, next) {
        var d = domain.create();
        //监听domain的错误事件
        d.on('error', function(err) {
            // res.statusCode = 500;
            res.statusCode = 404;
            res.render('htmlerror');
            d.dispose();
        });
        d.add(req);
        d.add(res);
        d.run(next);
    });
    //模板辅助方法
    //app.use(require('../ejs_fun/index'));
    app.get('/index',getMoreMethod);
}

创建getMore-method

文件路径method_routes/getMore-method.js
这里的点主要有两方面1.async 2.request

var request = require('request');//nodejs请求中间件
var async = require('async');//流程控制中间件，有兴趣可以自行读取async的api
//引入全局变量
require('../config/config');
exports.getMoreMethod = function(req,res,next){
    async.waterfall([
        function(callback) {
            var data = {};
            request.get({url:Config.url+"api/4", formData: {}}, function(err, res, body) {
                if (err) {
                    console.error('failed:', err);
                    callback && callback(err);
                }else{
                    data.f = JSON.parse(body);
                    callback(null, data);
                }
            });
        },
        function(data, callback) {
            request.get({url:Config.url+"api/test2", formData: {}}, function(err, httpResponse, body) {
                if (err) {
                    console.error('failed:', err);
                    callback && callback(err);
                }else{
                    data.t = JSON.parse(body);
                    callback(null, data);
                }
            });
        },
        function(data, callback) {
            request.get({url:Config.url+"test/pos", formData: {}}, function(err, res, body) {
                if (err) {
                    console.error('failed:', err);
                    callback && callback(err);
                }else{
                    data.p = JSON.parse(body);
                    callback(null, data);
                }
            });
        }
    ], function(err, result) {
        res.render("getMore", {
            "result": result,
            "first":result.f,
            "two":result.t,
            "three":result.p
        });
    });
}

全局变量

文件路径config/config

//全局变量
global.Config = {
    url:'http://192.168.43.201:3009/'//本地ip 
}

创建ejs文件

文件路径 views/getMore.ejs

<!DOCTYPE html>
<html>
  <head>
    <title>getMore</title>
  </head>
  <body>
      <div class="container">
          <%for(var i in first){ %>
                <%if(i == 'img'){%>
                    <img src="<%= first[i] %>" alt="">
                <%}else{%>
                    <div><%= first[i] %></div>
                <%}%>
          <%}%>
      </div>
  </body>
</html>

以上接口都是自行搭建mock数据，github地址node_api
搭建express项目已经差不多，欢迎大佬一起讨论

express中间层搭建前端项目3

创建路由

创建getMore-method

全局变量

创建ejs文件

如果美是罪

引用和评论

使用css的filter写鼠标滑过效果

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具