react-hooks项目结构

项目结构举例

assets

-css

eg:public.css

-images(略)

-js

eg:remScale.js

containers

• eg-1:Register
  

  • Register.css
    
  • Register.jsx

    import React, { useState } from "react";
    import { reqRegister } from "../../request/api";
    import "../../assets/css/public.css"
    import "../../assets/css/iconfont.css"
    import "./Register.css"
    import img1 from "../../assets/images/pic_logo_orange.png"
    const Register = (props) => {
      const [user, setUser] = useState({ phone: "", password: "", nickname: "" });
    
      //注册
      const register = () => {
        reqRegister(user).then((res) => {
          if (res.data.code == 200) {
            alert("注册成功")
            props.history.push("/login");
          }
        });
      };
      return (
        // <div>
        //   <h1>register</h1>
        //   <div>
        //     手机号：
        //     <input
        //       type="text"
        //       value={user.phone}
        //       onChange={(e) => setUser({ ...user, phone: e.target.value })}
        //     />
        //   </div>
        //   <div>
        //     昵称：
        //     <input
        //       type="text"
        //       value={user.nickname}
        //       onChange={(e) => setUser({ ...user, nickname: e.target.value })}
        //     />
        //   </div>
        //   <div>
        //     密码：
        //     <input
        //       type="text"
        //       value={user.password}
        //       onChange={(e) => setUser({ ...user, password: e.target.value })}
        //     />
        //   </div>
        //   <button onClick={() => register()}>注册</button>
        // </div>
        <div className="page">
          <div className="tool">
            <a className="black iconfont" href="#" >&#xe622;</a>
            <p>注册</p>
          </div>
          <div className="main">
            <div className="inner">
              <ul>
                <li>
                  <img src={img1} alt="logo" />
                </li>
                <li>
                  <input type="text" name="phone" placeholder="手机号" value={user.phone}
                    onChange={(e) => setUser({ ...user, phone: e.target.value })} />
                </li>
                <li>
                  <input type="text" placeholder="昵称" value={user.nickname}
                    onChange={(e) => setUser({ ...user, nickname: e.target.value })} />
                </li>
                <li>
                  <input type="text" name="identifyingCode" placeholder="密码" value={user.password}
                    onChange={(e) => setUser({ ...user, password: e.target.value })} />
                </li>
                <li>
                  <button onClick={() => register()}>注册</button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      );
    };
    
    export default Register;
    
    

• eg-2:Login
  

  • Login.css(略)
  • Login.jsx

    import React, { useState, useContext } from "react";
    import { Link } from "react-router-dom";
    import { reqLogin } from "../../request/api";
    import { ReducerContext } from "../../App";
    import "../../assets/css/public.css"
    import "../../assets/css/iconfont.css"
    import "./Login.css"
    import img1 from "../../assets/images/pic_logo_orange.png"
    const Login = (props) => {
      const [user, setUser] = useState({ phone: "", password: "" });
      const { dispatch, actions } = useContext(ReducerContext);
      //登录交互
      const login = () => {
        reqLogin(user).then((res) => {
          if (res.data.code === 200) {
            alert("登录成功")
            // 1.存用户信息
            dispatch(actions.changeInfo(res.data.list))
            // 2.跳页面
            props.history.push("/home")
          }
        });
      };
      return (
    
        <div className="page">
          <div className="tool">
            <a className="black iconfont" href="#" >&#xe622;</a>
            <p>登录</p>
          </div>
          <div className="main">
            <div className="inner">
              <ul>
                <li>
                  <img className="img" src={img1} alt="logo" />
                </li>
                <li>
                  <input className="inputone" type="text" placeholder="手机号"   value={user.phone}
              onChange={(e) => setUser({ ...user, phone: e.target.value })} />
                </li>
                <li>
                  <input type="text" name="identifyingCode" placeholder="验证码"  value={user.password}
              onChange={(e) => setUser({ ...user, password: e.target.value })}/>
                </li>
                <li>
                <button onClick={() => login()}>登录</button>
                </li>
                <Link  to="/register" className="register">注 册</Link>
              </ul>
            </div>
          </div>
        </div>
    
      );
    };
    
    export default Login;
    
    

reducers

eg:

request

• api.js

  import { get, post } from "./http"
  
  //注册
  export const reqRegister = params => post("/api/register", params)
  //登录
  export const reqLogin = params => post("/api/login", params)
  
  //新人专享
  export const reqGetnew = () => get("/api/getnew")
  //万人团
  export const reqGroupon = () => get("/api/getgroupon")
  //倒计时
  export const reqGetcountdown = () => get("/api/getcountdown")
  //秒杀
  export const reqGetseckill = () => get("/api/getseckill")
  //获取商品信息首页
  export const reqGetindexgoods = () => get("/api/getindexgoods")
  //获取商品分类
  export const reqGetcate = () => get("/api/getcate")
  //获取分类商品
  export const reqGetgoods = params => get("/api/getgoods",params)
  

• http.js

  import axios from "axios"
  import querystring from "querystring"
  
  //请求拦截
  axios.interceptors.request.use(config => {
      if(config.url!=="/api/register"&&config.url!=="/api/login"){
          config.headers.authorization=JSON.parse(sessionStorage.getItem("info")).token;
      }
      return config
  })
  
  //响应拦截
  axios.interceptors.response.use(res => {
      console.log("本次请求地址：" + res.config.url);
      console.log(res);
  
      //失败统一处理
      if(res.data.code!==200){
          alert(res.data.msg)
      }
  
      return res;
  })
  
  export const get = (url, params = {}) => {
      return axios({
          url,
          params
      })
  }
  
  export const post = (url, params = {}, isFile = false) => {
      let data = null;
      if (isFile) {
          data = new FormData()
          for (let i in params) {
              data.append(i, params[i])
          }
      } else {
          data = querystring.stringify(params)
      }
  
      return axios({
          url,
          data,
          method: "post"
      })
  }
  

App.js

import React,{useReducer} from 'react';
import {initState,reducer,actions} from "./reducers/user"
import { Switch, Route, Redirect } from "react-router-dom"
//ant


import 'antd/dist/antd.css';


const Login = React.lazy(() => import("./containers/Login/Login"))
const Register = React.lazy(() => import("./containers/Register/Register"))
const Home = React.lazy(() => import("./containers/Home/Home"))
const Cate = React.lazy(() => import("./containers/Cate/Cate"))
const Cart = React.lazy(() => import("./containers/Cart/Cart"))
const Mine = React.lazy(() => import("./containers/Mine/Mine"))
const Detail = React.lazy(() => import("./containers/Detail/Detail"))
const Shop = React.lazy(() => import("./containers/Shop/Shop"))

export const ReducerContext=React.createContext()
const App = () => {
  const [state, dispatch] = useReducer(reducer, initState)
  return (
    <ReducerContext.Provider value={ {state,dispatch,actions}}>
       <React.Suspense fallback={<div>正在加载。。。</div>}>
      <Switch>
        <Route path="/login" component={Login}></Route>
        <Route path="/register" component={Register}></Route>
        <Route path="/home" component={Home}></Route>
        <Route path="/cate" component={Cate}></Route>
        <Route path="/cart" component={Cart}></Route>
        <Route path="/mine" component={Mine}></Route>
        <Route path="/detail/:id" component={Detail}></Route>
        <Route path="/shop" component={Shop}></Route>
        <Redirect to="/login"></Redirect>
      </Switch>
    </React.Suspense>
    </ReducerContext.Provider>
   
  );
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

// 1.静态资源
import "./assets/css/reset.css"

// 2.components 公共组件

// 3.filters 过滤器

// 4.containers 容器型组件 -路由组件

// 5.交互



import { HashRouter as Router } from "react-router-dom"

ReactDOM.render(
  <Router>
    <App />
  </Router>
  ,
  document.getElementById('root')
);
// 注册 登录 首页（分类列表  轮播 选项卡） 分类列表  详情页 购物车

template.jsx(模板)

import React, { Component } from "react";
import { connect } from "react-redux";

class Template extends Component {
  render() {
    return <div className="box">
        <h3>this is Template</h3>
    </div>;
  }
}
let mapStateToProps = (state) => ({
  
});
let mapDispatchToProps = (dispatch) => ({});
export default connect(mapStateToProps, mapDispatchToProps)(Template);

package.json