项目实战:简书之详情页

src/pages/detail/
store文件夹:actionCreator.js / constants.js /index.js / reducer.js
index.js
style.js

style.js
import styled from 'styled-components';

export const DetailWrapper = styled.div`
	overflow:hidden;
	width:620px;
	margin:0 auto;
	padding-bottom:100px;
	
`;

export const Header = styled.div`
	margin:50px 0 20px 0;
	line-height:44px;
	font-size:34px;
	color:#333;
	font-weight:bold;
`;

export const Content = styled.div`
	color:#2f2f2f;
	img {//img标签
		width:100%;
	}
	p{ //P标签
    	margin:25px 0;
    	font-size:16px;
    	line-height:30px;
	}
`;
import React,{ Component }from 'reat';
import { DetailWrapper,Header }from './style';
import { connect }from 'react-redux';
import { actionCreators }from './store';
class Detail extends Component {
	render(){
		return (
			<DetailWrapper>
				<Header>{this.props.title}</Header>
				<Content dangerouslySetInnerHTML={{__html:this.props.content}} />
					//{this.props.content}发现展示的仅仅是一个字符串 为了显示成标签我们需要dangerouslySetInnerHTML 写完以后把此行删掉
				
			</DetailWrapper>
		)
	}
	componentDidMount(){
	this.props.getDetail(this.props.match.params.id);
	}
}

const mapStateToProps =(state) => ({
	title:state.getIn(['detail','title']),
	content:state.getIn(['detail','content'])
});  //({})返回一个对象

const mapDispatchToProps= (dispatch) => ({
	getDetail(id){
		dispatch(actionCreators.getDetail(id));
	}
})
export default connect(mapStateToProps,mapDispatchToProps)(Detail);

store/reducer.js
import { fromJS }from 'immutable';
import * as constants from './constants';

const defaultState = fromJS({
	title:''
	content:‘’
});

export default (state = defaultState ,action)=> {
	switch(action.type){
		case constants.CHANGE_DETAIL:
			return state.merge({
				title:action.title
				content:action.content
			})
		default:
			return state;
		}
	}

index.js
import reducer from './reducer';
import * as actionCreators from './actionCreators';
import * as constants from './constants';
export { reducer,actionCreators,constants };


<img src=''><p><b></b></p><p></p>//形成字符串,中间没有空格,用单引号包裹
//复制粘贴到content

/api/detail.json
{
	"success":true,
	"data":{
		"title":"标题"
		"content":"<img src=''><p><b></b></p><p></p>"
	}
}

constants.js
export const CHANGE_DETAIL ='detail/CHANGE_DETAIL';

actionCreators.js
import axios from 'axios';
import * as constants from './constants';
const changeDetail =(title,content) => ({
	type:constants.CHANGE_DETAIL,
	title,
	content
})

export const getDetail =(id) => {
	return (dispatch)=>{
		axios.get('/api/detail.json?id=' + id).then((res) => {
			const result =res.data.data;
			dispatch(changeDetail(result.title,result.content));
			
		})
	}
}

控制台里Network的XHR里显示的是接口里的数据

动态路由:
第一种:
这个id我们从this.props返回的对象里
在match.params.id

<link key={index} to={'/detail/' +item.get('id')}>

App.js
<Route path='/detail/:id' exact component={...}>

第二种:

<link key={index} to={'/detail?id=' +item.get('id')}>

App.js
<Route path='/detail' exact component={...}>
但是这种this.props.match.params里没有id了
在location.search里  解析一下 比较麻烦 建议用第一种

异步组件
打开Network里的JS,发现各个页面点击只加载一个bundle.js,如果这个js文件很大会导致时间很长,此时我们需要点击一个页面只加载那个页面的js,需要异步组件

react-loadable github

detail里创建loadable.js
import Loadable from 'react-loadable';
import React from 'react';//使用JSX必须引入
const LoadableComponent =loadable({
	loader:() => import ('./'),//import这里指异步加载
	loading(){
		return <div>正在加载</div>
	}//加载页面 显示临时的 
});

export default () => <loadableComponent />

App.js
这样引用就可以让它成为异步组件
import Detail from './pages/detail/loadable.js';

但是这样组件index.js里获取不到路由里的信息了 this.props.match.param.id就找不到了 也没有params
如何解决?
import { withRouter } from 'react-router-dom';
导出那一行改为 connect(...,...)(withRouter(Detail));

项目上线流程

XAMPP软件:
后端开发目录在htdocs里
api文件夹
然后我们在浏览器里可以找到这些接口
localhost/api/…

然后我们在简书(你的前端文件)目录下运行npm run build
然后发现多了build的文件夹 这些就是上线需要的文件

把build里的文件全部放到htdocs里 完成了上线

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值