课堂笔记10博文业务代码实现

菜单 .Itemkey菜单项item//importReactfrom'react';importReactDomfrom'react-dom';import{Route,Link,BrowserRouterasRouter}from'react-router-dom';import{ ,Icon}from'antd';importLoginfrom' importRegfrom' importPubfrom //importLfrom //importPostfrom import'antd/lib/ import'antd/lib/icon/style';constHome=()=>constAbout=()=>constApp=()=>< .Itemkey="home"><Linkto="/"><Icontype="home"/>主页 .Itemkey="login"><Linkto="/login"><Icontype="login"/>登录 <.Itemkey="reg"><Linkto="/reg"> .Itemkey="pub"><Linkto="/">发布 .Itemkey="list"><Linkto="/"><Icontype="bars"/>文章列表 .Itemkey="about"><Linkto="/about">关于 </<Routepath="/about"component={About}<Routepath="/login"component={Login}<Routepath="/reg"component={Reg}<Routeexactpath="/"component={Home}ReactDom.render(<App importReactfrom'react';importReactDomfrom'react-dom';import{Route,Link,BrowserRouterasRouter}from'react-router-dom';import{Layout, ,Icon}from'antd';importLoginfrom' importRegfrom' importPubfrom importLfrom importPostfrom import'antd/lib/ import'antd/lib/icon/style';constHeaderContentFooterLayoutconstHome=()=>constAbout=()=>constApp=()=><mode="horizontal" .Itemkey="home"><Linkto="/"><Icontype="home"/>主页 .Itemkey="login"><Linkto="/login"><Icontype="login"/>登录 <.Itemkey="reg"><Linkto="/reg"> .Itemkey="pub"><Linkto="/pub">发布 .Itemkey="list"><Linkto="/"><Icontype="bars"/>文章列表 <<.Itemkey="about"><Linkto="/about">关于><Contentstyle={{padding:'8px50px'<divstyle={{background:'#fff',padding:24,minHeight:280<Routepath="/about"component={About}<Routepath="/login"component={Login}<Routepath="/reg"component={Reg}<Routepath="/pub"component={Pub}<Routeexactpath="/"component={Home}<Footerstyle={{textAlign:'center'ReactDom.render(<App .Item .Itemkey="list"><Linkto="/"><Icontype="bars"/>文章列表

