React-Router v6 实战：构建学生管理系统的前端与后端

快速搭建服务器

在本次课堂中，我们将学习如何使用 React-Router v6 版本搭建一个学生管理系统。首先，我们需要一个后端服务器来提供数据。为了快速搭建服务器，我们选择了 json-server。

步骤 1: 初始化项目

首先，我们需要初始化一个新项目。在命令行中运行以下命令：

npm init

这将创建一个新的 package.json 文件，用于管理项目的依赖。

步骤 2: 安装 json-server

接下来，我们需要安装 json-server 依赖。在项目目录中运行：

npm install --save json-server

步骤 3: 创建数据文件

创建一个名为 db.json 的文件，这将作为我们的数据源。文件内容如下：

{
    "students": [
        {
            "name": "xiejie",
            "age": "18",
            "phone": "333-444-555",
            "email": "xiejie@gmail.com",
            "education": "adsfasfd",
            "graduationschool": "asdfasfd",
            "profession": "asdfasdf",
            "profile": "asdfasfdasdf",
            "id": 1
        },
        {
            "name": "yajing",
            "age": "34",
            "phone": "123-345-678",
            "email": "yajing@hotmail.com",
            "education": "fasdfasfd",
            "graduationschool": "fasfasdf",
            "profession": "sdfasdfafd",
            "profile": "asdfasdf",
            "id": 3
        },
        {
            "name": "xizhi",
            "age": 47,
            "phone": "13112341234",
            "email": "1234567@qq.com",
            "education": "硕士",
            "graduationschool": "北京大学",
            "profession": "前端开发工程师",
            "profile": "大家好!",
            "id": 2
        }
    ],
    "classes" : [
        {
            "id" : 1,
            "name" : "前端01班",
            "description" : "这是一个积极向上的班级"
        },
        {
            "id" : 2,
            "name" : "前端02班",
            "description" : "这也是一个非常积极向上的班级"
        }
    ]
}

步骤 4: 配置启动命令

在 package.json 文件中添加以下命令，以便启动 json-server：

"scripts": {
  "json:server": "json-server --watch db.json"
}

步骤 5: 启动服务器

最后，运行以下命令启动服务器：

npm run json:server

快速搭建整个管理系统

由于我们还没有学习组件库，我们将使用 Bootstrap 来快速搭建前端界面。

步骤 1: 使用 Bootstrap 模板

我们选择了 Bootstrap 的 Starter Template 作为基础模板。模板地址为：

Bootstrap Starter Template

步骤 2: 引入 Bootstrap

为了使用 Bootstrap 的样式类，我们需要引入 Bootstrap。我们选择使用 CDN 的方式引入。在 index.html 文件中添加以下代码：

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  crossorigin="anonymous"
/>
​
<!-- 引入 jQuery -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" 
  integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
  crossorigin="anonymous"
></script>

通过以上步骤，我们成功搭建了一个基本的学生管理系统。接下来，我们将使用 React-Router v6 来构建单页面应用，实现页面的路由跳转和管理功能。