您的位置:时时app平台注册网站 > web前端 > 打通全栈之用express作create-react-app的后台服务器如

打通全栈之用express作create-react-app的后台服务器如

2019-11-03 04:38

彩世界网址 1

image.png

webpack等包裹工具出现的来头

乘势前端技艺的发展强大,前端慢慢能管理越来越复杂的逻辑与运算,代码量也逐步扩展,为了开荒协会的明显,模块化现身了,将具有较强涉嫌的代码组合到独门的文书中,方便编写和保证。
远道而来的标题正是对传输的震慑,是文本每一个按需传输,仍旧完整包装一回性传输,或许有更好的其余实施方案?前双方均有利弊,不可能太满足,智能包裹工具便现身。webpack的强盛在于,不止其本人能够解析js,而其loader成效能够将其他的静态能源转移为js。

因而以下设置,react跨域难点就管理好了。

20180320更新 更简约的布局方式

用express脚手架搭建的express太繁琐,上面是更简便易行的方式。

  1. 将create-react-app生成的黄金年代体文件夹直接放在项目根目录下的client文件夹中,然后在根目录下打开yarn init,package.json文件如下
{
  "name": "antd-demo",
  "version": "1.0.0",
  "scripts": {
    "client": "cd client && yarn start",
    "server": "nodemon server.js",
    "start": "concurrently --kill-others-on-fail "yarn server" "yarn client""
  },
  "dependencies": {
    "express": "^4.16.2"
  },
  "devDependencies": {
    "concurrently": "^3.5.0"
  }
}
  1. 下一场在极端实践yarn安装信任包,concurrenly是二个能够通过安排命令来还要运维八个服务器的插件。通过在package.json中的scripts下修改命令,能够同一时候拉开服务端和顾客端。
  2. 在等级次序根目录下新建server.js,内容如下
const express = require('express');
const app = express();
const port = process.env.PORT || 5000;
app.get('/api/hello', (req, res) => {
    res.send({
        express: 'Hello From Express'
    });
});
app.listen(port, () => console.log(`Listening on port ${port}`));
  1. 在client文件夹下的package.json中安顿代理同上,端口和服务器端端口设为直接
  2. 在终点步向项目根目录,实践yarn start就能够同时开班顾客端和劳动器端。

条件安顿

以react-webpack为例表明二者结合后的为主使用格局

  • 新建目录,初叶化npm环境
    安装node;
    设置cnpm,可设置nrm,方便源的切换;
    初步化项目npm信任配置,npm init -y,以默许选项生成
    package.json

npm安装中--save-dev和--save选项的界别?
--save-dev,包参与package.json的dependencies中,作为支付时须要的依赖性
--save,包出席devDpendenies中,作为发布时要求的依赖

  • 安装webpack相关信任
    安装webpack
    sudo cnpm i webpack webpack-dev-server —save-dev

  • 配置webpack-dev-server
    在package.json中的scripts字段加多如下项:
    "dev": "webpack-dev-server --devtool eval --colors --progress"
    经过浏览器http://localhost:8080可访谈到页面

  • webpack插件选装
    设置open-browser-webpack-plugin,使webpack运维时自动展开浏览器新标签

npm i open-browser-webpack-plugin --save-dev
// webpack.config.js中添加配置
var OpenBrowserPlugin = require('open-browser-webpack-plugin')
plugins: [
  new OpenBrowserPlugin({
    url: 'http://localhost:8080'
   })
]

安装html-webpack-plugin,扶植自动生成index.html

