天堂管理系統第一篇---初始化

背景:
以前在網上看到有人寫過一個地獄管理系統的照片.因而內心就有一個想法想寫個天堂管理系統.碰巧也一直想寫一個項目做爲本身的儲備項目.
一直都是在公司不停的幫人家寫系統,不少知識也是須要的時候再學,不碰就容易忘.寫這個系統一是總結下本身學到的東西.加深印象.二是給本身找一個長期的事情作.
整個項目一步步的路程我都會寫成一篇篇文章記錄下來.可能發佈的時間不穩定,畢竟是不忙的時候才寫.可是我必定會堅持寫完的.後期整個項目的代碼會傳到Github上.有興趣的可自行下載.GitHub天堂管理系統項目地址

使用技術棧:

React + JS + Hook + mock + AntDesignPro + CSS

搭架子

萬物善始善終,第一步確定是搭架子了.保證本身在node環境下,新建一個項目文件夾.

1. 運行 npm install antd --save命令.搭建一個AntDesignPro的空架子.
2. 運行npm install命令.安裝依賴
3. 窗口運行http://localhost:8000就可以看到頁面了.

登錄頁面.

登錄的用戶名和密碼都是在mock裏面判斷的.寫的假接口.可是簡單的判斷仍是能夠的.

'POST /api/login/account': (req, res) => {
    const { password, userName, type } = req.body;

    if (password === '666666' && userName === 'admin') {
      res.send({
        status: 'ok',
        type,
        currentAuthority: 'admin',
      });
      return;
    }

    res.send({
      status: 'error',
      type,
      currentAuthority: 'guest',
    });
  },

歡迎頁面

首次進來的頁面.暫時先放的一張圖片,打算下次改成輪播圖.

不常處理的地方記錄一下:

1. 右上角的我的設置修改:

• 我的設置位置:
• 代碼位置:

1. 底部版權設置:

• 底部版權位置:
• 代碼位置:

1. 左上角項目名:

• 項目名位置:
• 代碼位置:

1. 頁面每次渲染加載loading: