react-问卷星项目（5）

于 2024-10-03 12:46:21 发布
阅读量392 收藏 3
点赞数 4
文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BHDDGT/article/details/142681812
版权

实战

路由

  • 路由设计，网址和页面的关系，就是从业务上分析需要哪些页面哪些页面内容可以抽离，业务流程要有入有出
  • 增加页面和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目录下的文件比较特别，需要跳转的时候传参，进行完上面的设置后可以在路径后面加入参数测试是否成功，如图所示

BHDDGT
关注
react的实战项目 3
qqqweiweiqq的博客
05-03 219
如何安装react中的路由。react 如何路由？把ID 传给详情页面。
react-QA:基于 react 构建的问答页面
05-11
使用react构建的问答 原型项目为，使用react重构 使用的技术栈为 react + react-redux + react-router 项目运行 git clone https://github.com/catchonme/react-QA.git cd react-QA npm install npm start 项目截图
react 复杂低代码项目 - 问卷星
weixin_38245947的博客
04-15 645
2.设置淘宝镜像源： npm config set registry https://registry.npm.taobao.org。一个git hook工具，在git commit之前执行自定义的命令，如执行代码风格的检查，避免提交非规范代码。执行npm run format， 这个时候发现文件里面的单引号，都变成了双引号。组件化：拆分页面结构，通过组件拼装页面，复用组件。只关注数据的修改，不用再操作dom，增加开发效率。创建.prettierrc.js文件，制定规范。2.配置eslint。
react-问卷星项目（1）
BHDDGT的博客
09-10 1145
记录react项目的学习和创建
react-问卷星项目（4）
最新发布
BHDDGT的博客
10-02 780
尽量不要使用内联CSS。
react-问卷星项目（3）
BHDDGT的博客
09-30 924
抽离出来的这个组件定义为ts组件即可// ts文件即可，因为没有JSX片段，即div等标签}, []);监听鼠标事件// 获取鼠标位置// "这个组件"，即谁引用就指向谁// 监听鼠标事件// 组件销毁时一定要解绑DOM事件，不然可能会出现内存泄漏问题// 解绑的时候需要和绑定的时候的函数相同}, []);模拟异步加载数据// 模拟异步信息}, 1500);});});}, []);
react-问卷星项目（2）
BHDDGT的博客
09-29 1041
一个git hook 工具，即在git commit之前执行自定义的命令，将规范流程化，如执行代码风格的检查，避免提交非规范的代码，在github搜索即可。这两条是接着执行的，表示创建husky，在文档说明里也有，我按照视频里的指令执行会显示初始化失败，这两条我自己用的没问题。
react实现问卷调查
qq_44170622的博客
02-22 1506
react的index中的ReactDOM.render文件 import React from 'react'; import ReactDOM from 'react-dom'; import Check from './check.jsx'; // import Browser from './browser.jsx'; ReactDOM.render( <Check/>, document.getElementById('root') ); 基本样式文件 imp
从0到1完整展现企业级React Hooks 项目开发【留言送书】
u012384510的博客
03-04 393
大家好，我是若川。之前送过N次书，可以点此查看回馈粉丝，现在又和机械工业出版社划华章图书合作再次争取了几本书，具体送书规则看文末。曾几何时，前端圈盛传这样一句话：“小公司用Vue，大公司用React。如果自己不去大公司，只要学会Vue就可以了，没有学习React的必要。”难道真的是这样吗？并不是！这句话放到2016～2019年没有什么错，也确实代表着当时的市场情况，但是国内互联网在经过2019年之...
探索Next全栈开发 - 做一个问卷表单低码项目
qq_44746132的博客
07-23 785
Nextjs做个全栈问卷星低代码项目，探索当前React全栈开发的相关技术内容，结合低代码表单项目场景，实现一个高颜值，搭建简单快速的问卷星表单项目
基于React技术栈的问卷星仿制项目设计源码
04-08
问卷星仿制项目：基于React技术栈开发，包含27个文件，包括5个JSON配置文件、3个JavaScript文件、3个TSX文件、3个TypeScript文件、2个PNG图像文件、2个CSS样式文件、1个.gitignore文件、1个husky/commit-msg文件、1...
最新 React 技术栈，实战复杂低代码项目-仿问卷星
05-06
分享视频教程——《最新 React 技术栈，实战复杂低代码项目-仿问卷星》React18+Next.js13+TS，B端+C端完整业务+技术双闭环，2023新课，提供配套的源码+笔记下载！从 0 开始构建最新、完整的 React 知识+生态技术体系...
基于慕课网最新React技术栈的问卷星仿制项目设计源码
09-28
本项目为慕课网最新React技术栈实战课程，精心设计并实现了一个复杂低代码的问卷星仿制项目。项目源码包含1020个文件，涵盖285个JavaScript文件、137个TypeScript文件、127个Markdown文件、124个JSON文件、92个...
React&JSX使用
CherishTaoTao的博客
09-30 1075
在 React 开发中，除了 JSX 的基础使用，还有一些常见的注意事项和 JSX 的进阶用法。以下是需要重点注意的 React 开发技巧和。
Reactor 反应堆模式
Xpccccc的博客
09-27 1103
Reactor 反应堆模式
react 前端框架中的 三层（service，model，index）具体操作
MeGoodtoo的专栏
09-27 397
获取数据：service层});model层},index 层});
从0学习React（4）---更新组件状态setState
qq_54432917的博客
09-29 465
在上篇文章中，我们讲了React中的一些基础，包括组件的种类以及state的使用。上篇文章的结尾，我们讲到了如何更新组件的状态（使用setState）。但是我没有讲的很详细，这篇文章我们详细的讲一下React中如何更新组件的状态。
React响应式修改数组和对象
警警的博客
09-30 718
React的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。你不能直接修改对象中的属性，而是需要创建一个新的对象来更新状态。不可变性（Immutability）：React中的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。避免直接修改状态：React的状态是不可变的，直接修改状态（如this.state.items.push(4)）不会触发重新渲染，因为React无法检测到这种变化。// 修改name属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值