贵州建设厅网站厅长,开发软件app下载,vi设计公司哪里,深圳网站开发团队文件目录
Proxying in Development
http-proxy-middleware
fetch_get
fetch 是否成功
axios
全局处理 antd UI库
更改主题
使用css module的情况下修改第三方库的样式
支持sass less Proxying in Development 在开发模式下#xff0c;如果客户端所在服务器跟后…
文件目录
Proxying in Development
http-proxy-middleware
fetch_get
fetch 是否成功
axios
全局处理 antd UI库
更改主题
使用css module的情况下修改第三方库的样式
支持sass less Proxying in Development 在开发模式下如果客户端所在服务器跟后台服务器的地址或者端口不一致则会出现跨域的问题。 服务器运行在3030端口
//server/index.js
const expressrequire(express)
const appexpress()
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 classNameAppbutton 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?namebaizhan).then(res{// res是响应对象//返回的body是json所以使用json()读取return res.json()}).then(data{console.log(data)})fetch 是否成功 当遇到网络错误时 fetch() 返回的 promise 会被 reject。成功的 fetch() 检查不仅要包括 promise 被 resolve还要判断下statusHTTP 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.status200){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 typeprimary我是来自antd的按钮/ButtonDatePicker //div);
} 3、国际化
//index.js
import zhCN from antd/locale/zh_CN;
import {ConfigProvider} from antd
React.StrictModeConfigProvider locale{zhCN}App//ConfigProvider/React.StrictMode4、引入重置样式
//index.js
import antd/dist/reset.css;
更改主题 更改主题 通过ConfigProvider设置主题 切换内置主题默认有三个内置主题(defaultAlgorithmdarkAlgorithm compactAlgorithm) //通过修改 ConfigProvider 中 theme 属性的 algorithm 属性来切换
import {ConfigProvider,theme} from antd
//index.js
ConfigProvider locale{zhCN} theme{{algorithm: theme.darkAlgorithm,}}App//ConfigProvider配置主题修改主题变量
ConfigProvidertheme{{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 Tokenconst {token}theme.useToken()return (div Button typeprimary我是来自antd的按钮/ButtonDatePicker /{/* 根据变量名来访问 */}div style {{color:token.colorPrimary}}hello,xiaotong/div/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),// Dont 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/6571sideEffects: 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),},
