react学习（十二）使用express搭建简单的nodejs webserver

Express.js快速入门

最新推荐文章于 2024-12-10 16:47:32 发布

原创最新推荐文章于 2024-12-10 16:47:32 发布 · 59 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #学习 #express #前端 #前端框架

本文介绍Express.js框架的特点及安装步骤，并通过实例展示如何创建项目、配置路由与中间件，最后新增了一个返回学生信息的接口。

1 express简介

Express是一个简洁而灵活的node.js Web应用框架。

2 搭建过程

2.1 安装express

全局安装express和express-generator，express-generator是express脚手架，能够为我们快速构建一个express项目。

$ npm install express --save -g
$ npm install express-generator --save -g

2.2 创建项目

使用express命令创建项目，项目名叫node_server

安装依赖

cd node_server，执行cnpm install

启动服务

npm run server

页面访问，看到如下页面说明服务搭建成功。

3 项目分析

项目目录结构

bin/www，用于项目启动，里面可以配置项目端口号之类的东西

app.js,main文件，请求首先到达这里，在这里可以配置路由转发

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

app.use('/', indexRouter);
app.use('/users', usersRouter);

上面的代码说明了users开头的请求交由usersRouter处理，其余请求交由indexRouter处理。

我们看一下routes/index.js

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

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

上面代码收到/请求后，交由views/index.jade渲染页面，传递的参数是title:Express

我们看一下index.jade

extends layout

block content
  h1= title
  p Welcome to #{title}

在这里面，定义了页面元素h1和p要显示的内容。

4 添加一个接口

我们在项目中添加一个/student接口，返回一个包含学生信息的json数据

修改routes/index.js，添加如下接口

router.get('/student',(request,response)=>{
    const students = [
        {id:'001',name:'tom',age:18},
        {id:'002',name:'jerry',age:19},
        {id:'003',name:'tony',age:20},
    ]
    response.send(students)
})

，重启服务，查看页面：