如果你能把所有代码写进一个文件，并且能很好的管理、协调、多人开发。那么可以跳过这期（请务必带我飞）。

我们接着完善上期的代码，给代码分家。

node并没有启动入口，更没有固定的项目结构，文件配置。这些全部要靠自己动手，靠约定，正所谓约定由于配置。因为作者书读的少，只会MVC结构，姑且按照MVC结构来分。

建立如下目录。

  • /bin/ : 项目的启动文件，也可以放其他乱七八糟的脚本。如果你有多种环境或者多个入口，这样分就很有必要的
  • /configure/ : 配置文件，上图中根据生产环境和开发环境配置了两个文件夹，分别是development和production
  • /lib/ : js源代码，app.js文件也在这里
  • /logs/ : 日志文件
  • /node_modules/ : 通过npm包管理中间件都在这，包括session，模板，日志等中间件，你自己安装的中间件也在这
  • /public/ : 暴露的文件夹，从名字就可以看出，图面前端js脚本和css会在这里
  • /src/ : 其他语言的文件，如果是coffeescript的项目，编译前的文件会放在这里，编译后的文件在lib里，这里我们暂时用不到
  • /test/ : 单元测试
  • /views/ : 模板文件
  • /app.js : 约定俗成的项目入口
  • /package.json : 配置你项目依赖的包，使用npm命令 npm install -d 会自动安装里面记录的中间件，非常方便。由于nodejs的中间件不完全是脚本组成的，也会包含C写的编译文件，各环境下不尽相同，所以通过npm，本地下载编译是非常重要的

下面我们来填充文件

lib/app.js

 var express = require('express');

 var app = express();

 module.exports = app;

bin/start.js

 var app = require('../lib/app');

 var port = 3000;

 var server = app.listen(port, function () {

     console.log('http server listening on port %s', server.address().port);

 });

这里bin/start.js充当程序的启动文件。通过node bin/start.js启动项目。现在访问http://127.0.0.1:3000/能看到Cannot GET /的字样就说明成功了。

我们来写第一个路由

controllers/homeController.js

 var action = {

     get: function (req, res, next) {

         return res.send('ok');

     }

 };

 module.exports = action;

routes/homeRoute.js

1 var express = require('express');

2 var controller = require('../controllers/homeController');

3 var router = express.Router();

4

5 router.get('/', controller.get);

6

7 module.exports = router;

routes/index.js

 var homeRoute = require('./homeRoute');

 module.exports = function (app) {

     app.use(homeRoute);

 }

routes/app.js

 var path = require('path');

 var express = require('express');

 var route = require('./routes');

 var bodyParser = require('body-parser');

 var app = express();

 app.use(bodyParser.json());

 app.use(bodyParser.urlencoded({ extended: true }));

 route(app);

 module.exports = app;

现在第一个路由已经配置好了，访问 http://127.0.0.1:3000/ 就能看到ok的提示。

接下来我们添加一个能交互的页面。

首先我们需要一个模板引擎，使用npm安装

E:\project\heron-lesson\demo3>npm install ejs --save

修改app.js文件

 var path = require('path');

 var express = require('express');

 var route = require('./routes');

 var bodyParser = require('body-parser');

 var app = express();

 app.use(bodyParser.json());

 app.use(bodyParser.urlencoded({extended: true}));

 app.set('views', path.join(__dirname, '../views'));

 app.set('view engine', 'ejs');

 app.engine('ejs', require('ejs').renderFile);

 route(app);  // 路由文件分开

 module.exports = app;

由于我们还没讲到数据库，那么先缓存几个数据吧

controllers/listController.js

 var data = [

     {name: '张三', age: 20},

     {name: '李四', age: 22}

 ];

继续填充路由

 var action = {

     index: {

         get: function (req, res, next) {

             return res.render('list/index', {data: data});

         }

     }

 };

 module.exports = action;

routes/listRoute.js

 var express = require('express');

 var controller = require('../controllers/listController');

 var router = express.Router();

 router.get('/index', controller.index.get);

 module.exports = router;

routes/index.js，我们这里用了个小技巧给list路由加上了目录/list

 var homeRoute = require('./homeRoute');

 var listRoute = require('./listRoute');

 module.exports = function (app) {

     app.use(homeRoute);

     app.use('/list', listRoute);

 }

