推荐最新

网站热门搜索实现思路，不知道这样对不对，大佬指点一下？

数据库有一个搜记录表 "t_searche", 字段："id", "user_id", "title", "label", "created_time", "ip", "deleting" 说明： "id"：mysql 自增ID "user_id"：如果用户登录，添加用户ID，如果没登录，就是0 "title"：搜索的关键词 "label"：记录 "title" 的第一个字母，如果是中文，就是第一个汉字拼音第一个字母，归类用 "created_time"：搜索的时间 "ip"：搜索的用户IP "deleting"：是否删除每次搜索都是都记录一次，不管是不是同一个人还是同一个IP，这样对不对这样就可以统计 "title" 的条数来排序热门还是说单独再建一个表来记录 "title" 的数量，如果数据不是很大的时候没必要吧，后期数量大了，再增加一个统计表感觉也简单。

浏览量396

接地气的编码师

useEffect执行了两次？

react:18.2.0 next:13.4.19(app router) 需求：需要一进入页面就请求列表接口，根据接口保存两个值，一个是列表list，一个数据总数total; 目前实现： "use client"; import styles from "./permission.module.scss"; import pageTitle from "@hook/pageTitle/pageTitle"; import pageFilter from "./components/pageFilter/pageFilter"; import pageMain from "./components/pageMain/pageMain"; import pageDialog from "./components/pageDialog/pageDialog"; import { useEffect, useState } from "react"; import { permissionListApi } from "@api/permission-management/permission"; type FieldType = { name?: string; level?: number; }; const defaultPagination = { current: 1, pageSize: 10, showQuickJumper: true, showSizeChanger: true, showTotal: (total: number) => `共 ${total} 条`, total: 0 }; export default function PermissionPage() { let [pagination, setPagination] = useState(defaultPagination); let [modalVisible, setModalVisible] = useState(false); let [loading, setLoading] = useState(true); let [list, setList] = useState([]); // 获取列表 const getPermissionList = () => { setLoading(true); permissionListApi() .then(res => { if (res.code === 0) { setList(res.data.list); setPagination({ ...pagination, total: res.data.count }); } }) .finally(() => { setLoading(false); }); }; useEffect(() => { getPermissionList(); }, []); // 筛选 const onFilter = (e: FieldType) => { console.log(e); }; // 新增 const onCreate = () => { setModalVisible(true); }; // 弹窗-取消 const onCancel = () => { setModalVisible(false); }; // 弹窗-确定 const onOk = () => { setModalVisible(false); }; return ( {pageTitle("权限管理")} {pageFilter(onFilter)} {pageMain({ loading, list, pagination, onFilter, onCreate })} {pageDialog({ modalVisible, onCancel, onOk })} ); } 问题： 1、接口请求了两次,了解因为严格模式，执行了两次，但是我试了清除副作用，也还是执行了两次；"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250108/b9f35be86bd1ef079e2928acf08ebd13.png)"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250108/e6e6aaee76541d61ba3f96d586b7cb2b.png) 2、useEffect第二个参数[]有一个eslint的警告,这个警告只要加上setPagination就会有，去除就没有了："image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250108/e85c3a11d74f2089278fee178ba5e242.png); 网上搜索尝试了在useEffect定义一个布尔变量然后return清除改变这个布尔，但是还是执行了两次；react本来就不熟，这次弄的时候官网推荐这个next搭建就更头疼了，react领域小白白有没有懂的解释解答一下

浏览量358

Midclimateeee

如何使用react-hook-form+zod实现动态表单验证？

如何使用react-hook-form+zod实现动态表单验证？比如登陆时不需要输入邮箱，注册时需要输入邮箱 {variant === "Register" && ( 邮箱 {errors.email && ( {errors.email.message} )} )} 大概的样子： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250102/4f41b5e304408bc9028e197271ab9de2.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250102/17bcbde58926d38116e16fcd43ea9d1b.png) 以下是完整代码，无法实现对 "email" 项的校验 "use client"; import { useState } from "react"; import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import * as z from "zod"; const LoginFormSchema = z.object({ username: z .string() .min(3, { message: "用户名不得少于3个字符", }) .max(20, { message: "用户名不得多于20个字符", }), password: z .string() .min(8, { message: "密码不得少于8个字符", }) .max(20, { message: "密码不得多于20个字符", }), }); const RegisterFormSchema = z.object({ email: z.string().email({ message: "邮箱格式不正确", }), username: z .string() .min(3, { message: "用户名不得少于3个字符", }) .max(20, { message: "用户名不得多于20个字符", }), password: z .string() .min(8, { message: "密码不得少于8个字符", }) .max(20, { message: "密码不得多于20个字符", }), }); const FormSchema = z.union([LoginFormSchema, RegisterFormSchema]); type FormSchemaType = z.infer; const UserForm = () => { const [variant, setVariant] = useState("Login"); const { register, handleSubmit, formState: { errors, isSubmitting }, watch, } = useForm({ resolver: zodResolver(FormSchema), defaultValues: { username: "", password: "", }, }); const onSubmit = async (data: FormSchemaType) => { await new Promise((resolve) => setTimeout(resolve, 1000)); }; return ( {variant === "Login" ? "登录" : "注册"} {variant === "Register" && ( 邮箱 {errors.email && ( {errors.email.message} )} )} 用户名 {errors.username && ( {errors.username.message} )} 密码 {errors.password && ( {errors.password.message} )} {variant === "Login" ? "还没有账号？去" : "已有账号？去"} setVariant(variant === "Login" ? "Register" : "Login") } > {variant === "Login" ? "注册" : "登录"} 提交 {JSON.stringify(watch(), null, 2)} ); }; export default UserForm;

浏览量198

抠香糖

在NextJS中new URL为啥和标准不一样呢？

测试代码很简单如下： const logo = new URL('http://up1.yii.so/jianli/static/square.js', import.meta.url); // import.meta.url is file:///Users/liwei/Downloads/app/web3/next.v2/src/app/optimizing/script/urlimports/page.tsx console.log(logo.href); // output: _next/static/media/square.251a1772.js 我不太理解，为啥："http://up1.yii.so/jianli/static/square.js" + "file:///Users/liwei/Downloads/app/web3/next.v2/src/app/optimizing/script/urlimports/page.tsx" = "_next/static/media/square.251a1772.js" 我先找了mdn，在"new URL()"中关于第一个参数"url"如下描述： «如果 "url" 是相对 "URL"，则会将 "base" 用作基准 "URL"。如果 "url" 是绝对 "URL"，则无论参数 "base" 是否存在，都将被忽略。» 显然nextjs中的"new URL()"和web标准不一样，但是文档又没有提到，所以想问下nextjs中的"new URL()"是什么标准？

浏览量196

你好我叫张倩话

如何在一个域名下登陆多个账户？

我有一个根域名，我想要打开两个标签页同时让用户登陆，和管理员登陆。但是我感觉这个难度非常大啊。因为我以前做过的项目都是只存了一个token，给一个用户登陆。不知道怎么实现，大神们能不能给个大体的实现思路？我用的nextjs框架

浏览量215

接地气的编码师

如何用next+react+websocket实现一个双人版的wordle游戏?

