3.React学习笔记(完)----nodejs命令备份+跨域问题处理

nodejs常用命令

npm,cnpm和yarn

//安装所有模块
npm install 
//安装 cnpm模块 并设置淘宝源
npm install -g cnpm --registry=https://registry.npm.taobao.org
//配置npm环境变量
npm config set prefix "path")
npm config set cache  "path")
npm config set registry https://registry.npm.taobao.org )

//Yarn是facebook发布的一款取代npm的包管理工具。 安装yarn
npm install -g yarn
//配置yarn环境变量
yarn config  set global-folder "path"
call yarn config set cache-folder "path"
call yarn config set registry https://registry.npm.taobao.org -g
call yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

yarn和npm区别

初始化
npm init ==> yarn init
安装全部包
npm i  ==>  yarn
安装生产依赖包
npm i <package> --save  ==> yarn add <package>
安装开发依赖包
npm i <package> --save-dev  ==> yarn add <package> --dev
安装全局依赖包
npm install <package> --global(npm install -g <package>) 	yarn global add [package]
移除依赖包
npm uninstall <package> ==> yarn remove <package>
更新全部依赖包
npm update  ==>  yarn upgrade
更新指定依赖包
npm update <package> ==> yarn upgrade <package>

####常用模块(命令以yarn为主)

静态服务模块
yarn add serve
andt组件库
yarn add antd
andt组件依赖模块
yarn add react-app-rewired customize-cra babel-plugin-import

eslint-react模块配置

eslint各种模块
yarn add eslint --dev
yarn add babel-eslint --dev
//airbnb 代码规范(包含ECMAScript 6 + 以及 React 的 ESLint 代碼規範,它會一同安裝 eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y。如果你的項目不是 React 的話，那麼你可以選擇eslint-config-airbnb-base) 
yarn add eslint-config-airbnb --dev
//eslint标准规则
yarn add eslint-config-google --dev
//eslint标准规则
yarn add eslint-config-alloy --dev
//eslint-react规则
yarn add eslint-plugin-react --dev
//eslint-vue规则
yarn add eslint-plugin-vue  --dev
//校验 import/export 语法，防止错误拼写文件路径以及导出名称的问题
yarn add eslint-plugin-import --dev
//提供 jsx 元素可访问性校验
yarn add eslint-plugin-jsx-a11y --dev
//提供 jsx 元素可访问性校验
yarn add eslint-plugin-jsx-a11y --dev

其他再补充

封装ajax模块

安装axios模块
yarn add axios

封装工具

/*
能发送异步ajax请求的函数模块
封装axios库
函数的返回值是promise对象
1. 优化1: 统一处理请求异常?
    在外层包一个自己创建的promise对象
    在请求出错时, 不reject(error), 而是显示错误提示
2. 优化2: 异步得到不是reponse, 而是response.data
   在请求成功resolve时: resolve(response.data)
 */

import axios from 'axios'
import {message} from 'antd'

export default function ajax(url, data = {}, type = 'GET') {

    return new Promise((resolve, reject) => {
        let promise
        // 1. 执行异步ajax请求
        if (type === 'GET') { // 发GET请求
            promise = axios.get(url, { // 配置对象
                params: data // 指定请求参数
            })
        } else { // 发POST请求
            promise = axios.post(url, data)
        }
        // 2. 如果成功了, 调用resolve(value)
        promise.then((response) => {
            resolve(response.data)
            // 3. 如果失败了, 不调用reject(reason), 而是提示异常信息
        }).catch((error) => {
            // reject(error)
            message.error('请求出错了: ' + error.message)
        })
    })
}

/*
要求: 能根据接口文档定义接口请求
包含应用中所有接口请求函数的模块
每个函数的返回值都是promise

基本要求: 能根据接口文档定义接口请求函数
 */
import ajax from './ajax'

// const BASE = 'http://localhost:5000'
const BASE = ''
// 登陆
/*
export function reqLogin(username, password) {
  return ajax('/login', {username, password}, 'POST')
}*/
export const reqLogin = (username, password) => ajax(BASE + '/login', {username, password}, 'POST')

处理跨域问题
安装jsonp

yarn add jsonp

配置 package.json
“proxy”: “http://localhost/”

效果