Node Express框架快速入门教程

ゝ一纸荒年。 2023-01-11 08:56 137阅读 0赞

## 安装Express ##

创建项目目录，例如在本地D盘创建myapp项目 D:/myapp

在myapp项目根目录打开命令提示行工具，执行如下命令：

# 初始化
    npm init -y
    # 安装express
    cnpm i express --save
    # 安装ejs模板引擎
    cnpm i ejs --save

## 项目目录结构 ##

目录结构按照MVC模式进行创建，依次新建controller、views、model、public等文件夹，结构如下：

- controller 控制层
    - views 视图层
    - model 模型层（用于管理MongoDB文档对象）
    - public 静态资源目录
    - app.js 入口文件
    - package.json 依赖管理文件

## 入口文件 ##

`app.js` 为入口文件，代码如下：

let express = require('express')
    let crl = require('./controller')
    let app = express()
    
    //配置静态资源目录
    app.use(express.static('./public'))
    //配置模板所在目录
    app.set('views','./views')
    //配置ejs模板引擎
    app.set('view engine','ejs')
    
    //配置路由
    app.get('/add',crl.getAdd)
    app.post('/add',crl.postAdd)
    
    app.listen(3000)

## 控制层 ##

`/controller/index.js` 为控制层，文件代码如下：

//添加功能，get请求
    function getAdd(req,res){ 
        //接收get请求参数
        let { name} = req.query
        res.render('index',{ msg: name})
    }
    
    //添加功能，post请求
    function postAdd(req,res){ 
        //接收post请求参数
        let { name} = req.body
        res.render('index',{ msg: name})
    }
    
    module.exports = { 
        getAdd,
        postAdd
    }

## 视图层 ##

`/views/index.ejs` 为视图层，文件代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div><%=msg %></div>
        <h1>这是Ejs模板引擎</h1>
    </body>
    </html>

## 配置项目启动 ##

在 `package.json` 文件中添加如下配置：

{ 
      "scripts": { 
        "start": "node app"
      }
    }

配置完成后执行 `npm start` 命令启动项目，在浏览器地址栏访问 `http://localhost:3000/add?name=xxx` ，即可执行添加的路由。