Express入门

最新推荐文章于 2024-08-22 13:46:52 发布
最新推荐文章于 2024-08-22 13:46:52 发布
阅读量628 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weiwenwen6/article/details/91861436
版权

Express入门

1、请求与响应

const express = require('express')

var app = express();

app.get('/', function(req, res) {
  res.end('hello')
})

app.listen(3000)

console.log( 'server listening to 3000, http://localhost:3000' )

具体的API可以查看：http://www.expressjs.com.cn/4x/api.html#req.query

nodemon：一个可以监听文件修改，自动重启node服务的插件。

只需要全局安装，使用nodemon server命令，会自动查找当前目录的server.js

2、路由参数（动态路由）

const express = require('express')

var app = express();

app.get('/profile/:id/user/:name', function (req, res) {
  console.log(req.params) //获取有所动态路由的id
  res.end(`id=${req.params.id}`)
})

app.listen(3000)

console.log( 'server listening to 3000, http://localhost:3000' )

路由可以使用正则表达式

3、查询字符串

const express = require('express')

var app = express();

app.get('/', function(req, res) {
  console.log(req.query)  //通过req.query获取?a=1
  res.end('hello')
})

app.listen(3000)

console.log( 'server listening to 3000, http://localhost:3000' )

4、解析POST参数

解析post请求参数需要借助body-parse中间件，安装这个中间件。

解析Form Data数据

这种方式的请求Content-Type: 'application/x-www-form-urlencoded'

这种是form表单提交过来的数据，用法./server.js

const path = require('path')
const fs = require('fs')
const express = require('express')
const bodyParser = require('body-parser')

var app = express();
/**[解析form提交过来的数据] */
app.use(bodyParser.urlencoded({ extended: false }))

app.post('/login', function(req, res) {
  // [这里接收传递过来的参数]
  console.log( req.body )
  res.send('ok')
})

app.listen(3000)

console.log( 'server listening to 3000, http://localhost:3000' )

解析Request Paylod数据

这种请求方式的Content-Type: 'application/json;charset=UTF-8'

使用ajax或者fetch传递过来的json./server.js

const path = require('path')
const fs = require('fs')
const express = require('express')
const bodyParser = require('body-parser')

var app = express();

/**[解析ajax或者fetch传递过来的json] */
app.use(bodyParser.json())

app.post('/login', function(req, res) {
  // [这里接收传递过来的参数]
  console.log( req.body )
  res.send('ok')
})

app.listen(3000)

console.log( 'server listening to 3000, http://localhost:3000' )

解析2种参数

const path = require('path')
const fs = require('fs')
const express = require('express')
const bodyParser = require('body-parser')

var app = express();

const bodyAjax = bodyParser.json()
const bodyForm = bodyParser.urlencoded({ extended: false })

app.post('/login_form',bodyForm, function(req, res) {
  // [这里接收传递过来的参数]
  console.log( req.body , 'bodyForm')
  res.send('ok')
})

app.post('/login_ajax', bodyAjax, function(req, res) {
  // [这里接收传递过来的参数]
  console.log( req.body , 'bodyAjax')
  res.send('ok')
})

app.listen(3000)

console.log( 'server listening to 3000, http://localhost:3000' )

5、上传文件

安装处理文件程序：multer

./index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>hello world</h1>

  <form action="/upload" enctype="multipart/form-data" method="POST">
      <h2>图片上传</h2>
      <input type="file" name="logo" accept=".png,.jpg,.jpeg">
    <input type="submit" value="提交">
  </form>

</body>
</html>

./server.js

const path = require('path')
const fs = require('fs')
const express = require('express')
const bodyParser = require('body-parser')

var multer  = require('multer') //[处理上传过来的文件]

// 创建目录
function createDir(dirPath) {
  try {
    fs.accessSync(dirPath)
  } catch(e) {
    fs.mkdirSync(dirPath)
  }
}

//要存储的目录
const uploadDir = __dirname + '/uploads'
createDir(uploadDir)
//存储文件配置
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, uploadDir)
  },
  filename: function (req, file, cb) {
    //拼接成带时间戳的文件名（防止重名导致覆盖）
    var filename = file.originalname.replace(/\.([a-zA-Z]*)$/, `-${Date.now()}.`)
    cb(null, filename + RegExp.$1 )
  }
})
var upload = multer({ storage: storage })


var app = express();

/**[对index.html做映射] */
app.get('/', function(req, res) {
  fs.createReadStream(__dirname + './index.html', 'utf8').pipe(res)
})

