react-问卷星项目（5）

news2024/10/4 14:29:32

实战

路由

  • 路由设计，网址和页面的关系，就是从业务上分析需要哪些页面哪些页面内容可以抽离，业务流程要有入有出
  • 增加页面和Layout模版，模版就是抽离页面公共部分，比如都有顶部或者左侧导航，直接上代码，就是组件复用的思想
  • 使用React-router增加路由配置（目前路由模块只有这一个工具）

React-router

路由工具

其中Outlet和vue中的slot插槽相似，通过下载路由并导入获得

下载React-router

npm install react-router-dom --save

这一篇实战性比较强，直接上代码，相关部分在代码中都有注释

项目的目录结构如下，components是存放组件，Layouts存放布局，布局就是页面抽离出的公共部分，比如几个几个页面都有顶部和底部，这两个就可以抽出来成布局，pages存放页面，在React中都是组件，但是在业务上我们称之为页面，结构就是右边这个图所示，有点模糊凑合着看，从老师的视频里截出来的

全部先新建出来后按照下面的格式先布局就可以。

// 星标问卷页面
import React, { FC } from "react";
const Star: FC = () => {
  return <p>Star</p>;
};
export default Star;

接下来一个个页面开始细化，基本思路就是先list文件挂载到app中，然后添加问卷列表卡片组件Question，再然后完善布局，其中布局有些注意点就是，一部分是固定的，但是还有一部分是可以切换的，可以切换的这一块需要用的路由的一个类，下面碰到的时候会注释。

ps:新项目记得把sass之类的下载好，忘记指令的可以看这篇，反正什么报错下载什么就可以

List.tsx

import React, { FC, useState } from "react";
import { useSearchParams } from "react-router-dom";
import QuestionCard from "../../components/QuestionCard";
import styled from "./List.module.scss";

const rawQuestionList = [
  {
    _id: "q1",
    title: "问卷1",
    isPublished: true,
    isStar: false,
    answerCount: 5,
    createAt: "3月10日 13:23",
  },
  {
    _id: "q2",
    title: "问卷2",
    isPublished: false,
    isStar: true,
    answerCount: 15,
    createAt: "3月22日 13:23",
  },
  {
    _id: "q3",
    title: "问卷3",
    isPublished: true,
    isStar: true,
    answerCount: 100,
    createAt: "4月10日 13:23",
  },
  {
    _id: "q4",
    title: "问卷4",
    isPublished: false,
    isStar: false,
    answerCount: 98,
    createAt: "3月23日 13:23",
  },
];

const List: FC = () => {
  const [searchParams] = useSearchParams();
  console.log("keyword", searchParams.get("keyword"));

  const [questionList, setQuestionList] = useState(rawQuestionList);
  return (
    <>
      <div className={styled.header}>
        <div className={styled.left}>
          <h3>我的问卷</h3>
        </div>
        <div className={styled.right}>搜索</div>
      </div>
      <div className={styled.content}>
        {questionList.map((q) => {
          const { _id } = q;
          return <QuestionCard key={_id} {...q} />;
        })}
      </div>
      <div className={styled.footer}>footer</div>
    </>
  );
};

export default List;

List.module.scss

.header{
  display: flex;
  .left{
    flex: 1;
  }
  .right{
    flex: 1;
    text-align: right;
  }
}

.content{
  margin-bottom: 20px;
}

.footer{
  text-align: center;
}

body{
  background-color: #f1f1f1;
}

QuestionCard.tsx

import React, { FC, useEffect } from "react";
// import "./QuestionCard.css";
import styled from "./QuestionCard.module.scss";
import classnames from "classnames";
type PropsType = {
  _id: string;
  title: string;
  isPublished: boolean;
  isStar: boolean;
  answerCount: number;
  createAt: string;
  // 问号是可写可不写，跟flutter语法相似
  deletQuestion?: (id: string) => void;
  pubQuestion?: (id: string) => void;
};

