Springboot + mybatis + React+redux+React-router+antd+Typescript(二): React+Typescrip项目的搭建

前言:

            后台搭建完以后开始搭建前端,使用create-react-app搭建项目非常方便。

           前端主要是如何向后台请求数据,以及如何使用redux管理state，路由的配置.

           前端github地址:　　https://github.com/www2388258980/rty-web

           后台github地址:　　https://github.com/www2388258980/rty-service

           项目访问地址:          http://106.13.61.216:5000/                               账号/密码: root/root

 

准备工作:

          1.需要安装node.js;

          2.安装create-react-app脚手架;

准备知识:

　　　　1.React

　　　　2.Typescript

　　　　3.Redux

　　　　4.React-Router

　　　　5.adtd

　　以上点击都可以打开对应的文档.

 

正文:

　　1.使用 TypeScript 启动新的 Create React App 项目:

　　　　命令行:

　　　　　　>npx create-react-app  项目名 --typescript

　　　　　　or

　　　　　　>yarn create react-app 项目名 --typescript

　　　然后运行:

　　　　　　>cd 项目名

　　　　　　>npm start

　　　　　　or 

　　　　　　>yarn start

　　   此时浏览器会访问 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。

　　 2. 按需引入antd组件库

　　　　[1]: 此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 react-app-rewired (一个对 create-react-app 进行自定义配置的社区解决方案)。

　　　　　　>cd 项目名

　　　　　　>yarn add react-app-rewired customize-cra


　　　接着修改package.json

"scripts": {
   "start": "react-app-rewired start",
   "build": "react-app-rewired build",
   "test": "react-app-rewired test",
}

　　　 [2]: 使用 babel-plugin-import,'是一个用于按需加载组件代码和样式的 babel 插件，现在我们尝试安装它并修改 config-overrides.js 文件。'


　　　　　　>yarn add babel-plugin-import

　　  　　然后在项目根目录创建一个 config-overrides.js 用于修改默认配置.

const {override, fixBabelImports} = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    }),
);

　　 　　[3]: 引入antd:

　　　　　　> yarn add antd

 

　　3. 封装ajax向后台请求数据:

　　　　[1]: > yarn add isomorphic-fetch

　　　　[2]: 在src下新建api目录,新建api.js和index.js

import fetch from 'isomorphic-fetch';//考虑使用fetch

class _Api {
    constructor(opts) {
        this.opts = opts || {};

        if (!this.opts.baseURI)
            throw new Error('baseURI option is required');

    }

    request = (path, method = 'post', params, data, callback, urlType) => {
        return new Promise((resolve, reject) => {
            let url = this.opts.baseURI + path;
            if (urlType) {
                url = this.opts[urlType + 'BaseURI'] + path;
            }
            if (path.indexOf('http://') == 0) {
                url = path;
            }

            const opts = {
                method: method,
            };
            if (this.opts.headers) {
                opts.headers = this.opts.headers;
            }

            if (data) {
                opts.headers['Content-Type'] = 'application/json; charset=utf-8';
                opts.body = JSON.stringify(data);
            }
            if (params) {
                opts.headers['Content-Type'] = 'application/x-www-form-urlencoded';
                let queryString = '';
                for (const param in params) {
                    const value = params[param];
                    if (value == null || value == undefined) {
                        continue;
                    }
                    queryString += (param + '=' + value + '&');
                }
                if (opts.method == 'get') {
                    if (url.indexOf('?') != -1) {
                        url += ('&' + queryString);
                    } else {
                        url += ('?' + queryString);
                    }
                } else {
                    opts.body = queryString;
                }
            }
            fetch(url, opts).then(function (response) {
                if (response.status >= 400) {
                    throw new Error("Bad response from server");
                }
                return response.json().then(function (json) {
                    // callback();
                    return resolve(json);
                })

            }).catch(function (error) {
                console.log(error);
            });
        })
    }

}

const Api = _Api;

export default Api

View Code