1、前端開(kāi)發(fā)導(dǎo)航菜單菜單，http/菜單組件mode有水平、垂直、內(nèi)嵌.Item 菜單項(xiàng)key 菜單項(xiàng)item的唯一標(biāo)識(shí)/ src/index.jsimport React from react;import ReactDom from react-dom;import Route, Link, BrowserRouter as Router from react-router-dom;import , Icon from antd;import Login from ponent/login;import Reg from ./component/reg;import Pub from ./co

2、mponent/pub; / 發(fā)布頁(yè)/import L from ./component/list; / 列表頁(yè)t; / 詳情頁(yè)/importt from ./component/import antd/lib/style;import antd/lib/icon/style;const Home = () = (Home);const About = () = (About);const App = () = (.Item key=home主頁(yè)/.Item key=login登錄.Item key=reg.Item.Item key=pub發(fā)布文章列表.Item key=about關(guān)于.It

3、em布局采用上中下布局，參考 http/import React from react;import ReactDom from react-dom;import Route, Link, BrowserRouter as Router from react-router-dom;import Layout,import Login from import Reg from , Icon from antd; ponent/login;ponent/reg;import Pub from ./component/pub; / 發(fā)布頁(yè)./component/list; / 列表頁(yè)/ import

4、 L fromt; / 詳情頁(yè)/ importtfrom ./component/import antd/lib/layout/style;import antd/lib/style;import antd/lib/icon/style;const Header, Content, Footer = Layout; / 上中下const Home = () = (Home);const About = () = (About);const App = () = (.Item key=home主頁(yè)/.Item key=login登錄.Item key=reg.Item.Item key=pub發(fā)

5、布文章列表);ReactDom.render(,.geementById(root);.Item key=list文章列表 這里L(fēng)ink需要注意， / 此函數(shù)要注意thisconsole.log(response.data); console.log(response.sus);this.msg = 博文提交成功 /+ 信息顯示關(guān)于教育2008-2018);ReactDom.render(,.geementById(root);).catch(error = console.log(error);this.msg = 登陸失敗; /+ 信息顯示)發(fā)布組件使用Form組件，http/import

6、 React from react;import Link, Redirect from react-router-dom; import observer from mobx-react;import message from antd; import inject from ./utils;import Form, Input, Button from antd;import FormItem from antd/lib/form/FormItem; / 不在antd中單獨(dú)導(dǎo)importtService from ./service/t;import antd/lib/message/st

7、yle; import antd/lib/form/style; import antd/lib/input/style; import antd/lib/button/style;const TextArea = Input;const service = newtService(); inject( service )observerexport default class Pub extendsponent handleSubmit(event) event.preventDefault(); console.log(event.) let fm = event.; console.lo

8、g(fm0.value); console.log(fm1.value);ps.service.pub(fm0.value, fm1.value);render() if (ps.service.msg) (ps.service.msg, 3,() = setTimeout()=ps.service.msg = ),1000);return (提交);Form 表單組件，layout是垂直，onSubmit提交，注意這個(gè)提交的this就是表單自己FormItem 表單項(xiàng)，label設(shè)置控件前的標(biāo)題，labelCol設(shè)置label的寬度，wrapperCol是label后占用的寬度，這些都是柵格

9、系統(tǒng)的寬度。Input 輸入框，placeholder提示字符TextArea 文本框，rows行數(shù)Button 按鈕，htmlType使用HTML中的type值，submit是提交按鈕會(huì)觸發(fā)提交行為，但是handleSubmit中要阻止默認(rèn)行為。業(yè)務(wù)層改進(jìn)header中的Jwt由于與Django Server通信，認(rèn)證需要Jwt，這個(gè)要放到request header中。使用axios的APIimport axios from axios ; import observable from mobx; import store from store ;export default classt