const QuestionCard: FC<PropsType> = (props: PropsType) => {
  const { _id, title, createAt, answerCount, isPublished } = props;

  return (
    <div className={styled.container}>
      <div className={styled.title}>
        <div className={styled.left}>
          <a href="#">{title}</a>
        </div>
        <div className={styled.right}>
          {isPublished ? (
            <span style={{ color: "green" }}>已发布</span>
          ) : (
            <span>未发布</span>
          )}
          &nbsp;
          <span>答卷：{answerCount}</span>
          &nbsp;
          <span>{createAt}</span>
        </div>
      </div>
      <div className={styled["button-container"]}>
        <div className={styled.left}>
          <button>编辑问卷</button>
          <button>数据统计</button>
        </div>
        <div className={styled.right}>
          <button>标星</button>
          <button>复制</button>
          <button>删除</button>
        </div>
      </div>
    </div>
  );
};

export default QuestionCard;

QuestionCard.module.scss

.container{
  margin-bottom: 20px;
  padding: 12px;
  border-radius: 3px;
  background-color: white;

  &:hover{
    box-shadow: 0 4px 10px lightgray;
  }
}

.title{
  display: flex;
  .left{
    flex: 1;
  }
  .right{
    flex: 1;
    text-align: right;
  }
}

.button-container{
  display: flex;
  .left{
    flex: 1;
  }
  .right{
    flex: 1;
    text-align: right;
    button{
      color: #999;
    }
  }
}

下面开始就是布局文件，其中用到的Outlet和vue中的插槽比较相似，作用就是占位，可以实现切换组件的效果

MainLayout.tsx

import React, { FC } from "react";
import { Outlet } from "react-router-dom";
const MainLayout: FC = () => {
  return (
    <div>
      <div>MainLayout header</div>
      <div>
        <Outlet />
      </div>
      <div>MainLayout footer</div>
    </div>
  );
};
export default MainLayout;

ManagerLayout.tsx

import React, { FC } from "react";
import { Outlet } from "react-router-dom";
import styled from "./MangerLayout.module.scss";
const MangerLayout: FC = () => {
  return (
    <div className={styled.container}>
      <div className={styled.left}>
        <p>MainLayout left</p>
        <button>创建问卷</button>
        <br />
        <a href="#">我的问卷</a>
        <br />
        <a href="#">星标问卷</a>
        <br />
        <a href="#">回收站</a>
        <br />
      </div>
      <div className={styled.right}>
        <Outlet />
      </div>
    </div>
  );
};
export default MangerLayout;

MangerLayout.module.scss

.container{
  display: flex;
  padding: 24px 0;
  width: 1200px;
  margin: 0 auto; // 水平居中
  .left{
    width: 120px;
    background-color: aqua;
  }
  .right{
    flex: 1;
    margin-left: 60px;
    background-color: aquamarine;
  }

}

QuestionLayout.tsx

import React, { FC } from "react";
import { Outlet } from "react-router-dom";

const QuestionLayout: FC = () => {
  return (
    <div>
      <div>QuestionLayout header</div>
      <div>
        <Outlet />
      </div>
      <div>QuestionLayout footer</div>
    </div>
  );
};
export default QuestionLayout;

接下来是路由器编辑

router/index.tsx

// 路由配置
import React from "react";
import { createBrowserRouter } from "react-router-dom";
import MainLayout from "../Layouts/MainLayout";
import ManagerLayout from "../Layouts/ManagerLayout";
import QuestionLayout from "../Layouts/QuestionLayout";
import Home from "../pages/Home";
import Login from "../pages/Login";
import Register from "../pages/Register";
import NotFound from "../pages/NotFound";
import List from "../pages/manager/List";
import Trash from "../pages/manager/Trash";
import Star from "../pages/manager/Star";
import Edit from "../pages/manager/question/Edit";
import Static from "../pages/manager/question/Static";