// upload.single('logo') 中的这个字段一定要和上传上来的字段匹配
app.post('/upload', upload.single('logo'), function(req, res, next) {
  console.log( req.file.originalname )
  res.send('上传成功')
})

app.listen(3000)

console.log( 'server listening to 3000, http://localhost:3000' )

6、使用ejs模板引擎

使用ejs作为模板引擎，渲染变量、列表、包含子模块。

./server.js

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

/**[设置模板引擎的根目录]  */
app.set('views', './views')
/**[使用ejs模板引擎] */
app.set('view engine', 'ejs')

/**[对index.ejs做映射] */
app.get('/', function(req, res) {
  const data = {
    age: 12,
    name: 'david',
    list: [
      {  
        title: '水果',
        price: 19
      },
      {  
        title: '水果',
        price: 19
      },
      {  
        title: '水果',
        price: 19
      }
    ]
  }
  res.render('index.ejs', { data })
})

app.get('/about', function(req, res) {
  res.render('about')
})

app.listen(3000)

console.log( 'server listening to 3000, http://localhost:3000' )

./views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>使用ejs模板引擎</title>
</head>
<body>
  <%- include('header'); %>
  <h1>hello world</h1>
  <!-- 使用变量 -->
  <h2>姓名：<%= data.name %></h2>
  <h2>年龄：<%= data.age %></h2>
  <h3>购物车：<%= data.age %></h3>
  <ul>
    <!-- 使用循环 -->
    <% data.list.forEach(function (item) { %>
      <li>水果名：<span><%= item.title %></span>，价格：<span><%= item.price %></span></li>
    <% }) %>
  </ul>
</body>
</html>

./views/header.ejs

<nav>
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于我们</a></li>
  </ul>
</nav>

./views/about.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <!-- 加入包含 -->
    <%- include('header') %>
  <h1>about.ejs</h1>
</body>
</html>

7、中间件

处理request、response插件称为中间件

./server.js

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

//中间件
app.use(function(req, res, next) {
  console.log(111)
  next()
})

//中间件
app.use(function(req, res, next) {
  next()
})

app.get('/', function(req, res, next) {
  res.send('<h1>hello</h1>')
})

app.listen(3000)

console.log( 'server listening to 3000, http://localhost:3000' )

输出：111 222

8、使用路由中间件

./server.js

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

const index = require('./routes/index')
const users = require('./routes/users')

app.use('/', index)
app.use('/users', users)

app.listen(3000)

console.log( 'server listening to 3000, http://localhost:3000' )

新建文件夹./routes，./routes/index.js

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

router.get('/', function(req, res, next) {
  res.send('home')
})

module.exports = router

./routes/users.js

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

router.get('/', function(req, res, next) {
  res.send('users')
})

module.exports = router

这样配置，既可以完成将路由当做中间件。

9、项目实践

需求

添加事项、删除事项、展示事项列表；

备注

线上MongoDB网址：mLab

使用Mongolass操纵Mongoose数据库

