首頁 詳情和登入功能

2021-10-03 01:36:12 字數 3972 閱讀 5648

學習過程中記錄的筆記,比較簡略

yarn add react-router-dom
import

from

'react-router-dom'

;

function()

>

>

'/' exact render =

>

<

/route>

'/detail' exact render =

>

<

/route>

<

/div>

<

/browserrouter>

<

/div>

<

/provider>);

}render寫要渲染的元素

加了exact是按準確路徑跳轉

import styled from

'styled-components'

;export

overflow: hidden;

width: 960px;

margin: 0 auto;`;

export

const homeleft = styled.div`

float: left;

margin-left: 15px;

padding-top: 30px;

width: 625px;`;

export

const homeright = styled.div`

width: 240px;

float: right;

`;

'banner-img' src=

" "/

>

export

const homeleft = styled.div`

float: left;

margin-left: 15px;

padding-top: 30px;

width: 625px;

.banner-img

`

前端元件化

粒度掌握好

建立元件套路

import react,

from

'react'

;class

topic

extends

component

}export

default topic;

reducer的模版

import

from

'immutable'

;const defaultstate =

fromjs()

;export

default

(state = defaultstate, action)

=>

}

topic元件使用store 裡的資料

import

from

'react-redux'

;

取資料 mapstatetoprops

map

(mapstatetoprops, mapdispatchtoprops)

主要是**

/api/home/json
外鏈失效了,找了bilibilib幾個圖

實現載入更多功能

加了乙個homelist.json

分頁的做法

返回頂部功能實現

小組件,不值得單獨寫

寫在home下的index.js

componentwillunmount()

bindevents()

元件銷毀的時候記得解除window的繫結

首頁效能優化及路由跳轉

用connect 每個元件的render()都重新執行

react fiber提供的新的元件型別

purecomponent

資料用了immutable 所以purecomponent用起來沒問題

單頁應用的跳轉,無論有多少個頁面,只載入乙個頁面的html

用標籤的話,詳情頁會再載入一遍html

to='/detail'

>

alt=

'' classname=

'list-pic'

src =

/>

'title'

>

<

/h3>

'desc'

>

<

/p>

<

/listinfo>

<

/listitem>

<

/link>

第九章

使用redux管理詳情頁面資料

}>

<

/content>

防轉義!!!

動態路由

引數傳遞

'/detail' exact component =

>

<

/route>

能匹配

在search裡取

動態路由最簡單

z-index;

登陸功能實現

stylecomponent 的 innerref 拿到真實dom 錯了

ref才能拿到dom

import

from

'react-router-dom'

;logout()

難點

登入鑑權及**優化

actioncreator的非同步補catch

**風格統一

再補充補充功能,可做面試專案

我們現在會一次載入全部**,都在bundle.js裡

需要非同步元件,底層比較複雜,此處不講

react-loadable

loadble.js:

import react from

'react'

;import loadable from

'react-loadable'

;const loadablecomponent =

loadable(}

);export

default()

=>

>

;import detail from

'./pages/detail/loadable.js'

;detail的index.js

import

from

'react-router-dom'

;export

default

connect

(mapstate, mapdispatch)

(withrouter

(detail)

;

定製BIEE登入首頁

我安裝biee時預設的語言是中文 1.如果想修改以上,只需使用相同的名字bglogon.jpg即可。2.修改上的文字oracle business intelligence 需要在productmessages.xml 檔案中 修改kmsgproductgeneral的值,該檔案存在於 web ms...

ecshop首頁呼叫商品詳情或者其他商品內容

1.查詢資料庫確定商品詳情欄位goods desc 2.找到lib goods.php 在第290行sql查詢新增查詢欄位g.goods desc 如下 取出所有符合條件的商品資料,並將結果存入對應的推薦型別陣列中 sql select g.goods id,g.goods name,g.goods...

部落格 3 首頁 個人部落格詳情頁

自定義 tag,傳入引數,渲染left menu.html檔案,返回html檔案 匯入page main塊 from django import template from blog import models from django.db.models import count register ...