10、Service constructor() / 創(chuàng)建自定義實(shí)例，可以增加請(qǐng)求headerthis.axios = axios.create( baseURL : /api/t/);observable msg = ; getJwt () return store.get(token, null);pub (title, content) console.log(title);this.axios.t(pub, title, content, headers: Jwt: this.getJwt()/* dev server會(huì)*/.then(response = / 此函數(shù)要注意thisconso

11、le.log(response.data); console.log(response.sus);this.msg = 博文提交成功 /+ 信息顯示).catch(error = console.log(error);this.msg = 登陸失敗; /+ 信息顯示)文章列表頁(yè)組件創(chuàng)建component/list.js，創(chuàng)建List組件。在index.js中提交菜單項(xiàng)和路由。/ index.jsimport L from component/list; / 列表頁(yè)const App = () = (.Item key=home主頁(yè)/.Item key=login登錄.Item key=reg.

12、Item.Item key=pub發(fā)布文章列表.Item key=about關(guān)于.Item教育2008-2018);查詢字符串處理用戶請(qǐng)求的URL是串？，要被轉(zhuǎn)換成，如何提取查詢字符現(xiàn)端路由有react-router管理，它匹配路徑后，才會(huì)路由。它提供了匹配項(xiàng)，它將匹配的數(shù)據(jù)注入組件的props中，也可以使用解構(gòu)提取 location也是一個(gè)對(duì)象，pathn。拿到查詢字符串后，可以使用URLSearchParams它，但是它是實(shí)驗(yàn)性的，不建議用在生產(chǎn)環(huán)境中。本次將查詢字符串直接拼接發(fā)往后端，有Django服務(wù)器端判斷。var params = new URLSearchParams(url.s

13、earch);console.log(params.get(page), params.get(size)參考 https:/react-router/core/api/locationList組件ant design的List，需要使用3.x版本，修改package.json的版本信息 antd: 3.1.5 。然后 $ npm update ，更新成功后，就可以使用List組件了。component/list.js代碼如下import React from react ;import observer from mobx-react; import message from antd; i

14、mport inject from ./utils; import List from antd;import Link from react-router-dom;importtService from ./service/t; import antd/lib/message/style;import antd/lib/list/style; const service = newtService();inject(service) observerexport default class L extendsponent constructor(props) suprops);/ 將查詢字符

15、串向后傳props.service.list(props.location.search);render () let data = ps.service.ts;if (data.length) return ( (item.title) /page=2const match, location = psame表示路徑，search表示查詢字符串。 pathName:/list, search:?/api/t/?page=2List 列表組件bordered 有邊線dataSource 給定數(shù)據(jù)源renderItem 渲染每一行，給定一個(gè)一參函數(shù)迭代每一行List.Item 每一行的組件使用L

16、ink組件增加如果需要根據(jù)復(fù)雜的效果可以這樣tService部分代碼如下import axios from axios; import observable from mobx; import store from store;export default classtService constructor() / 創(chuàng)建自定義實(shí)例，可以增加請(qǐng)求headerthis.axios = axios.create( baseURL : /api/t/);observable msg = ;observablets = ; / 博文列表observable pagination = page:1, si

17、ze:20, pages:0, count:0 / 分頁(yè)信息item.title 這是詳情頁(yè)的 (List.Item.Meitle=item.title /) / (item.title) /); else return ();分頁(yè)功能分頁(yè)還是需要查詢字符串的，因此寫(xiě)一個(gè)函數(shù)，把這個(gè)函數(shù)放入utils.js中分頁(yè)使用了Pagination組件，在L組件的render函數(shù)的List組件中使用pagination屬性，這個(gè)屬性內(nèi)放入一個(gè)pagination對(duì)象，有如下屬性current ，當(dāng)前頁(yè)pageSize， 頁(yè)面內(nèi)行數(shù)total，總數(shù)onChange，頁(yè)碼切換時(shí)調(diào)用，回調(diào)函數(shù)為(pageNo

18、, pageSize) = ，即切換是獲得當(dāng)前頁(yè)碼和頁(yè)內(nèi)行數(shù)。component/list.js代碼let url = ?id=5&page=1&size=20&id=&age-20&name=abc&name=&測(cè)試=1function parse_qs(qs, re=/(w+)=(&+)/) let obj = ;if (qs.startsWith(? ) qs = qbstr(1)console.log(qs); qs.split(&).forEach(element = let match = re.exec(element);/console.log(match)if (match)

19、 objmatch1 = match2;);return obj;console.log(parse_qs(url)pub (title, content) /*省略*/list (search) this.axios.get(search).then(response = / 此函數(shù)要注意this console.log(response.data); console.log(response.s us); this. ts = response.data. ts;this.pagination = response.data.pagination; / 分頁(yè)信息).catch(error

20、= console.log(error);this.msg = 文章列表加載失敗; /+ 信息顯示)import React from react;import observer from mobx-react; import message from antd;import inject, parse_qs from ./utils; import List from antd;import Link from react-router-dom;importtService from ./service/t;import antd/lib/message/style;import antd/

21、lib/list/style;const service = newtService();inject(service) observerexport default class L extendsconstructor(props) ponent suprops);/ 將查詢字符串向后傳props.service.list(props.location.search);handleChange(pageNo, pageSize) console.log(pageNo, pageSize);/ 不管以前查詢字符串是什么，重新拼接 查詢字符串 向后傳let search = ?page= + p

22、ageNo + &size= + pageSize; ps.service.list(search);render () let data = ps.service. if (data.length) ts;const pagination = ps.service.pagination; return ( (List.Item.Meitle=item.title /)pagination=current:pagination.page, pageSize:pagination.size, total:pagination.count, onChange:this.handleChange.b

23、ind(this)/); else return ();測(cè)試可以切換頁(yè)面。但是鼠標(biāo)放到左右兩端發(fā)現(xiàn)上一頁(yè)、下一頁(yè)是英文，如何修改？。index.js(部分代碼)import LocaleProvider from antd;importfrom antd/lib/loca;ReactDom.render(,.geementById(root);將App這個(gè)根組件瀏覽器地址不變住就行了，再看分頁(yè)組件就顯示中文了。（可選）基本上沒(méi)問(wèn)題了，但是，如果在地址欄里面輸入后，再切換分頁(yè)，地址欄URL不動(dòng)，不能和當(dāng)前頁(yè)一致這個(gè)問(wèn)題的解決有一定的難度。需要定義itemRender屬性，定義一個(gè)函數(shù)，這個(gè)函數(shù)有

24、3個(gè)參數(shù)current ，當(dāng)前pageNotype，當(dāng)前類型，上一頁(yè)為prev，下一頁(yè)為next，頁(yè)碼為page originalElement，不要?jiǎng)舆@個(gè)參數(shù)，直接返回就行了import React from react ;import observer from mobx-react; import message from antd;import inject, parse_qs from ./utils; import List from antd;import Link from react-router-dom; importtService from ./service/ t;i

25、mport antd/lib/message/style; import antd/lib/list/style;const service = newtService();inject(service) observerexport default class L extendsponent constructor(props) suprops);/ 將查詢字符串向后傳props.service.list(props.location.search);基本解決問(wèn)題。但是，上一頁(yè)、下一頁(yè)點(diǎn)擊不能改變?yōu)g覽器地址欄。import React from react;import observer f

