React【axios、全局处理、 antd UI库、更改主题、使用css module的情况下修改第三方库的样式、支持sass & less】(十三)

文件目录

Proxying in Development

http-proxy-middleware

fetch_get

fetch 是否成功

axios

全局处理

 antd UI库

更改主题

使用css module的情况下修改第三方库的样式

支持sass & less

---

 

Proxying in Development

在开发模式下，如果客户端所在服务器跟后台服务器的地址或者端口不一致，则会出现跨域的问题。
服务器运行在3030端口：

//server/index.js
const express=require('express')
const app=express()
app.get('/api/*',(req,res)=>{
    res.send('来自服务端的响应信息！！')
})
app.listen(3030,()=>{
    console.log('服务器正在监听3030端口')
})

发送网络请求：
 

import logo from './logo.svg';
import './App.css';
import { Outlet } from 'react-router-dom';
function App() {
  const onFetch=()=>{
      //向服务器发送网络请求
    fetch('http://localhost:3030/api/user')
 }
  return (
    <div className="App">
      <button onClick={onFetch}>发送请求button>
    div>
 );
}
export default App;

 使用Proxy解决跨域
在package.json中设置Proxy属性：

"proxy":"http://localhost:3030"

设置代理后，则发送的api请求会被代理服务器转发到 localhost:3030

提示：
proxy代理仅在开发中有效。
在生产环境下，这个代理无效。

http-proxy-middleware
 

 为了更灵活的配置代理信息，我们可以使用http-proxy-middleware。

1、安装http-proxy-middleware
 

npm install http-proxy-middleware  
//或者 yarn add http-proxy-middleware

2、创建src/setupProxy.js文件

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
//app为Express实例
    //使用app.use注册中间件
  app.use(
    '/api/*',
    createProxyMiddleware({
        //target：服务器地址
      target: 'http://localhost:3030',
      changeOrigin: true
   })
 );
};

提示：
该文件是只支持NodeJs语法，因为它运行在Node环境中。

fetch_get

 fetch是浏览器提供的API，用于发起获取资源的请求，它返回一个 promise。

fetch(input[, init])
      input：要获取资源的 URL
      init：（可选）配置对象
      返回Promise

get
 

fetch('/api/user').then(res=>{
      // res是响应对象
      //返回的body是字符串，所以使用text()读取
      return res.text()
   }).then(data=>{
      console.log(data)
   })

传递参数

//get请求传递参数
fetch('/api/user?name=baizhan').then(res=>{
      // res是响应对象
      //返回的body是json，所以使用json()读取
      return res.json()
   }).then(data=>{
      console.log(data)
   })

fetch 是否成功

 当遇到网络错误时， fetch() 返回的 promise 会被 reject。成功的 fetch() 检查不仅要包括 promise 被 resolve，还要判断下status，HTTP 500或者404 状态并不被认为是网络错误，依然会返回响应对象，只不过它的ok为false。
服务器的状态码返回500：

res.status(500).send('服务器发生错误')})

fetch('/api/user').then(res=>{
      // res是响应对象
      console.log(res)
        return res.text()
   }).then(data=>{
      console.log(data)
   }).catch(e=>{
      // catch捕获不到我们预期的错误
   })

应当判断响应信息的status或者ok是否为true，否则抛出错误
 

fetch('/api/user').then(res=>{
      // res是响应对象
      console.log(res)
      if(res.status==200){
        return res.text()
     }
      throw new Error('响应发生错误')
   }).then(data=>{
     // 抛出错误，则这个回调函数并不会被调用
      console.log(data)
   }).catch(e=>{
      // 抛出错误，catch捕获，可以编写处理错误的逻辑
   })
 

axios

 Axios 是一个基于 promise 网络请求库。

1、安装axios

npm instal axios
//或者yarn add axios

get

axios.get('/api/user',{params: {name:'xiaotong'}}).then(res=>{
      console.log(res.data)
   })

post

//传递json数据  
axios.post('/api/user', {name:'xiaotong'}).then(res=>{
      console.log(res.data)
   })

//传递表单数据  
axios.post('/api/user',{name:'xiaotong'},{
      headers:{"Content-Type":"application/x-www-form-urlencoded"}
   }).then(res=>{
      console.log(res.data)
   })

全局处理

