|
实现了两个页面，
第一个是菜品列表，也就是主页面，
第二个是菜品详情页面。
这两个页面都是通过api获取数据，然后渲染的。
第一个页面会传值（菜品的id）给第二个页面。
具体的一些技术细节，像是axios，解析html，
还有一些写这个项目的步骤，需要再看一遍视频再做总结。
这个项目的很多东西，像是css，还有组件里面的html,都是复制粘贴的，
我想把这个项目自己按照步骤写一遍，然后丑一点就丑一点，主要是功能可以用就好。
App.js
import './assets/css/App.css';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import Home from './components/Home';
import Pcontent from './components/Pcontent';
import './assets/css/index.css';
function App() {
return (
<Router>
<div>
<Route exact path='/' component={Home}/>
{}
<Route path='/pcontent/:id' component={Pcontent}/>
</div>
</Router>
);
}
export default App;
Home.js
import React, {Component} from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
const axios = require('axios');
class Home extends Component {
constructor(props) {
super(props);
this.state = {
list:[],
domain:'http://a.itying.com/',
}
}
requestData=()=>{
var api=this.state.domain+'api/productlist';
axios.get(api)
.then((response)=> {
console.log(response);
this.setState({
list:response.data.result,
})
})
.catch(function (error) {
console.log(error);
})
}
componentDidMount(){
this.requestData();
}
render() {
return (
<div className="home">
<div className="list">
{
this.state.list.map((value,key)=>{
return (
<div className="item" key={key}>
<h3 className="item_cate">{value.title}</h3>
<ul className="item_list">
{
value.list.map((v,k)=>{
return (
<li key={k}>
<Link to={`/pcontent/${v._id}`}>
<div className="inner">
<img src={`${this.state.domain}${v.img_url}`} />
<p className="title">{v.title}</p>
<p className="price">{v.price}元</p>
</div>
</Link>
</li>
)
})
}
</ul>
</div>
)
})
}
</div>
</div>
);
}
}
export default Home;
Pcontent.js
import React from "react";
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
const axios = require('axios');
class Pcontent extends React.Component {
constructor(props) {
super(props);
this.state = {
list:[],
domain:'http://a.itying.com/',
}
}
requestData=(id)=>{
var api=this.state.domain+'api/productcontent?id='+id;
axios.get(api)
.then((response)=> {
console.log(response);
this.setState({
list:response.data.result[0],
})
})
.catch(function (error) {
console.log(error);
})
}
componentWillMount(){
console.log(this.props.match.params.id);
let id = this.props.match.params.id;
this.requestData(id);
}
render() {
return (
<div className='pcontent'>
<div className="back">
<Link to='/'>返回</Link>
</div>
<div className="p_content">
<div className="p_info">
<img src={`${this.state.domain}${this.state.list.img_url}`} />
<h2>{this.state.list.title}</h2>
<p className="price">{this.state.list.price}</p>
</div>
<div className="p_detial">
<h3>
商品详情
</h3>
<div className="p_content" dangerouslySetInnerHTML={{__html:this.state.list.content}}>
{}
</div>
</div>
</div>
<footer className="pfooter">
<div className="cart">
<strong>数量:</strong>
<div className="cart_num">
<div className="input_left">-</div>
<div className="input_center">
<input type="text" readOnly="readonly" value="1" name="num" id="num" />
</div>
<div className="input_right">+</div>
</div>
</div>
<button className="addcart">加入购物车</button>
</footer>
</div>
);
}
}
export default Pcontent;
index.css
@charset "UTF-8";
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
margin: 0;
padding: 0; }
html {
font-size: 62.5%;
}
body {
font: 12px/1.5 'Microsoft YaHei','宋体', Tahoma, Arial, sans-serif;
color: #555;
background-color: #F7F7F7; }
em, i {
font-style: normal; }
ul, li {
list-style-type: none; }
strong {
font-weight: normal; }
.clearfix:after {
content: "";
display: block;
visibility: hidden;
height: 0;
clear: both; }
.item .item_cate {
text-align: center;
padding: .5rem; }
.item .item_list {
display: flex;
flex-wrap: wrap;
padding: 0px .5rem; }
.item .item_list li {
width: 33.3%;
padding: .5rem;
box-sizing: border-box; }
.item .item_list li a{
text-decoration: none;
color:#555;
}
.item .item_list li .inner {
background: #fff;
width: 100%;
border-radius: .5rem;
overflow: hidden; }
.item .item_list li .inner img {
width: 100%; }
.item .item_list li .inner p {
padding: .2rem .5rem; }
.item .item_list li .inner .title {
font-weight: bold; }
.price{
color:red;
}
.back {
height: 3.8rem;
line-height: 3.8rem;
width: 3.8rem;
border-radius: 50%;
background: #000;
position: fixed;
top: .5rem;
left: .5rem;
}
.back a{
color: #fff;
text-decoration: none;
}
.back:before {
content: "";
display: block;
width: .8rem;
height: .8rem;
border-left: .2rem solid #fff;
border-bottom: .2rem solid #fff;
float: left;
position: relative;
top: 1.3rem;
left: .6rem;
transform: rotate(45deg);
margin-right: .4rem; }
.p_content .p_info {
background: #fff; }
.p_content .p_info img {
width: 100%;
height: 18rem; }
.p_content .p_info h2 {
padding: .2rem .5rem; }
.p_content .p_info .price {
padding: .2rem .5rem;
color: red; }
.p_content .p_detial {
background: #fff;
margin-top: 1rem; }
.p_content .p_detial h3 {
padding: .5rem; }
.p_content .p_detial .p_content {
padding: 1rem; }
.p_content .p_detial .p_content img {
max-width: 100%;
display: block;
margin: 0 auto; }
.p_content .p_detial .p_content * {
line-height: 1.5;
color: #666; }
.pfooter {
position: fixed;
bottom: 0px;
height: 4.4rem;
line-height: 4.4rem;
background: #fff;
left: 0px;
width: 100%;
border-top: 1px solid #eee; }
.pfooter .cart {
float: left;
display: flex; }
.pfooter .cart strong {
flex: 1;
font-size: 1.6rem;
padding: 0rem .5rem; }
.pfooter .cart .cart_num {
width: 10rem;
display: flex;
margin-top: .8rem; }
.pfooter .cart .cart_num .input_left, .pfooter .cart .cart_num .input_right {
flex: 1;
width: 2.8rem;
height: 2.8rem;
line-height: 2.8rem;
text-align: center;
color: red;
border: 1px solid #eee;
font-size: 2.4rem; }
.pfooter .cart .cart_num .input_center {
flex: 1; }
.pfooter .cart .cart_num .input_center input {
width: 2rem;
text-align: center;
width: 100%;
height: 2.8rem;
border: none;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
float: left; }
.pfooter .addcart {
float: right;
background: red;
color: #fff;
height: 3rem;
border: none;
padding: 0 .5rem;
border-radius: .5rem;
margin-top: .8rem;
margin-right: .5rem; }
|