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

背景:
以前在网上看到有人写过一个地狱管理系统的照片.因而内心就有一个想法想写个天堂管理系统.碰巧也一直想写一个项目做为本身的储备项目.
一直都是在公司不停的帮人家写系统,不少知识也是须要的时候再学,不碰就容易忘.写这个系统一是总结下本身学到的东西.加深印象.二是给本身找一个长期的事情作.
整个项目一步步的路程我都会写成一篇篇文章记录下来.可能发布的时间不稳定,毕竟是不忙的时候才写.可是我必定会坚持写完的.后期整个项目的代码会传到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: