Node: 使用Express脚本库搭建本地的Web服务器

一、简介

在之前学习的React开发中,一直使用create-react-app脚手架创建和开发Web项目,通过搭配ReactRouter路由实现静态页面的交互,然后通过yarn start或npm start来启动项目,这个启动过程是由客户端服务器执行的。使用express脚手架生成的应用可以作为后台服务器,默认监听3000端口,该后台服务器可以监听React项目,与React应用进行数据交互,实现前后端分离。

 

二、安装

必须先安装过node,express安装步骤如下:

//1、安装Express脚手架
sudo npm install -g express-generator
/*
 * 安装结果如下:
/usr/local/bin/express -> /usr/local/lib/node_modules/express-generator/bin/express-cli.js
+ express-generator@4.16.1
added 10 packages from 13 contributors in 1.036s
*/


//2、查看Express脚手架是否安装成功
express --version
//结果:4.16.1
//3、进入自己指定的目录下 cd /Users/xiayuanquan/Desktop/开发案例/React-Express //4、在该目录下使用Express脚手架创建项目 express expressApp /* * 项目创建结果如下: create : expressApp/ create : expressApp/public/ create : expressApp/public/javascripts/ create : expressApp/public/images/ create : expressApp/public/stylesheets/ create : expressApp/public/stylesheets/style.css create : expressApp/routes/ create : expressApp/routes/index.js create : expressApp/routes/users.js create : expressApp/views/ create : expressApp/views/error.jade create : expressApp/views/index.jade create : expressApp/views/layout.jade create : expressApp/app.js create : expressApp/package.json create : expressApp/bin/ create : expressApp/bin/www change directory: $ cd expressApp install dependencies: $ npm install run the app: $ DEBUG=expressapp:* npm start */ //5、进入到创建的项目 cd expressApp //6、安装express脚本库 npm install express --save /* * 安装结果如下: npm notice created a lockfile as package-lock.json. You should commit this file. + express@4.16.4 added 53 packages from 36 contributors in 3.33s */ //7、启动服务 npm start /* * 服务器启动结果如下: > expressapp@0.0.0 start /Users/xiayuanquan/Desktop/开发案例/React-Express/expressApp > node ./bin/www GET / 200 389.361 ms - 170 GET /stylesheets/style.css 200 6.045 ms - 111 */

 

三、结构

WebStorm查看整体结构,routes路由中index.js为项目页面的渲染入口,users.js为数据通信的文件。

package.json和www文件中服务启动的配置分别如下:

//package.json,服务启动路径脚本配置
"scripts": {
    "start": "node ./bin/www"
  },

//www.js,项目端口设置,默认是3000端口,可以修改成其他端口,如3001。避免与React项目的端口冲突
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

 

四、结果

在服务启动后,在浏览器地址栏输入: http://localhost:3000/,运行结果如下:

 

五、ReactApp

在当前项目下,使用create-react-app脚手架创建React的web项目。

//创建react项目
create-react-app react_client

WebStorm查看整体结构,在expressApp下,整合了react的项目react_client

 

六、通信

1、在终端下进入Express项目并修改监听端口为3001。

//方式一:在项目目录下使用命令行
$ PORT=3001 node bin/www

//方式二:直接修改www.js文件
var port = normalizePort(process.env.PORT || '3001');
app.set('port', port);

2、在Express项目中,可以修改routes/users.js,这里面可以保持与React项目通信的数据

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

/* GET users listing. */
router.get('/', function(req, res, next) {

  //注释默认的代码
  //res.send('respond with a resource');

  //修改成自己的数据
  res.json([{
      id: 1111,
      username: "xia_quan_quan"
  }, {
      id: 2222,
      username: "xia_yuan_yuan"
  }]);
}); module.exports
= router;

3、在Express项目中,使用命令行启动服务后离开

//启动express服务器
npm start

4、新开一个终端进入React项目react_client,修改它的配置文件package.json,添加express服务器的代理。【注意:根据需要可以指向任意的服务器】

//proxy为express服务器的代理,监听的是3001端口
{
  "name": "react_client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "0.9.x"
  },
  "devDependencies": {},
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3001"
}

5、在React项目中修改App.js文件,获取Express项目中routes/users的通信数据

// "/users"为express项目中的文件
import React, { Component } from 'react';
import './App.css';

class App extends Component {
  state = {users: []}
  componentDidMount() {
    fetch('/users')
      .then(res => res.json())
      .then(users => this.setState({ users }));
  }

  render() {
    return (
      <div className="App">
        <h1>Users</h1>
        {this.state.users.map(user =>
          <div key={user.id}>{user.username}</div>
        )}
      </div>
    );
  }
}

export default App;

6、在这个新的终端使用命令行启动React的web项目

//启动react项目
npm start 或者 yarn start

7、终端运行和页面结果如下

七、参考资料

1、https://www.jianshu.com/p/b7324042db7d

2、https://daveceddia.com/create-react-app-express-backend/

3、https://esausilva.com/2017/11/14/how-to-use-create-react-app-with-a-node-express-backend-api/

4、https://www.cnblogs.com/LLLLily/p/7492118.html

 

 

posted @ 2019-12-28 11:28  XYQ全哥  阅读(435)  评论(0编辑  收藏  举报