// 数组表示可以创建多路径
const router = createBrowserRouter([
  {
    path: "/",
    // 访问根目录时element指向MainLayout
    element: <MainLayout />,
    children: [
      {
        path: "/",
        element: <Home />,
      },
      {
        path: "login",
        element: <Login />,
      },
      {
        path: "register",
        element: <Register />,
      },
      {
        path: "manager",
        element: <ManagerLayout />,
        children: [
          {
            path: "list",
            element: <List />,
          },
          {
            path: "star",
            element: <Star />,
          },
          {
            path: "trash",
            element: <Trash />,
          },
        ],
      },
      {
        // 以上页面都没有命中
        path: "*",
        element: <NotFound />,
      },
      {
        path: "question",
        element: <QuestionLayout />,
        children: [
          {
            path: "edit",
            element: <Edit />,
          },
          {
            path: "static",
            element: <Static />,
          },
        ],
      },
    ],
  },
  {
    path: "question",
    element: <QuestionLayout />,
    children: [
      {
        path: "edit/:id",
        element: <Edit />,
      },
      {
        path: "static/:id",
        element: <Static />,
      },
    ],
  },
]);
export default router;

最后挂载到App上就可以

App.tsx

import { RouterProvider } from "react-router-dom";
import router from "./router";

function App() {
  return <RouterProvider router={router}></RouterProvider>;
}

export default App;

可以在路径上添加相应后缀尝试是否能正确切换，接下来就是传值和接收值的测试，包括使用路由进行页面跳转

Home.tsx

// 首页
import React, { FC } from "react";
import { useNavigate, Link } from "react-router-dom";

const Home: FC = () => {
  const nav = useNavigate();

  function clickHandler() {
    nav({
      pathname: "/login", // 路径
      search: "b=21", // 路径附加参数，类似get
    });
  }

  return (
    <div>
      <p>Home</p>
      <div>
        <button onClick={clickHandler}>登录</button>
        <Link to="/register">注册</Link>
      </div>
    </div>
  );
};
export default Home;

Login.tsx

// 登陆页面
import React, { FC } from "react";
import { useNavigate } from "react-router-dom";

const Login: FC = () => {
  const nav = useNavigate();

  return (
    <div>
      <p>Login</p>
      <div>
        {/* -1就是返回上一个 */}
        <button onClick={() => nav(-1)}>返回</button>
      </div>
    </div>
  );
};
export default Login;

Edit/index.tsx

// 编辑页面，页面比较复杂所以不放在单个页面，而是文件夹中
import React, { FC } from "react";
import { useParams } from "react-router-dom";

const Edit: FC = () => {
  // 默认值，不传入就是空字符串
  const { id = "" } = useParams();
  return <p>Edit{id}</p>;
};
export default Edit;

question目录下的文件比较特别，需要跳转的时候传参，进行完上面的设置后可以在路径后面加入参数测试是否成功，如图所示

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2188180.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Solidity 设计模式：实现灵活与可扩展的智能合约架构

Solidity 设计模式：实现灵活与可扩展的智能合约架构

Solidity 作为以太坊智能合约的主要编程语言&#xff0c;拥有许多独特的设计模式&#xff0c;这些模式帮助开发者实现更加灵活、可扩展和安全的合约架构。设计模式不仅能够简化开发过程&#xff0c;还能减少常见的编程错误&#xff0c;并提高智能合约的可维护性和可升级性。本文…
阅读更多...
舞动春日：SpringBoot打造古典舞在线交流平台

舞动春日：SpringBoot打造古典舞在线交流平台

第四章 系统设计 4.1系统概要设计 本古典舞在线交流平台采用B/S结构来开发&#xff0c;这种结构是在互联网兴起后出现的&#xff0c;是一个适用于互联网环境下的模型结构&#xff0c;用户只要能上网通过浏览器就可以在任何时间、任何地点的使用。系统工作原理图如图4-1所示&…
阅读更多...
华为OD机试 - 区间交叠问题 - 贪心算法（Python/JS/C/C++ 2024 E卷 200分）

华为OD机试 - 区间交叠问题 - 贪心算法（Python/JS/C/C++ 2024 E卷 200分）