/post/pubPOST提交博文的title、content，成功返回/post/idGET返回博文详情，返回Json，post_id、title、author、author_id、postdate（时间戳）、/post/GETimportimportaxiosfromimport{observable}fromexportdefaultclass{@observablemsg=pub(title,{console.log(title);axios.post('/api/post/pub',{title,})/*devserverresponse=>{//此函数要注意this的问题}}error=>this.msg='登陆失败';//+})}} importReactfromimport{Link,Redirect}from'react-router-dom';import{observer}from'mobx-react';import{message}from'antd';import{inject}from'../utils';import{Form,Input,Button}fromimportFormItemfrom'antd/lib/form/FormItem';//不在antdimportPostServicefromimport'antd/lib/form/style';import'antd/lib/input/style';import'antd/lib/button/style';const{TextArea}=constservice=newPostService();@inject({service})exportdefaultclassPub {handleSubmit(event){letfm=event.target;ps.service.pub(fm[0].value,}render()if{(ps.service.msg,()=>setTimeout(()=>ps.service.msg=}return<Formlayout="vertical"<FormItem<FormItemlabel="标题labelColspan4wrapperColspan14 ceholder="标题"<FormItemlabel="内容labelColspan4wrapperColspan14<TextArearows={10}<FormItemwrapperCol={{span:14,<Buttontype="primary"htmlType="submit">提交}} mmlll后占用的宽度，这些单位都是栅格系统的宽度。Input输入框， TextArea文本框，rows行数Button按钮，htmlType使用HTML中的tye值，sbmt是提交按钮会触发提交行为，但是hanleSumt中要阻止默认行为。header中的由于与DjangoServer通信，认证需要Jwt，这个要放到requestheader中。使用axios的importimportaxiosfromimport{observable}from'mobx';importstorefrom'store';exportdefaultclass{constructor()//创建自定义实例，可以增加请求headerthis.axios=:}@observablemsg="";getJwt(){returnstore.get('token',}pub(title,{{title,},{headers:{'Jwt':this.getJwt()}})/*devserverresponseresponse=>{//此函数要注意thisthis.msg='博文提交成功'//+}error=>this.msg='登陆失败';//+})}}////importLfrom constApp=()=><<<<<<<.Itemkey="home"><Linkto="/"><Icontype="home"/>主页.Itemkey="login"><Linkto="/login"><Icontype="login"/>登录.Itemkey="reg"><Link.Itemkey="pub"><Linkto="/pub">发布.Itemkey="list"><Linkto="/list"><Icontype="bars"/>文章列表.Itemkey="about"><Linkto="/about">关于><Contentstyle={{padding:'8px50px'<divstyle={{background:'#fff',padding:24,minHeight:280<Routepath="/about"component={About}<Routepath="/login"component={Login}<Routepath="/reg"component={Reg}<Routepath="/list"component={L}<Routepath="/pub"component={Pub}<Routeexactpath="/"component={Home}<Footerstyle={{textAlign:'center'

constmatch,pslocation也是一个对象，pathname表示路径，search表示查询字符串。 。拿到查询字符串后，可以使用URLSeachPams解析它，但是它是实验性的，不建议用在生产环境中。本次将查询字符串直接拼接发往后端，有Django服务器端判断。varvarparams=newURLSearchParams(url.search);console.log(params.get('page'),params.get('size'))参考 /react-List importimportReactfromimport{observer}from'mobx-react';import{message}from'antd';import{inject}from'../utils';import{List}from'antd';import{Link}from'react-router-import'antd/lib/message/style';importconstservice=newexportdefaultclassL{constructor(props){//}render()letdata=ps.service.posts;if(data.length){return<Listbordered={true}dataSource={data}renderItem={item=>}}elsereturn}}}ListbordereddataSource List.Item<List<Listbordered={true}dataSource={data}renderItem={item=>(<List.Item><Linkto={'/post/'+}<List<Listbordered={true}dataSource={data}renderItem={item=><List.Item.Metatitle={<Linkto={'/post/'+item.post_id}>{item.title}</Link>}}<Linkto={'/post/'+item.post_id}>{item.title}</Link>importimportaxiosfrom'axios';import{observable}from'mobx';importstorefrom'store';exportdefaultclass{constructor()//创建自定义实例，可以增加请求headerthis.axios=axios.create({baseURL}@observablemsg=@observableposts@observablepagination={page:1,size:20,pages:0,count:0}//pubpub(title,content){/*省略listresponse=>{//此函数要注意thisthis.posts=response.data.posts;this.pagination=response.data.pagination;//}error=>this.msg='文章列表加载失败';//+})}letleturl='?id=5&page=1&size=20&id=&age-20&name=abc&name=汤姆=&测试=1'functionparse_qs(qs,re=/(\w+)=([^&]+)/){letobj=if(qs.startsWith('?'))qs=qs.substr(1)letmatch=if(match)obj[match[1]]=return}paginationcurrent，当前页pageSizeonChange，页码切换时调用，回调函数为(pageNo,pageSizeimportReactfromimport{observer}from'mobx-react';import{message}from'antd';import{inject,parse_qs}from'../utils';import{List}from'antd';import{Link}from'react-router-dom';import'antd/lib/list/style';constservice=newexportdefaultclassL {constructor(props){//}handleChange(pageNo,//letsearch='?page='+pageNo+'&size='+pageSize;}render()if(data.length){return(<Listbordered={true}dataSource={data}renderItem={item=>(<List.Item><List.Item.Metatitle={<Linkto={'/post/'+</Link>}}

}elsereturn}}}}importimport{LocaleProvider}from from<LocaleProvider <App 浏览器地址不变的问题（可选基本上没有什么问题了，但是，如果在地址栏里面输入 ，当前pageNo

importimportReactfromimport{observer}from'mobx-react';import{message}from'antd';import{inject,parse_qs}from'../utils';import{List}from'antd';import{Link}from'react-router-dom';import'antd/lib/message/style';import'antd/lib/list/style';constservice=newexportdefaultclassL{constructor(props){}handleChange(pageNo,//letsearch='?page='+pageNo+'&size='+pageSize;}let{size=20}=obj;return'/list?page='+c+'&size='+}{if(type===return<Linkto={this.geturl(current)}>{current}</Link>;returnoriginalElement;}render()if(data.length){return(<Listbordered={true}dataSource={data}renderItem={item=>(<List.Item><List.Item.Metatitle={<Linkto={'/post/'+</Link>}}

}elsereturn}}}importimportReactfromimport{observer}from'mobx-react';import{message}from'antd';import{inject,parse_qs}from'../utils';import{List}from'antd';import{Link}from'react-router-dom';import'antd/lib/list/style';constservice=newexportdefaultclassL {constructor(props){//}handleChange(pageNo,//letsearch='?page='+pageNo+'&size='+pageSize;}let{size=20}=obj;return'/list?page='+c+'&size='+}itemRender(current,type,originalElement)if(current==0)returnoriginalElement;//竟然返回0，只 if(type===return<Linkto={this.geturl(current)}>{current}</Link>;if(type==='next')return<Linkto={this.geturl(current)}className='ant-pagination-item-link'></Link>;if(type==='prev')return<Linkto={this.geturl(current)}className='ant-pagination-item-li