深圳罗湖外贸网站建设网络服务器租用

当前位置： 首页 > news >正文

深圳罗湖外贸网站建设,网络服务器租用,wordpress 后台地址,实验教学网站的建设研究文章目录 一、项目起航#xff1a;项目初始化与配置二、React 与 Hook 应用#xff1a;实现项目列表三、TS 应用#xff1a;JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook… 文章目录 一、项目起航项目初始化与配置二、React 与 Hook 应用实现项目列表三、TS 应用JS神助攻 - 强类型四、JWT、用户认证与异步请求五、CSS 其实很简单 - 用 CSS-in-JS 添加样式六、用户体验优化 - 加载中和错误状态处理七、Hook路由与 URL 状态管理八、用户选择器与项目编辑功能九、深入React 状态管理与Redux机制十、用 react-query 获取数据管理缓存十一、看板页面及任务组页面开发1~34~678910111213.任务组页面 (下)14.完成 popover15.开发完成部署页面 学习内容来源React React Hook TS 最佳实践-慕课网 相对原教程我在学习开始时2023.03采用的是当前最新版本 项版本react react-dom^18.2.0react-router react-router-dom^6.11.2antd^4.24.8commitlint/cli commitlint/config-conventional^17.4.4eslint-config-prettier^8.6.0husky^8.0.3lint-staged^13.1.2prettier2.8.4json-server0.17.2craco-less^2.0.0craco/craco^7.1.0qs^6.11.0dayjs^1.11.7react-helmet^6.1.0types/react-helmet^6.1.6react-query^6.1.0welldone-software/why-did-you-render^7.0.1emotion/react emotion/styled^11.10.6 具体配置、操作和内容会有差异“坑”也会有所不同。。。 一、项目起航项目初始化与配置 一、项目起航项目初始化与配置 二、React 与 Hook 应用实现项目列表 二、React 与 Hook 应用实现项目列表 三、TS 应用JS神助攻 - 强类型 三、 TS 应用JS神助攻 - 强类型 四、JWT、用户认证与异步请求 四、 JWT、用户认证与异步请求(上) 四、 JWT、用户认证与异步请求(下) 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(上) 五、CSS 其实很简单 - 用 CSS-in-JS 添加样式(下) 六、用户体验优化 - 加载中和错误状态处理 六、用户体验优化 - 加载中和错误状态处理(上) 六、用户体验优化 - 加载中和错误状态处理(中) 六、用户体验优化 - 加载中和错误状态处理(下) 七、Hook路由与 URL 状态管理 七、Hook路由与 URL 状态管理(上) 七、Hook路由与 URL 状态管理(中) 七、Hook路由与 URL 状态管理(下) 八、用户选择器与项目编辑功能 八、用户选择器与项目编辑功能(上) 八、用户选择器与项目编辑功能(下) 九、深入React 状态管理与Redux机制 九、深入React 状态管理与Redux机制(一) 九、深入React 状态管理与Redux机制(二) 九、深入React 状态管理与Redux机制(三) 九、深入React 状态管理与Redux机制(四) 九、深入React 状态管理与Redux机制(五) 十、用 react-query 获取数据管理缓存 十、用 react-query 获取数据管理缓存上 十、用 react-query 获取数据管理缓存下 十一、看板页面及任务组页面开发 1~3 十一、看板页面及任务组页面开发一 4~6 十一、看板页面及任务组页面开发二 78 十一、看板页面及任务组页面开发三 910 十一、看板页面及任务组页面开发四 1112 十一、看板页面及任务组页面开发五 13.任务组页面 (下) 新建 src\screens\TaskGroup\components\createTaskGroup.js: import React, { useEffect } from react; import { Button, Drawer, Form, Input, Spin } from antd; import { DrawerProps } from antd/es/drawer; import styled from emotion/styled; import { ErrorBox } from components/lib; import { useAddTaskGroup } from utils/taskGroup; import { useTaskGroupsQueryKey } from screens/TaskGroup/utils; import { useForm } from antd/es/form/Form; import { useProjectIdInUrl } from screens/ViewBoard/utils;export const CreateTaskGroup (props: PickDrawerProps, visible { onClose: () void } ) {const { mutate: addEpic, isLoading, error } useAddTaskGroup(useTaskGroupsQueryKey());const [form] useForm();const projectId useProjectIdInUrl();const onFinish async (values: any) {await addEpic({ …values, projectId });props.onClose();};useEffect(() {form.resetFields();}, [form, props.visible]);return (Drawervisible{props.visible}onClose{props.onClose}forceRender{true}destroyOnClose{true}width{100%}Container{isLoading ? (Spin size{large} /) : (h1创建任务组/h1ErrorBox error{error} /Formform{form}layout{vertical}style{{ width: 40rem }}onFinish{onFinish}Form.Itemlabel{名称}name{name}rules{[{ required: true, message: 请输入任务组名 }]}Input placeholder{请输入任务组名称} //Form.ItemForm.Item style{{ textAlign: right }}Buttonloading{isLoading}type{primary}htmlType{submit}提交/Button/Form.Item/Form/)}/Container/Drawer); };const Container styled.divheight: 80vh;display: flex;flex-direction: column;justify-content: center;align-items: center; ;编辑 src\screens\TaskGroup\index.tsx新增创建任务组功能 … import { CreateTaskGroup } from ./components/createTaskGroup;export const TaskGroupIndex () {…const [epicCreateOpen, setEpicCreateOpen] useState(false);…return (ViewContainerRow between{true}h1{currentProject?.name}任务组/h1Button onClick{() setEpicCreateOpen(true)} type{link}创建任务组/Button/RowListstyle{{ overflow: scroll }}dataSource{taskGroups}itemLayout{vertical}renderItem{…}/CreateTaskGrouponClose{() setEpicCreateOpen(false)}visible{epicCreateOpen}//ViewContainer); };查看页面 尝试新增任务组功能正常 注意若是发现新增或删除后页面数据没有变化那说明新增或删除时使用的 queryKey 和 useQuery 中入参不一致导致无法正常更新缓存数据 14.完成 popover 功能实现的差不多了接下来查漏补缺
从图中可以看到在项目列表页中取消或新增收藏项目页面左上角收藏夹不会自动更新查看代码并结合控制台发现 ProjectPopover 中没有给 useProjects 传入参数作为 queryKey因此在缓存中 这两个地方收藏夹和项目列表并不一致 编辑 src\screens\ProjectList\components\ProjectPopover.tsx(使用 refetch在 onOpenChange 中调用): …export const ProjectPopover () {…const { data: projects, refetch } useProjects();…return (Popover onOpenChange{() refetch()} placementbottom content{content}项目/Popover); }; …查看页面这样功能正常啦 编辑 src\utils\use-users.ts(改为 react-query 的方式): import { useHttp } from utils/http; import { User } from types/User; import { useQuery } from react-query;export const useUsers (param?: PartialUser) {const client useHttp();return useQueryUser; };新建 src\screens\ProjectList\components\UserPopover.tsx(页面布局有一部分与 ProjectPopover 相同可以拿过来 src\screens\ProjectList\components\ProjectPopover.tsx): import React from react; import { Divider, List, Popover, Typography } from antd; import styled from emotion/styled; import { useUsers } from utils/use-users;export const UserPopover () {const { data: users, refetch } useUsers();const content (ContentContainerTypography.Text type{secondary}组员列表/Typography.TextList{users?.map((user) (List.Item key{user.id}List.Item.Meta title{user.name} //List.Item))}/ListDivider //ContentContainer);return (PopoveronVisibleChange{() refetch()}placement{bottom}content{content}span组员/span/Popover); };const ContentContainer styled.divmin-width: 30rem; ;编辑 src\authenticated-app.tsx(使用 UserPopover 组件) … import { UserPopover } from screens/ProjectList/components/UserPopover;export const AuthenticatedApp () {… };const PageHeader () {…return (Header between{true}HeaderLeft gap{true}…ProjectPopover /UserPopover //HeaderLeftHeaderRight…/HeaderRight/Header); };查看页面显示正常 15.开发完成部署页面 按视频教程是部署到 github pages 在 github 上新建一个仓库仓库名必须为 username.github.io其中 username 是 github 用户名。 安装依赖 npm i gh-pages -D npm i deploy修改 package.json配置部署脚本 {scripts: {…predeploy: npm run build,deploy: gh-pages -d build -r gitgithub.com:sindu12jun/sindu12jun.github.io.git -b main}, }注意要将 git 链接替换成自己的并指定分支main 替代之前 master 作为 github 默认主分支 安装好后执行npm run deploy(predeploy 也会自动执行)打包后的文件会自动上传到 github 并生成提交记录 打开部署后的页面成功 但是还有个问题github 如何判断路由是前端路由还是后端路由 目前点到其他子页面刷新后 显示404 接下来解决这个问题参考 spa-github-pages: 使用GitHub Pages 托管单页应用程序 大概步骤如下 自定义 404 页面将当前的路由信息记录下来携带路由信息跳转到 index进入 index 后检查路由信息进行还原 新建 public\404.html配置404页面解决强制刷新页面时github pages当做后端路由从而报错的问题 !DOCTYPE html html headmeta charsetutf-8titleSingle Page Apps for GitHub Pages/titlescript typetext/javascript// Single Page Apps for GitHub Pages// MIT License// https://github.com/rafgraph/spa-github-pages// This script takes the current url and converts the path and query// string into just a query string, and then redirects the browser// to the new url with only a query string and hash fragment,// e.g. https://www.foo.tld/one/two?abcd#qwe, becomes// https://www.foo.tld/?/one/twoab~and~cd#qwe// Note: this 404.html file must be at least 512 bytes for it to work// with Internet Explorer (it is currently 512 bytes)// If youre creating a Project Pages site and NOT using a custom domain,// then set pathSegmentsToKeep to 1 (enterprise users may need to set it to 1).// This way the code will only replace the route part of the path, and not// the real directory in which the app resides, for example:// https://username.github.io/repo-name/one/two?abcd#qwe becomes// https://username.github.io/repo-name/?/one/twoab~and~cd#qwe// Otherwise, leave pathSegmentsToKeep as 0.var pathSegmentsToKeep 0;var l window.location;l.replace(l.protocol // l.hostname (l.port ? : l.port : ) l.pathname.split(/).slice(0, 1 pathSegmentsToKeep).join(/) /?/ l.pathname.slice(1).split(/).slice(pathSegmentsToKeep).join(/).replace(//g, and) (l.search ? l.search.slice(1).replace(//g, and) : ) l.hash);/script /head body /body /html编辑 public\index.html将路由信息完整的带到 index 中还原从而实现 SPA 的效果当然会看到浏览器地址栏中路由的跳转体验上稍微差了点不过功能上已经基本无异。 !DOCTYPE html html langenhead…titleJira任务管理系统/title!– Start Single Page Apps for GitHub Pages –script typetext/javascript// Single Page Apps for GitHub Pages// MIT License// https://github.com/rafgraph/spa-github-pages// This script checks to see if a redirect is present in the query string,// converts it back into the correct url and adds it to the// browsers history using window.history.replaceState(…),// which wont cause the browser to attempt to load the new url.// When the single page app is loaded further down in this file,// the correct url will be waiting in the browsers history for// the single page app to route accordingly.(function(l) {if (l.search[1] / ) {var decoded l.search.slice(1).split().map(function(s) {return s.replace(/and/g, )}).join(?);window.history.replaceState(null, null,l.pathname.slice(0, -1) decoded l.hash);}}(window.location))/script!– End Single Page Apps for GitHub Pages –/headbody…/body /html英文注释译文该脚本检查查询字符串中是否存在重定向将其转换回正确的 url并使用 window.history.replaceState(…) 将其添加到浏览器的历史记录中这不会导致浏览器尝试加载新url。当单页应用程序在这个文件中被进一步加载时正确的 url 将在浏览器的历史记录中等待单页应用程序相应地路由。 解决方案原地址https://github.com/rafgraph/spa-github-pages 为方便访问博主在gitee上 fork 了一份 https://gitee.com/OliverDaDa_admin/spa-github-pages 这样部署就完成啦 部分引用笔记还在草稿阶段敬请期待。。。