react实例——学生管理系统记录问题（开篇）

1.为了锻炼react整体使用流程，作此简单练习，需求分析：

--管理员：登录、注册、学生的增删改查、课程增删改查、任课老师的课程任教确认、个人信息的修改

--老师：登录、注册、任课信息查询，任课选择、学生分数的登记、个人基本信息的修改

--学生：登录、注册、课程信息查询、课程选择、个人学科成绩的查询、个人基本信息的修改

2.react项目创建

create-react-app stu-info-manage-sys

npm run start 或者 yarn start启动项目查看是否成功，如下图就行

 

3、项目拟采用的工具、技术

因为这是本人第一做，具体的技术栈没想好，权当练习，以求在后续使用中锻炼出来，突发奇想再补充、用到再配置

拟采用工具：navicate、vscode、谷歌浏览器

技术栈：mongodb、react框架、nodejs、antd、ajax、less

4、react项目配置antdv4版本

官方文档：https://ant.design/docs/react/use-with-create-react-app-cn#%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE

总结下来：

　　——安装依赖：yarn add antd；yarn add @craco/craco；yarn add craco-less；

　　——文件配置：（1）在根目录下新建craco.config.js；（就是和package.json同级）　　　　　

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

　　　　　　　　　　（2）修改package.json文件，　　　　　　　

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

　　　　　　　　　　（3）在App.css中最顶部加入：@import '~antd/dist/antd.css';

yarn start重启检查项目

　　

项目开启,待后续......（其实学生、老师、管理员，作为练手项目，他们只需要做一个，其他两个可以触类旁通，目前打算做完管理员就行，重复一个制作流程，熟悉它，对自己是必然的好处，另外自己对开发项目的经验不足，关于功能设计也有不少问题，因此，这个项目只用来总结问题到（2）结束，我要重新开启一个新项目，这样不断训练自己熟悉这个过程，遇到新的问题，解决新的问题）

搜索

复制