js新建list_Node.js之express的使用

最新推荐文章于 2022-04-11 21:06:03 发布

weixin_39613692

最新推荐文章于 2022-04-11 21:06:03 发布

阅读量673

点赞数

文章标签： js新建list

首先，我们需要安装express，很简单，就一个命令，启动终端，cd到工作目录输入如下命令

>npm install express

安装完我们来测试一下

// app.js

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Hello NodeJS');
})

app.listen(8080);

运行 node app.js，打开浏览器输入http://127.0.0.1:8080回车，是不是看到Hello NodeJS啦？

我们来分析下代码，主要看app.get()方法，其定义是这样子的：app.method (path, handler)，method除了get之外，还有post，set，put，delete等方法。其中path是请求运行的路径，即URL中端口后面部分；handler是处理请求的方法，带有两个参数request和response。

假如我们要处理类似请求http://127.0.0.1:8080/test1/test2/test3，get方法可以这样写

app.get('/test1/test2/test3', (req, res) => {
    res.send('Hello NodeJS');
})

假如我们还有很多其他请求需要处理，例如：http://127.0.0.1:8080/test/test1、http://127.0.0.1:8080/test/test2、http://127.0.0.1:8080/test/test3。如果我们按照上面的方法把它们都写到app.js文件去，那么app.js文件必定会越来越大，不利于阅读和维护，因此我们可以写个test.js文件

// test.js

const express = require('express');
const router = express.Router();

router.get('/test1', (req, res) => {
    res.send('Get test1');
});

router.get('/test2', (req, res) => {
    res.send('Get test2');
});

router.get('/test3', (req, res) => {
    res.send('Get test3');
});

module.exports = router;

然后，在app.js中添加一句 app.use('/test', test);

// app.js

const express = require('express');
const app = express();
const test = require('./test');

app.use('/test', test);

app.listen(8080);

上面写的test.js其实是个路由器，所有 /test/* 请求都由test.js处理。真实项目中我们会有多个路由器，我们只需把每个路由器用 app.use() 添加到 app.js 里面即可。然而，这也存在一个问题，每增加一个新的路由器，我们都要修改 app.js 文件。如果项目是你一个人写的，或许你不会忘记增加路由器时在 app.js 文件添加 app.use()，但是如果项目是有多个人开发的，那么其他人也许就没有你那么好记性了。那么有没有一个办法增加路由器时无需修改 app.js 的方法呢？答案是肯定的。

新建一个文件夹controllers，用来专门存放路由器，然后在app.js遍历controllers文件夹把所有路由器添加进去。没看明白直接看下面代码。

// app.js

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

let list = fs.readdirSync('./src/controllers');
list.forEach(file => {
    let controller = path.basename(file, '.js');
    let router = require(`./controllers/${controller}`);
    app.use(`/${controller}`, router);
});

app.listen(8080);

以后新加路由器就直接在controllers文件夹新建文件就行了，再也不需要修改app.js。

看到controller这个词是否想起了大名鼎鼎的MVC框架呢？没错，这个controllers里面存放的其实也就是MVC中的控制器。绑定控制器，我们还有更简单的方法，直接使用express-controller组件，不过这个组件需要自己安装。我们直接来看下怎么用吧。

express-controllerwww.npmjs.com

// app.js

const express = require('express');
const expressControllers = require('express-controller');

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

// 路由控制
app.use(router);

// 绑定路由控制器
expressControllers.setDirectory(__dirname + '/controllers').bind(router);

// 启动服务，监听端口
app.listen(8080);

写个testController.js测试一下，注意：文件名后面一定要加上Controller，一定要大写“C”。

// testController.js

module.exports = {
    
    get_index : function (req, res) {
        res.send('This is a controller.');
    },
    
    get_test : function (req, res) {
        res.send('Get test');
    },
}

MVC怎能只有controller，而没有model和view呢。即使我们做的是API服务，那也不能缺少model啊。下面我们继续看看如何添加model。

先创建个文件夹，给它起个名字叫models吧，然后在models里面新建个user.js，随便写个测试方法。

// user.js

module.exports = {

    test : function() {
        return 'This is model data';
    }

}

然后修改我们的testController.js，如下

// testController.js

const user = require('../models/user');

module.exports = {
    
    get_index : function (req, res) {
        res.send('This is a controller.');
    },
    
    get_test : function (req, res) {
        res.send(user.test());
    },
}

model其实就是一个普通的js文件。我们继续看下view。

同样，我们新建一个views文件夹，然后新建一个文件userShow.ejs，如下

<!doctype html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="/css/amazeui.min.css">
    <script src="/js/jquery.min.js"></script>
</head>
<body>
    <h1>hello world</h1>
    <ul>
        <% user.forEach(function(user){%>
            <li>name : <%= user.name %>---email : <%= user.email %></li>
        <% });%>
    </ul>
</body>
</html>

这里我们用到一个模板引擎EJS，

EJS -- 嵌入式 JavaScript 模板引擎ejs.bootcss.com

然后app.js文件需要稍作修改，如下

// app.js

const express = require('express');
const expressControllers = require('express-controller');
const path = require('path');

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

// 视图加载
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// 路由控制
app.use(router);

// 绑定路由控制器
expressControllers.setDirectory(__dirname + '/controllers').bind(router);

// 启动服务，监听端口
app.listen(8080);

接着我们在controller添加个测试方法

// testController.js

const user = require('../models/user');

module.exports = {

    get_index: function (req, res) {
        res.send('This is a controller.');
    },

    get_test: function (req, res) {
        res.send(user.test());
    },

    get_user: function (req, res) {
        user.getUser((data) => {
            res.render('userShow', data);
        })
    }
}

然后在model添加数据

// user.js

module.exports = {
    test: function () {
        return 'This is model data';
    },

    getUser: function (callback) {
        callback({ user: [{ name: 'a', email: 'e' }] });
    }
}

至此，简单的MVC我们已经实现了。实际项目中我们会有很多静态资源文件，诸如html、js、css和图片等，我们可以把这些文件统一放到一个文件夹public，然后在app.js中指定该文件夹路径为静态资源文件路径。此外，我们在开发过程中还经常要处理Json数据，解析body，输出日志等。

// app.js

const express = require('express');
const expressControllers = require('express-controller');
const path = require('path');
const logger = require('morgan');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');

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

// 视图加载
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

//静态文件载入
app.use(express.static(path.join(__dirname, 'public')));

//传输数据json处理
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

// 路由控制
app.use(router);

// 绑定路由控制器
expressControllers.setDirectory(__dirname + '/controllers').bind(router);

// 启动服务，监听端口
app.listen(8080);

OK，express简单介绍就到此了，赶紧试试吧。

Express - 基于 Node.js 平台的 web 应用开发框架www.expressjs.com.cn

weixin_39613692

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js新建list_Node.js之express的使用

首先，我们需要安装express，很简单，就一个命令，启动终端，cd到工作目录输入如下命令>npm install express安装完我们来测试一下// app.js运行 node app.js，打开浏览器输入http://127.0.0.1:8080回车，是不是看到Hello NodeJS啦？我们来分析下代码，主要看app.get()方法，其定义是这样子的：app.method (pa...
复制链接

扫一扫