Node Express框架快速入门教程

最新推荐文章于 2024-03-26 22:32:57 发布

凤歌笑丶

最新推荐文章于 2024-03-26 22:32:57 发布

阅读量356

点赞数 1

分类专栏： web全栈文章标签： node.js html5 javascript

本文链接：https://blog.csdn.net/qq_26087315/article/details/113783288

版权

web全栈专栏收录该内容

4 篇文章 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>这是视图层</h1>
</body>
</html>

配置项目启动

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

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

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

凤歌笑丶

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Node Express框架快速入门教程

安装Express创建项目目录，例如在本地D盘创建myapp项目 D:/myapp在myapp项目根目录打开命令提示行工具，执行如下命令：# 初始化npm init -y# 安装expresscnpm i express --save# 安装ejs模板引擎cnpm i ejs --save项目目录结构目录结构按照MVC模式进行创建，依次新建controller、views、model、public等文件夹，结构如下：- controller 控制层- views 视图层- mod
复制链接

扫一扫