express框架

最新推荐文章于 2024-05-10 23:47:37 发布

背地里装个英雄

最新推荐文章于 2024-05-10 23:47:37 发布

阅读量178

点赞数

本文链接：https://blog.csdn.net/qq_44193064/article/details/107727702

版权

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

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

2…安装 Express:
(1).在新建的项目文件夹里面shift+右键打开黑窗口，输入

cnpm install express --save

安装express的依赖，等安装完毕后，项目文件夹中便会生成一个node_modules的文件夹

(2).另外可能还需要安装另外几个插件的，看情况而定：

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

安装的命令如下：

 cnpm install body-parser --save      //body-parser
 cnpm install cookie-parser --save   //cookie-parser
 cnpm install multer --save          //multer

(3).查看express版本：

cnpm list express

(4).说了这么多直接开始第一个例子：

//引入模板
const express = require('express')
const app = express()
app.get('/', (req, res) => res.send('Hello World!'))
app.listen(3000, () => console.log(`服务启动了!`))

以上的代码:就可以在在网页上面显示Hello World!了
如下图:
在这里插入图片描述

(5).通过AJAx拿后台数据:
常见的请求有GET和POST:

(1).GET请求:
HTML:

<!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>
  <form action="http://127.0.0.1:8081/process_get" method="GET">
      First Name: <input type="text" name="first_name">  <br>
      Last Name: <input type="text" name="last_name">
      <input type="submit" value="Submit">
   </form>
</body>

</html>

app.js:

const express = require('express')
const app = express()
app.use('/public', express.static('public'));//静态私服
app.get('/process_get', function (req, res) {
   // 输出 JSON 格式
   var response = {
       "first_name":req.query.first_name,
       "last_name":req.query.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})
app.listen(3000, () => console.log(`服务启动了!`))

(2).POST请求:
HTML:

<!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>
  <form action="http://127.0.0.1:8081/process_get" method="POST">
      First Name: <input type="text" name="first_name">  <br>
      Last Name: <input type="text" name="last_name">
      <input type="submit" value="Submit">
   </form>
</body>

</html>

app.js:

const express = require('express')
const app = express()
var bodyParser = require('body-parser');//post请求需要引入这个模板
var urlencodedParser = bodyParser.urlencoded({ extended: false })// 创建 application/x-www-form-urlencoded 编码解析
app.use('/public', express.static('public'));//静态私服
app.get('/process_get',urlencodedParser, function (req, res) {
   // 输出 JSON 格式
   var response = {
       "first_name":req.body.first_name,
       "last_name":req.body.last_name
   };
   console.log(response);
   res.end(JSON.stringify(response));
})
app.listen(3000, () => console.log(`服务启动了!`))