First day of react project

• 启动项目开发

  • 使用 react 脚手架搭建项目
  • 开发环境运行: npm start
  • 生产环境打包运行: npm run build serve build

• git 管理项目

  • 创建远程仓库
  • 创建本地仓库
    • 配置.gitignore
    • git init
    • git add .
    • git commit -m "..."
  • 将本地仓库推送到远程仓库
    • git remote add origin url
    • git push origin master
  • 本地创建dev分支并推送到远程
    • git checkout -b dev
    • git push origin dev

• 配置代理

  "proxy": http://localhost:5000
const BASE = ''

• 项目源码基本目录设置

  • src
    • api 放ajax相关
    • assets 公用资源
    • components 非路由组件
    • config 配置
    • page 是路由组件
    • utils 工具模块
    • App.js 应用根组件
    • index.js 入口js
  • App.js

    •   import React, {Component} from 'react'
        class App extends Component {
        render() {
            return (
              <div>App</div>
            )
          }
        }
        export default App
      

  • index.js

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

代码

• 映射路由App.js

    import { BrowserRouter, Switch, Route } from 'react-router-dom'
    ...
    return () {
      <BrowserRouter>
        <Switch>
          <Route path="/" component={Admin}></Route>
          <Route path="/login" component={Login}></Route>
        </Switch>
      </BrowserRouter>
    ...
  

• 在 index.html 中引入样式重置文件
  <link rel="stylesheet" href="/css/reset.css"> reset.css
• 封装ajax请求模块
  api/ajax.js

    import axios from 'axios'
    import { message } from 'antd'
    
    export default function ajax(url, data = {}, method="get") {
      return new Promise(function(resolve, reject){
        let promise
        if(method === 'get') {
         promise = axios.get(url, {params: data})
        } else {
          promise = axios.post(url, data)
        }
       }
       promise.then(response => {
        resolve(response.data)
       }).catch(error => {
         message.error('请求错误:' + error.message)
       })
     })
    }
  

  api/index.js

   import ajax from './ajax'
   export const reqLogin = (username, password) => ajax('/login',{username, password}, 'POST')
  

维持登录与自动登录

• 登陆后, 刷新后依然是已登陆状态(维持登陆)
• 登陆后, 关闭浏览器后打开浏览器访问依然是已登陆状态(自动登陆)
• 登陆后, 访问登陆路径自动跳转到管理界面

utils/memoryUtils.js

   export default {
     user: {} // 内存中保存登陆的user 信息对象
   }

utils/storageUtils.js

  import store from 'store'
  const USER_KEY = 'user_key'

  export default {
    saveUser(user) {
     store.set(USER_KEY, user) // 内部会自动转换成json 再保存
    },
    getUser() { 
      return store.get(USER_KEY) || {}
    },
    removeUser() {
      tore.remove(USER_KEY)
    }
  }

src/index.js

import storageUtils from './utils/storageUtils'
import memoryUtils from './utils/memoryUtils'

// 如果local 中保存了user, 将user 保存到内存中
const user = storageUtils.getUser()
  if(user && user._id) {
  memoryUtils.user = user
}