React实现简单电商案列（含二级路由跳转,获取JSON数据）

最新推荐文章于 2024-04-10 17:41:21 发布

ToDeer

最新推荐文章于 2024-04-10 17:41:21 发布

阅读量496

点赞数

分类专栏： React 文章标签： javascript css html html5 node.js

本文链接：https://blog.csdn.net/weixin_46031235/article/details/105316360

版权

React 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

React实现简单电商案列

操作思路：

UI界面怎么实现UI (User Interface)
(1) 涉及路由跳转Route
(2) json数据来渲染页面
功能代码实现：
(1) 通过素材中API完成数据请求及数据渲染
(2) 点击左侧一级分类，右边动态筛选对应的二级分类数据（不是配置多个路由实现）
(3) 完成路由配置首页、分类、购物车、个人，除了分类其它页面内容自定义

需要安装的插件：

cnpm i react-router-dom -S
cnpm i axios -S

操作步骤：

html页面

   <!DOCTYPE html>
<html lang="en"> 
<head>
 <meta charset="utf-8" />
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 //在此处引用了icon font图标
 <link rel="stylesheet" href="//at.alicdn.com/t/font_1691202_lswlgnvrxwl.css">
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="description" content="Web site created using create-react-app" />
 <title>React App</title>
</head>
<body>
 <div id="root"></div>
</body>
</html>

在新建项目中的index.js页面中引入主页面App

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />,document.getElementById('root'));

在App页面中引入Main组件文件

import React, { Component } from 'react';
import {BrowserRouter,Route,Link,Switch} from "react-router-dom";
import Main from "./Main";
import GoodsList from "./Main/Classify/GoodsList";
export class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
        <Route path="/" component={Main}></Route>
        </Switch>
      </BrowserRouter>
    )
  }
}
export default App

Main文件中包含了底部导航中的路由配置首页、分类、购物车、个人四个页面

import React, { Component } from 'react'
import {Switch,Link,Route} from "react-router-dom";
import Home from "./Home";//首页
import Classify from "./Classify";//分类
import Cart from "./Cart";//购物车
import My from "./My";//我的
import "./index.css";
export class index extends Component {
    constructor(){
        super()
        this.state={
            sel:"",
       		//input框的值
            InputValue:"",
            //一个搜索框的列表 可以实现一个简单的模糊搜索
            list:[
                {
                    "title":"新款女士卫衣",
                },{
                    "title":"新款女士外套",
                },{
                    "title":"2019男士外套",
                },{
                    "title":"新款男士卫衣",
                },{
                    "title":"javascript",
                }
                
            ]
        }
    }
    
    //获取input框里的值
    handelInput(e){
        this.setState({
            InputValue:e.target.value,
        })
    }
    
    render() {
        const {sel} =this.state;
        return (
            <div style={{width:"100%"}}>
            <div className="top">
            <input 
            type="text" 
            placeholder="搜索商品"
            style={{width:"100%", height:"50px",fontSize:"20px"}}
            value={this.state.InputValue}
            onChange={this.handelInput.bind(this)}
            />
            </div>
            
                //模拟得一个搜索框列表
                <div className="searchlist">
            {this.state.list.map((item,index)=>{
                //模拟一个空数组
                 let newlist=[];
                 //如果list列表中的title包含了你要搜索的内容
                 if(item.title.includes(this.state.InputValue)){
                 //就将他们添加到空数组中遍历
                 newlist.push(item)
                     return(
                    <li key={index}>{item.title}</li>
             )
                } 
             })}
            </div>
                  
            <div className="content">
            <Switch>
            <Route path="/home" component={Home}></Route>
            <Route path="/my" component={My}></Route>
            <Route path="/cart" component={Cart}></Route>
            <Route path="/" component={Classify}></Route>
            </Switch>
            </div>

             <div className="footer">
             <Link to="/home">
             //sel为类名 这里运用了三目运算 如果点击 sel==sy 的话就为sel中的样式 否则为nosel中的样式 
             <div className={sel == "sy" ? "sel" : "nosel"} onClick={()=>{
                 this.setState({sel:"sy"})
             }}>		
             //这里引用了icon font中的图标 在HTML页面中以link方式引用
             <span className="iconfont icon-shouye1 icona" ></span>
             <div>首页</div>
             </div>
             </Link>
             <Link to="/">
             <div className={sel == "fl" ? "sel" : "nosel"} onClick={()=>{
                 this.setState({sel:"fl"})
             }}>
             <span className="iconfont icon-leimupinleifenleileibie icona"></span>
             <div>分类</div>
             </div>
             </Link>
             <Link to="/cart">
             <div className={sel == "gwc" ? "sel" : "nosel"} onClick={()=>{
                 this.setState({sel:"gwc"})
             }}>
             <span className="iconfont icon-gouwuche icona"></span>
             <div>购物车</div>
             </div>
             </Link>
             <Link to="/my">
             <div className={sel == "wd" ? "sel" : "nosel"} onClick={()=>{
                 this.setState({sel:"wd"})
             }}>
             <span className="iconfont icon-ren icona"></span>
             <div>我的</div>
             </div>
             </Link>
             </div>   
            </div>
        )
    }
}
export default index

Main页面的样式