npm i html-webpack-plugin --save-dev`
var HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
  new HtmlWebpackPlugin()
]

webpack-dev-server热替换

//添加插件
plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
//增加入口
entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:8080',
    './index.js'
  ],
/*
在webpack.config.js中设置publicPath为/assets/
将index.html中的入口脚本src设为'/assets/bundle.js'
启动webpack-dev-server
*/
  • jsx语法 ,babel-core
    安装正视包
    npm i babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
    新建.babelrc文件,并配置
//配置.babelrc
{
  ‘presets’: [
    ‘es2015’, //es2015转码
    ‘react’//react转码
  ]
}
  • 安装react
    npm i react react-dom —save-dev

  • 安装eslint
    npm i babel-eslint --save-dev
    配置eslint airbnb config

npm i eslint eslint-plugin-jsx-a11y eslint-plugin-import eslint-plugin-react eslint-config-airbnb --save-dev
// 编辑webpack.config.js
preLoaders: [
  {
    test: /.jsx?$/,
    loaders: ['eslint-loader'],
    include: path.join(__dirname, 'src'),
    exclude: path.join(__dirname, 'src/app/container')
  }
],
eslint: {
  configFile: './.eslintrc',
  emitWarning: true
}
// 新建.eslintrc
{
  "extends": "airbnb"
}
  • 超过的主题素材
  1. 使用webpack --display-error-details选项开启报错音讯详细情况
  2. react的jsx安装并配备了babel-loaer的场地下,如故报错,Module build failed: SyntaxError:找不到模块
    import App from ‘App.js’
    改为
    import App from ‘./App.js’
    因为import默许路线是node_modules中,而"."代表的最近路径是进口脚本所在路子

react客商端代码如下:


那边状态是200,不过在Response却未曾此外音讯,如下图

  1. 在react-backend文件夹下运营express,何况钦命端口为3001,制止与react的默许端口3000产生冲突。
    ~/wyy/react-backend% PORT=3001 node bin/www
    开垦localhost:3001寻访如下画面,表示后台服务器应用已经在3001端口运转。

    彩世界网址 2

    image.png

    {
      "entry": "src/index.js",
      "extraBabelPlugins": [
        "transform-runtime",
        "transform-decorators-legacy",
        "transform-class-properties",
        ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true }]
      ],
      "env": {
        "development": {
          "extraBabelPlugins": [
            "dva-hmr"
          ]
        }
      },
      "externals": {
        "g2": "G2",
        "g-cloud": "Cloud",
        "g2-plugin-slider": "G2.Plugin.slider"
      },
      "ignoreMomentLocale": true,
      "theme": "./src/theme.js",
      "proxy": {
        "/api": {
          "target": "http://api.xxxx.com/",
          "changeOrigin": true
        }
      }
    }
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
    res.json([
    {id:1,username:"wyy"},
    {id:2,username:"wyp"}
  ]);
});

module.exports = router;

配置实现后,再度拜谒接口,照旧现身相通的跨域难题,既然recat的布署,未缓慢解决跨域难点,小编就把思路转到spring,在spring去管理跨域,在后端程序增添叁个拦截器,

背景:项目开始的一段时期一贯在create-react-app脚手架配置好的条件下写静态页面,用react-router-dom v4.x作为路由模块,开启的是客商端服务器。
前几天尝试将express脚手架生成的接受作为后台服务器,与react应用举行数据人机联作。

对此antd-pro的品类,需求在package.json的相近目录下增添.roadhogrc文件,具体代码如下:

componentDidMount() {
  fetch('path').then()
}

 

package com.gg.interceptor;

import java.util.ArrayList;
import java.util.List;
import java.util.Vector;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

public class ProcessInterceptor implements HandlerInterceptor{

    @Override
    public boolean preHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object handler)
            throws Exception {
        // TODO Auto-generated method stub 
        // 指定白名单域名   http://localhost:8000,http://localhost:8000
        List<String> whileList  = new Vector<String>(); 
        whileList.add("http://127.0.0.1:8000");
        whileList.add("http://localhost:8000");
        String clientIp = httpServletRequest.getHeader("origin");
        boolean status = false;
        for(String ip : whileList) {
            if(clientIp!=null&&clientIp.equals(ip)) {
                status = true;
                break;
            }
        }
        /**
         * 网上解决方案是httpServletResponse.setHeader("Access-Control-Allow-Origin","*");设置后发现,还是不能处理跨域问题,需要指定某一个ip,如:http://127.0.0.1:8000  
         * */
        httpServletResponse.setHeader("Access-Control-Allow-Origin",status?clientIp:null);  
        //响应头设置  
        httpServletResponse.setHeader("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");  
        //响应类型
        httpServletResponse.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");  
        httpServletResponse.setHeader("X-Powered-By","Jetty");  
        httpServletResponse.setHeader("Access-Control-Allow-Credentials","true");
        String method= httpServletRequest.getMethod();  
        if (method.equals("OPTIONS")){  
            httpServletResponse.setStatus(200);  
            return false;  
        }  

        System.out.println(method ",status:" status ",clientIp:" clientIp);  

        return true;  
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
            ModelAndView modelAndView) throws Exception {
        // TODO Auto-generated method stub

    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
            throws Exception {
        // TODO Auto-generated method stub

    }

}

彩世界网址 3

倘让你是通过creat-react-app创设的档案的次序,请在package.json文件中的根目录下,加多"proxy": "

{
  "name": "antd-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^3.2.3",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom"
  },
  "proxy": "http://localhost:3001"
}

spring-servlet.xml配置如下:

  1. 先是在终点生成四个express应用命名字为react-backend,作为项目标根目录
    $ express react-backend
  2. 然后在./routes/user.js中改善代码为

彩世界网址 4

开采localhost:3001/users见到如下画面,便是我们刚刚写在routes/users.js里面包车型大巴json数据。

react 跨域访谈后台,暗中认可是有跨域难点,并且火弧和Google浏览器,对跨域难点显得还分歧样.

20180322更新 补充部分代码才干完全解决跨域央浼数据的安顿难点

  1. 先对日前的步骤进行计算:
    (1卡塔尔在分化的端口开启客商端服务器和后台服务器
    (2)在react的package.json中添加proxy
  2. 然后介绍前些天早前端表单发送数据到后台服务器的时候,跨域须求报错
    (1卡塔尔国在server.js中增多代码
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", ' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

(2卡塔尔国在前面四个login组件中经过fetch方法发送数据的时候,增加一个允许跨域的本性
mode:“no-cors”

fetch('http://localhost:5000/post/api/1.0/create',
            {
                method:"POST",
                mode:"no-cors",//跨域
                body:JSON.stringify({
                  phone:values.phone,
                  password:values.password,
                }),
                headers:{
               "Content-type":"application/json;charset=utf-8"
                }
            })
            .then(function(values){
              console.log('注册成功',values)
            })
            .catch(function(error){
              console.log('注册失败',error)
            })
      }
<mvc:interceptors>  
       <bean class="com.gg.interceptor.ProcessInterceptor"></bean>  
   </mvc:interceptors>  
  1. 在client文件夹下,运行react应用。
    ~/wyy/react-backend/client% npm start
    那儿开采localhost:3000,看见react应用的画面
    7、在react组件中,能够通过在compenentDidMount(){}方法中写入fetch交互作用数据的代码,相仿于ajax的$.get()

唯独火弧浏览器,对该难题的汇报,就清淅得多,

"proxy": {
        "/api/RoomApi": {
          "target": "http://open.douyucdn.cn",
          "changeOrigin":true
        },
        "/api/v1":{
          "target":"http://capi.douyucdn.cn",
          "changeOrigin":true
        }
      }

参照地址
https://daveceddia.com/create-react-app-express-backend/
https://esausilva.com/2017/11/14/how-to-use-create-react-app-with-a-node-express-backend-api/
https://www.cnblogs.com/LLLLily/p/7492118.html

火弧浏览器告诉我们,跨域了,关于react跨域的帖子,网络也可以有有关帖子,搜索到的点子,大致都以之类清除措施:

谷歌(Google卡塔 尔(阿拉伯语:قطر‎浏览器如下图:

  1. 现行开发一个新的极点窗口,在项目根目录下生成新的react应用
    $create-react-app client
  2. 修正client文件夹下的package.js文件如下。增添proxy,内定代理服务器为3001端口运营的行使。

彩世界网址 5

Model层js代码:
*login({ payload }, { call, put }){
      let formData = new FormData();
      formData.append("loginId",payload.loginId);//账号
      formData.append("passWord",payload.passWord);//密码
      const response = yield call(requestGuangGao, formData); 
      yield put({
        type: 'changeLoginStatus',
        payload: response,
      });
    },

api层js代码:
export async function requestGuangGao(formData){
  // let formData = new FormData();
  // formData.append("loginId",params.loginId);
  // formData.append("passWord",params.passWord);

  console.log("requestGua   >url  :" );
   return request('http://127.0.0.1:8080/guanggao/userController/login.do', {
    method: 'POST', 
    mode: 'cors', 
    body:formData,
  });   
}

本文由时时app平台注册网站发布于web前端,转载请注明出处:打通全栈之用express作create-react-app的后台服务器如

关键词: