基于React，dva脚手架的知乎日报

MyZhihuApp

1,初始化

npm install dvanpm install dva-cli -gmkdir MyZhiHuAppDvadva -initnpm start

浏览器打开localhost:8989 你就可以看到欢迎界面了

2,修改页面

• 打开/routes/IndexPage.less,改为：

.normal {  margin: 50px;  text-align: center;}.list {  margin-top: 20px;}

• 打开/routes/IndexPage.js改为：

<h1>知乎日报</h1>

查看浏览器就可以看到知乎日报了

3,设计模型

• 在models目录下面新建一个zhihuList.jsx 添加如下代码
  “`javascript
  import {query } from ‘../services/zhihuList’
  export default {

  namespace: ‘zhihuList’,

  state: {
  date:”,
  stories:[]
  },

  subscriptions: {
  setup({ dispatch, history }) {
  },
  },

  effects: {
  *fetchRemote({ payload }, { call, put }) {
  },
  *querry({ payload },{call, put}) {
  const queryObj = yield call(query, {});
  console.log(‘query ‘);
  console.log(queryObj);
  yield put({
  type: ‘querySuccess’,
  payload: {
  data : queryObj.data,
  }
  });
  },
  },

  reducers: {
  fetch(state, action) {
  return { …state, …action.payload };
  },
  querySuccess(state, action) {
  console.log(‘querrySuccess’)
  console.log(state);
  console.log(action);
  const newState = {…state, date:action.payload.data.date, stories:action.payload.data.stories};
  console.log(newState)
  return newState;
  }
  },

}

6, 效果

• 到现在一个简陋的知乎日报列表就完成了。
  
• detail页面方法类似，就不多讲了。

遇到问题

• 跨域访问
  Chrome插件
• 图片不显示问题
  参考知乎日报403解决

源代码

记得给个Start

关于dva

• 请参考dva