views/list/index.ejs

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>List</title>

 </head>

 <body>

 <ul>

     <% data.forEach(function (item) { %>

     <li>姓名：<%= item.name %>，年龄：<%= item.age %></li>

     <% }) %>

 </ul>

 </body>

 </html>

现在访问http://127.0.0.1:3000/list/index ，就能看到两行数据了。注意，如果你输出的中文有问题，请更改你的代码文件，保存为utf-8。

姓名：张三，年龄：20

姓名：李四，年龄：22

我们再添加一个搜索功能

修改页面 /views/list/index.ejs

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>List</title>

 </head>

 <body>

 <form action="" method="post">

     搜索：<input type="text" name="q"/> <input type="submit"/>

 </form>

 <ul>

     <% data.forEach(function (item) { %>

     <li>姓名：<%= item.name %>，年龄：<%= item.age %></li>

     <% }) %>

 </ul>

 </body>

 </html>

同上controllers、routes都得改

controllers/listController.js

 var data = [

     {name: '张三', age: },

     {name: '李四', age: }

 ];

 var action = {

     index: {

         get: function (req, res, next) {

             return res.render('list/index', {data: data});

         },

         post: function (req, res, next) {

             var list = [];

             data.forEach(function (item) {

                if (item.name === req.body.q)

                    list.push(item);

             });

             return res.render('list/index', {data: list});

         }

     }

 };

 module.exports = action;

routes/listRoute.js

 var express = require('express');

 var controller = require('../controllers/listController');

 var router = express.Router();

 router.get('/index', controller.index.get)

     .post('/index', controller.index.post);

 module.exports = router;

刷新页面。

就可以根据name字段来完全搜素了。

彩蛋：

每次都要修改routes里的多个文件来路由，是不是太麻烦了呢。

D:\project\heron-lesson\demo3>npm install heron-mvc

安装heron-mvc。github: https://github.com/iheron/heron-mvc

修改lib/app.js

 var path = require('path');

 var express = require('express');

 var route = require('./routes');

 var bodyParser = require('body-parser');

 var app = express();

 var mvc = require('heron-mvc');

 app.use(bodyParser.json());

 app.use(bodyParser.urlencoded({extended: true}));

 app.set('views', path.join(__dirname, '../views'));

 app.set('view engine', 'ejs');

 app.engine('ejs', require('ejs').renderFile);

 mvc.route.load({

     routeDir: path.join(__dirname, './routes'),

     controllerDir: path.join(__dirname, './controllers')

 }, function (data) {

     app.use("/" + data.route, data.router); // 优先加载路由

 }, function (data) {

     app[data.method]("/" + data.controller + "/" + data.action, data.func); // 没有路由直接加载控制器 会根据控制器的前缀和action名称 生成两级目录

 });

 module.exports = app;

现在是见证奇迹的时候了。不用再改routes 来处理路由了，甚至可以删除这个了。

该插件会根据controller的前缀和action的名称来自动生成两级目录。如果你要手动控制路由，也会优先加载路由配置。

该项目下载地址：demo3

下载后需通过npm install -d 来安装依赖

下一期如果内容过多会考虑录成视频。大家如果有什么想看的可以给我留言。