posted @ 2019-05-31 17:27 DaivdAndLemon 阅读( ...) 评论( ...) 编辑 收藏
David-wenwen
关注
express入门笔记
10-09
Express是基于Node.js平台的高性能...通过阅读《express入门笔记》和实践以上示例，你将逐步掌握Express的基本用法，并能构建自己的Node.js Web应用。继续学习和实践，探索Express的更多可能性，提升你的Web开发技能。
Express入门指南（详细）
热门推荐
stc_ljc的博客
10-17 12万+
Express 是一个基于 Nodejs 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。
Express的详细教程
idiot_MAN的博客
03-09 5592
什么是Express官方给出的概念：Express是基于Node.js平台，快速，开放，极简的Web开发框架通俗的理解：Express的作用和Node.js内置的http模块类似，是专门用来创建Web服务器的Express能做什么对于前端程序员来说，最常见的两种服务器，分别是:Web 网站服务器:专门对外提供 Web 网页资源的服务器。API接口服务器:专门对外提供API接口的服务器。使用Express，我们可以方便、快速的创建Web 网站的服务器或API接口的服务器。
express
最新发布
2302_80695016的博客
08-22 352
express学习
Express入门看一篇就够了
bjjgff的博客
01-24 1601
在Express框架中，我们可以使用app.get()app.post()app.put()和等方法定义不同类型的路由。// GET 请求的路由res.send('首页')})// POST 请求的路由// 处理POST请求})// PUT 请求的路由// 处理PUT请求})// DELETE 请求的路由// 处理DELETE请求})在上面的代码中，我们使用app.get()方法定义了一个GET请求的路由，当Web应用程序收到GET请求时，返回“首页”字符串。
express基本使用（新手教程）
煮酒客的博客
03-16 3885
express基本使用 1、安装express npm install express -save 2、引入包并实例化 3、写一个监听并设置端口号 4、使用get或post接受数据 get req.query post req.body 要安装body-parser插件 npm install body-parser 通过http://localhost:3000(端口号)//u...
下班前几分钟，Express 快速入门
高大志leo的博客
07-20 1579
基于Node.js平台，快速、开放、极简的 Web 开发框架。 Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。
nodejs+express入门小例子
08-20
这个"nodejs+express入门小例子"将帮助初学者理解这两个工具的核心概念和它们如何协同工作。 首先，Node.js是一个开源、跨平台的JavaScript运行环境，它允许开发者在服务器端执行JavaScript代码。Node.js的非阻塞I/...
express入门（10）- cookie
07-21
### Express 入门（10）- Cookie 在Web开发中，Cookie是一种非常重要的技术，它可以帮助我们存储一些用户信息以便于实现个性化设置、登录状态的维持等功能。本篇文章将详细介绍如何在Express框架中使用Cookie。 ##...
nodejs中express入门和基础知识点学习
10-18
本文将深入讲解Express的基础知识，包括初始化、安装、创建Hello World实例、生成器以及路由。 **初始化** 在开始使用Express之前，你需要先创建一个项目目录。例如，你可以创建一个名为`myapp`的目录，然后使用`...
node.js Web应用框架Express入门指南
10-25
本篇文章涵盖了从安装、基础应用搭建到服务器配置的多个方面，为初学者提供了一个由浅入深的 Express 入门指南，帮助开发者快速上手并构建起自己的 Node.js 应用。对于任何希望通过 Node.js 开发 Web 应用的开发者来...
【NodeJS】Express框架快速入门
黑马程序员官方博客
03-31 1068
作为前端开发，Nodejs已经成了很多公司对我们这一岗位的硬性要求，而 Express 框架则是其中知名度最高、也是最受欢迎的Nodejs开发框架，它帮助我们封装了Nodejs底层的API，屏蔽了大量的繁琐的细节，让我们只需要关注业务开发就行了，极大的降低了学习的成本。路由中间件静态文件服务模板引擎。
express 如何监听请求，获取参数，返回数据
weixin_39927469的博客
06-18 2261
总结请求设置方法get，post，以及对应参数获取方法query，params
Express框架的教程一之Express的简单使用
weixin_73368873的博客
10-23 663
本文主要对node.js流行的express的框架的使用进行简单的举例示范
EXPRESS框架
mantou_riji的博客
07-07 3017
express是一款基于Node.js平台,快速、开放、极简的web开发框架。官网：https://www.expressjs.com.cn/express是node的第三方框架 初始化： 安装： 使用的时候引入即可：之前都是用 向前端页面写数据，但是比较麻烦，一般情况下我们还需定义 ，还需要注意返回的书html片段，页面还是json数据，比较麻烦。 EXPRESS框架直接将这些内容封装成,我们可以直接将数据进行返回，比较方便。 处理路由 固定路由 表示可以匹配 和 路径 是一个占位符 表
express入门
weixin_46801545的博客
09-01 449
Express入门
Express框架快速入门
weixin_50216991的博客
10-06 1452
欢迎大家来到Node.js系列专栏的第二期，上一期我系统地总结了Node.js的基础知识和常用内置模块，但是仅仅学习那些内置模块还远远不够，那些只是基础，我们的路还非常的远，还有很多东西要学。今天总结的Express就是基于Node.js衍生而来的一个web应用开发框架，它可以帮助你快速地创建web应用。
【Node】Express 入门教程
day day up
07-21 2700
express 是 Node.js 上最流行的 Web 开发框架，正如他的名字一样，使用它我们可以快速的开发一个 Web 应用。
Express(一) ——简单入门
赤蓝紫の博客
02-16 1万+
Express(一) ——简单入门 背景：参加的青训营项目，使用Express来实现后端，个人被分配到后端去。于是，简单速通了下Express。项目结束，回头写下笔记，沉淀一下。 个人博客：Express(一) ——简单入门 Express是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。 开始前可以先安装Postman，很好用的接口测试工具。 1. Hello World 首先，安装express到项目中npm i express 然后，开始代码世界。 // 1. 加载express
Oracle应用 express 入门指南
"Beginning Oracle Application Express 是一本专为初学者设计的Oracle Application Express(APEX)入门教程。作者Rick Greenwald通过深入浅出的方式引导读者理解并掌握如何使用APEX构建应用程序。书中涵盖从基础到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值