仿貝殼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，但是寫完還是很成就感的。歡迎大佬們點個贊哦，同時也希望大佬們可以提點建議。感激不盡！😎😎😎

附

專案原始碼：點選此處