华为OD机试 2024E卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试真题&#xff08;Python/JS/C/C&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;私信哪吒&#xff0c;备注华为OD&#xff0c;加入华为OD刷题交流群&#xff0c;…
阅读更多...
二叉树的创建、遍历及销毁

二叉树的创建、遍历及销毁

头文件&#xff1a;link_tree.h #ifndef __LINK_TREE_H__ #define __LINK_TREE_H__ #include <stdio.h> #include <stdlib.h> typedef char datatype;//类型重定义 typedef struct tree_node {datatype data;//数据域&#xff0c;存储数据struct tree_node *left;…
阅读更多...
【C++前缀和】1895. 最大的幻方|1781

【C++前缀和】1895. 最大的幻方|1781

本文涉及的基础知识点 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 LeetCode1895. 最大的幻方 难度分&#xff1a;1781 一个 k x k 的 幻方 指的是一个 k x k 填满整数的方格阵&#xff0c;且每一行、每一列以及两条对角线的和 全部相…
阅读更多...
SpringBoot平台：古典舞爱好者的在线聚集地

SpringBoot平台：古典舞爱好者的在线聚集地

第三章 系统分析 3.1 可行性分析 需要使用大部分精力开发的古典舞在线交流平台为了充分降低开发风险&#xff0c;特意在开发之前进行可行性分析这个验证系统开发是否可行的步骤。本文就会从技术角度&#xff0c;经济角度&#xff0c;还有操作角度等进行综合阐述。 3.1.1技术可行…
阅读更多...
rkllm板端推理

rkllm板端推理

交叉编译 在完成模型的量化构建后&#xff0c;就能够在目标硬件平台OK3576上实现模型的推理功能了。 板端推理的示例代码位于kllm-runtime/examples/rkllm_api_demo目录中&#xff0c;该目录提供了针对Android和Linux平台的编译示例。由于我们的开发环境是基于Linux的&#x…
阅读更多...
程序猿成长之路之设计模式篇——设计模式简介

程序猿成长之路之设计模式篇——设计模式简介

无论是对于代码质量还是代码可维护性、可扩展性&#xff0c;使用合适的设计模式都能够起到促进提升的作用&#xff0c;此外在软考的软件工程师、系统架构师职称考试中&#xff0c;设计模式也是必考的一块内容&#xff0c;因此我打算开拓一个新的专栏简单介绍一下设计模式&#…
阅读更多...
数据仓库！企业决策的智慧引擎

数据仓库！企业决策的智慧引擎

数据仓库&#xff01;企业决策的智慧引擎 前言数据仓库 前言 今数字化浪潮汹涌澎湃的时代&#xff0c;数据已然成为企业航行于市场海洋的罗盘&#xff0c;而数据仓库则是那承载罗盘的坚固船只。当我们深入探究数据仓库的世界&#xff0c;就仿佛打开了一扇通往企业智慧核心的大…
阅读更多...
Gazebo环境下开源UAV与USV联合仿真平台

Gazebo环境下开源UAV与USV联合仿真平台

推荐一个ROS2下基于Gazebo环境的开源UAV与USV联合仿真平台。平台是由两个开源项目共同搭建的。首先是UAV仿真平台&#xff0c;是基于PX4官方仿真平台&#xff08;https://docs.px4.io/main/en/sim_gazebo_gz&#xff09;&#xff1b;其次是USV仿真平台&#xff0c;是基于VRX仿真…
阅读更多...
C++语言学习(4): identifier 的概念

C++语言学习(4): identifier 的概念

1. 什么是 identifier identifier 中文意思是标识符&#xff0c;在 cppreference 中明确提到&#xff0c;identifier 是任意长度的数字、下划线、大写字母、小写字母、unicode 字符 的序列&#xff1a; An identifier is an arbitrarily long sequence of digits, underscores…
阅读更多...
FBX福币历史重演，ETH可能会在第四季度出现熊市

FBX福币历史重演，ETH可能会在第四季度出现熊市

