美文网首页
Node.js+Express 进行web开发环境搭建

Node.js+Express 进行web开发环境搭建

作者: 老板来三包辣条 | 来源:发表于2018-07-18 15:04 被阅读0次

    一、Node.js的安装

    node.js的安装可以参考W3Cschol上的教程,内容比较全,windows和linux环境下的安装教程都有,链接是:W3Cschool Node.js安装教程

    二、Node.js Express 框架

    Express 简介

    Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用,和丰富的HTTP工具。
    使用Express可以快速地搭建一个完整功能的网站。
    Express 框架核心特性包括:

    • 可以设置中间件来响应HTTP请求。
    • 定义了路由表用于执行不同的HTTP请求动作。
    • 可以通过向模板传递参数来动态渲染HTML页面。

    安装 Express

    Express中文官网:Express中文网

    $ npm install express --save
    $ npm install body-parser --save
    $ npm install cookie-parser --save
    $ npm install multer --save
    

    以上命令会安装Express和几个比较重要的模块

    使用Express 应用生成器构建项目工程

    通过应用生成器工具 express 可以快速创建一个应用的骨架。
    通过如下命令安装:

    $ npm install express-generator -g
    

    安装好后开始构建我们的第一个应用

    $ express myapp
    
       create : myapp
       create : myapp/package.json
       create : myapp/app.js
       create : myapp/public
       create : myapp/public/javascripts
       create : myapp/public/images
       create : myapp/routes
       create : myapp/routes/index.js
       create : myapp/routes/users.js
       create : myapp/public/stylesheets
       create : myapp/public/stylesheets/style.css
       create : myapp/views
       create : myapp/views/index.jade
       create : myapp/views/layout.jade
       create : myapp/views/error.jade
       create : myapp/bin
       create : myapp/bin/www
    

    安装依赖包:

    $ cd myapp 
    $ npm install
    

    启动myapp

    在开发的时候,每次修改文件,都需要重启 express 服务,比较麻烦。使用nodemon,修改文件后可以自动重启 express 服务。
    使用方法可以参考:https://www.jianshu.com/p/c5baef64563a

    // 第一种启动方法
    npm start
    // linux
    $ DEBUG=myapp npm start
    // windows
    set DEBUG=myapp & npm start
    

    启动成功后,浏览器输入 http://localhost:3000/ 就可以看到应用了(默认是3000端口,后面再改)
    通过 Express 应用生成器创建的应用一般都有如下目录结构:

    .
    ├── app.js
    ├── bin
    │   └── www
    ├── package.json
    ├── public
    │   ├── images
    │   ├── javascripts
    │   └── stylesheets
    │       └── style.css
    ├── routes
    │   ├── index.js
    │   └── users.js
    └── views
        ├── error.jade
        ├── index.jade
        └── layout.jade
    
    7 directories, 9 files
    

    三、Express 应用生成器创建的应用项目结构

    1、bin/www
    /bin/www 是应用的主入口。应用的真正入口是app.js文件,所以www文件先把app.js文件引进来,其余的内容主要就是创建了一个node HTTP server。(在这里修改端口)

    // 默认是3000端口,这里改成了80端口
    var port = normalizePort(process.env.PORT || '80');
    app.set('port',port);
    

    2、app.js
    app.js是框架的主要文件,主要干的内容如下:

    • 创建Express对象,引入一些常用包
    var createError = require('http-errors');
    var express = require('express');
    var path = require('path');
    var favicon = require('serve-favicon');
    var logger = require('morgan');
    var cookieParser = require('cookie-parser');
    var bodyParser = require('body-parser');
    
    var app = express();
    
    • 引入routes文件夹里面的处理URL路由的文件,并且关联路由路径与引入文件
    // 引入路由处理文件
    var indexRouter = require('./routes/index');
    var usersRouter = require('./routes/users');
    // 关联
    app.use('/', indexRouter );
    app.use('/users', usersRouter );
    
    • 处理错误的http请求
    // catch 404 and forward to error handler
    app.use(function(req, res, next) {
      var err = new Error('Not Found');
      err.status = 404;
      next(err);
    });
    
    // error handler
    app.use(function(err, req, res, next) {
      // set locals, only providing error in development
      res.locals.message = err.message;
      res.locals.error = req.app.get('env') === 'development' ? err : {};
    
      // render the error page
      res.status(err.status || 500);
      res.render('error');
    });
    
    • 设置模板位置和模板引擎(Express创建时模板引擎默认是jade,也可以自定义模板引擎,我这里修改成ejs,当然前提是按照ejs的依赖,后面有进一步说明)
    // view engine setup
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'ejs');
    

    四、ejs模板引擎与jade模板引擎

    1、jade
    jade模板引擎,Express创建项目时默认是jade模板引擎,但是感觉jade并不是很适合我个人的习惯,所以没怎么用jade。以下是关于jade的一些内容介绍文章地址(仅供参考
    jade官网
    http://www.expressjs.com.cn/guide/using-template-engines.html
    https://cnodejs.org/topic/5368adc5cf738dd6090060f2

    2、ejs
    ejs官网
    环境刚搭建时是没有ejs模板引擎的依赖的,通过以下代码即可完成安装

    npm install ejs --save
    

    安装完成后,修改app.js里面的模板引擎为ejs,即可使用ejs
    在views文件夹下新建index.ejs文件,当前目录下以的xxx.jade文件可以删除了

    <!DOCTYPE html>
    <html>
    <head>
        <title><%= title %></title>
        <link rel="stylesheet" type="text/css" hresf="/style/sheets/style.css">
    </head>
    <body>
        <h1><%= title %></h1>
        <p>Welcom <%= title %></p>
    </body>
    

    重新启动项目,访问项目,就能出现Express的欢迎语页面(不截图了)

    相关文章

      网友评论

          本文标题:Node.js+Express 进行web开发环境搭建

          本文链接:https://www.haomeiwen.com/subject/zzjopftx.html