react项目——求职webApp(二)

上一篇已经打好了骨架与项目结构，开始项目的编写。
首先将src目录清空，在目录下新建component文件夹，用来放置组件。container文件夹，用来放置页面。redux文件夹用来管理状态。
src根目录下，还有三个js文件

• config.js 配置axios全局设置，设置请求拦截
• index.js 主页面
• reducer.js 组件reducer整合

config.js

import axios from 'axios'
import { Toast } from 'antd-mobile'

//拦截请求
axios.interceptors.request.use(function(config){
  Toast.loading("加载中",0)
  return config
})

//拦截响应
axios.interceptors.response.use(function(config){
  
  Toast.hide()
  return config
})

index.js

import React from 'react'
import ReactDom from 'react-dom'
import {createStore,applyMiddleware, compose} from 'redux'
import  thunk  from 'redux-thunk'

import { Provider } from "react-redux"
import { BrowserRouter,Route,Redirect,Switch} from "react-router-dom"
import reducers from './reducer'
import "./config"

import Login from './container/login/login'
import Register from './container/register/register'
import AuthRoute from './component/authroute/authroute';


const reduxDevtools = window.devToolsExtension?window.devToolsExtension():f => f
//redux状态可视化浏览器插件的配置

const store = createStore(reducers, compose( 
  applyMiddleware(thunk),//中间件，对action也就是对dispatch方法进行装饰。可以异步执行action
  reduxDevtools))
//新建store，根据老的state和action，生成新的state

function Boss(){
  return <h1>keoeooeoe</h1>
}

ReactDom.render(
  (<Provider store={store}>
    <BrowserRouter>
      <div>
        <AuthRoute></AuthRoute>
        <Route path='/boss' component={Boss}></Route>
        <Route path='/login' component={Login}></Route>
        <Route path='/register' component={Register}></Route>
      </div>
    </BrowserRouter>
    </Provider>
  ),
  document.getElementById("root")
)

reducer.js

import { combineReducers } from "redux"

//这里设置为空对象会报错，现阶段先让其保持空对象，不影响页面的搭建
export default combineReducers({})

首先搭建登录和注册页面
登陆和注册都要用到图标logo，可以抽成一个组件
在component文件夹下新建logo文件夹，
logo

import React from "react"
import logoImg from "./job.png"
import "./logo.css"

class Logo extends React.Component{
  render(){
    return (
      <div className="logo-container">
        <img src={logoImg}/>
      </div>
    )
  }
}

export default Logo

authRouter组件，用来跳转路由。判断当前是否登陆，如果没有登陆而通过地址栏进入其他页面，则会跳转回login页面
authrouter

import React from "react"
import axios from "axios";
import {withRouter} from "react-router-dom"
@withRouter
class AuthRoute extends React.Component{
  componentDidMount(){
    const publicList = ['/login','/register']
    
    const pathname = this.props.location.pathname//获取当前路径
    console.log(pathname)
    if(publicList.indexOf(pathname)>-1){
      return null
    }
    //获取用户信息
    axios.get('/user/info').then(res => {
      if(res.status == 200){
       if(res.data.code == 0){
         //有登陆信息
       }else{
         this.props.history.push('/login')
         //没有登录则跳转到login
      }
    }  
  })
    //是否登录
    //现在的url地址 login是不需要跳转的
    //用户的type 身份是BOSS还是牛人
    //用户是否完善信息

  }
  render(){
    return <p>判断跳转的地方</p>
  }
}

export default AuthRoute

container文件夹下的两个页面
login.js

import React from 'react'
import Logo from "../../component/logo/logo"
import{List,InputItem,WingBlank,WhiteSpace,Button} from "antd-mobile"//antd-mobile组件库

class Login extends React.Component{
  constructor(props){
    super(props);
    this.register = this.register.bind(this)
  }
  register(){
    console.log(this.props)
    this.props.history.push('register')
  }
  render(){
    return (
      <div>
        <Logo></Logo>
        <h2 style={{marginLeft:20+'px'}}>登录</h2>
        <WingBlank size="lg">
          <List>
            <InputItem>用户</InputItem>
            <InputItem>密码</InputItem>
          </List>
          <WhiteSpace></WhiteSpace>
          <Button type="primary">登录</Button>
          <WhiteSpace size="xl"></WhiteSpace>
          <Button type="primary" onClick={this.register}>没有账号? 注册一下</Button>
        </WingBlank>
      </div>
    )
  }
}

export default Login

register.js

import React from 'react'
import Logo from "../../component/logo/logo"
import{List,InputItem,Radio,WingBlank,WhiteSpace,Button} from "antd-mobile"


class Register extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      type:'genuis'
    }
  }
  render(){
    const RadioItem = Radio.RadioItem
    return (
      <div>
        <Logo></Logo>
        <h2 style={{marginLeft:20+'px'}}>注册</h2>
        <List>
          <InputItem>用户名</InputItem>
          <InputItem>密码</InputItem>
          <InputItem>确认密码</InputItem>
        </List>
          <WhiteSpace size="lg"></WhiteSpace>
        <List>
          <RadioItem checked={this.state.type == "genuis"}>牛人</RadioItem>
          <RadioItem checked={this.state.type == "boss"}>boss</RadioItem>
        </List>
        <WhiteSpace size="lg"></WhiteSpace>
        <Button type="primary">注册</Button>
      </div>
    )
  }

}

export default Register

页面搭建完成，服务端配置路由。
在server文件夹下新建三个文件。server.js，user.js，model.js
user.js

const express = require('express')
const Router = express.Router()

Router.get('/info',function(req,res){
  //用户有没有cookie
  return res.json({code:1})
})

module.exports = Router

server.js

const express = require("express")
const userRouter = require('./user')

const app = express()
app.use('/user',userRouter)

app.listen(9093,function(){
  console.log("Node app start at 9093")
})

model.js为连接数据库模块，暂时先初始化一下

const mongoose = require("mongoose")
//连接mongo,并且使用imoc这个集合
const DB_URL = "mongodb://localhost:27017"
mongoose.connect(DB_URL)

至此，运行server.js，前台跨域，authRouter组件请求用户信息，返回code为1，则没有登录信息，无论你访问那个页面（login和register之外），都跳转登陆页面。