React-学习笔记（6-使用Scss，配置代理跨域）

1、安装并简单使用Scss

下载 sass:

npm i sass

创建一个简单的组件 Title，包含Title.jsx、Title.scss 文件：

简单编写 JSX 文件和对应的 scss 文件，在 JSX 件中引入 scss 文件。

// Title.jsx
// 引入React核心
import React from 'react';// 引入对应的样式文件
import './Title.scss';export default class Title extends React.Component{render(){return(
Hello
React
Hello
Vue
)}
}

// Title.scss
.container{$border-color: #eee;width: 200px;height: 200px;.item{color: pink;display: flex;justify-content: center;align-items: center;.text{margin: 5px;}.text:nth-child(2){border: 1px solid var($border-color);}}.item:nth-child(1){font-weight: 700;font-size: large;}
}

2、配置代理服务器解决跨域问题（React 18环境） 0、基于两个简单的服务器接口（）

5000 端口：

const express = require('express');const app = express();app.get('/studentInfo', (req, res)=>{res.send(JSON.stringify([{name:'zhangsan',age:45,gender:'man'},{name:'lisi',age:42,gender:'man'},{name:'wangwu',age:33,gender:'man'},{name:'xioahong',age:13,gender:'woman'}]));
})app.get('/api/car', (req, res)=>{res.send(JSON.stringify(['大众','奥迪','本田','北京','坦克','奔驰','沃尔沃']))
})app.listen(5000);

5001 端口：

const express = require('express');const app = express();app.use(express.urlencoded({extended:false}));
app.use(express.json());app.get('/city', (req, res)=>{res.send(JSON.stringify(['北京','上海','重庆','天津','西安','哈尔滨']))
});app.post('/area', (req, res)=>{let {bool} = req.body;if(bool === true){res.send(JSON.stringify(['登封','泰安','华阳','衡阳','大同']))}
})app.listen(5001)

1、配置方法：

先在 src 下创建一个 js 文件，并命名为 .js。（这个文件名不能自定义，不然就匹配不到该配置文件）

根据实际需求编辑 .js 文件。

这里由于有两个端口，则设置两个代理项。

const {createProxyMiddleware : proxy} = require('http-proxy-middleware');module.exports = function(app){app.use(// 根据开头路径 代理到 5000 端口proxy('/api1',{                              // 如果路径开头是 /api1 则匹配当前代理项target:'http://localhost:5000',    // 请求转发给哪个服务器（目标服务器changeOrigin:true,                 // 控制服务器收到的响应头中Host字段的值pathRewrite:{'^/api1':''}          // 重写请求路径，将路径开头的 /api1 替换为空字符串 }),// 代理到 5001proxy('/api2',{target:'http://localhost:5001',changeOrigin:true,pathRewrite:{'^/api2':''}}))
}

2、react axios 请求使用示例：

import axios from 'axios'import React, { Component } from 'react'export default class UserAxios extends Component {state ={studentResult:'',carInfo:'',cityInfo:'',areaInfo:'',defaultStyle:{width:'400px',border:'1px solid orange',height:'auto'}}// 获取学生的信数据getStudentInfo= ()=>{/*localhost:3000 没有找到此资源，则去找代理帮忙代理服务器匹配到 /api1 ，会把当前请求发向 target（http://localhost:5000) ,然后把路径拼接上去 (http://localhost:5000/api1/studentInfo)然后判断是否需要重写（pathRewrite:{'^api1':''}），则重写为：http://localhost:5000/studentInfo 即最终请求的url*/axios({url:'http://localhost:3000/api1/studentInfo',method:'get'}).then(res=>{this.setState({studentResult:JSON.stringify(res.data)});}).catch(err=>{throw err;})}// 获取车的数据getCarInfo = ()=>{axios.get('http://localhost:3000/api1/api/car').then(res=>{this.setState({carInfo:res.data});}).catch(err => {throw err})}// 获取城市的数据getCityInfo = ()=>{// 请求的主机是localhost，端口3000，而当前react服务也是3000端口，则将协议、主机、端口省略axios.get('/api2/city').then(res=>{this.setState({cityInfo:res.data});}).catch(err=>{throw err})}// 获取地区的数据getAreaInfo = ()=>{// post请求，发送一个 bool 数据（请求体）axios.post('/api2/area',{bool:true}).then(res=>{this.setState({areaInfo:res.data});}).catch(err=>{throw err;})}render() {const {studentResult, carInfo, cityInfo, areaInfo, defaultStyle} = this.state;return (
studentResult:{studentResult}
get student data
carInfo:{carInfo}
get car data
cityInfo:{cityInfo}
get city data
areaInfo:{areaInfo}
get area data
)}
}

3、结果：

注意：以下后三项请求的展示结果，在服务器中返回的数据都是一个数组的形式，如 car 数据返回的是 res.data = ['大众','奥迪','本田','北京','坦克','奔驰','沃尔沃']。将数组类型的数据放在JSX中的花括号中，会自动遍历数组中的内容，因此 为若干个汽车品牌名称的拼接效果。