dva视频课
单页面应用：
1.检验是不是：
打开终端
curl url
页面都是html 且在不同路由内返回的内容是一样的
2、锚点（定位
<h1><a name="foo"/>abc</h1>
or
<h1 id="foo">abc</h1>
设置后我们可以通过在地址后#foo找到它
3、后来出现html5 history API （跟锚点一样
window.history.go(-1);后退
window.history.go(1);前进
存变化地址
var stateObj ={ foo:"bar"};
history.pushState(stateObj,"page 2","bar.html");
4、hash搜索引擎难抓取（不带#）
步骤：
1、定义路由
2.编写UI component
3.定义model
4.connect
index.js
import dva from 'dva';
//1 定义
const app =dva();
//2 插件
//app.use({});
//3 Model
//app.model(require('./models/example').default);
//4.Router 配路由
app.router(require('./router').default);
//require相当于import
//该语句相当于
app.router(RouterConfig);
//这个RouterConfig是router.js中export default RouterConfig
//5.start
app.start('#root');
网址地址中的#/是什么意思呢 如何去掉
BrowserRouter 不带#
HashRouter 带#
解决方案：切换router为BrowserRouter
$ npm install --save history
修改入口文件
import { createBrowserHistory as createHistory } from 'history';
const app = dva({
history: createHistory()
});
src中actions文件存放逻辑文件
如登陆.js中
import axios from 'axios';
非异步的请求：
export const setCurrentUser =(user) =>{
return {
type:SET_CURRENT_USER,
user
}
};
异步请求：
export const login =(data) =>{
return dispatch =>{
return axios.post('/api/auth',data).then(
res => { const token =res.data.token;
localStorage.setItem ('jwtToken',token);
setAuthorizationToken(token);
dispatch(setCurrentUser(jwDecode(token)))
});
}
};
reducers中auth.js
const initialState ={
isAuthenticated: false,
user:{}
}
const auth =(state = initialState,action ={})=>{
switch(action.type){
case SET_CURRENT_USER:
return {
isAuthenticated: !isEmpth(action.user),
user:action.user
}
default:return state;
}
}
export default auth;
src下有个models
新建一个js文档
如何要使用这个counter.js,在utils中index.js中（可以使用很多个
app.model(require('./models/counter').default);
app.model(require('./models/example').default);
*若有十个百个如何优化呢？
在models中新建index.js
将一群model内容搬到这个文件中 我们需要循环遍历它
知识点Webpack中的require.context
filter
filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。const context =require.context ( './' , false, /\.js$/ );//当前目录 不循环遍历 查找js文件 export default context .keys()//找到之后取出key值 .filter(item => item !== './index.js')//过滤它 .map (key => context (key));//遍历它变成一个数组最后在入口文件使用它
app.model(require('./models').default.forEach(key => app.model(key.default)));
可以输出它看一下内容
在入口文件中 console.log(require(’./models’。default));
counter.js
export default {
namespace:'counter',//定义一个不同的名便于区分state 防止重复冲突
state:{//此时是一个JSON
count:0
},//定义了namespace后state中的counter与另外models里的js文件中的state时重名不会冲突
//默认数据 优先级低于dva()的opts.initialState
补充
const app=dva({ initialState:{count:1}, }); app.model({ namespace:'count', state:0, });则app.start()后state.count为1
把component和model连接在一起
connect方法
import { connect } from 'dva';
在组件js里最后
export default connect (null, {login})(LoginForm);
{login}就可以在本文件其他地方以
this.props.login(this.state)引用
对于函数mapStateToProps可以放到components下的flash里
FlashMessagesList.js
const mapStateToProps = ( state ) => {
return {
messages : state . flashMessages };
};
继续实现连接
components/Counter.js中
import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
const Counter =({Counter} 或props) => {
return (
console.log(Counter或props.Counter)；
<div>
<h1>{counter.count}</h1>
<button>+</button>
</div>
)
}
Counter.propTypes ={//类型检查
counter:propTypes.object //对象 //别忘了导入propTypes
//object =array数组
}
const mapStateToProps =(state) =>{
return {
Counter(提出model里的namespace):state.counter
export default connect (mapStateToProps)(Counter);
在routes里也可以connect
routes/CounterPage.js
import React from 'react';
import Counter from '../components/Counter';
import { connect } from 'dva';
const CouterPage = ( {counter }//props) => {
return (
<div>
<p>Counter </p>
<Counter counter ={ counter}// 或{ ...props }传入全部 />
</div>
)
}
const mapStateToProps = ({ counter}) =>{
return {
counter:state.counter //两个counter都是命名空间
};
};
export default connect(mapStateToProps)(CounterPage);