Node填坑教程——整理文件的更多相关文章

  1. Node填坑教程——前言

    Node是什么? Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个(只有一个)物 ...

  2. Node填坑教程——HelloWorld

    环境安装(极简): Node需要的环境可以说及其简单,也可以说及其复杂.为什么这么说呢? 如果里只需要运行环境那么到Node官网下载一个包就行了.里面自带npm管理工具,这是包管理工具,以后会频繁的使 ...

  3. Node填坑教程——简易http服务器

    我们这一期做一个简易的http服务器. 先建一个文件夹,就算是一个空的项目了.然后新建app.js和package.json文件. 这样一个简易项目的基本文件就建好了. 通过命令行工具,在项目路径下输 ...

  4. Node填坑教程——过滤器

    所谓“过滤器”,只是一个概念,可以理解是一个路由,也可以理解为一个中间件.原理非常简单,就是利用匹配规则,让其有限匹配在正常的路由前面处理就行了. 比如有如下路由 app.get('/', funct ...

  5. Node填坑教程——常用库

    作为函数式编程来说,流程控制和函数库是必不可少的(应该吧). 下面我们介绍两个常用的库. lodash:完整的api请参阅,https://lodash.com/docs.这里我们只演示几个简单的例子 ...

  6. Android项目开发填坑记-so文件引发的攻坚战

    故事的最初 我负责的项目A要求有播放在线视频的功能,当时从别人的聊天记录的一瞥中发现百度有相关的SDK,当时找到的是Baidu-T5Player-SDK-Android-1.4s,项目中Demo的so ...

  7. ReactNative 从环境和第一个demo说起，填坑教程

    一.React-Native MacOS必备环境配置: 1.安装homebrew(这东西可以理解为命令行的app商店) /usr/bin/ruby -e "$(curl -fsSL http ...

  8. backbone新手填坑教程资源

    backbone 入门第二版 http://www.kancloud.cn/kancloud/backbonejs-learning-note/49379 backbone 入门讲解 http://w ...

  9. Vue3+Typescript+Node.js实现微信端公众号H5支付(JSAPI v3)教程--各种填坑

    ----微信支付文档,不得不说,挺乱!(吐槽截止) 功能背景 微信公众号中,点击菜单或者扫码,打开公众号中的H5页面,进行支付. 一.技术栈 前端:Vue:3.0.0,typescript:3.9.3 ...

随机推荐

  1. Python基本语法[二]，python入门到精通[四] （转）

    写在前面 python你不去认识它,可能没什么,一旦你认识了它,你就会爱上它 回到顶部 v正文开始:Python基本语法 1.定义常量: 之所以上篇博客介绍了定义变量没有一起介绍定义常量,是因为Pyt ...

  2. C++“窗体”程序设计启蒙

    [摘要]本文以C++菜菜鸟(仅仅须要学习了C++数据类型和控制结构就可以)为目标读者,用求解一元二次方程作为实例,展示窗体式程序的开发过程,获得初步体验.写作目的包含:(1)让学生通过模仿,开发出类似 ...

  3. ENode简介与各种资源汇总

    ENode简介与各种资源汇总 ENode是什么 ENode是一个.NET平台开源的应用开发框架,为开发人员提供了一套完整的基于DDD+CQRS+ES+(in-memory)+EDA架构风格的解决方案. ...

  4. Hadoop它——跑start-all.sh时间namenode不启动

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46353211 近期遇到了一个问题,运行start-all.sh的时候发现JPS一下 ...

  5. Codeforces Round #272 (Div. 1)D（字符串DP）

    D. Dreamoon and Binary time limit per test 2 seconds memory limit per test 512 megabytes input stand ...

  6. JBPM——MyEclipse开发环境的搭建

    第一次接触JBPM我不知道如何在工程中的应用.查了一些资料.大约在JBPM随着时代的发展有一定的了解.首先JBPM它是JBoss件平台的一个组成部分.是一个灵活的,易扩展的工作流管理系统,仅仅只是这个 ...

  7. 无废话WCF入门教程五[WCF的通信模式]

    一.概述 WCF在通信过程中有三种模式:请求与答复.单向.双工通信.以下我们一一介绍. 二.请求与答复模式 描述: 客户端发送请求,然后一直等待服务端的响应(异步调用除外),期间处于假死状态,直到服务 ...

  8. 【高德API】如何利用MapKit开发全英文检索的iOS地图

    原文:[高德API]如何利用MapKit开发全英文检索的iOS地图 制作全英文地图的展示并不困难,但是要制作全英文的数据检索列表,全英文的信息窗口,你就没办法了吧.告诉你,我有妙招!使用iOS自带的M ...

  9. 认识bash这个shell

    我们通过shell将我们输入的命令与内核通信,好让内核可以控制硬件来正确无误地工作bash是我们Linux默认的shell 用户界面(Shell,application)--------核心(Kern ...

  10. android ListView之BaseAdapter的使用方式

    通常在使用自己定义适配器的时候,我们都会掌握一种固定的模式.充分利用convertView+缓存的方式. private ArrayList<ListBean> list ; privat ...