创建express app

• 全局安装 express-generator

$ npm install -g express-generator

• 创建express app

$ express react-backend

• 安装依赖包

$ npm install

 目录：

• 修改react-backend/routes/users.js, 返回简单的数据，方便测试

var express = require('express');
var router = express.Router();/* GET users listing. */
router.get('/', function(req, res, next) {// Comment out this line://res.send('respond with a resource');// And insert something like this instead:res.json([{id: 1,username: "samsepi0l"}, {id: 2,username: "D0loresH4ze"}]);
});module.exports = router;

• 启动express app

• 

• 在bin目录下修改：

$ PORT=3001 node bin/www

把端口设置成3001的原因是因为react app 会使用3000端口，避免冲突

创建react app

• 全局安装 create-react-app

$ npm install -g create-react-app

• 在react-backend文件夹下创建react app（也可以在其他文件夹下）

# 在这里安装的时候  真心很慢，回头我研究一下，改成自己创建react应用，应该会快一点
$ create-react-app client

• 设置proxy

• 在package.json里修改

$ cd client
$ vim package.json# 代码"scripts": {"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test --env=jsdom","eject": "react-scripts eject"},"proxy": "http://localhost:3001"

proxy 是你后台服务器的地址

• 修改client/src/App.js

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 (
Users
{this.state.users.map(user =>{user.username})});}
}export default App;

   安装依赖 

npm i

• 启动应用

$ npm start

在浏览器的最终效果：

在此基础上即可继续开发了。

总结：

express项目目录结构优化

|——server // express项目根目录
|————|bin 
|——————|www  //服务器相关配置文件
|————|controllers //控制器层，处理前端请求
|————|models //数据库操作相关文件
|————|node_modules //npm包安装目录
|————|public //react打包目录，存放所有的html，js/css/图片等资源文件
|————|routes // 路由文件目录
|——————|api.js //api请求路由文件
|——————|pages.js // 页面请求路由文件
|————|utils // 公共文件目录
|——————|config.js //各种常量或公共方法
|——————|db.js // 数据库访问方法封装
|——————|http.js //http请求方法封装
|————|views // express框架自带，由于打包后的文件全放在public目录下，因此这个文件可不用了
|————|app.js //入口文件
|————|package.json 
|————|package-lock.json

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！