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

时间:2020-9-1 作者:admin

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

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。