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

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