react做h5 例子_十五、React：简单点餐实例：知识点，html解析写法

一、功能二、知识点路由需要安装，并引用后才能用路由的使用api解析：axios ；安装并引用后才能用生命周期函数三、实战src目录结构：【Src】│App.css│App.js│...├─components│Home.js│Pcontent.js│模板.js├─css│basic.css│index.css│pcontent...

weixin_39642687

164人浏览 · 2020-12-21 11:57:24

weixin_39642687 · 2020-12-21 11:57:24 发布

一、功能

二、知识点

路由需要安装，并引用后才能用

路由的使用

api解析：axios ；安装并引用后才能用

生命周期函数

三、实战

src目录结构：

【Src】

│ App.css

│ App.js

│ ...

├─components

│ Home.js

│ Pcontent.js

│ 模板.js

├─css

│ basic.css

│ index.css

│ pcontent.css

└─images

1.jpg

2.jpg

3.jpg

App.js

import React from 'react';

//import './App.css';

import { BrowserRouter as Router, Route } from 'react-router-dom'; //引入路由模块

import Home from './components/Home';

import Pcontent from './components/Pcontent';

function App() {

return (

);

}

export default App;

Home.js

import React,{Component} from 'react';

import {Link} from 'react-router-dom';

import '../css/index.css';

import axios from 'axios'; //或写成：const axios = require('axios');

//import { thisExpression } from '@babel/types';

class Home extends Component{

constructor(props){

super(props);

this.state={

list:[],

domain:'http://a.itying.com/'

}

//获取Api接口的数据

getDataApi=()=>{

//拼装得到完整的Api接口链接

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(){

//调用函数得到api接口数据

this.getDataApi();

}

render(){

return(

热销榜

点过的菜

{value.title}

{

value.list.map((v,k)=>{

return(

{v.title}

{v.price}元

)

})

}

)

})

}

)

}

export default Home;

react解析html

https://reactjs.org/docs/dom-elements.html

【Pcontent.js】

import React, { Component } from 'react';

import axios from 'axios';

import '../css/pcontent.css';

import '../css/basic.css';

import {Link} from 'react-router-dom';

class Pcontent extends Component {

constructor(props){

super(props);

this.state={

detail_list:[],

domain:'http://a.itying.com/'

}

componentWillMount(){

//获取整个props查看数据结构

console.log(this.props)

//根据数据结构找到传过来的_id

console.log(this.props.match.params._id)

//根据传过来的_id获取对应详情页面

var id=this.props.match.params._id;

var api='http://a.itying.com/api/productcontent?id='+ id;

axios.get(api)

.then((response)=>{

console.log(response);

this.setState({

detail_list:response.data.result[0]

})

.catch((error)=>{

console.log(error)

})

}

render() {

return (

${this.state.detail_list.title}$

{this.state.detail_list.title}

{this.state.detail_list.price}元

商品详情

{/*html解析写法*/}

数量:

加入购物车

);

}

export default Pcontent;

basic.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%;

/* 根元素是10px; 16*62.5%=10 默认在pc端根元素会解析成12px */ }

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; }

/*# sourceMappingURL=basic.css.map */

index.css

@charset "UTF-8";

.index_header {

width: 96%;

margin: 0 auto;

height: 4.4rem;

background: #fff;

margin-top: 1rem;

display: flex;

border-radius: .5rem; }

.index_header .hlist {

flex: 1;

text-align: center;

padding-top: .2rem;

border-right: 1px solid #eee; }

.index_header .hlist img {

width: 2rem;

height: 2rem;

margin: 0 auto; }

.index_header .hlist:last-child {

border-right: none; }

/*列表*/

.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 .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; }

/*侧边栏*/

.left_cate {

/*css3运动加过渡效果*/

transition: all 1s;

transform: translate(-100%, 0);

z-index: 2;

width: 6rem;

height: 100%;

position: fixed;

background: #eee;

top: 0px;

left: 0px; }

.left_cate ul {

position: absolute;

height: 100%;

padding: .5rem;

z-index: 3;

background: #eee; }

.left_cate ul li {

line-height: 4.4rem; }

.left_cate .nav_cate {

position: absolute;

right: -3.5rem;

background: rgba(132, 128, 128, 0.9);

top: 42%;

width: 5rem;

height: 4rem;

text-align: center;

border-radius: 0rem 50% 50% 0rem;

z-index: 2; }

.left_cate .nav_cate img {

width: 1.8rem;

height: 1.8rem;

margin-left: 1rem;

margin-top: .4rem; }

.left_cate .nav_cate p {

color: #fff;

margin-left: 1rem;

margin-top: -0.3rem; }

/*透明层*/

.bg {

position: fixed;

width: 100%;

height: 100%;

background: rgba(132, 128, 128, 0.4);

left: 0px;

top: 0px;

z-index: 1;

display: none; }

/*首页导航*/

.footer_nav {

height: 4.4rem;

width: 4.4rem;

background: #000;

position: fixed;

color: #fff;

bottom: .5rem;

left: .5rem;

text-align: center;

border-radius: 50%; }

.footer_nav img {

width: 1.8rem;

height: 1.8rem;

margin-top: .4rem; }

.footer_nav p {

position: relative;

top: -0.2rem; }

/*导航弹出层*/

.footer_nav_show {

width: 100%;

height: 100%;

position: fixed;

top: 0px;

left: 0px;

background: rgba(0, 0, 0, 0.6);

z-index: 2; }

.footer_nav_show .list li {

height: 4.4rem;

width: 4.4rem;

background: #000;

position: absolute;

color: #fff;

left: .5rem;

text-align: center;

border-radius: 50%; }

.footer_nav_show .list li img {

width: 1.8rem;

height: 1.8rem;

margin-top: .4rem; }

.footer_nav_show .list li p {

position: relative;

top: -0.2rem;

font-size: 1rem; }

.footer_nav_show .list li:nth-child(1) {

bottom: 15.4rem;

left: 0px; }

.footer_nav_show .list li:nth-child(2) {

bottom: 12.4rem;

left: 30%;

margin-left: -2.2rem; }

.footer_nav_show .list li:nth-child(3) {

bottom: 7.4rem;

left: 45%;

margin-left: -2.2rem; }

.footer_nav_show .list li:nth-child(4) {

left: 50%;

margin-left: -2.2rem;

bottom: .5rem; }

.footer_nav_show .list li:nth-child(5) {

left: .5rem;

bottom: .5rem; }

.footer_cart {

height: 4.4rem;

width: 4.4rem;

background: red;

position: fixed;

color: #fff;

bottom: .5rem;

right: .5rem;

text-align: center;

border-radius: 50%; }

.footer_cart img {

width: 1.8rem;

height: 1.8rem;

margin-top: .4rem; }

.footer_cart p {

position: relative;

top: -0.2rem; }

/*# sourceMappingURL=index.css.map */

pcontent.css

@charset "UTF-8";

.back {

height: 3.8rem;

line-height: 3.8rem;

width: 3.8rem;

border-radius: 50%;

background: #000;

position: fixed;

top: .5rem;

left: .5rem;

color: #fff; }

.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; }

/*# sourceMappingURL=pcontent.css.map */

腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

终极指南：Flink SQL连接器版本管理从混乱到有序的升级之路

Apache Flink作为流处理领域的佼佼者，其SQL连接器的版本管理一直是开发者面临的核心挑战。本文将系统讲解Flink SQL连接器版本管理的最佳实践，帮助你轻松应对版本兼容性问题，实现从混乱到有序的升级之旅。## 连接器版本管理的常见痛点 😫在Flink应用开发中，连接器版本管理常常让开发者头疼不已。不同版本的连接器可能导致各种兼容性问题，例如API变更、功能差异甚至运行时错误。

腾讯云开发者社区

Elasticsearch复杂数据类型终极指南：从入门到精通

Elasticsearch作为功能强大的搜索引擎，支持多种复杂数据类型，让开发者能够灵活处理各种结构化和非结构化数据。本文将带你全面了解Elasticsearch中的复杂数据类型，从基础概念到实际应用，助你轻松掌握数据建模的核心技巧。## 内部对象：构建层级化数据结构在Elasticsearch中，对象类型（Object）是最基础的复杂数据类型之一，用于表示具有嵌套关系的数据。例如，我们可

腾讯云开发者社区

如何快速搭建Neon无服务器PostgreSQL：面向初学者的完整指南

Neon是一款革命性的无服务器PostgreSQL解决方案，它通过分离存储和计算层，实现了自动扩缩容、类代码式数据库分支以及零级扩展能力。本指南将帮助你从零开始搭建Neon开发环境，体验这款创新数据库的强大功能。## 准备工作：环境要求与依赖项在开始搭建Neon环境前，请确保你的系统满足以下要求：- Linux操作系统（推荐Ubuntu 20.04+或Debian 11+）- Git