仿贝壳app全景看房（React+Mobx+Egg+Three.js入门级全栈实战项目）

       ... ....
       // 点击判断隐藏模块实现内容的切换
        <div className={cx({ [s.hidden]: show !== 'beike' })}>
            <div className={s.botton2}>
                <div className={s.zhishu}>
                    <div className={s.topWords} onClick={()=>changePage('/cityprice')}>贝壳指数</div>
                    <div className={s.cityBox}>
                        <div className={s.city}>南昌房价</div>
                        <div className={s.arrow}></div>
                    </div>
                </div>
                <div className={s.line}></div>
                <div className={s.info}>
                    <div className={s.leftBox}>
                        <div className={s.topPrice}>
                            <div className={s.num}>12078</div>
                            <div className={s.dollor}>元/平</div>
                        </div>
                        <div className={s.oldHouse}>
                            <div className={s.name}>二手房</div>
                            <div className={s.bigArrow}></div>
                            <div className={s.percent}>0.2%</div>
                        </div>
                    </div>
                    <div className={s.rightBox}>
                        <div className={s.num}>19套</div>
                        <div className={s.yesterday}>昨日成交</div>
                    </div>
                </div>
            </div>
        </div>

    </div>

`` **Deal模块内部：** 点击贝壳指数`：

则路由跳转到贝克指数页面，如下：

这个页面引用了echarts 的折线图，实现数据的可视化效果。 src/pages/other/CityPrice 部分代码：完整代码点击这里 ``` useEffect(() => { getData() var chartDom1 = document.getElementById('echarts1'); var myChart1 = echarts.init(chartDom1); var option1; option1={...} // echarts 图配置 option1 && myChart1.setOption(option1); } // echarts 图的容器

`` 点击立即添加`：

同样也是将其做成了一个页面，其功能就是进行个人房屋的添加，在输入内容后将内容保存到仓库中，并且可以在我的页面进行展示，如果未登录就不进行展示。

• Botton:从后端获取数据展示，以及实现点击上方推荐、二手房、新房、租房实现页面内容的切换。页面内容封装成一个组件，获取数据的时候将数据存储到仓库内，在组件页面引入仓库获取数据，渲染到组件上。

src/pages/Home/components/Botton/index.jsx 部分代码 :完整代码点击这里

我的界面

功能预览

我的界面实现登录时向后端请求账号信息数据，匹配成功则跳转我的页面，成功登录则从仓库获取用户的头像与昵称（这里后端只返回了账号与密码 [账号：123456 密码：111111]，账号的昵称与头像都是在仓库里面写死的，但是昵称可以修改），右上角的设置有修改昵称（已实现）与头像（未实现）的功能，同时还可以退出当前账号登录。下方我的房子则与首页的添加房子功能一样，添加成功则房产在下面展示。

这个页面的效果如下：

点击昵称位置跳转登录页面，如果未登录就不允许修改昵称与头像（未实现）；将昵称数据存储在仓库中，若修改则修改仓库中的昵称就实现了昵称的修改功能。 部分代码：完整代码点击这里 ``` // src/pages/User/index.jsx const User = () => { // 解构出userStore仓库 const { userStore } = useStore() const navigate = useNavigate()

const showSetting = () => { navigate('/setting') }

const goToLogin = () => { if(userStore.isLogin){ Toast.info('已登录') }else{ navigate('/login') } } ..... ..... } // src/pages/User/components/Setting/index.jsx 右上角设置功能 const Setting = () => { const navigate = useNavigate() const { userStore } = useStore()

const changeLoginState = () => {   // 点击退出登录或者点击登录
    if (userStore.isLogin) {
        userStore.changeLogin(false)
        Toast.info('注销成功！')
        navigate('/user')
    } else {
        navigate('/login')
    }
}

const changeInfo = () => {
    if (userStore.isLogin) {
            navigate('/userInfo')
    } else {
        Toast.info('请登录')
    }
}
const changeName = () => {
    if (userStore.isLogin) {
            navigate('/userName')
    } else {
        Toast.info('请登录')
    }
}

} ```

Three.js 实现简单的全景看房

效果如下：

我将这个写成了一个组件，实现的原理也是比较好理解的：用Three.js先生成一个立方体，将照片资源分别放在立方体的六个面上，然后将立方体的外表面往内部翻转，将camera放到立方体里面通过镜头的旋转实现全景看房效果。 部分代码如下： 完整代码点击这里 // 获取挂载房子容器的dom结构 const container1 = useRef(null) // 创建渲染器 const renderer1 = new THREE.WebGLRenderer({ //增加下面两个属性，可以抗锯齿 antialias: true, alpha: true }) renderer1.setSize = (window.innerWidth, window.innerHeight) // 设置渲染的页面大小 // 创建镜头 const camera1 = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) camera1.position.z = 0.1 // 创建场景 const scene1 = new THREE.Scene() // 立方体 const geometry1 = new THREE.BoxGeometry(1, 1, 1) let livingRoom = ['4_l', '4_r', '4_u', '4_d', '4_b', '4_f'] // 图片资源 let boxMaterials1 = [] livingRoom.forEach((item, index) => { // 纹理加载 let texture = new THREE.TextureLoader().load(`./imgs/living/${item}.jpg`) // if (item === '4_u' || item === '4_d') { // 天花板与地面要设置旋转中心 if (index === 2 || index === 3) { // 天花板与地面要设置旋转中心 texture.rotation = Math.PI texture.center = new THREE.Vector2(0.5, 0.5) boxMaterials1.push(new THREE.MeshBasicMaterial({ map: texture })) } else { boxMaterials1.push(new THREE.MeshBasicMaterial({ map: texture })) } }) const cube1 = new THREE.Mesh(geometry1, boxMaterials1) cube1.geometry.scale(1, 1, -1) // 将几何体的面往内部翻转 scene1.add(cube1) // 渲染场景函数 const render1 = () => { // console.log(container); requestAnimationFrame(render1) // 让浏览器递归的渲染模型 renderer1.render(scene1, camera1) } useEffect(() => { const controls1 = new OrbitControls(camera1, container1.current） controls1.enableDamping = true // 增加控制器的阻尼感 container1.current.appendChild(renderer1.domElement) // 往dom结构上挂载这个模型 render1() }, [])

后端

基于 Egg.js 搭建

总的来说个人感觉 Egg.js 封装的非常简便。当然我也只写了一点点的数据模拟了一下接口请求。具体代码看这里

写这个项目的时候碰到的问题

1. 刷新后底部Tabbar标签栏上面的选中颜色会重新匹配到首页的icon上面：

解决方法：在加载当前页面的时候获取当前页面的路由保存下来。 ``` const { pathname } = useLocation()

