Node 框架之 Express

Express Node

字数统计: 809阅读时长: 3 min

 2020/03/29   Share

Express 介绍

Express 是基于Node.js平台，快速开放极简的 Web 开发框架

Express 安装

前提 node 要下载好噢~

npm install express --save

再安装 node 自动重启工具 nodemon

npm install -g nodemon

基础安装完以后

接下来简单介绍下用法

Express 之快速上手路由

使用 nodemon index.js 执行后

终端输出：App listening on port 3000!

紧接着在浏览器中访问 localhost:3000

访问结果如下：

// 访问：
localhost:3000
// 页面输出：
{ 'page': 'home' }

// 访问：/about
localhost:3000/about
// 输出：页面输出：
{ 'page': 'about' }

// 访问：/product
localhost:3000/product
// 页面输出：
[{ id: 1, title: 'product A' },
{ id: 2, title: 'product B' },
{ id: 3, title: 'product C' }]

// index.js

const express = require('express'); // 引用 express 包

const app = express();  // 执行 express() 返回一个新的应用实例

/*
    定义路由
    params: 1. 路径
            2. callback
*/
app.get('/', (req, res) => {
    res.send({ 'page': 'home' })  // 服务端发送的内容
})

app.get('/about', (req, res) => {
    res.send({ 'page': 'about' })
})

app.get('/product', (req, res) => {
    res.send([
        { id: 1, title: 'product A' },
        { id: 2, title: 'product B' },
        { id: 3, title: 'product C' }
    ])
})

// 监听端口为3000
app.listen(3000, () => {
    console.log('App listening on port 3000!');
})

Express 之静态文件托管

在项目根目录新建 public 文件夹用于存放静态文件

在public 文件夹下新建 index.html

随意输入写内容如下：

1	<h1>express 访问静态文件</h1>

Express 中提供了 express.static 内置中间件函数

用来访问静态资源

const express = require('express');

const app = express();

// 访问静态资源
app.use(express.static('public'))

现在访问 localhost:3000/index.html

则会看到刚刚我们在html中输入的内容 ==> express 访问静态文件

如果要使用多个静态资源，则多次调用 express.static 内置中间件函数

e.g.

app.use(express.static('public'));
app.use(express.static('files'));

还可以添加根路径 /static来访问 public 目录下的文件

app.use('/static', express.static('public'))

e.g.

http://localhost:3000/static/images/title.png
http://localhost:3000/static/css/style.scss

...

Express 之 CORS跨域请求

在 html 中使用 fetch() 方法来请求http并异步获取资源

<body>
    <h1>express 访问静态文件</h1>
    <script>
        fetch('http://localhost:3000/product').then(res => res.json()).then(res =>{
            console.log(res);
        })
    </script>
</body>

浏览器中访问 http://localhost:3000/index.html

console 面板中则可以看到正常输出的内容

// console.log

[{ id: 1, title: 'product A' },
    { id: 2, title: 'product B' },
    { id: 3, title: 'product C' },
    { id: 4, title: 'product D' }]

现在不使用直接输入地址来访问 hmtl文件

在 vscode 中安装 Live Server 这个插件

安装完以后找到 index.html 右键会显示

Open with Live Server 点击后

浏览器会自动访问这个html文件

地址名也变成了 http://127.0.0.1:5500/public/index.html

现在在打开 console 面板则会看到跨域请求的报错信息

Failed to load resource: Origin http://127.0.0.1:5500 is not allowed by Access-Control-Allow-Origin.

那要如何解决跨域的问题呢

首先先安装 CORS 跨域这个包

npm i cors

在 index.js 中引入 CORS

const express = require('express');

const app = express();

// 引用cors后 执行这个方法
app.use(require('cors')())

即可解决跨域问题

Next Post

Express + mongodb基础
Previous Post

git 报错问题合集

CATALOG

1. Express 介绍
2. Express 安装
3. Express 之快速上手路由
4. Express 之静态文件托管
5. Express 之 CORS跨域请求



缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是archer根目录）执行以下命令：
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true