# sw2期_react_app

**Repository Path**: jiely007/sw2-react-app

## Basic Information

- **Project Name**: sw2期_react_app
- **Description**: 这是一个高逼格 react  app 项目  学会了 就可以在武汉到处横行  你值得拥有哦
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-22
- **Last Updated**: 2022-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

// react 脚手架搭建项目 完成后  
每个文件夹的含义 
yarn.lock  版本锁定   提高下次安装的速度  缓存 


  
  


git status   这个指令 打完后 会提示你下一步做什么


  //  创建git 仓库  （在项目目录下）
   1 git init  
   2 git add  .
   3  git commit -m   '说明信息'
   4 git remote add origin git@gitee.com:jiely007/sw2-react-app.git （关联本地仓库与远程仓库）
   5 git push -u origin master  （ 推送 本地仓库到远程仓库里面去）

  
  antd-mobile   的基本使用 
  1  安装  npm install antd-mobile --save  
  2  引入   





安装：yarn add react-router-dom /  cnpm i react-router-dom
导入路由组件：Router / Route / Link
在 pages 文件夹中创建 Home/index.js 和 CityList/index.js 两个组件
使用 Route 组件配置首页和城市选择页面  (app.jsx 里面引入路由)




 在react  使用 scss  / sass  
 第一步 安装   yarn add node-sass

最新的版本不兼容    所以我们推荐使用 5.0的版本
   "node-sass": "^5.0.0",







// 高级函数  主要是针对异步   


//  错误演示

// import axios from 'axios'



//  let getCurCity = ( callback) => {

//     var curCity='xxx'

//     var myCity = new window.BMapGL.LocalCity();
//     alert('1')

//     myCity.get(
        
        
//         async res => {
//         console.log("当前定位城市:", res.name);

//         let cityName = res.name
//         let url = `http://e.ludir.cn:8081/area/info?name=${cityName}`
//         let result = await axios.get(url)
//        curCity=result.data.body.label

//        alert('2')
       

//     })
//     alert('3')
//     return curCity

// }

// let  res=getCurCity()
// console.log('打印城市',res)   // ’xxxx‘

<!--  执行顺序  先是1  再是 3  最后是  2  -->



//正确解决方案
<!-- 第一种采用回调函数  高阶函数 -->
import axios from 'axios'


 let getCurCity = ( callback) => {

    var myCity = new window.BMapGL.LocalCity();

    myCity.get(
        
        
        async res => {
        console.log("当前定位城市:", res.name);

        let cityName = res.name
        let url = `http://e.ludir.cn:8081/area/info?name=${cityName}`
        let result = await axios.get(url)
        let  curCity=result.data.body.label

        callback(curCity)


    })

}

getCurCity((data)=>{
    console.log(data)
})




<!-- 第二种解决方案   采用promise  方案 -->

import axios from 'axios'

let getCurCity = () => {
    var p1 = new Promise((resolve, reject) => {
        //百度地图api 
        var myCity = new window.BMapGL.LocalCity();
        myCity.get(async res => {
            console.log("当前定位城市:", res.name);
            let cityName = res.name
            try {
                let url = `http://e.ludir.cn:8081/area/info?name=${cityName}`
                let result = await axios.get(url)
                let curCity = result.data.body.label

                resolve(curCity)
            } catch (error) {
                reject(error)
            }
        })
    })
    return p1

}

getCurCity().then(res => {
    console.log('获取城市选择 promise 测试',res)
})


 react-virtualized 长列表渲染区域插件 性能很高
yarn add react-virtualized



第一步 引入样式  
import 'react-virtualized/styles.css'; （index.js） 引入一次就够了





formik   安装后可能遇到 scss 无法解析的问题  
"formik": "^1.5.7",

 "node-sass": "^5.0.0",






 formik 配合  "yup": "^0.27.0"   进行表单验证  
 验证第二种方式 


 安装  

 第一种方式  
 cnpm i yup@0.27.0 --save 


 第二种直接把  "yup": "^0.27.0"  拷贝到  package.json   
 然后直接执行  cnpm i  
 




  <div className={styles.root}>
                {/* 个人信息 */}
                <div className={styles.title}>
                    <img
                        className={styles.bg}
                        src={BASE_URL + '/img/profile/bg.png'}
                        alt="背景图"
                    />
                    <div className={styles.info}>
                        <div className={styles.myIcon}>
                            <img
                                className={styles.avatar}
                                src={avatar || DEFAULT_AVATAR}
                                alt="icon"
                            />
                        </div>
                        <div className={styles.user}>
                            <div className={styles.name}>{nickname || '游客'}</div>
                            {/* 登录后展示： */}
                            {isLogin ? (
                                <>
                                    <div className={styles.auth}>
                                        <span onClick={this.logout}>退出</span>
                                    </div>
                                    <div className={styles.edit}>
                                        编辑个人资料
                        <span className={styles.arrow}>
                                            <i className="iconfont icon-arrow" />
                                        </span>
                                    </div>
                                </>
                            ) : (
                                <div className={styles.edit}>
                                    <Button
                                        type="primary"
                                        size="small"
                                        inline
                                        onClick={() => history.push('/login')}
                                    >
                                        去登录
                      </Button>
                                </div>
                            )}

                            {/* 未登录展示： */}
                        </div>
                    </div>
                </div>

                {/* 九宫格菜单 */}
                <Grid
                    data={menus}
                    columnNum={3}
                    hasLine={false}
                    renderItem={item =>
                        item.to ? (
                            <Link to={item.to}>
                                <div className={styles.menuItem}>
                                    <i className={`iconfont ${item.iconfont}`} />
                                    <span>{item.name}</span>
                                </div>
                            </Link>
                        ) : (
                            <div className={styles.menuItem}>
                                <i className={`iconfont ${item.iconfont}`} />
                                <span>{item.name}</span>
                            </div>
                        )
                    }
                />

                {/* 加入我们 */}
                <div className={styles.ad}>
                    <img src={BASE_URL + '/img/profile/join.png'} alt="" />
                </div>
            </div>










### 封装AuthRoute鉴权路由组件

- 在components目录中创建AuthRoute/index.js 文件
- 创建组件AuthRoute并导出
- 在AuthRoute组件中返回Route组件（在Route基础上做了一层包装，用于实现自定义功能）
- 给Route组件，添加render方法，指定改组件要渲染的内容（类似与component属性）
- 在render方法中，调用isAuth() 判断是否登陆
- 如果登陆了，就渲染当前组件（通过参数component获取到要渲染的组件，需要重命名）
- 如果没有登陆，就重定向到登陆页面，并且指定登陆成功后腰跳转的页面路径
- 将AuthRoute组件接收到的props原样传递给Route组件（保证与Route组件使用方式相同）
- 使用AuthRoute组件配置路由规则，验证是否实现页面的登陆访问控制



// function PrivateRoute({ children, ...rest }) {
//     let auth = useAuth();
//     return (
//       <Route
//         {...rest}
//         render={({ location }) =>
//           auth.user ? (
//             children
//           ) : (
//             <Redirect
//               to={{
//                 pathname: "/login",
//                 state: { from: location }
//               }}
//             />
//           )
//         }
//       />
//     );
//   }





  
<!-- 
var obj={
    path:'/home/my'  ,
    component:()=>{
        return (
            if(login) {
                MY
            }else {
                Login
            }
        )
    }
}


function AutRouter({{component:Component,...rest}} ) {
  {...rest}
  return (

       <Route  path={path}    ()=>{
        return (
            if(login) {
                MY
            }else {
                Login
            }
        )
    }  ></Route>
  )
}


AutRouter()


<AutRouter></AutRouter> -->