useEffect(() => { setShowNav(needNav.includes(pathname)) }, [pathname]) // 监听路由变化，设置Tabbar标签栏的选中 ``` 2. 跳转不需要底部Tabbar标签栏的页面时也会展示标签栏：

解决方法：维护一个数组用来存储需要展示标签栏的页面的路由地址，在路由地址改变的时候判断标签栏是否显示。
```
 const needNav = ['/', '/message', '/info', '/recommand', '/user']
 const { pathname } = useLocation()
 useEffect(() => {
setShowNav(needNav.includes(pathname))
console.log(showNav);
}, [pathname])

return (
<ConfigProvider>
  <>
    <Router />
    {/* 让导航栏在底部五个路径的页面显示，其他页面则不显示 */}
    <div className={cs({ [s.hidden]: showNav == false })}>
      <NavBar />
    </div>



</ConfigProvider>
)
```

1. 在渲染首页数据的时候发现重复渲染了很多条，后来发现是自己重复的循环了存储数据的数组，蠢的我！

总结： 经过了一个多星期的 coding ，虽然功能写的比较拉跨，但是通过这段时间的努力还是有不小的收获，对于写项目前的规划以及在项目中碰到问题如何解决的能力还是有提升的。这个项目让我在学习 React 的道路上迈出了第一步，虽然中间碰到很多意外bug，但是写完还是很成就感的。欢迎大佬们点个赞哦，同时也希望大佬们可以提点建议。感激不尽！😎😎😎

附

项目源码：点击此处