Node 入门教程之整理文件

发布于 2021-12-07 12:38:11 字数 8386 浏览 1087 评论 0

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

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

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

建立如下目录。

img.png

  • /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

var express = require('express');
var controller = require('../controllers/homeController');
var router = express.Router();

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

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: 20},
    {name: '李四', age: 22}
];

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 来安装依赖。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

0 文章
0 评论
843 人气
更多

推荐作者

‘画卷フ

文章 0 评论 0

寂寞清仓

文章 0 评论 0

脸赞

文章 0 评论 0

WeiBestSmart

文章 0 评论 0

娇女薄笑

文章 0 评论 0

国粹

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文