如何用next+react+websocket实现一个双人版的wordle游戏? 现在我用next+react复刻了"wordle小游戏" (https://link.segmentfault.com/?enc=ovipjTByMkMrDS2mBs5ZFA%3D%3D.IS9wmpOZsYESlZ4CnpZOch6OgvSEnjrYSyfigdgsHW6NKkKFnATJOHL9Gdzz50fF)，现在我想要添加一个双人模式。点击双人模式按钮，弹出一个modal，显示一个链接。将该链接分享给别人，当别人访问该链接的时候就，两个人就可以开始轮番猜词共同挑战一个wordle题目了。需要实时更新同步两个人的操作，"HTTP协议"应该是做不到的，应该需要借助"websocket"协议。大体思路（不知是否可行）: 点击双人模式按钮, 发出请求"/tow-player" => 服务端next+router handle，开启一个websocket服务，并将可以表示这个websocket的标识符传回去 => 本地的websokcet就可以通过这个标识和发送和接收信息，同步两个玩家的操作了。

浏览量213

笑面猫

nextjs的 route handler 到底有什么用？

route handler 定义在 route.ts/js 文件里，看上去和 page 的定义非常像，无非就是 page 返回的是页面内容，route.ts 更多的像是一个restful风格的返回值，尽管他也能通过 reponse 直接返回 html 标签，但是相信应该不会这样做。所以我的疑问是，这个到底是干嘛用的？服务器组件里我能直接 fetch 更后端的接口获取数据，客户端也可以吧？我在介绍 fetch data的文档里，看到可以在客户端组件里通过route handler 请求数据，那么请求的链路等于是客户端组件，通过/api/xxx 请求 route.ts, 然后 route.ts 里也许去访问数据库或者请求后端接口再去调用一下，那么为什么不直接在客户端组件里请求后端接口。经过这个中转不是多次一举吗？除非后端逻辑就在route.ts 新手刚接触，有点疑问，谢谢指点

浏览量201

刘传疯子

next.js页面中多出的怎么设置样式？

next.js用page router模式创建的项目中页面有个包裹全局这个div的样式是在哪里可以设置的吗？如图： "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241007/b8b944d2c84ea4794cf6cf5ba9e0ffad.png) 本人尝试过global.css设置#next{}但是无效。另外想知道这个div是怎么来的？这个问题对我的第一个困扰是我想实现自己layout的页面撑开高度为100%，但是父组件设置不了，所以只能设置为视口100vh来曲线救国第二个困扰是想做水平垂直居中，但是找不到它的父盒子（也就是div id="_next"），设置不了display:flex，也做不了 ----------------------补充 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241007/7875b4ee5909365c4bab4782e819a1d0.png)global.css设置了 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241007/6c8c485b4b0fab8fa76b74c8e71177cb.png)没有显示 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241007/149a4b2b2343ea3642b7bd9911386906.png)这个属性是可以设置的但是我找不到这个div。。qaq

浏览量192

Fronttend

如何在server component里面嵌入client component?

最近在学习nextjs,是最新的14版本，而且用的最新的app router结构。在最新的版本所有的js文件都默认是server component,如果设置成client component需要主动声明"use client". 在这这种情况下就涉及到一个问题，如何优雅的嵌入client component. 比如我在一个/home页面下面，其他的部分都是静态的，可以用server component,但是login按钮肯定是client component，目前我查到的就是，要给这个login按钮单独写一个js文件，在文件的最顶部声名 “use client". 我的问题是能不能都混合在写一起。不要为一个小小的按钮，单独写一个文件。

浏览量207

一只臭美的Doggg

next.js引用antd的时候报SyntaxError: Cannot use import statement outside a module?

next.js创建的新项目中引入antd时出现SyntaxError: Cannot use import statement outside a module 我在命令行中用以下命令创建了next.js的新项目，以及一些选择 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/04b5274ee68a71bb73075d5593ccfac6.png) 当我运行这个项目的时候，是没有问题的，结果如下 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/7b00a5442db67186127f26ef45cea978.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/d0c128deb5d49fca9c3b35004add0f2f.png) 可是当我尝试引入一些库，比如antd的时候，当我再次运行的时候，就出现了问题 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/2609407876f9683238a9d91186eb86d4.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/45883389dc50405fcc687f14c455e6e5.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/0086ebc42f56113ccf6fbb340a6522d4.png) 令我感到奇怪的是，当我使用应用路由而不是页面路由的时候，就没有这个问题了 "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/2eecd102bd6689dd410fefabe6884123.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/b902900f8320b6060187fc9496e2f1d5.png) 请问如果项目最初选择的是应用路由的话，该如何设置，才能解决这个问题呢？另外导致这个问题的原因涉及哪些方面的知识，可以学习些什么内容呢？

浏览量177