26、rom mobx-react; import message from antd;import inject, parse_qs from ./utils; import List from antd;handleChange(pageNo, pageSize) console.log(pageNo, pageSize);/ 不管以前查詢字符串是什么，重新拼接 查詢字符串 向后傳let search = ?page= + pageNo + &size= + pageSize; ps.service.list(search);geturl(c)let obj = parse_qs(ps.loca

27、tion.search) let size=20 = obj;return /list?page= + c + &size= + size;itemRender(current, type, originalElement) if (type = page)return current; return originalElement;render () let data = ps.service. ts; if (data.length) const pagination = ps.service.pagination; return ( (List.Item.Meitle=item.titl

28、e /)pagination=current:pagination.page, pageSize:pagination.size, total:pagination.count, onChange:this.handleChange.bind(this), itemRender:this.itemRender.bind(this),/); else return ();import Link from react-router-dom; importtService from ./service/t;import antd/lib/message/style; import antd/lib/

29、list/style;const service = newtService();inject(service) observerexport default class L extendsponent constructor(props) suprops);/ 將查詢字符串向后傳props.service.list(props.location.search);handleChange(pageNo, pageSize) console.log(pageNo, pageSize);/ 不管以前查詢字符串是什么，重新拼接 查詢字符串 向后傳let search = ?page= + pageN

30、o + &size= + pageSize; ps.service.list(search);geturl(c)let obj = parse_qs(ps.location.search) let size=20 = obj;return /list?page= + c + &size= + size;itemRender(current, type, originalElement) if (current = 0) return originalElement; / 竟然返回0，只能它if (type = page)return current; if (type = next)return ; if (type = prev)return ; return originalElement;render () let data = ps.service.ts;