*{
    padding: 0;
    margin: 0;
    list-style: none;
}
.top{
    width:100%;
    height:50px;
    position: fixed;
    top:0;
    z-index: 1000;
    border:1px solid grey;
    box-sizing: border-box;
}
.footer{
    width:100%;
    height:60px;
    border:1px solid grey;
    box-sizing: border-box;
    position: fixed;
    bottom:0;
    display: flex;
    justify-content:space-around;
    align-items: center;
    flex-wrap: none;
    z-index: 1000;
    font-size: 16px;
}
a{
    text-decoration: none;
}
.footer .sel{
    color:red;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer .nosel{
    color:grey;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.icona{
    font-size: 22px;
}
.searchlist{
    margin-top:50px;
    border:1px solid grey;
}

首页页面

import React, { Component } from 'react'

export class index extends Component {
    render() {
        return (
            <div>
              首页  
            </div>
        )
    }
}

export default index

7.分类页面

import React, { Component } from 'react';
import axios from "axios";
import "./style.css";
export class index extends Component {

    constructor() {
        super();
        this.state = {
            // 全部数据
            allList: [],
            // 一级导航数据
            oneNav: [{
                dateAdd: "",
                icon: "",
                id: 0,
                isUse: true,
                key: "0",
                level: 0,
                name: "",
                paixu: 0,
                pid: 0,
                type: "",
                userId: 0
            }],
            // 二级导航数据
            twoNav: [{
                dateAdd: "",
                icon: "",
                id: 0,
                isUse: true,
                key: "0",
                level: 0,
                name: "",
                paixu: 0,
                pid: 0,
                type: "",
                userId: 0
            }],
            // 默认选中项
            defaultSelected: 0
        }
    }

    componentDidMount() {
        axios.get("https://api.it120.cc/small4/shop/goods/category/all")
            .then((ret) => {
                if (ret.data.msg == 'success') {
                    //  先获取JSON（列表中的全部数据）的全部数据
                    let classifyList = ret.data.data;
                    // 模拟一级列表数据
                    let tempNavOne = [];
                    // 模拟一级列表数据
                    let tempNavTwo = [];
                    // 获取一级列表的id
                    let tempId = 0;
                    // 从整个数据中遍历一级列表
                    classifyList.map((item) => {
                        if (item.level == 1) {//查询一级分类可以通过pid 也可以通过leve
                            tempNavOne.push(item)//然后将一级列表的内容添加到 模拟的一级类表数据中
                        }
                        if (item.paixu == 0 && item.level == 1) {
                            // 默认选中一级列表项 先获取默认选项中的ID
                            tempId = item.id;
                        }
                    })
                    // 从整个数据中遍历二级列表
                    classifyList.map((item) => {
                        if (item.pid == tempId) {
                            tempNavTwo.push(item);
                        };
                    });

                    // 重新设置状态
                    this.setState({
                        allList: classifyList,
                        oneNav: tempNavOne,
                        twoNav: tempNavTwo,
                        defaultSelected: tempId
                    });
                };
            });
    }

    render() {
        // const {oneNav,twoNav,defaultSelected,allList} =this.state
        return (
            <div className="classify_content">
                <div className="classify_left">
                    {this.state.oneNav.map((item, index) => {
                        return (
                            <div key={index}
                                className="navstyle"
                                style={{
                   // 设置字体颜色 如果当前默认选中项==当前id 的话字体颜色为红色 否则为灰色
                                color: this.state.defaultSelected == item.id ? "red" : "grey"
                                }}
                                onClick={this.handelNavone.bind(this,item.id)}
                            >{item.name}
                            </div>
                        )
                    })}
                </div>
                <div className="classify_right">
                    {this.state.twoNav.map((item,index)=>{
                        return(
                            <div 
                            key={index}
                            className="classify_right_list"
                            ><img src={item.icon} alt=""/>{item.name}</div>
                        )
                    })}
                </div>
            </div>
        )
    }

    handelNavone(id){
        //防止报错 从新获取一下json数据
        let classifyList=this.state.allList;
        // 点击一级列表的时候出现二级列表
        // 模拟二级列表数据
        let tempNavTwo = [];
        //重新渲染二级列表的数据
        classifyList.map((item)=>{
        // 如果二级列表的Pid==当前列表的id时将数据添加到二级列表中
            if(item.pid==id){
                tempNavTwo.push(item);  
        }
        });
        
        this.setState({
            defaultSelected:id,
            twoNav:tempNavTwo,
        })
    }


}

export default index

分类页面中的css样式

.classify_content{
    width:100%;
    margin-top:90px;
    border:1px solid grey;
    box-sizing: border-box;
}
.classify_content .classify_left{
    width:20%;
    height:400px;
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    border:1px solid grey;
    box-sizing: border-box;
}
.navstyle{
    width:100%;
    display: flex;
    height:50px;
    justify-content: center;
    align-items: center;
    border:1px solid grey;
}
.classify_right{
    height:400px;
    position: absolute;
    top:250px;
    right:0px;
    width:79%;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: border-box;
}
img{
    width:100%;
    height:90px;
    align-items: center;
}
.classify_right_list{
    box-sizing: border-box;
    width:108px;
    height:100px;
    text-align: center;
}

购物车页面

import React, { Component } from 'react'

export class index extends Component {
    render() {
        return (
            <div>
                购物车页面
            </div>
        )
    }
}

export default index

我的页面

import React, { Component } from 'react'

export class index extends Component {
    render() {
        return (
            <div>
               我的页面
            </div>
        )
    }
}

export default index

接近尾声了以上仅代表个人想法下期再见喽。

ToDeer

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
React实现简单电商案列（含二级路由跳转,获取JSON数据）

React实现简单电商案列操作思路：UI界面怎么实现UI (User Interface)(1) 涉及路由跳转Route(2) json数据来渲染页面功能代码实现：(1) 通过素材中API完成数据请求及数据渲染(2) 点击左侧一级分类，右边动态筛选对应的二级分类数据（不是配置多个路由实现）(3) 完成路由配置首页、分类、购物车、个人，除了分类其它页面内容自定义需要安装的插件：...
复制链接

扫一扫