1、指定默认配置
您可以指定默认配置，它将作用于每个请求。

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

2、拦截器
在请求或响应被 then 或 catch 处理前拦截它们。
 

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么
      config.headers['Authorization'] = 'xxxxxxx';
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
      return config
   });
// 添加响应拦截器
  
axios.interceptors.response.use(function
(response) {
      // 2xx 范围内的状态码都会触发该函数。
      // 对响应数据做点什么
      console.log(response)
      return response
   }, function (error) {
      // 超出 2xx 范围的状态码都会触发该函数。
      // 对响应错误做点什么
      console.log(error)
      
   })

提示：
axios参考文档：https://www.axios-http.cn/docs/intro

 antd UI库

 antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研
发企业级中后台产品。

官方文档：https://ant.design/index-cn

 1、安装antd

npm install antd
//或者yarn add antd

2、使用antd

//AntdTest.js
import React from 'react';
import { Button, DatePicker } from 'antd'
export default function index() {
    return (
        <div >
            <Button type='primary'>我是来自antd的按钮Button>
            <DatePicker />
        div>
   );
}

3、国际化
 

//index.js
import zhCN from 'antd/locale/zh_CN';
import {ConfigProvider} from 'antd'
<React.StrictMode>
    <ConfigProvider locale={zhCN}>
    <App/>
    ConfigProvider>
  React.StrictMode>

4、引入重置样式
 

//index.js
import 'antd/dist/reset.css';

更改主题

 更改主题
通过ConfigProvider设置主题
切换内置主题：默认有三个内置主题(defaultAlgorithm，darkAlgorithm， compactAlgorithm)

 

//通过修改 ConfigProvider 中 theme 属性的 algorithm 属性来切换
import {ConfigProvider,theme} from 'antd'
//index.js
<ConfigProvider locale={zhCN} theme={{
       algorithm: theme.darkAlgorithm,
   }}>
    <App/>
  
    ConfigProvider>

配置主题（修改主题变量）
 

<ConfigProvider
    theme={{
      token: {
        colorPrimary: '#00b96b',
     },
   }}
  >
    <App />
  ConfigProvider>

提示：
主题变量参考   https://ant.design/docs/react/customize-theme-cn

 使用Desing Token

import React from 'react';
import { Button, DatePicker ,theme} from 'antd'
export default function index() {
    //调用theme的useToken()获取当前主题下的Design Token
    const {token}=theme.useToken()
    return (
        <div >
            <Button type='primary'>我是来自antd的按钮Button>
            <DatePicker />
           {/* 根据变量名来访问 */}
            <div style= {{color:token.colorPrimary}}>hello,xiaotongdiv>
        div>
   );
}

使用css module的情况下修改第三方库的样式

 

//AntdTest/index.module.css
.container :global(:where(.css-dev-only-donot-override-1ni1eeq).ant-btn-primary){
    background:red
}

:where 选择器降低 CSS Selector 优先级，以减少用户升级 v5 时额外调整自定义样式成本。
 比对：

.ant-btn-primary{
        background:red//它的优先级更高
}
:where(.css-dev-only-do-not-override-1ni1eeq).ant-btn-primary{
        background:blue
}

支持sass & less

 支持sass
       安装sass

npm install sass
或者yarn add sass

      更改文件的后缀为.scss
 

支持less
     导出配置文件。

npm run eject
或者yarn run eject

安装less和less-loader
 

npm install less less-loader -D
或者yarn add less less-loader -D

修改webpack.config.js

//定义正则，用来查找文件以.less结尾的文件
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
  {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
               {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                   : isEnvDevelopment,
                  modules: {
                    mode: 'icss',
                 },
               },
                'less-loader'
             ),
              // Don't consider CSS imports dead code even if the
              // containing package claims to have no side effects.
              // Remove this when ,webpack adds a warning or an error for this.
              // See https://github.com/webpack/webpack/issues/6571
              sideEffects: true,
           },
            // Adds support for CSS Modules, but using SASS
            // using the extension.module.scss or .module.sass
           {
              test: lessModuleRegex,
              use: getStyleLoaders(
               {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                   : isEnvDevelopment,
                  modules: {
                    mode: 'local',
                    getLocalIdent: getCSSModuleLocalIdent,
                 },
               },
                'less-loader'
             ),
           },