2018python全栈爬虫高端自动化课程大纲01课堂笔记07前端开发

前端开使用ect-mox-strtr-mastr脚手架，解压更名为foned。在 中新增 ponent、srvic、css 。注：没有特别说明，js开发都在 │-│-│-│-│-│-│-package-│-│-│- │- │-│-│-│-│-{{"name":"blog","description":"blogproject","author":"wayne"}w::'/api':target:'changeOrigin:true}' 到本地8000的webserver处理}安装$$npm$npminstallreact-$npminstallreact-router-缺省npm会安装到dependencies前端路前端路由使用react-router官网文 /react-基本例 /react-使用react-router，更改importimportReactfromimportReactDomfrom'react-import{Route,Link,BrowserRouterasRouter}from'react-router-constHome=()=>constAbout=()=>constApp=()=><Routeexactpath="/"component={Home}<Routepath="/about"component={About}ReactDom.render(<App 在地址栏里面输 登录组 <div<divclass="login-<div<formclass="register-<input <input <input <pclass="message">Alreadyregistered?<ahref="#">Sign<formclass="login-<input <input <pclass="message">Notregistered?<ahref="#">Createan使用这个HTML模板来构建组件特别在 下建立login.js的登录组件 importimportReactfromimport{Link}from'react-router-exportdefaultclassLoginponentrenderrender()return(<divclassName="login-<div<formclassName="login-<input ceholder="邮箱"<input<button>登录"<pclassName="message">?<Linkto="/reg">}}在路由中增加登录组importimportLoginfromconstApp=()=><Routepath="/about"component={About}<Routepath="/login"component={Login}<Routeexactpath="/"component={Home}bodybodybackground:#456;font-family:SimSun;font-size:14px;}.login-{width:360px;padding:8%00;margin:auto;}.formfont-family:"position:relative;z-index:1;background:#FFFFFF;max-width:YaHei",marginmargin:0auto100px;padding:45px;text-align:box-shadow:0020px0rgba(0,0,0,0.2),05px5px0rgba(0,0,0,}.form{background:#f2f2f2;width:100%;border:margin:0015px;padding:15px;box-sizing:border-box;font-size:14px;}.formbuttontext-transform:uppercase;outline:0;background:#4CAF50;width:100%;border:0;padding:15px;color:#FFFFFF;font-size:14px;cursor:}.formbutton:hover,.formbutton:active,.form{background:}.form{margin:15px00;color:#b3b3b3;font-size:12px;}.form.message{importimportwck.config.dev.js文件中增加css的部

报错了，原因没有配置cssloadermodulemodule:rules:{test:exclude:/node_modules/,use:[{loader:'react-hot- ck'{loader:'babel-loader']{{test:/\.css$/,exclude:/node_modules/,use:['style-loader','css-loader'{test:/\.less$/,use:[{loader:"style-loader"{loader:"css-loader"{loader:"less-loader"]}]}可以看到界面，如下(组importimportReactfromimport{Link}from'react-router-dom';import'../css/login.css'exportdefaultclassReg ponentrenderrender()return<divclassName="login-<div<formclassName="register-<input<input<input<input"ceholder="邮箱""ceholder="确 " <pclassName="message"><Link}}importimportRegfromconstApp=()=><Routepath="/about"component={About}<Routepath="/login"component={Login}<Routepath="/reg"component={Reg}<Routeexactpath="/"component={Home}可以看可以看 )导航栏组constconstApp=()=><li><Linkto="/">主页<li><Linkto="/login">登录<li><Link <li><Linkto="/about">关于<Routepath="/about"component={About}<Route<Routepath="/login"component={Login}<Routepath="/reg"component={Reg}<Routeexactpath="/"component={Home}分视图层，负责显示数据，每一个Rt组件一个xxxjs。服务层，负责业务数据处理逻辑，命名为xxxSevicejsModl层，负责数据，数据从后端取登录功能实viw层，登录组件和用户交互。当button点击触发onClck，调用响应函数alClic，llic服务sevce层的loi函数。exportexportdefaultclass{login ,password)//}}importimportReactfromimport{Link}from'react-router-dom';import'../css/login.css'exportdefaultclassLogin{handleClick(event){}render()return(<divclassName="login-<div<formclassName="login-<input ceholder="邮箱"<input "<buttononClick={this.handleClick.bind(this)}>登录<pclassName="message">还?<Linkto="/reg">}}}如何拿到邮箱和importimportReactfromimport{Link}from'react-router-dom';import'../css/login.css'importUserServicefrom'../service/user';constuserService=newUserService();exportdefaultclassLogin {render()return<_Loginservice={userService}}}class_Login {handleClick(event){letfm=event.target.form;fm[0].value,}render()return(<divclassName="login-<div<formclassName="login-<input ceholder="邮箱"<input "<buttononClick={this.handleClick.bind(this)}>登录<pclassName="message">还?<Linkto="/reg">}}UserService的login方法实修改wck.config.dev.js文件中 注意，修改这个配置，需要重启devserverdevServerdevServer:compress:true,port:3000,publicPath:'/assets/',hot:true,inline:true,historyApiFallback:true,stats:{chunks::'/api':target:'changeOrigin:true}}}axios中文说明https: importaxiosfromimportaxiosfrom$npminstallimportimportaxiosfromexportdefaultclass{login( ,password){ , })/*devserver function{console.log(response);}function{})}填入邮箱、，点击登录按钮，返回40，查看Python服务端，地址是了/i。如何解决？1、修改blogserver的代码的路由匹配规则2、

，也就是类似httpd、nginx等的rewrite功能。本次测试使用的是devserver，去看看。uration/dev-server/#devserver-devServerdevServer:compress:true,port:3000,publicPath:'/assets/',hot:true,inline:true,historyApiFallback:true,stats:{chunks::'/api':target: pathRewrite:{"^/api":""},changeOrigin:true}}}重启devserverLocalStorage是为了得到的数据，例如Json。数据就是键值对数据会在不同的下面store.js是一个兼容所有浏览器的LocalStorage包装器，不需要借 或者Flashstore.js会根据浏览器自动选择使用localStorage、globalStorage或者userData来实现本地功能安$$npmi测试letletstore=store.set('user','wayne');consoleconsole.log(store.get('user'));//undefinedconsole.log(store.get('user','a'));//astore.set('user',{name:'wayne',age:30});store.set('school',store.each(function(value,key){//注意这里key、valueconsole.log(key,'-->',console.log(store.get('user'));//undefinedstore.store.addPlugin(require('store/plugins/expire'//过期插store.set('token',res.data.token,(newDate()).getTime()+Mobx状态管odist项目中，感觉基本功能都实现了，但是，sttRdux和Mo。Rdux代码优秀，使用严格的函数式编程思想，学习曲线陡峭，小项目使用的优势不明显。 Mox非常优秀稳定的库，简单方便，适合中小项目使用。使用面向对象的方式，容易学习和接受。现在在项目中使用也非常广泛。Mox和Rc是一对强力组合。Mobx官网 MobX是由Mendix、Coinbase、 内部了的观察者Observer一个组件的onClick触发响应函数，此函数会调用服务。但是服务比较耗时，等处理完，需要引起组件的渲染操作。1、同步调importimportReactfromimportReactDomfrom'react-class{handle(n)for(lets=newDate();newDate()-s<n*1000;);return}}@observer//将reactclassRoot {state={ret:null}//letret=ps.service.handle(4);}{);return<buttononClick={this.handleClick.bind(this)}>触发handleClick函数</button><br<spanstyle={{color:'red'}}>{newDate().getTimeService的handle函数返回值是}}ReactDom.render(<Rootservice={newService()} 2、异步调思路一、使用importimportReactfromimportReactDomfrom'react-classclass{)//newPromise((resolve,reject){setTimeout(()=>resolve('OK'),value=>{//使用obj})}}@observer//将reactclassRoot {state={ret:null}//}{);return<buttononClick={this.handleClick.bind(this)}>触发handleClick函数</button><br<spanstyle={{color:'red'}}>{newDate().getTimeService中修改state的值是}}3、MobximportimportReactfromimportReactDomfrom'react-dom';import{observable}from'mobx';import{observer}from'mobx-react';class{@observableret=-100;handle(){//newPromise((resolve,reject){setTimeout(()=>resolve('OK'),}).}).then(ue=>this.ret=(Math.random()*100);})}}@observer//将reactclassRoot ponent//state={ret:null}//不使用state//}{);return<buttononClick={this.handleClick.bind(this)}>触发handleClick函数</button><br<spanstyle={{color:'red'}}>{newDate().getTimeService中修改state的值是}}ReactDom.render(<Rootservice={newService()} 注login登录功能代码实importimportaxiosfromimportstorefrom'store'import{observable}fr