首頁 詳情和登入功能

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

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;

import

from
'immutable'
;const defaultstate =
fromjs()
;export
default
(state = defaultstate, action)
=>
}

import

from
'react-redux'
;

map

(mapstatetoprops, mapdispatchtoprops)

/api/home/json

實現載入更多功能

加了乙個homelist.json

分頁的做法

返回頂部功能實現

小組件，不值得單獨寫

寫在home下的index.js

componentwillunmount()

bindevents()

首頁效能優化及路由跳轉

用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 拿到真實ｄｏｍ 錯了

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 ...