知名加密货币分析师Benjamin Cowen警告称&#xff0c;以太坊(ETH)可能在今年最后三个月突然转为看跌。FBX福币凭借用户友好的界面和对透明度的承诺,迅速在加密货币市场中崭露头角,成为广大用户信赖的平台。 考恩告诉他在社交媒体平台十、上的861500名粉丝表示&#xff0c;ETH可…
阅读更多...
240 搜索二维矩阵 II

240 搜索二维矩阵 II

解题思路&#xff1a; \qquad 解这道题最重要的是如何利用从左到右、从上到下为升序的性质&#xff0c;快速找到目标元素。 \qquad 如果从左上角开始查找&#xff0c;如果当前matrix[i][[j] < target&#xff0c;可以向右、向下扩展元素都是升序&#xff0c;但选择哪个方向…
阅读更多...
Python+Matplotlib创建高等数学上册P2页例2交互动画

Python+Matplotlib创建高等数学上册P2页例2交互动画

import numpy as np import matplotlib.pyplot as plt from matplotlib.widgets import Slider, CheckButtons# 创建图形和坐标轴 fig, ax plt.subplots(figsize(10, 8)) plt.subplots_adjust(left0.1, bottom0.2)# 设置图表 ax.set_xlim([-1.5, 1.5]) ax.set_ylim([-1.5, 1.5…
阅读更多...
C（九）while循环 --- 军训匕首操情景

C（九）while循环 --- 军训匕首操情景

匕首操&#xff0c;oi~oi~oi~~~~~ 接下来的几篇推文&#xff0c;杰哥记录的是三大循环结构的运行流程及其变式。 本篇的主角是while循环。&#x1f449; 目录&#xff1a; while循环 的组成、运行流程及其变式关键字break 和 continue 在while 循环中的作用while 循环的嵌套题目…
阅读更多...
MySQL中NULL值是否会影响索引的使用

MySQL中NULL值是否会影响索引的使用

MySQL中NULL值是否会影响索引的使用 为何写这一篇文章 &#x1f42d;&#x1f42d;在面试的时候被问到NULL值是否会走索引的时候&#xff0c;感到有点不理解&#xff0c;于是事后就有了这篇文章 问题&#xff1a; 为name建立索引&#xff0c;name可以为空select * from user …
阅读更多...
SpringBoot线程问题

SpringBoot线程问题

程序&#xff0c;线程&#xff0c;线程池 进程是资源分配最小单位&#xff0c;线程是程序执行的最小单位。计算机在执行程序时&#xff0c;会为程序创建相应的进程&#xff0c;进行资源分配时&#xff0c;是以进程为单位进行相应的分配&#xff0c;每个进程都有相应的线程&…
阅读更多...
TiDB 7.x 源码编译之 TiFlash 篇

TiDB 7.x 源码编译之 TiFlash 篇

本文首发于TiDB社区专栏&#xff1a;https://tidb.net/blog/5f3fe44d 导言 TiFlash 从去年四月一日开源至今已经过去将近一年半&#xff0c;这段时间里 TiFlash 从 v6.0.0-DMR 升级到了 v7.3.0-DMR&#xff0c;并增加了若干新特性&#xff0c;比如支持 MPP 实现窗口函数框架&am…
阅读更多...
sql-labs靶场第五关测试报告

sql-labs靶场第五关测试报告

目录 一、测试环境 1、系统环境 2、使用工具/软件 二、测试目的 三、操作过程 1、寻找注入点 2、注入数据库 ①Order by判断列数 ②寻找注入方式 ③爆库&#xff0c;查看数据库名称 ④爆表&#xff0c;查看security库的所有表 ⑤爆列&#xff0c;查看users表的所有…
阅读更多...
Linux之实战命令25：xargs应用实例(五十九)

Linux之实战命令25：xargs应用实例(五十九)

简介&#xff1a; CSDN博客专家、《Android系统多媒体进阶实战》一书作者 新书发布&#xff1a;《Android系统多媒体进阶实战》&#x1f680; 优质专栏&#xff1a; Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a; 多媒体系统工程师系列【…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023