【nodejs】新手如何一步步创建一个简单的express项目

来源:互联网 发布:巴纳姆效应 知乎 编辑:程序博客网 时间:2024/05/16 14:48

1.环境及工具的说明:
PC系统:Windows 10;
命令行工具:CMD;
2.
首先,在您的工程目录下,创建一个package.json文件;
文件配置如下:

`{  "name": "app_demo",  "main": "./app.js",  "dependencies": {    "body-parser": "*",    "express": "^4.14.0"  }}

然后在cmd命令行,进入你的工程目录文件,安装express:
这里是本地模式的安装
安装成功之后,你就可以通过express -V命令查看你所安装的express的版本号啦~~
同时,当你打开你的项目,会发现在工程文件,多了一个这样的文件:
这里写图片描述
以上命令会将 Express 框架安装在当期目录的 node_modules 目录中, node_modules 目录下会自动创建 express 目录。以下几个重要的模块是需要与 express 框架一起安装的:

  1. body-parser - node.js 中间件,用于处理 JSON, Raw, Text 和 URL 编码的数据。
    $ npm install body-parser –save
  2. cookie-parser - 这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie,并把它们转成对象。
    $npm install cookie-parser –save
  3. multer - node.js 中间件,用于处理 enctype=”multipart/form-data”(设置表单的MIME编码)的表单数据。
    $ npm install multer –save

嗯,到目前为止,我们成功获取了项目所需要的第三方库了。
接下来,就是创建工程一个express项目啦~
1.首先,创建一个启动文件 app.js

var express = require('express');//引入express模块var app = express();app.get('/', function (req, res) {    //一个简单的业务逻辑,表示在访问的资源路径为根目录的时候,服务器响应输出"hello world";   res.send('Hello World');})//创建一个http服务,监听8081端口var server = app.listen(8081, function () {  var host = server.address().address  var port = server.address().port  console.log("应用实例,访问地址为 http://%s:%s", host, port)})

现在cmd启动这个文件,node+文件名:
这里写图片描述
.这样,我们就可以通过在浏览器中访问 http://127.0.0.1:8081,访问到这个文件的输出啦
这里写图片描述

好啦,现在我们终于跨出了“hello world”的一小步啦。
接下来,我们需要配置好文件的路由。路由的功能就是决定了由谁(指定脚本)去响应客户端请求。
我们可以再创建一个node_demo.js文件,文件代码如下:

var express = require('express');var app = express();//  主页输出 "Hello World"app.get('/', function (req, res) {   console.log("主页 GET 请求");   res.send('Hello GET');})//  POST 请求app.post('/', function (req, res) {   console.log("主页 POST 请求");   res.send('Hello POST');})//  /del_user 页面响应app.get('/del_user', function (req, res) {   console.log("/del_user 响应 DELETE 请求");   res.send('删除页面');})//  /list_user 页面 GET 请求app.get('/list_user', function (req, res) {   console.log("/list_user GET 请求");   res.send('用户列表页面');})// 对页面 abcd, abxcd, ab123cd, 等响应 GET 请求app.get('/ab*cd', function(req, res) {      console.log("/ab*cd GET 请求");   res.send('正则匹配');})var server = app.listen(8081, function () {  var host = server.address().address  var port = server.address().port  console.log("应用实例,访问地址为 http://%s:%s", host, port)})

(记得要启动另一个node文件时,必须按住ctrl+c退出当前的服务)
同样通过npm 命令行 node node_demo启动服务
这样,通过在浏览器输入不同的地址,比如 http://127.0.0.1:8081/list_user,就可以访问到不同页面的内容。

接下来,如何让浏览访问静态文件:
我们可以在我们刚才的app.js中添加这样一行(假设您的静态文件都放在public的文件夹里面)

app.use(express.static(__dirname + '/public'));

运行文件,
知道了这些之后,下面我们就可以把我们的前端静态文件,Express 提供了内置的中间件 express.static 来设置静态文件如:图片, CSS, JavaScript 等。
这里我们需要用app.use这个函数。你可以使用 express.static 中间件来设置静态文件路径。例如,如果你将图片, CSS, JavaScript 文件放在 public 目录下,你可以这么写:

//用来解析请求的bodyvar bodyParser = require('body-parser');// json类型bodyapp.use(bodyParser.json());// query string类型bodyapp.use(bodyParser.urlencoded({    extended: false}));app.use(express.static('public'));

到此为止,就可以通过浏览器输入地址访问到相应的页面啦~~~

但是,现在问题又来了。通常一个项目是由很多个文件构成了,如果我们把所有的路由都配置到这个app.js里面的话,逻辑结构会相当庞大而且可读性差。这时,我们可以把对应的路由分散到其它文件里面。以此达到路由和业务逻辑分离的目的

这时,我们需要创建一个路由文件,
这里写图片描述
把相关的路由配置写在路由文件里,比如在ueser.js里面,配置代码如下:

var express = require('express');var router = express.Router();//业务逻辑函数。。。。//输出路由module.exports = router;

然后再在启动文件app.js下面加如下配置

// 路由与业务逻辑

app.use(‘/user’, require(‘./routes/users.js’));
这样,路由配置就搞定啦。
到目前为止,一个简单的express项目就创建完毕了。
最后,再甩两个链接吧。

如何创建一个完整的express工程目录
中文版的express API手册

0 0