现在你为什么要建造一个
使用 d Jango 和 nextjs 制作的项目
没有意义，实际上它做了很多
让我告诉你
[音乐]
为什么现在 D jeno 又回来了
结局很好，你可以休息一下
使用 d Jango 和 API 真的很快
我们将使用的工具称为 D Jango ninja
构建 api 的速度要快得多
比像Jango休息这样的东西
框架，并且在一个更容易做到这一点
我们可以在短时间内建立一个
允许用户使用的完整 REST API
认证用户 登录用户
注册后您将获得所有
您获得的 D Jango 管理员的好处
D Jango RM 的好处所以得到对象
或 404 所有这些东西都可以正常工作
与 d Jango ninja 和这个新的一致
其余 API 我们不需要做的事情
Jango 在这种情况下不使用 Jango
前端我们根本不会使用视图
不会使用模板，因此会删除
你通常会做的大部分事情
有了 Jango 那么你会做什么呢
好吧，我们使用 nextjs 它的真正作用
好吧是前端，但它还有一个
后端的 API 服务器现在很酷
关于这个以及我们使用的原因
nextjs 超过了像反应一样的东西
nextjs当然是一个react框架
但事实上它有一个后端
服务器端允许我们实际设置
我们为 API 用户提供的 API 令牌
服务器作为仅 HTTP 的 cookie，以便
表示服务器本身有访问权限
到令牌，但不是前端
客户端不是标准反应
您可以放置​​代币的前端
这增加了一个全新的层
无法实现的安全性
现在只是纯粹的反应我明白你可以
完全在 d Jango 中运行 React
项目，但这就是我们在这里所做的
如果你实际上会建立这个基础
如果你真的想这么做的话
改变它，但我真的很喜欢
这是因为它允许我建立一个
API 专注于构建 get it
完全完成功能准备，然后我
可以运行 10 个版本的 nextjs
通过相同的 API 和不同的
变化所以我可以做各种各样的
在那里进行测试或者只是有不同的
品牌做的事情基本相同
但这一切实际上都得到了推动
与我完全相同的 Jango 项目
认为真的很引人注目而且超级
有趣，所以这确实是我们的原因
这样做就是尽最大努力 D
Jango 具有一些新功能
就像 d Jango ninja 一样
然后也尽力做到最好
哪个是用户界面并且
然后是现在的一个小后端
nextjs 没有关于如何做的意见
做用户或会话或类似的事情
因为它只由你决定
像 Fast API 或 Flask 可能甚至
我真的很喜欢像我们的反射一样的东西
我本能地认为有很多事情
我们可以在同一个生态系统中做的事情
使用像反射这样的工具所以这个想法在这里
拥有非常强大的 Jango API
然后可以使用任何前端的后端
我们要开始的前端
与 nextjs 一起使用，因为它功能强大
前端，我碰巧正在使用
整个系统 整个平台
我自己的一个新项目，我会告诉
你约其他时间但现在
让我们继续看一下
本课程的演示并讨论
您需要满足的各种要求
好在这方面
感谢 Neon 帮助带来
这当然是现在的生活霓虹灯当然
是一个 seress postgres 数据库服务
这意味着我们实际上可以使用
他们在我们的 D Jango 项目中的职位
这给了我们很大的灵活性
部署我们的 Jango 应用程序，基本上
任何地方，如果你不熟悉
霓虹灯背后的想法是
无服务器，这意味着您只需
当你使用东西时就需要付费
只需在使用时支付运行时费用
您只需为数据库数据付费
你正在使用它，它实际上是真的
有效并最终节省大量
运行各种数据库的条款
整个项目现在另一个
它的一部分是它可以做的事实
无服务器允许我们做一些事情
现在我要讲的是分支
稍后我们会详细介绍这一点
实施它，但背后的想法
分支正在采取你当前的状态
您的数据库并复制它
您可以在其他环境中使用
这意味着您可以对其进行分析
这意味着您的开发环境可以
实际匹配您的生产
环境还有很多真的很酷
再次感谢 Neon
请务必在以下地址注册：
neon.pdf 走进生活，我们也将成为
在本课程中使用它，所以其他一些
我们想谈的事情是
实际技术要求做到
首先，在这门课程中
你本地已经安装了 python
机器这是你绝对必须的
还需要安装node.js
在您的机器上，因为这就是我们的方式
现在将运行我们的 nextjs 项目，如果
在检查之前你从未做过 nextjs
使用 nextjs 课程 I 输出我的小 URL
描述中也会有一个链接
对于这个，这将向您展示如何
做很多基本的事情
纯粹是xjs，你知道我们会怎样
在那里也使用霓虹灯，但这个想法
具有一些基本的
对nextjs的理解会超级好
对此以及某些事情有帮助
我认为与现在的反应有关
现代 JavaScript 和现代 Python 是
非常非常相似，他们有一些小问题
细微差别让他们有点
不同但总的来说我认为他们是
非常相似，所以这也意味着
你想对D有一些了解
Jango 本身就像我的课程一样使用
你的第一个 Django produ 项目或者你
还可以查看我的任何 tri Jango
您实际上可以构建很多课程
也有纯粹 Jango 的东西
所以我们要把这两者结合起来
这意味着你应该
有一些基本的了解
他们俩都这样，这样就很好
希望更容易消化一点
当然，现在就让这一切发挥作用
代码将在
我的 GitHub 以及您可以在以下位置找到
cfsh GitHub，您将进入
存储库，你就可以去
明年进入Jango S pro项目
这里当然会参考
本课程的不同部分
本身以及您想要的最终代码
最终在那里使用所以当然是
请务必订阅 cf.害羞的youtube
因为我一直在上面添加新的东西
为各种发展
帮助您构建现代应用程序
非常感谢您的观看并感谢
再次感谢 Neon 帮助实现了这个
生活中的事情让我们来看看
演练我们将要做什么
现在正在建设
我只是想给你一个小演示
至于我们将成为什么
现在首先为这个项目建造
最重要的是它已经完全部署，所以这是
我们想做的很大一部分是
确保它部署在
生产环境对于我们来说都是
生产数据库还可以
看到这可以很好地工作
生产不仅仅在您本地
环境所以我们想做的是
想看看我们的nextjs前台
最后我要打开它，这是
现在这可能感觉不像
全部，但重要的是
我们可以实际执行一些事情
就像我们可以实际摄取数据的表单一样
这些数据将直接进入我们的
Jango 项目然后被存储到
我们的霓虹灯数据库这也意味着我
可以使用安全密码在这里登录
我登录后可以看到所有
我所经历过的事例
实际上变成了这个特殊的
现在项目这里的想法是粗鲁的我们
刚刚看到创建现在我们看到
检索以便我们实际上可以看到所有
存储在的项目
数据库到这个特定的用户和
那么我实际上可以进入任何
个别项目是另一个版本
检索然后我实际上可以
用一些新数据更新它并保存
该更新然后返回我的
列表，我可以看到所有这些东西
出来，这是很大一部分
crud 就是现在了解如何
做这些事情意味着你可以建造
几乎任何你想要的数据
地图在这里，这是它的关键部分
所以当然下面发生了什么
引擎盖是 nextjs 应用程序是
运行然后它正在发送 API 调用
当需要时 D Jango 项目
它这样做的方式需要
如果我在这里注销，我们可以看到登录
我尝试导航到
体重清单本身通过进入体重
它会自动尝试这样的列表
强制我登录，你就可以看到
这里有下一个网址我可以去
继续并登录，然后你将结束
我登录后看到是这样
实际上带我去那个路线列表吧
然后我就可以更新了
再次为该特定用户提供数据并
我们现在就可以做到这一切
当然，关于此的其他部分是
事实上，D Jango 项目也在
现在在这个例子中是我们的 Jango 项目
正在使用调试模式进行生产
知道不要对我，但这里的想法是
你实际上可以在这里登录管理员
现在我没有任何风格
没有任何你想要的东西
D Jango 可以做的有一个整体
另一个项目向您展示了如何
使用嗯你知道
向您展示如何使用白噪声
该项目称为 SAS 基金会
你可以随时查看但是
想法在这里我们实际上可以看到所有
这些条目对象其中一些是
将有一个与之关联的用户
其中一些不是，所以让我们继续吧
并尝试找到一个确实有
用户，当然我们可以
可能会好一点但是
有一个用户对象，就是我
刚刚向您展示了我登录了
当然代码也在 GitHub 上
我的 Django nextjs 这将是
只是一般代码
当然实际的后端代码和
前端代码也在这里
以及您需要的所有东西
现在部署这个项目本身
想向您展示的也是Jango忍者
代码以及它有多简单以及如何
很兴奋，希望你们中的很多人都会如此
你用 d Jango ninja 来构建什么
你的API就是你定义的
您定义实际忍者的一些模式
并记下我们的做法
我们的代币我们也会讨论这个但是
这个想法是这是非常基本的 Jango
忍者就在这里我们返回实际的
被序列化为的用户对象
这个用户模式没有其他任何东西，所以如果
我们看看我们的体重清单之一
一个功能更全一点，我们
这里有更多模式，但我们可以看到
嘿你知道什么我可以做一个
标准 janle 查询集并返回
然后将其转换为 Json 数据
在本例中为 Json 数据列表
所有这些数据负责
我们在前端看到的就是这样
当我们想要的时候前端应用程序
在这里查看所有失重数据
这是因为
d Jango ninja 很容易做到
现在你可能会看到这个并思考
有点复杂，但就是这样
比 Django 的其余部分容易得多
框架只是为了让所有这一切我们
可以要求用户登录或进行登录
匿名我们可以允许呃不同
不同类型的状态码
数据就像如果它是有效数据我们
如果无效可以返回2011
数据我们可以返回到状态400
以及我们想要给出的错误
你知道这实际上是什么吗
d Jango 形式可以做额外的事情
验证超出了
模式本身或只是数据类型
所以我们实际上使用 Jango 形式
作为其中的一部分，我们可以使用 Jango
模型形成于此，所以这就是这里
如果你熟悉的话，这是一个 Jango 模型形式
通过这个过程你会像哦这个
太棒了，但我们也可以使用
不是 Jango 模型形式的东西
我们可以直接获取对象或 404 什么
你知道另一个方便的功能吗
那个杰诺有那个杰诺忍者
处理起来太酷了，然后我们就过去了
并实际运行迭代
保存更新的数据并执行所有操作
然后当然还有删除
以及我们谈论的方法
快到这个结尾的时候
如果我们要查看的话，这就是 Jango 代码
在 nextjs 代码中，这有多简单
也好，那将会到来
进入前端我们看看
在 SRC 上我想强调的是
现在确实是 API 部分，如果
我们在这里查看我们有一个登录页面
登录路线这当然是后面的
我们进入的 nextjs 应用程序结束
我们登录 D Jango 本身，然后我们
在这里设置我们的令牌和访问令牌
这些就是所有这些的记号
发生在后端本身
这非常好，所以我们也可以
看看我们实际上在里面做了什么
我们的库所以李关闭我们可以看到我们设置
cookie 中的令牌，以便我们得到它
然后我们也将其设置为仅 HTP
这是巨大的，这意味着 JavaScript
换句话说，如果
你有某种第三方
JavaScript 应用程序安装在您的
nextjs 应用程序将无法
只读取您的身份验证令牌
并用它做一些非常酷的事情
存在并且是你的东西
可以在这里做非常简单的事情
对我来说，这就是为什么我们最终使用 nextjs
一般，这将是我的事情
想要为任何类型的前台做
结束，包括我是否正在使用某些东西
像反射或任何其他类型的前部
最后我可以做同样的事情
然后我们当然会从那里开始构建
所有与此相关的不同事物
路由获取我们的数据你知道
构建表格本身并使用
一个名为 Shad CN 的 UI 组件工具和
CSS 也叫你知道 Tailwind CSS
这有助于我们设计造型本身
但总体来说其实还算可以
简单说明我们如何实现这一点
然后我们如何部署它
当然用霓虹灯部署它 霓虹灯是
我们最终将使用的数据库
在生产中我们可以使用它
也在开发中，然后我们将
使用所有这些部署到铁路
现在实际的部署是
得益于铁路，很容易做到
霓虹灯也是因为我们不必
完全担心我们的数据库，但
这里的想法主要是构建一个工具
我们可以部署在任何我们想要的地方
请记住，我们实际上是
正确部署两个应用程序，以便我们
正在部署后端以及
前端作为单独的环境 Al
在一起所以如果你实际上从未
将 D Jango 或 nextjs 部署到生产环境
无论如何，或者到铁路，这也将是一个
非常有趣的过程
是的，我想我们有很多
如果您对此有疑问，请在这里
让我知道所有的代码都是
在 GitHub 中，所以一定要去检查一下
出在
参见GitHub 所以如果这感觉很
也许这对你来说是压倒性的
可能超出某事的范围
如果此时你应该采取行动
不会，但它会让你兴奋不已
让我们继续吧，跳进去吧
正确的
现在我们要做我们的项目
设置这意味着我们要
至少建立我们的 Jango 项目
它的基线部分以及我们的
nextjs 项目现在要做的第一件事是
我们需要考虑的是我们存储在哪里
这些项目有时你可能会
试图将它们全部放在一个文件夹中，这样
所有代码都紧挨着
除了问题之外的其他问题
当然是长期的可维护性
运行这将是一场噩梦
维持所以我们想做的是
实际上将它们分开，我们想要它们
两者都有自己的回购协议，因此
他们在我们实际系统上自己的文件夹
我们的本地系统本身所以我们将开始
退出 D Jango 项目，然后
我们将转到下一个 JS，所以
我要做的就是我要去
将其放入此处的 Dev 文件夹中，我是
继续命名该文件夹
jeno nextjs 我就叫它 Das
我将继续创建后端 API
这就是我的 jeno 项目的所在
去住，这就是我们将要住的地方
继续进行所有安装
我想做的第一件事是
将在这里保存工作区并
然后我将继续创建我的
虚拟环境所以里面
我们要去的当地项目
继续并执行 python 3-m VMV VV 现在
当然，这是为那些
使用 Mac Linux 或 WSL 或 Windows
推荐的 Linux 子系统
一旦你真正拥有了vir
在这里的环境你将能够
如果您还没有准备好，请立即激活它
如果您使用的是 Windows，请使用 WSL
想要使用可能的
你的Python的绝对路径
安装就像python一样
3.12 slve 或者更确切地说 python.exe
dmvnv 然后是 V EnV 它将是
类似的东西然后
你可以继续并激活它
你所在的系统所以就我而言我会做
VMV bin 激活，然后如果您
windows 将会变得更多
就像 EMV 脚本通过
在开头斜杠所以如果你不这样做
已经知道了，而你还没有走
通过这个过程检查一些
我的 tri Jango 系列可能会
对设置过程非常有帮助
本身或者我的一些你知道的python
Windows系列也可以安装
所以这里的想法是现在我们已经有了
这个虚拟环境我只想
pip install jeno 我也会去
继续并安装 Jango ninja 和 of
当然，每当我做一个
像这样安装我也想要
为此引入requirements.txt
我们将放入 D Jango，然后放入 Jango
忍者就是那样，好吧，所以我不是
真的会担心詹戈
版本本身是唯一版本
我想要担心的代码是
确实是我正在使用的 python 版本
在我的虚拟环境中这应该是
当然，在这种情况下为 3.10 及以上
我正在使用呃你知道3.12所以下一个
事物将成为我们的源泉
我们的实际代码因此我们创建一个
SRC 文件夹就像我们要的那样
跳到我们将导航的终端
进入那个 SRC 文件夹，我们就这样做
Jango 管理员并启动我要去的项目
将我的项目命名为 CFE，我只是
将其放入此文件夹中
SRC文件夹就像这样
我们走吧，现在我就可以运行这个了
自始至终，我制作的一个工具只是为了
让它更容易记住
如何运行这个 Django 项目被称为
RAV 这是完全可选的，但我
一直使用它，这样我
记住我在这里的不同命令
所以我们要做的就是您安装后
RAV 你可以在里面放一些东西
rouer 作为 RAV gaml 你会做
像脚本之类的东西然后你
可以说诸如服务器之类的内容，然后
那就是你知道的 CD SRC 和
python manage.py 运行服务器然后如果
您想要更改端口或
类似的事情你可以这样做
就在那里，然后当你进去的时候
你所需要的一切都是你项目的根
做就是做r
运行服务器然后实际上会
为您运行服务器并
所以我不会真正谈论
这很多，但想法是
如果你想做其他种类的Jango
你会做你知道的项目
迁移或迁移等等都对
所以所有这些不同的命令
你可能想在 D jeno I 里面跑
只需将它们放入 RAV 文件夹即可获得帮助
我参考这些不同的命令
因为现在我们要继续
建立我们的下一个转移项目，让我们开始吧
向前并打开一个新窗口
vs code 这里我想做的是之前
我实际上创建了实际的项目
vs code 我要打开我的终端
我将在这里导航到 Dev 并
我们将继续创造我们的
nextjs 应用程序就在这里，所以它是
该命令与node.js相关，所以我们
需要确保已安装
当然我使用的是版本 20
LTS，您知道的较小版本
如果您这样做的话，这里的数字应该更高
最近安装了它，这里的想法是
在 Node.js 内部我们也有 MPX
mpm MPX 允许我们运行命令
在节点 JX 内部，所以我想要的命令
运行是创建下一个
应用程序是最新的，所以这是最新的
创建 nextjs 应用程序的版本
我们想命名我们的项目本身
在这种情况下我要命名的东西
它是 D Jango nextjs 前端
我不会使用打字稿，你可以
如果你愿意但如果你不是那样的话
熟悉nextjs我不推荐
使用打字稿，但有点
比我们要做的更先进
我要使用 es lent
Tailwind 我将使用 SRC
目录，我要继续
使用应用程序路由器我不会
自定义别名，但这将是
继续为我创造一切
在该文件夹内我命名的原因
之所以说nextjs前端是因为好
这将是相同的名字
当一切都说完之后，回购本身
所以一旦我们真正有了这个
项目在这里我现在可以在 vs 中打开它
代码让回到资源管理器通知中
我的 Jango 项目仍然处于开放状态
这也将是真的
在整个系列中我将
去啊，打开我们所在的文件夹
将导航到该文件夹​​的位置
这就是我要去的前端
继续打开这个，我们开始吧
所以现在我们有一个非常相似的布局
呃，就 Node.js 应用程序而言
从某种意义上说，有包。
Json 在那里，然后 R 说 SRC 和
RAV 现在我拥有 RAV 的原因是因为
它与 package.json 非常相似，其中
这里有脚本你可以
只需运行 RAV 运行服务器的地方即可
在 Jango 方面我们要做什么
这里只是 mpm run Dev ，那就是
将继续建造
nextjs的开发环境
本身，所以当然如果你要
在网络浏览器中打开它
看到这样的东西恭喜你
如果你以前从未这样做过如果你
在 jeno 中做同样的事情，你会
看到这样的东西，所以在这一点上
我们想看看最快的方法
使用 jeno 在 jeno 中构建 REST API
ninja 进入我们的 D Jango 项目代码
我们要继续打招呼
当然，现在有 d Jango ninja 的世界
你的要求应该已经是
假设您设置了
像我一样的项目我们将继续进行
做世界，因为它非常
非常简单，如果你已经完成了
类似 D Jango 休息的东西
我真的认为你之前的框架
喜欢忍者，因为这很容易
所以让我们继续尝试一下
在我们的主 D 内部首先要做的事情
我们的Jango配置模块
我称 CFE 为家
那是因为我打电话给我所有的
更容易完成的项目
管理它们并且更容易
记住settings.py在哪里
urls.py 以及这里的所有内容
我们将继续创造
API。这是直接来自
Jango ninja 码头那些很棒，所以
随意经历一下，真的
了解我想要的事情发生了什么
现在就向你展示这个你好世界
从 Ninja 开始，我们要继续
导入我们要去的 ninja API 类
将其声明为相当于 ninja 的 API
API 然后我会做我们要做的
为 G 方法做 API d uh 装饰器
只是简单地打个招呼，然后我们就
去定义 hello 它需要一个
请求我们继续打印
要求它可能是什么样子并且
然后我们只返回一个字符串
现在你好世界所以你们中的那些人
之前已经使用过 Fast API，这将
忍者 API 看起来非常非常熟悉
我相信 Jango 忍者包有一个
Fast API 给了我很多灵感，但它
给了我们所有的詹戈
我们稍后就会看到，但是
这里的想法是我们现在有了这个全息世界
在我的网址内我可以继续使用
那个 API 所以我要继续做
从 API 导入 API 变量，因此来自
我们要导入的 API 模块
API 变量然后我们要去
继续设置 API 的路径，这是
将成为API。网址所以这个实际
变量本身已经在这里了
有一些关于 URL 的东西，它会
映射到您的所有不同的 URL
现在我们已经可以把它放在这里了
我们要继续奔跑
带有 RAV 运行服务器的服务器和
当然，如果这不适合你
请随意进入此处的 SRC 文件夹
然后运行 ​​python manage.py run
这样的服务器然后你就可以走了
继续前进，然后继续使用
看起来我已经拥有了
跑步，但想法是你想要的
运行服务器，我正在运行
现在就打开它吧我的
Hello World Django 页面消失了
继续打开这个
在我的 arc 浏览器内部并注意
我有两条路径正在显示
第一个只是简单的 API
我们再次得到一个此处未找到的页面
但我们可以看到所有内置的API
d Jango ninja 的路径
当然还有我们拥有的那个
只是简单地打招呼，所以 API 和你好
让我们去掉结尾的斜杠
你知道什么你好世界
如果我们回到我们的
API 这里 这是我认为 Jango 的地方
忍者确实很闪耀，这也是有关系的
到请求所以如果我们看看
请求我们看到它实际上给了我们
你可能会提出同样的詹戈请求
现在已经习惯了 On Any Give jeno 视图
当然如果你不习惯这些
事情没什么大不了的，想法就是
在这个请求中我们可以有
访问请求用户，这样我也可以
导入一个叫做 schema 的东西，我可以
定义我想要如何转变我的用户对象
转换为 Json 数据，这就是这个
架构要做，我要打电话
该用户
模式，它将吸收
模式作为参数，我们可以放置一个用户
名称为 Str Str 我们可以说是
已验证等于布尔值
我们将从这些开始得到这个
事情正在进展，所以现在我要继续
复制此内容到这里以及我要做的事情
我要做的是我会再次得到我这是
来自文档，所以请随意查看
文档本身我们可以传递响应
与此架构相关
现在我们要做的是传递一个
返回将要转动的对象
进入模式所以在我们的例子中是
将被请求。用户和我要去
将此函数本身重命名为我，我们
保存一切都应该刷新
Jango 一侧，然后我们进入
lashme 我们得到的是会话存储
我实际上有一个问题，因为我有
没有这样的 J 会话表，所以我们走吧
并将其创建为根
我们的项目在这里
我将只运行 python AR RAV
跑步
迁移当然运行 CD SRC 和
然后 python manage.py 立即迁移
我这样做了，我应该拥有那个 D Jango
会话表以及许多其他
我将继续并在这里刷新的事情
就这样，我们有一个空的
我们拥有的用户名字符串是
验证是错误的所以如果我们
改变这个让我们实际上只是给它
尝试通过创建来改变这一点
我们将继续并导航到
SRC 我们将执行 python manage.py
创建超级用户，我就使用它
作为这里的任何用户我都会去
并牢记这一点并做到这一点
我的服务器仍在运行我会继续
并跳入管理员，这样我就可以
身份验证只是为了登录管理员
我们很快就会保存该用户的
现在输入密码，继续执行 API 操作
你知道那儿有我的用户名吗
已通过身份验证，这对我来说太酷了
因为现在很容易做到如果
我们想要用户模型中的其他字段
或者任何与此相关的模型
我们能做的就是引进这个模型
它本身或我们可能是什么
声明数据类型
如果你不熟悉的话这里发生
然后我们要设置一个默认值
值，对于像 if 这样的电子邮件
他们没有经过身份验证，所以如果没有
用户已通过身份验证或如果未请求
用户经过身份验证然后我们把这个
这里的值我们确保它在
那里也有，所以我们可以做各种各样的事情
这里的东西所以我将其保留为无
现在我将刷新此用户注意到它
说“无”，该用户仍然是
已通过身份验证，所以让我们继续跳跃
进入这里的管理员，我们将进入
用户，我就继续输入
一封实际存在的电子邮件我们会去
继续并保存该电子邮件，然后我们就开始
回到我们的 API me，你会做什么
知道有那封电子邮件现在很难
喜欢 说明这有多神奇
这部分就在这里变得真实
真正的快速模式或基本上转向
我们的数据库数据转换成Json字典
这就是这里发生的事情所以如果你
看看你可能有的原始数据
我只有一个用于解析这个的插件
data 但我们已经得到了实际的 Json 数据
在这里我们能做的还有很多
这是
你想使用 Jango 的原因
因为你的后端是因为 OM 和
因为所有其他 API 的东西
就在那里，Jango ninja 就是这样的
让我很兴奋把它带进来
在我们的下一个 JS 中
现在我们需要实施应用程序
用户身份验证这当然意味着
我们可以登录我们的用户，他们也可以
现在可以访问他们的用户资料了
是您使用 jeno 的一个重要原因
一是它如何管理用户
另一种是如何关联数据
对于那些相同的用户来说，这两件事都是
实际上在 D 中相当简单
Jango 与其他工具不是一样的
必然同样简单，但
流程还是很相似的
这里的想法是我们创建一个用户模型
然后在用户模型的数据库中
获取 与其他数据关联 其他数据
数据库中的模型也是如此，所以我们
想要一种简单易行的方法能够
按照我们要的方式访问该用户
这当然是通过 D Jango 完成的
现在如果你看看他们的忍者
认证文档有很多
不同的选择，你可以做什么
在这里实现我想做的是使用
Json Web 令牌也称为 jot JWT I
想要实际实施 jot 因为
接下来 JS 将实际使用该点
令牌有很多不同
也有 jot 包，这样您就可以
实际上来回传递
一切所以这个想法是这样的
当然，如果我们实际查看 API
inpoint，我登录后查看
进入管理员我会看到我是
在这里进行身份验证，当然如果我
导航到管理员
能够看到管理员以及想法
无论是什么都会回来
我们还希望有能力 API
运行相同数据的curl命令，但是
获取该实际数据
user 这就是我们要做的
D Jango ninja jot 所以快点吧
我必须搜索这个包
想象更多的包裹将会继续
出来为各种
Jango ninja 的认证
这是一个有点新的包
本身但另一个想法是
还会有其他的 jot 包
所以请记住这一点
你通常会执行
记事并没有那么复杂，而且它们都
几乎遵循非常相似的
它们最终如何发生的模式
只是碰巧使用这个，因为
它是从我用过的一个分叉出来的
之前在詹戈休息方面
框架所以考虑到这一点让我们开始吧
继续并开始讨论这个
文档将链接到
描述但想法是我要去
继续并跳入获取
从这里开始我们几乎要安装
标准的 Jango ninja jot 但我
实际上想安装加密货币
所以这个就在这里所以它有
密码学，这样你就可以做某事
就像 RSA 我会谈论 RSA 我不是
实际上要实施它，但我
稍后会讨论它但是
此时我将继续添加此内容
作为我的包裹，你可以随时添加
密码学只是做你可能不会
立即需要它，但在某些时候你
可能只是继续添加
包，现在我们只需要安装
所以让我们继续吧
使用我们的 pip 进行安装过程
安装 d rrequirements.txt 的
当然现在会安装该软件包
我们已经得到了 我们将要
根据以下内容稍微更新一下我们的 API
文档
所以 API 本身需要一些时间
我们要继续做的事情
从呃
忍者j。我们要去的控制器
导入忍者手稿
默认
控制器然后我们就去
向前做同样的事情，但是从
身份验证等
身份验证我们将导入 JWT
然后我们就做最后一件事
这是来自呃忍者
另外我们要导入忍者
额外的
API 还可以，所以有了这个额外的忍者，我们
想要确保这实际上是
安装完毕，让我们快速进行一下
pip 冻结在这里，我们看到的是
ninja extra 安装在这里
可能是 Ninja jot 的依赖项好吧
所以这现在将成为我们的 API
如果您需要添加，工作方式非常相似
添加诸如路由器之类的东西
诸如此类的事情我们稍后会讨论
但现在我们可以保持原样
然后我们只做api。添加或
登记
控制器，我们要注册
ninj jot 默认控制器，然后
我们要去智威汤逊最远的地方
前面并将其添加为关闭
该端点的要求
请求用户，所以这将是
给我们正确的或至少是正确的
一旦我们真正验证了
与我们的用户一起看一下
就在我离开之前
我还需要更新我的设置
需要在这里进入我安装的应用程序
我们想添加额外的忍者和
然后还有忍者
写得很好，所以现在我考虑到这一点
继续运行 python
实际上我可能有
执行 RAV 运行迁移，因为我在
我的项目的根目录没有迁移
每当我安装应用程序时都需要
这正是我想做的
然后我想确保我的
端点现在正在工作，所以第一个
我现在需要检查的是
API meme 就我之前的情况而言
如果我现在刷新这里它说
未经授权这当然意味着我
实际上必须使用 JWT 或 Json web
令牌甚至可以到达此页面，所以这是
实际上有点酷
已经向我们表明它已被锁定
更具体一些
登录版本现在有办法做
其他类型的套餐或附加
包裹不仅仅是记事，但我们想要
坚持使用一个即可使其变得简单
以后也更容易实施
太好了，所以考虑到这一点，我要去
继续并跳回根部
我的 API，我们看到我们得到了一些
这里有不同的 API 端点，我们
现在可以使用我想做的事情来记录
是使用这个URL获取token对
这是默认情况下的所以这样
我们要做这件事 那我就去
实际上跳进RAV，我们
要把这个卷曲取消，我会做的
这里有一根管子，这样我就可以有一种
长卷曲命令将是
卷曲然后-大写x
发布，然后标题是
内容类型，这将是
应用Json好然后数据
我们将继续做-D
这必须是一个 Json 字符串，所以我们使用
外侧的单引号
括号里面有双引号，所以
用户名，然后是我的用户名
有 CFE 然后我要去
继续并输入实际密码
在这种情况下我刚刚做了一个
无论是学习代码的密码
我们现在只是在这里开发东西
所以我需要的终点是
是令牌对，所以基本上是
本地主机 API 令牌对就像
所以这是其他原因之一
我这里有 RAV，这样我们就可以
参考我们需要的命令
打电话让我们继续确认一下
我做正确的事
密码，我将继续运行这个
服务器运行时的curl命令
当然我们运行那个curl命令我们
如果我应该取回这些令牌
是要更改密码本身并且
再次复制并粘贴该 crur 命令我
让您知道没有活跃帐户
所以它不会说密码不正确
没有说错误的用户，它只是给出了
我们
一个更好的安全消息说它是
不正确，你必须改变一些东西
很酷，现在我们已经得到了我想要的
这次可以用同样的想法
我们会这样称呼它
卷曲
受保护或卷曲
保护然后我会继续使用
很多相同的东西，但现在我要走了
将端点更改为我这个
应该是为了获取我的信息
这次我不需要传递这个
这里的数据我可能真的不知道
需要内容类型应用Json
我真正需要的是
授权
标题，这将是
默认承载者，因为那是
实际的默认令牌标头名称
Json 令牌，所以我需要传入一个
这里有实际的令牌，所以使用 RAV 我会
实际上向你展示了卷曲所以如果我们
做 RAV 运行卷曲我们就能得到
新的代币，我可以继续做
获得新的代币这就是为什么我
把它放在这里，所以我们需要的令牌是
访问令牌中有两个
那里有刷新和访问权
现在我们需要的就是这个访问令牌
这是我们带入承载者的那个
令牌本身我们可以将其保存在这里
然后我要继续做Rev
运行curl protected 按回车键，看起来
就像我有一点问题
把 A-D 放在这里我需要去掉它
那不应该在那里，所以当
我们现在就开始做吧，我们做了一个
发布请求不正确
请求该端点，以便我们可以
将其更改为 get 请求，然后我们
现在再次运行这个我真的明白了
个人用户数据权等等
过程不一定要用curl
我将继续替换我的实际
此处的令牌供您自己参考
稍后但你会说你的访问权限
令牌或者更确切地说是您关闭访问权限的卷曲
令牌或类似的东西但是
我们的想法是我们现在有办法拥有
受保护的数据，因此当我们需要添加时
一个要保护的 URL，我们只需添加它
这里的论点与
Jango 上下文就像这样
需要登录 这本质上就是
就发生在这里，只是我们没有
必须致电登录 需要我们致电所有
将参数放入装饰中
端点本身基于所有
我们可能想要的事情以及正在做的事情
那个curl命令本身确实是
现在简单记住
Json Web 令牌过期它们将过期
随着时间的推移，我们需要
确切地更改一些设置
可能最终会起作用，所以如果我们看看
Jango ninja jot 里面的东西
我们这里有各种设置
我们可以更改访问令牌
一生五分钟所以我谈了
超过 5 分钟，猜猜是什么
令牌实际上消失了，所以这些是
现在我在那里的所有默认值
提到我们要讨论 RSA
RSA 是一种算法，它可以
让我们有一个签名密钥和一个
验证密钥所以两个密钥以便当
这些代币进来了
验证它们并使其更安全
这就是大致的想法
那是在这个上下文之外的
其中一件事情就是
建议更改签名密钥
与您的标准不同的东西
Django 密钥将是
取决于你最终如何做到这一点
我要做的就是去
改变生命周期令牌所以我
继续并基本上保持
此时其他一切都相同
只需更改生命周期令牌值
所以它比 5es 长一点
分钟，这样我们就不必
不断地刷新事物等等
为此，我想导入日期时间
包裹然后我就来
在这里，我们将完成约会时间
包裹。时间 Delta 和我想要
将其更改为让我们做 60 分钟
一个小时，然后刷新令牌是
大约7天的时间
现在我们不希望这些行
太长了，因为如果有人得到
访问用户的 jot 令牌
有权访问他们的帐户
这当然不是我们的事
一定会想要所以有很多
我们可以考虑的其他事情
就令牌的方式而言
有效，但现在我们要做
就这样吧，然后我们就
实际上能够开始构建
nextjs 的更多资源
应用程序将能够使用
开始，所以我们要开始这个过程
正确的
现在我们要创建我们的第一个
jeno 模型和与之匹配的 ninja 模式
所以这里的想法是我们要跳入我们的
项目，我要继续
在这里创建一个新的应用程序，所以 python
manage.py 启动应用程序，我们只需调用
这个等待名单所以想法就像
在我们的 nextjs 的主页上
申请我们将有一个表格，以便他们
可以加入这样的Weit列表
这里的想法所以在这个应用程序中我
将继续创建一个新模型
这里只是简单地
体重清单条目，将会有
模型。
模型以及我们的东西是什么
实际上在某些时候需要从这口井
我们可能想要关联一个用户
暂时使用此体重清单条目
虽然我们只是要继续
保存电子邮件等于模型。电子邮件字段
我们希望这一点得到充分满足
接下来我们要继续做
时间戳等于模型。日期时间
字段，我们现在将自动添加
真的，好吧，这是一个非常简单的 Jango
模型，但我们想要一个模式
那仍然会与这个相匹配
在此处的体重清单中，我将继续
并做模式复制这就是我所在的地方
现在要定义我的模式很多
有时您会在文档中看到它
同样在 API 中，您将拥有您的模式和
我喜欢的 API 模块内的路由
将事物分开并致力于
在这种情况下他们需要做什么，我们将
继续在这里做模式所以
我们将从忍者开始，我们要去
提前并导入
模式和我想做的就是开始
我们只使用纯粹的忍者模式
我们刚刚创建的模型，所以第一个
其中一个将是我们的体重清单
创建我们想要的数据中的模式
发送数据以及该数据的用途
只是我们会在不久的将来采取这一点
第二，但这个想法是我们的
在实际数据中创建
忍者物品你会看到类似的东西
右边的重量清单就是这样的
这里的想法实际上让我们称这个条目为
所以就像失重一样
进入这就是你在里面看到的
我喜欢使用它所在的文档
创建，让它更接近一点
某种数据库操作
模式本身您可以使用其中之一
只需确保您正在关注
逻辑是有意义的
现在的目的是为了让我们
可以接受电子邮件本身，所以第一个
其中一部分是我们将会有
如果我不设置，电子邮件将是字符串
这里等于 None 这意味着它是
现在需要您如何了解更多信息
关于这一点是通过学习恐慌所以
这些图式是基于 pantic 构建的
但他们更具体的是 Jango
这就是为什么我们最终不使用 pantic
直接而是使用忍者模式
作为我们的基类，这样你就可以随时
打开所有这些，你就可以做所有的事情
我们可以离开这里进行各种验证
那是另一次，但现在我是
将继续并将其复制到
是我的详细模式所以细节和
然后创建一个详细信息
这里还有我们的蒂姆邮票
将有一个特定的时间对象，所以
我们将从日期时间导入日期时间
我们要确保我们声明
它就像那个邮票所以基本上这是
现在将是我们的失重入口
这将是我们获取数据的地方
类似于 git 方法的东西
数据没问题，这就是总体思路
这个模式那么我们如何实际采取
首先看看这是如何运作的
我想做的是我想引进
将此模型放入我的设置中，让我们开始吧
继续并在这里安装应用程序
将把它改为第三
派对，然后是我的内部应用程序和
这就是重量
列表没问题，所以我们继续然后返回
进入我们的路线 Rev Run make
迁移和 Rev Run
好的，现在我们已经有了这些
体重清单在这里让我们继续做
我要再执行一个 RAV 命令
来吧，抓住这个并把它带来
进入Python的manage.py shell所以
继续执行 shell Rev Run
shell，这将使我能够访问
那个 Jango 模型所以我想做
这是重量
列表。我们要继续的模型
并导入所有内容，然后从重量中导入
列表。我们也将导入所有模式
所以这里的模式的想法是你
实际上可以使用电子邮件之类的东西
等于
ABC，如果我按回车键，我会得到这个
如果我做 Json 我应该看到回复
一个 Json 字符串，如果我执行 dict，我会看到一个
字典，如果我只做字段名称
我本身就认为该字段值很大，所以
这实际上就是我们使用这个的原因
验证器，因为另一件事是如果
我要把它改成某种东西
与电子邮件 2 不同，我收到
验证错误，当然还有 Jango
视图上的 Ninja 处理此错误
比我们这里的更好
但这只是一般想法
现在如果我想创建一些
我们抓取的 Jango 模型本身的数据
那个模型我们基本上可以做
这里有同样的论点，所以你可以说
好吧，这不完全是
一样，因为我们做对象。创建和
然后我们传递这些参数，以便通过电子邮件发送
ABC 如果我在这里按回车键，它就会
实际上将其另存为电子邮件，这是
根本不是有效的电子邮件，所以我们想要什么
我们想要确保我们的模式是
此处不使用字符串值，但
一些不同的东西，以便做到这一点
发生了，我们继续引入
恐慌，我们导入电子邮件 s Str
类，所以我们基本上设置了这些
发送电子邮件至该电子邮件地址的 Str 类，如果我们
将会这样做然后我们需要
更新我们的pantic安装
requirements.txt 以包含电子邮件
在这种情况下我们将继续
退出我们的外壳然后我会
执行 pip 和 s-rrequirements.txt
我们将保存我们将返回到
shell 我会做一些同样的事情
导入主要针对我们真正的模式
只是想看看架构本身
现在如果我在这里传递电子邮件
然后不是有效的电子邮件并按 Enter I
如果我做了一个验证错误
这里是有效的电子邮件，我不再明白了
验证错误，所以架构是什么
要做的就是确保这发生
与喜欢非常相似，如果你愿意的话
构建 Jino 表格或者如果您是
使用Jingo R框架
序列化器这就是这里发生的事情
它将验证传入的数据并
那么它也将使我们能够获得其他
即将发布的数据，以便我们可以
实际上传递了各种各样的东西
在这些模式项之一中，让
我直接导入模型
很快，所以我要继续
抓住我拥有的物体，所以这是
让我们继续吧
使用有效的电子邮件创建一个新的
地址，这样我就可以继续做对象了。
创建并 abc abc.com
我们应该把电子邮件放在那里
但我们没有，所以让我们去做吧
好的，现在我已经拿到我的对象了
所以让我们继续抓住那个物体
这当然是抓住它，我会
只做最后这应该给我
此处有相同的邮件和有效的电子邮件
这是这个的主要关键部分，所以
我们还可以用我们的模式做什么
我们可以抓住这个模式并且我们可以做
从 om 中我们可以传入该对象
按回车键就有那个模式
将返回的数据
当然如果我在这里做 Json 那会
实际上给我这些数据
某种 API 视图的所以这是
我们将做什么 我们将继续在此基础上继续发展
除此之外还有模型等等
但在我们真正执行该过程之前
并真正扩展了 Jango 的一面
我实际上想要完成的事情
API路由然后实际启动
在 nextjs 内部工作只是为了
确保我们确实有这些东西
有点像串联工作，但我们不是
在后面构建太多功能
在我们真正将其清除之前结束
前面
现在结束我们要做一些
通过我们的 API 检索我们的数据
与我们不同的模式所以我
想做的实际上是再添加一个
在这里，我将把它称为我的清单
模式和想法是我们通过
在此处的 ID 中删除一些多余的
我们可能不想要的字段
这就是这个想法，就是这样
我们有一个详细视图
一个用于列表视图，这样我们就可以
看看两者之间的区别
回到我的应用程序内部，我要
继续创建一个 api。 piy模块
我们将继续从 Ninja 开始
我们要导入路由器并且
然后我们将声明路由器是
路由器现在这将要发生
我们将要讨论的 API 部分
像我们一样继续前进并自始至终使用
已经看到我们仍然可以使用相同的
我们不会那样做
只是我们稍后会实施它但是
这就是这里将会发生的事情
这个路由器我们最终会添加它
进入API本身的URL，所以
然后我们将添加额外的 API
路由器的东西所以这里的想法是
我们将从 at 开始
路由器。这将是简单的
斜线重量列表，我们可以有一个
如果我们愿意的话，尾部斜杠然后我们
去定义列表权重列表
条目，这将采取
请求并且它会返回
那么它应该返回什么
这一切都归结为
响应类型就是我们在这里所做的
我们要打字吗？
导入列表所以我们要给出一个
这里的响应数据类型是
将等于我们的列表
模式所以现在我会做。
我们要导入的模式
让我们看看我们的条目列表在哪里
模式在这里，我们将传递它
作为我们的回应，因为我们是
告诉响应需要是一个列表
该列表中的每个项目都需要去
对于这个重量列表模式我要
继续，现在从我们的模型中做
将导入我们的体重列表条目
然后我会返回体重列表
条目 doobs doall 只是一个查询集，我们
可以执行此处设置的任何类型的查询，但是
我们想确保我们是
返回一个漂亮的查询集
很好，但在我实现这个之前我
也想进入管理员并执行
从模型导入我们的体重列表条目
行政。地点。登记我们的体重清单
条目和我想做的是我想要
去掉重量清单之一
我们在 Shell 中创建的条目
早些时候，所以我要进入
这里的管理员进入这里，我认为
第一个对象有一个无效的电子邮件
我们要继续摆脱
好的，有了这个，我现在想去
现在就把它带入我的路由器
如果你要进入实际的D
你会看到 Jango ninja do 文档
将你的 API 与路由器分开，这是
基本上我建议我们正在做的事情
从一开始就这样做
到底为什么我最终这样做了
我们做的第一个就是列出一些东西
然后我们实际上声明了路由器
那么我们需要做的就是带上它
进入我们的主要 API，我们有几个
我们可以采取不同的方式来做到这一点
可以导入整个模块本身或者
只需使用点表示法，这非常
类似于像里面的包含标签
D Jango 网址 所以我要做什么
我要更换我的路由器
一点点实际路线本身
我只是简单地把它放进去
一个空列表让我们看看它的作用
因为路由器本身在API中我
想要继续做 api。添加路由器
是的，我们已经添加了路由器
这里的元素我们可以传入一个字符串
这里是路径本身，所以这个路由器
这将是我们的斜线重量清单
斜杠，然后再次它会是
我们的体重
列表。 API。路由器如此轻量是的
当然这个模块API的名称是
API 模块和路由器的名称是
我们创建的类的名称或
该类的实际变量
我们现在拥有的该类的实例
这就是重量清单，那又怎样
我们遇到了导入错误
我们有一点问题
路由器本身用于此 G 方法或
至少看起来是这样所以我只是
重新启动服务器，让我们看看
看看这个，我们将进入我们的 API
现在进入Weit名单并进入决赛
在这里斜线，我们得到的是哦我
没有写 S 我可能应该写
在这里放一个 S 让我们把它放在那里然后
我们将继续刷新，有
我们的列表值很自然地我们可以添加
更多内容在这里，我们想要做到这一点
API 但因为我在这里得到了这个 ID
我想继续使用该 ID 并且
只需将其放在此处的尾部斜杠处即可
在最后所以重要的是
请注意关于此路由器的一些事情是
无论 API URL 是什么，都将是 sub
最终你可以拥有很多
这里有不同的 api，你只需
需要改变你定义对方的方式
这样你就可以执行 API V1 并来
一路通过并执行API V1
通过然后基本上如果你结束了
在你的网址中这样做你会
想要使用 API V1
这里的想法以及为什么这些路由器
真的真的很有效而且很强大
因为我们可以将它们转移到其他地方
api 以及呃或我们的其他版本
API 也是如此，我们也可以迭代
这些也是呃所以你可以随时
改进你的 API 路由等等
好的，但我们想真正看到这一点
细节视图所以它实际上不是一个整体
与我们刚刚看到的有很大不同
唯一的区别在于如何
我们实际上是根据以下方面来处理这个问题的
网址和请求，所以我要去
在这里粘贴到下面
现在的回应只是
我们将更改其中的单个项目的架构
稍等一下，接下来我们要做的是
使用大括号将其视为
在这里进行字符串替换，我们就这样做
类似于条目 ID，这是一个
变量我们可以随意命名
想要我们放在这里的任何东西
在这里，理想的数据类型是这样的
也会被验证，所以如果你把
在这里的字符串中它可能适合
ID 但总的来说你想要得到
实际的数据类型
在本例中它是一个实际的 ID，因为
这是 Jango 模型的默认值
你可能知道它本身，但也是
通过查看迁移进行验证
本身你可以看到有一个字段
在这里称为 ID 显然我们只是
看到我们的模式也适用于我们的
列表视图，但现在我们的想法是
这个 git 和这个回复，嗯，你知道
条目这将是实际的
响应本身，然后是实际数据
我们要改变这个来增加体重
列表
条目我想更改架构本身
所以回到模式我会继续
抓住细节
架构将其降低
大多数时候此时此地当你
实际上获得一个 ID 并且你正在寻找
杰诺出事了，真的是这样
来自 Jango Dosh 的好功能
快捷方式，如果您导入 get 对象
或 404 这非常好，因为我
那么可以做的是说 object equals to get
权重列表的反对者404，然后
传递任何类型的参数
那个字段，这样你就可以添加一堆
如果你需要的话，可以在这里争论，但是
现在我们开始吧，我实际上可以使用这个
请注意，标准 D Jango 得到
对象或 404 标准请求项
确实有效，所以如果我要刷新的话
我已经得到了我的条目 ID，让我们来获取
去掉我没有的尾部斜线
实际上那里有一个我们走吧
前面并在后面加上一个尾部斜杠，然后
如果我们在这里刷新，它适用于两者
现在无论有或没有 tra 和
斜线，但我们现在有更多
有关该权重列表条目的信息
任何时候如果我就像哦我
我想把 ID 放在那里
将 ID 放入其中可能是个好主意
我可以继续添加
如果我是这样的话，那就让我走吧
提前查看上次更新时间
然后我会抓住并创造一个新的领域
在这里，我们将继续说已更新
现在这只是简单的自动现在不是
只需添加但现在自动
保存或更改我们可以这样做然后我们
运行我们的迁移，所以呃 RAV run make
迁移
然后Rev Run
迁移很酷所以我们做了一些
改变，我们的模式现在需要
也更新了，所以继续复制
然后我们就更新了 保存它
并重返 API 热潮
一切都改变得如此之快
可以添加新字段更改它们并执行
当然，我们仍然需要
正在摄取数据，但在开始摄取之前
数据我想要的是我实际上想要
将 nextjs 放在前端
实际上与我们当前的事物进行交互
已登录并查看
其中一些重量清单
现在我们要做你的第一个项目
当然，使用 nextjs 进行 API 请求
现在进入我们的 Django 后端
这里的想法是让 nextjs 调用我们的
当我们需要时詹戈回来
具体数据，这就是我们要做的
要做，我们将这样做
使用按钮我就要去
向前并在我的里面放一个按钮
主页在这里，这将是
查找数据这个按钮很简单
到目前为止，我们将继续进行 mpm run
开发，这样我们就可以在我们的
本地主机如果我打开它我可以看到
这是我的按钮，没有样式
我可以点击它我可以做各种各样的事情
现在的事情就是我想要的样子
数据至少首先是通过使用
fetch API 现在 fetch API 已构建
到 JavaScript 中，这样你就可以执行 HTTP
如果您熟悉的话，现在就提出请求
python 和做 HTP 请求你知道
有一种内置的方法可以做到这一点
使用 python 但你可能必须
安装额外的工具然后制作
确实好一点
我们要用 nextjs 做什么
我们也将从
内置版本，只是获取
API 嘿，你知道什么？
函数实际上允许我们
正确地在行内执行此操作
page.js在这个home里面
函数本身我们就要去
现在将其粘贴到此处，即使
您没有查看 Mozilla 文档
fetch API 我想这件事
首先我们非常简单
做一个请求，这就是发生的事情
发生在这里然后我们等待
响应通过然后我们记录
我要改变这个回应
从电影到简单的数据
然后控制台日志数据而不是日志
我们要继续拍的电影
获取类似的 jeno API 数据
是的，所以我将把它保留为
函数本身，当然我们必须
改变API inpoint本身所以我
我要做的就是获取 hello world API
重点并稍微做一点
修改为Json数据
我们只需将其更改为消息
然后把大括号放在周围
那里的字符串现在是我的 Json 数据
去确保我的服务器
仍在 D Jango 一侧运行并且
果然是这样，我们也可以
通过进入来验证这一点
网络浏览器，只是做一个快速的
刷新一下，就有我们的 Json 数据了，所以我
继续抓住这个切入点
现在我们有了一个 API 入口点
可以在我的 JavaScript 中调用你
现在知道函数或我的reactjs项目
不知道的人根本就没有反应
我们要看看这个然后做什么
我现在做得很好，这个想法是当我们点击时
我们希望触发这个按钮
我们希望它能够真正运行，所以我
我能做的是我实际上可以做另一个
async function 异步函数
被叫句柄
单击就像
我们可以调用这个 git API 数据
这个异步函数本身意味着
我们只是等待调用
功能所以是的这是异步的
它是异步发生的，但是
想法是如果你想打电话
异步你只需调用 wait 即可
就像那样非常简单
就其工作原理而言，即使您
没有完全了解正在发生的一切
现在在幕后为我们服务
能够点击这里，这是其中之一
使用reactjs的好处是你可以
实际上只需点击这里即可
任何按钮上发生的事件
相反，我们实际上可以直接调用
那个点击，所以这就是点击
处理程序现在位于该单击处理程序内部
我们可以调用该 API 函数，这样我们就可以
继续保存那个以及什么
我们将在这里看到本地主机的内部
我们有这个函数句柄点击
所以我们这里说的是
将其转换为客户端组件
有点特殊，很难
了解发生了什么，特别是如果
你只是来自reactjs，比如
你从未使用过 nextjs 但你使用过
react 这是一个非常非常简单的修复
任何时候你想做前端
事情，你想确保
您正在处理的组件是
前端你刚刚在这里使用客户端
这将确保一切
此页面上发生的事情最终意味着
所有这些东西都是很好的反应
正在渲染的组件
前端我们会看到后端的东西
很快就会在 xjs 但我的想法是我要去
看看控制台这里我要去
单击“查找数据”，它确实获取了它
实际上按照您的要求在这里完成了请求
可以看到它说access to fetch at from
原产地被封锁，所以换句话说
我的本地主机我实际上无法执行此操作
向我的本地主机请求的端口是
不同，实际上域是
IP地址也不同
一个只是本地主机，如果我
实际上把它改成了你知道的
127.0.0.1
如果我这样做的话，在我的 nextjs 应用程序上
现在嘿它仍然呈现得很好
是因为我正在使用本地
开发环境如果我点击查找
数据再次失败，所以这是
它失败的原因是因为Jango
Jango 内置了安全性，因此网络
浏览器不能只请求其他东西
来自其他网站（如网站）
不能随意要求其他
网站的数据不是这样的
现在当然可以在我们的终端上工作了
仍然可以执行该请求，所以如果我去
进入我的终端并执行同样的操作
在同一个 API 端点发出请求
工作正常所以我没有
这不是关于身份验证
身份验证这是关于某件事的
称为核心，这是跨站点请求
伪造这是为了防止交叉
网站之间的污染，如果您
所以我们当然需要更新这个
在膝侧，但这确实是
尽早发现的重要错误，因为
你将来可能会看到它
尤其是当你投入生产时
所以如果你要部署这个 nextjs
立即申请并尝试致电
您可能会遇到课程错误的任何 API
如果您尝试调用自己的 API
即使它与你位于同一个域名
实际上仍然可能有错误
核心但你当然不能它会继续
有点难以确保
适用于我们可能看到的同一域
稍后实际部署，但想法
这是我们需要解决这个核心问题
现在 D Jango 内部出现错误，以便我们
nextjs实际上可以完成这个查找
让我们看看如何做到这一点
正确的
现在解决跨源资源
共享或核心我们将继续
并实现 D Jango Kors 标头
亚当·约翰逊（Adam Johnson）这是一个很棒的套餐，
让它真的很容易管理
核心，我们稍后会看到
当然，我们的想法是我们需要添加
Jango 课程标题为我们的 Jango
项目让我们继续并跳入我们的
Jango 项目在这里符合我们的要求
我要带上我的 Jango 课程
现在这里有标题，我们将进行 pip
安装所以 pip install 我们的
requirements.txt 接下来是我们需要的
我们需要将其添加到已安装的
应用程序，所以让我们继续吧
源进入我们的设置模块
此处安装的应用程序带来了课程
标题接下来的事情是我们的
中间件我们需要把它放在上面
通用中间件现在这个安全性
中间件很重要，因此当它
完成所有其他请求或
当它完成请求核心时
中间件将验证请求
放开一切
如果可能的话，通过其他方式
当你向 D Jango 提出请求时的话
请求发生中间件所在
就在中间检查东西然后
然后它实际上会将其发送回来
你总是可以研究中间件
还有很多，但这个想法是每次你
在 Jeno 中向后端发出请求
中间件一般都是这样工作的，但是
这个想法是当你提出请求时
中间件是在请求到来之后出现的
但在响应发出之前
这就是这个想法，接下来会发生什么
我们想要的是我们想要配置
核心允许起源，所以这将是
也进入设置我要去
把它放在根的正下方
在这里我们可以看到所有的配置
这些允许的起源，以便当你进入
您想要的产品
现在这里有不同的生产来源
有很多方法可以扩展这个功能
jangu 课程标题包有一个
很多功能，但这里的想法
对我们来说，我们想要摆脱
这里的例子我们想要本地主机
我们想做 3000 这当然是
默认的 nextjs inpoint 但我们也
想要其他默认值
可以使用 which course 指向
同一个项目，但我们就这样了，所以我们
将其添加到此处，这将允许
这些东西提出请求
让我们继续看看这是否结束
到目前为止我已经把所有的东西都保存在了
我无需刷新的设置或
类似的东西回到我的 nextjs 中
项目我想确保
这看起来仍在运行
让我们继续看一下
网络浏览器 我要继续
并尝试再次查找这些数据我会
刷新这里进入控制台
查找一下，就有该数据
就在那里，所以我们也可以把它放在
更具体一点
其中 URL 是通过添加
核心 URL 拒绝或常规
URL 或路径的表达式或
您可能想要允许的模式
为此，在这种情况下，我们只是做
API 所以允许的起源只是
解决了我们刚刚注意到的问题
我们实际的 nextjs 项目结束了
控制台正确注销该数据
有很棒的超级简单的方法来做到这一点
但重点是我们需要看到
发生错误以及我们如何解决它
之后我就是这样发展的
我建议你这样做
作为
现在 fetch API 真的很棒
对于基于事件的获取是否是
获取数据或发送数据，所以在我们的
如果事件是单击一个按钮
另一个事件会给我们一些数据
可以提交一份表格，然后
发送一些数据，以便我们使用
fetch API 但我们实际上想要
查看返回的数据，让我们
看看该怎么做
首先我们要做的是使用
你知道这里有一个列表或数组的东西
我们将继续导入
称为 use State 的东西，这是
从反应中直接使用状态允许我们
为我们的数据设置一些值，所以在我的
如果是这样，我将继续将其设置为
null 或者让我们继续设置它
作为一个空字符串只是为了使事情成为
对我们来说有点简单，但想法是
实际数据，所以我们称之为
数据字符串，然后我们将进行设置
此处的数据字符串为
好吧，我们的想法是设置数据
字符串我们会来这里，我们会的
类似于 json 的东西。字符串化那个
data 基本上将其转换为字符串
所以我要继续
渲染出该数据字符串，就像
就在此处的低数据元素下方
带有 div，我就继续
把数据字符串放在那里，那又怎么样
看起来现在什么也不是
当我点击那个按钮时
渲染出那些东西但是如果我
希望这立即到来，但不
基于一个事件，这意味着我们
需要改变我们的工作方式
获取以及如何呈现该数据
字符串，它会是什么样子
那么只是略有不同 我不是
将在这里进行字符串化
我要做的就是把原始数据和
然后我会在这里放一个空的对象
对象一个空字典，它被称为
JavaScript 内部的一个对象，但是
那么想法就是在这里我们将会做
杰森
为此进行字符串化
具体数据本身是正确的，所以这个
现在是我们的响应数据
设置这个然后我们就可以
更像数据然后设置
数据这可能有点多
我最终会做什么
那个事件处理程序，所以现在当我们
实际上我们刷新页面
单击该按钮，效果很好，所以我
想要拿很多同样的东西
概念但稍微改变一下
特别是按照我的方式获取数据
改变它是通过使用一个名为 s 的包
SWR 这将使您能够
真正自动获取数据
有效 非常有效 然后
如果你需要刷新数据它也可以
真正有效和高效
我们在这里看到的是我们有
定义某种获取函数或
回调Handler然后我们也继续
并调用使用 S SWR 来获取数据仇恨
获取是否确实存在错误
进行错误处理，这不是
我们在 fetch 版本中所做的事情
然后还有是否是
正在加载所以第一件事是我
要去啊，抓住这个并放进去
那里的获取器就像那样
注意到它是 fetch 本身，但因为它是
不是异步我们做了一个异步
函数在这里，这就是你处理它的方式
它返回一个承诺所以它实际上
以这种方式处理它，它也会做
错误处理以及我们的内部
用过 s SWR 呃你知道钩子本身所以
考虑到这一点，我将继续
并使用 npmi SWR 安装 uswr ，其中
当然也许你已经知道了，但它是
mpm install s SWR 仅使用 I 是
做同样的事情的捷径很棒所以
一旦你安装了它，你就会
继续导入它，所以继续
现在改为从 SWR 导入 use SWR
把整个东西放在这里
显然你仍然可以保留那些
在这里我们现在可以做常量数据
然后使用我们要传入的 SWR
URL 本身，然后传入
fetcher 所以我们实际上可以做到这一点
查找它与我们所做的非常相似
在这里，但当然它给了我们其他
诸如错误之类的事情并且正在加载
布尔值是加载还是数据
或错误本身是否
现在我们不需要这样做了
那个按钮不再是因为数据是
只是会自行查找
我还可以做其他事情
在这里，也许我们可以说
如果正在加载那么我们可以返回
一些不同的东西所以如果我们
看看这里我们看到我们有一个
几个不同的选择实际上是
加载和错误所以让我们继续
保存它，现在我们应该看到什么
马上就是你好世界，如果我
刷新一下就显示正在加载
它实际上确实加载了这个页面
现在超级酷，我们什么时候使用 SWR 这个
用于获取请求，这差不多了
这就是你要使用 SWR 的时候
大多数时候你不会发帖
请求加载时你会做一个 get
加载 post 请求时的请求
很可能与某种有关
换句话说，页面上的 EV 事件
你不想自动发送
发布您自动想要的请求
发送获取请求，所以这将是
加载此页面，真的真的
很高兴我们能做到这一点，但是当然
现在我们可以看到如何获取数据了
让我们实际看看如何发布数据
我们如何实际发送
这就是我们继续前进的方式
向我们的 API 提交数据是我们要做的
创建一个类似于 HTML 表单的表单
用户可以填写然后我们将
提交时获取表单数据
然后我们继续
获取该表单数据并将其发送到我们的
现在直接使用 API 就可以了
通过跳转到应用程序来做到这一点
我们将继续前进
创建一个名为登录的新路由并
页。 jsx 您可以在您的中使用 JS 或 jsx
nextjs 应用程序 jsx 非常好
用于完成和各种代码
检查 VS Code 内部的想法在这里
这将是该页面的 URL
Slash 登录的路径就是这样
当你进入登录页面时
nextjs 中的名称和约定
我们接下来要走的路
在这里定义组件
是导出默认值，然后是函数
命名本身的实际名称
我们只需调用 Page 函数，然后
我们会退回像你这样的东西
知道在这里登录是对的，就是这样
这就是创建品牌所需的一切
新的路线和页面，以便它在内部路由
现在这里当然它的名字是
页面就像根路由中的 page.js
主页的根路径就是
只是 page.js 就是它的名字
主页在这里，但您可以调用此页面
也没什么好说的
您的申请有什么不同
除了你改变的事实
该函数的名称换句话说我们
如果我们愿意，可以调用此登录
但没必要你可以
将其保留在页面中，因为一旦您
了解这实际上是如何结束的
工作最终非常
简单所以这里的想法是
我们已经在这里登录了，所以我们开始吧
现在就看一下该页面
所以如果我们进入 SL 登录，就会出现我们的
登录页面当然我们有一些
这里发生的样式问题
这也许是我们想要的
地址，但现在我就继续
并在这里引入一个 div 类
我要做的就是继续
并给它一个我们将给它的高度
100% 或者让我们做 95
VH 这是一个 Tailwind 类
允许我拥有 95% 的页面
正如你所看到的那样，我也可以走了
继续做一些类似 div 类的事情
名字，我们会做麦克斯做
像 MD 这样的东西，然后是 MX Auto 和
我们会做 py5 这会给我们
就外观而言稍微好一点
我们的页面最终会是什么样子
就这样，我们一切顺利，我自然可以
添加一堆 Tailwind 类
来这里是为了让这变得更好，但我
暂时保持原样
实际上构建了表单元素
精灵所以当谈到我们的形式时
我们要做的就是定义表单
就这样，然后我们就
继续并定义其他一些
按钮本身的方式
实际提交的表格将会是
只需按一下按钮，然后我们就可以输入我们的类型
正在提交，然后我会继续
发送或者暂时称之为登录
接下来我们需要输入，所以输入类型
作为文本，我们给它起一个名字，你会看到
这个名字只出现在一个
那一刻我会继续给出名字
用户名，然后我们继续
添加您的用户名占位符并
然后我们将重复这个过程一次
我又把资源管理器拆了
在这里再次重复这个过程
密码的类型，而不是
我们要做的就是用户名
密码，当然还有你的
密码所以没什么特别的
关于这个，这只是一个 HTML 表单
还有其他方法可以让这变得更好
在react和xjs里面我们要
暂时保持原样，所以我们
我们需要做的是添加另一个
事件处理程序因此形式良好，他们得到
提交 这就是它的工作原理，所以你
可以做类似 onclick 的事情，但是
没有多大意义
表格本身的条款除非你想要
查看何时有人点击该表单
这可能是一些有趣的事情
在我们的例子中，我们想做点什么
就像提交时我们实际上想要的
为此创建一个处理程序，以便
那么问题是我们实际上该怎么走
关于很好地创建这个处理程序
首先我想确保
我的你知道这个页面使用的路线
客户我想确保这是
在前端进行处理，因为我们是
在前端正确处理事情
现在我们要做的是
继续定义我们的函数并
它将处理提交并且它
将一个事件作为默认值，然后我们
实际上把它放下并放进去
就这样我要继续
并控制台记录事件和
事件目标
所以我们可以看到发生了什么
现在提交了另一件事，你
可能想做的是你实际上可能
想要将所需的每一个
这些输入，因为那些应该是
需要，所以让我们继续刷新
在这里输入一些乱码以及什么
你注意到它会自动带来
URL 的用户名和密码
这是因为我们的活动本身并不是
防止出现默认值
至少在这个表格上还没有，但是什么
如果我们检查该元素，我们可以看到
进入控制台我们应该能够
看看我们登录时实际上似乎
稍微改变一下页面，如果我
看看这里的不同论点
实际设置将下降
如果我这样做，请单击此设置
在这里保存日志并输入一些内容
胡言乱语 我可以看到确实如此
将我重定向到新页面，但我也可以
查看事件和表单本身是
随着控制台日志的出现
我想做的是我想要阻止
默认事件以这种方式发生
我们所做的只是简单的事件
防止和默认这意味着它
不会重定向我的页面，不会的
类似的事情我现在可以继续
并摆脱所有这些并放入一些
这里乱码点击登录通知
现在没有导航，它只是显示
我觉得这个活动本身很棒，所以就是这样
真的很好，它实际上让我能够
获取该事件数据并执行各种操作
用它来做东西，我们需要做的是
我们现在需要把它转换成Json数据
我们想将其转换为 Json 的原因
数据是这样我们就可以实际发布它
可以发送到其他地方
所以我们要继续做我们的
你知道我们称之为我们的选择
请求选项和那些选项
最终会有身体
它将接受这个 Json 数据
我们还将继续进行
这里的方法称为简单的 post 和
那么我们可能还想添加一些
headers 以确保后端
我们将要发送此内容的 API
数据将了解
内容类型本身是应用程序 Json
所以这是准备请求
此后不久我们将使用 fetch 来
带有这些请求选项的 URL，但是
当然我们需要制作Json数据
首先是原始形式发生这种情况的方式
数据是我们需要继续说的
const 表单数据等于新表单数据
这个类就在这里内置于
JavaScript 特别是在客户端
然后我们可以获取该 event.target
这将获取所有表格
数据来自表单本身，因此所有
输入这里的数据你可以
单独处理每个输入，如果您
我们想要有一种方法可以做到这一点
不需要这样做，我只是在做
整个表格从这里开始，以便
把它转成Json我们不能只做json。
对该表单数据本身进行字符串化
不幸的是我们所做的是
做 const 对象数据或对象比方说
从
形式 this 也等于对象
内置于 JavaScript 中，然后从
我们实际上可以获取该数据的条目
就这样，我们三个就这样了
这些步骤需要采取形式
data 原始表单数据并将其转为 Json
这样我们就可以执行 fetch API
打电话到我们最终想要的任何地方
如此自然地进入登录 URL，我们可以
只是在这里作为常量
时刻并执行 const 我们会调用
这是我们的登录网址
这将回到我们的
Jango项目在哪里 在哪里
将会很好地找到我们的登录网址
让我们继续看一下
API 本身只是作为我们回顾一下
找不到该页面，所以我们可以看到
正是所有的 api
我们现在可以使用
令牌对并注意没有
尾随斜杠，但这将是
至少现在是我们的 API URL，所以我们就去
并将其作为我们的登录 URL
所以这就是我们的脚的称呼
我们想做，但我实际上想要这个
是异步的，所以我会继续
将其更改为异步
功能我不需要改变任何东西
否则事件处理程序自动
可以用这个，这太酷了
所以我们想要的是我们的回应
是一个湿漉漉的东西，所以得到了
回应任何可能的结果
然后我们就继续前进
说如果响应好如果是的话
好的，如果响应最终有效
然后我们可以说 r 数据等于
到
等待，这将是我们的
回复。 Json 实际的 Json 响应
来自 API 本身，然后
我们将继续并控制台记录该记录
出为
好吧，考虑到这一点，我就去
回到我的下一个 J 应用程序，我们将
继续做一些胡言乱语的第一击
登录我们不会看到的是请求
通过或实际的控制台日志
行不通，所以让我们回到我们的
网页在这里，实际看看这个
控制台，我们实际上不会看到
这些数据根本没有，所以让我再次刷新
在这里输入一些乱码，我得到
未经授权的 401 比
几乎我们见过的任何其他东西
除了 hello world 请求之外还有很多其他的事情
但它向我们表明
未经授权，现在有错误
这就是我实际上要做的
我要继续改变
这只是我们不知道的数据
在我们其他任何地方都将数据作为常数
有表单数据和类似的东西但是
我将把它作为数据保留下来，现在
我将继续并只是控制台日志
该数据没问题，所以我们会保存它
刷新这里再添加一些
乱码现在登录它实际上
在这里给了我一个错误，所以实际上
确实允许我注销 Json 数据
即使这是一个无效的响应
这实际上非常好所以一旦我们
得到同意我会继续说
控制台日志并登录类似
那将会是成功的
结果在那里，所以我实际上想记录
与用户在一起，所以我要做
我的任何用户和我的任何
一旦我这样做了密码你知道什么
这是我现在拥有的 API 凭证
登录到我的
系统现在我们有能力
从我们的 Jango 生成 API 令牌
我们想实际看看后端如何
我们现在可以重用它们这里的逻辑
重用它们就是存储它们
在我们的应用程序的某个地方，以便
任何时候我需要向
jeno 后端我可以使用相同的令牌
再次在这个过程中，所以其中之一
你可能会做的事情就是你可能会跳
进入你的 nextjs 应用程序并查看
称为 cookie 的函数，而不是
阅读任何内容，而不仅仅是复制和
将 cookie 粘贴到
页面保存它，您很快就会得到什么
当你这样做时，你会发现它不能
编译它需要一个服务器组件所以
你就像好吧，它被标记为
Ed 客户只需将其更改为使用即可
一旦您将其更改为，服务器立即
使用服务器你应该知道这是
可能不是我们想要的路线
呃，至少在这个页面上
因为它不会再次编译
这将会造成一些破坏
我们所以我们会继续把它改回来
正在使用的客户端并摆脱它
cookies 方法本身现在又是另一回事了
你可能会做的是你实际上可能
使用称为本地存储的东西
使用内置于呃你知道的
JavaScript本身我实际上可以设置
这里也有一些项目并说些什么
就像令牌，比如说 ABC 等等
让我们继续吧，把它放进去
就在一开始所以如果我
要在这里刷新呃你可以
实际上看到你本地的内部
存储你的令牌在那里和那里
如果我们能这么容易地看到它，那就是现在
这意味着其他 JavaScript 可以看到
它也很容易，这不是什么
我们想要所以我们不想使用本地
存储要么
那么我们实际上该怎么做
这口井我有点提到过
我们实际上确实使用了服务器
实际的cookie，所以我们确实想要
使用服务器，我们确实想使用
cookie 那么我们实际上该怎么做
这样做实际上让我们进入
xjs 做的另一个组件有一个
我们可以使用的服务器端组件
以及我们如何定义的方式
nextjs 的不同方面和
路由在此文件约定中
到目前为止我们所做的只是 page.js
我们实际上一直在构建我们的
页面，在某些情况下您可能会有一个
在某些情况下，您可能会看到服务器侧页
当我们想要时有一个客户端页面
做客户端组件我们做客户端
调整页面大小，换句话说，当我们想要时
让像我们的句柄这样的东西提交
方法在这里或者如果你想使用
状态或者如果您想使用 S SWR 全部
这些东西需要在 Ed 客户端中，如果
我们希望将其呈现在背面
结束了，我们也可以做到，所以我们走吧
继续做一些类似 API 页面的事情。
jsx 并粘贴到我的页面中，以便
一旦你这样做了，我们实际上就可以把
假设使用服务器，如果我
再次将其更改为使用服务器我
进入 SL API 我可以看到它
说我们需要将其设为异步
这里的函数是异步函数，所以让我们
继续执行默认的异步函数
保存那个你知道吗那是我的
页面，但这实际上正在渲染
在服务器端它不是
在客户端中呈现，所以如果我想
使用类似你知道我的数据的东西
设置我正在使用的数据
声明，我们将继续执行 ABC 操作
然后我们输入我的数据
现在编译失败了
你不能在服务器端这样做
那不是最终的结果
这就是我们想要的关键
确保我们不会做
在服务器上反应客户端的事情
到底该怎么办 我实际上该怎么做
存储 cookie 那么我该如何运行它
处理得好，它实际上正在进入
我们将再次创建 API
API 中的另一个子路由是
将登录而不是使用
页。 jsx 我们要继续做
路线。 jsx 所以你实际上可以看到
文件约定内的 this
有一种叫做路线。 jsx这些
路线允许我们实际掌握句柄
这里有不同的 API 方法，所以
路由我们想要处理的方法
就是简单的 post 方法，就是这样
我们再次可以真正投入使用
服务器再次出现在这里，现在我实际上可以
带上 cookie 标头我就可以走了
继续并用这些饼干来做
就像现在当你确实有一个
像这样的路线是您需要的发布请求
返回某种响应
我们要做的就是导入下一个
响应然后我们可以继续做
就像 Json 之类的东西我们就放
在这里的一个空字典中，然后做
目前状态为 200，因此
想法很好，让我们继续打招呼吧
和世界所以我们现在有两个
apis one 是我们的 Django API，即
我们实际上想使用另一个
一个是我们的 nextjs API，我们仍然可以
使用但它更像是一个中间件
它就像我们之间的中间人
前端客户端向我们的后端请求
我们的 Jango API 响应也需要
也在请求中，换句话说
我们可以从这条路线开始
所以我们要做的方法是
回头查看登录，这不是
将是登录 URL，我可以工作
前端再用more代替
登录 URL 将是
略有不同，我们将
更改它，我将继续复制此内容
一会儿我们会把它注释掉
我只是要把它改成
我刚刚创建的新路线是
API登录此路由就在这里，现在保留
如果我想再拥有一个
我可以做 API 或 ABC SL 的版本
登录正确，然后我可以输入
路线。这里还有 jsx 和路由
基于文件夹名称，所以这
如果我们这样做的话，将是 ABC 登录
方向，但我们并没有这样做
我们将保持它的方向
合乎逻辑，并将其保留在 API 登录处
路线很棒，所以现在我当然可以
实际上用它来提交所有这些
相同的数据，所以我没有改变任何东西
关于我如何处理这些数据但现在
我在帖子数据上看到的是什么
那么我们能做的就是真正得到我们的
数据正在等待 Json 呃请求。杰森
默认情况下参数为
请求，我可以控制台记录这是什么
数据是所以我们要继续
保存并返回到我们的 nextjs 中
在这里申请，我将进入我的
再次登录页面，我们将继续
只需执行我们的登录过程我点击登录我
进入我的检查元素，我开始
进入控制台我看到它说
如果我打开对象本身则登录
它返回的只是 Hello World 中的内容
换句话说，它返回的只是
向我们回应这个回应，那么如何
我们真的能处理这个吗？
我们很快就会讨论的事情但是
我们现在可以使用
cookie 在这里，所以我们实际上可以做
曲奇饼。设定，我实际上可以出发
这里有不同的cookie，所以我们可以做
像名字和令牌之类的东西和我
可以设置该值
所以我们就将其保留为 ABC 并
那么我们只能做 h P 为真所以
JavaScript 无法访问
所以我们会继续说限制呃
客户端 JS 然后我们可以添加
这里还有其他一些有帮助的东西
和这些饼干一起呃所以
就像同一网站严格一样
在我们的例子中我们所处的安全模式
开发模式，这样我们就可以放一些东西
像这样所以它是假的
默认然后我们可以做类似的事情
最大年龄也在这里，这样就
现在我们可以设置 cookie
也拿上饼干，我们走吧
继续并执行 const off token 我们将
做
饼干呃
doget，现在我们要走了
向前并获得该令牌
本身然后我会继续
控制台将其注销或实际上
让我们继续并回显它
回复所以我会继续说我的
cookie，我们开始了，所以最初是
G 没有什么是正确的，所以应该有
没有人可以开始所以让我们继续吧
并刷新我们的客户端，然后执行
我们的
提交，这样我们就得到了 hello world
和原来一样让我们提交吧
再次，现在我们可以看到有一个
饼干进来了呃和所有的
那东西太棒了，所以这就是
向我们展示我们现在可以使用 cookie
但当然我们永远不会
真的很想用
实际的 cookie 我们实际上并不想要
在我想要的任何地方使用该值
向您展示我们正在努力实现的目标
需要实际将其设置为
API 值 真实的 API 值 可以，所以
这里要迭代的重要部分是
现在如果我们想使用
Jango API我们不会直接调用它
每隔一段时间你的客户
可能可以逃脱调用它
直接在客户端中，就像我们所做的那样
这使用 SWR 这个实际的 git 请求
可能没问题，但问题是如果我
想要将 API 关联起来，如果我
想让用户真正成为
这一部分失败了，然后我需要
为此做一些不同的事情
好吧，基本上我们正在做的事情
那么下一个js就是这样
作为中间人，然后可以
管理关闭令牌，然后
将其发送回我们实际的 API 并
这就是我们将如何使用它
继续前进，这样就很好而且安全
并且 API 令牌无法让你明白
知道暴露
现在当然没有必要，我们需要
完成我们的 nextjs 路线上的过程
实际将其提交给我们的 jeno
后端这个过程就像
很容易，如果我们回到过去
我们的登录页面在这里 我要去
向前并抓住所有你知道的
相关的获取项目在这里并带来它
获取数据后立即进入我的路线
并将其粘贴进去，然后我们就可以了
现在我将把它称为我们的数据
请求数据，我会摆脱这个
控制台在此记录此请求数据
它已经是一个对象或字典
但因为它已经是一个对象我可以
只需将其转回字符串即可
将其字符串化并摆脱这些
其他项目就差不多了
我们现在要好好称呼它
我们可能应该更改登录 URL
抓住我们原来的样子
这次用于我们的 Django 项目
登录 URL 将是我们的 Django
API 登录 URL 或其他更可靠的 URL
名称来解释这次实际登录的内容
URL 就像我们的后端 API URL 或
类似的事情，但当然有一次
我们知道我们最终会得到我们的
我称之为响应数据
响应数据，这就是我们的
将用于抓取和设置我们的cookie
所以我现在唯一要设置的是
将基于访问权限
令牌所以这将是我们的关闭
令牌，这将是我们的
响应数据，它将是点
呃访问然后我会继续设置
就在那里，也是我存在的原因
继续并纠正它
因为我要再一次
继续并控制台日志得到它
我会继续说
这里有类似获取 O 令牌的东西
它本身和你所看到的只是你
需要传入O token的名称和
让我付出了代价
令牌然后我们将继续
控制台注销那是什么，继续
并保存它并确保一切都正确
仍在运行让我们继续做我们的
再次登录
我什至不需要改变任何东西
关于前端，但有我们的
登录这是关闭令牌
尝试去做并且我们得到了一个值
在这里因为我做了一些测试
在这里呃，但它实际上允许我们
如果你要逃跑的话，请带上那个关闭令牌
再次执行此命令肯定会
在这里展示你的关闭令牌，这样你
可以从令牌中获取该值。
值，现在你应该能够看到
当你调用时实际的令牌本身
这个请求所以我们继续运行它
让我们继续看看发生了什么
这里我们遇到了一个小错误
哦，这是我的关闭令牌，让我们尝试一下
再次并记录
进入并返回后端
我们可以在里面使用一个令牌
我们未来的要求以及
当然我们可以在其他方面使用它
只要我们认为合适的地方
存在于服务器上并且在xjs中
服务器本身当然会
未来变得相当重要
另一件事当然是如果我们
确实有令牌，也许我们不会发回
登录的能力，而是我们
防止它发生，因为在
成功后我们的登录页面
可能不需要让他们登录
所以这将是某种
重定向到我们想要在里面做的事情
nextjs 呃，这是我们会做的事情
只需一点点
现在我们要创建一对
我们的 o 令牌的便捷方法在这里
这样我们就不必做所有的事情
每次cookie的配置
而是利用这些便利
方法，所以我们想在任何地方设置
关闭令牌或删除它或得到我们想要的
能够在里面重复使用它
我们的应用程序在这里，我们将去解放，我会
就做吧。 jsx 这就是我们要做的地方
所有这些，所以第一个是
简单地获取令牌，它将
好好回来我们已经看到了
在这里我们有我们的令牌
像这样，所以我会继续带来
这显然意味着我们
基本上需要带回来，如果
令牌是否存在，所以提出一个问题
在那里做标记，这会给我们带来
可选值，因此不会返回任何值
或实际值本身，当然
我们需要像我一样导入cookie
尤其是在 VS Code 中，这才刚刚开始
键入它，然后查找
在出现的下拉菜单中完成
好的，现在我们已经有了饼干
我们已经得到了令牌，让我们开始吧
继续并导出，我将继续并
还为设置令牌做一些事情，然后
最后删除
令牌很棒，所以这基本上就是我们的日志
这将是我们的日志
然后这适用于我们所有的 API
请求基本上没问题所以设置
令牌我们需要在这里做什么
让我们继续获取原始集
我们有令牌所以我要走了
继续复制这个，然后我们就
继续并返回该值
我们要继续设置它
做这一切这显然意味着我们
需要带入我们的关闭令牌权利
在这里，这将设置一切
对我们来说，然后我们应该的年龄
可能作为某种常数
所以我们会做常量，我们会说令牌
年龄等于简单
出于目的，我们将继续使用他们的 3600 I
想想是一个小时呃但是我们就这样
现在我们有了这些不同的方法
现在是时候实际使用它们了
回到我们的登录路径而不是
cookie 在这里我现在将使用该组
我刚刚再次创建的令牌
凭借 VS Code 的便利性，它会
为我们导入它然后我们就可以
现在传递该令牌是另一件事
我们可以用代币本身来做
我们可以进行访问和刷新，这样
刷新令牌可能是我们想要的
也可以这样打开包装
然后我们继续并回到
复制这个，这将是
设置我们的刷新
令牌，这只是简单的
刷新好，所以在我的删除令牌中我
需要更新并更改它
简单地删除，我们将返回它
作为我们的主要价值，事实上我会删除
这里的代币 Al 在一起，还有这个
也将是我们的刷新版，所以两者
删除我们的代币方面的事情
好的，然后我们的下一个就是
我们已经设置了刷新令牌
需要调用它设置
刷新令牌，这不应该是日志
退出，而是登录，不知道为什么我有
它再次注销但无论如何我们已经
已设置令牌设置刷新令牌所以让我们
将其放入设置的刷新令牌中
我们的刷新令牌很简单
接下来我们要做的就是得到
这两个令牌所以我们继续
获取令牌并获取刷新令牌并且
然后当然我们在那里刷新
太棒了，所以我们也可以提供令牌
name 所以我们会做 const token 呃 name 和
这将只是简单的象征性的
然后 const re uh 令牌刷新
name 是关闭刷新令牌
允许我们随时更改它，如果我们
想要，这让事情变得有点
当我们犯我们想要的错误时会更容易一些
随时更改事物名称 uh
就像我时不时会做的那样
特别是如果你正在经历并且
想要构建呃不同的代币
名字和一切都好所以我们开始吧
我的令牌现在又回到了我的路线中
我已经设置好了，让我们开始吧
在这里，这将是我们得到的
代币价值，我将继续获取
我们的刷新令牌以及我的刷新
token 等于获取刷新令牌并且
控制台记录这两件事
没有该可选值的情况下
此处没有此问号的令牌
你可能会遇到问题
该令牌本身可能拥有
有些问题对你来说没关系，所以就这样
记住，让我们继续前进并跳回来
进入我们的登录页面，我们将继续
登录看看一切是否正常
看起来登录得很好并且
然后在这里我们看到我们的
登录令牌以及我是否要提交它
我应该再次看到我的两个令牌来了
嗯，看起来他们也是
在这里有控制台日志是的
其中有一个，还有那个
另一项很棒，所以我们现在有了
能够更轻松地使用这些代币
所以在我真正开始这个过程之前
做任何与令牌相关的事情
就像使用令牌本身一样
请求我实际上想实现一个
注销页面，因为它会很公平
现在我们有了这个就很简单了
删除令牌方法我要去
继续并创建一个注销页面，但是
在我创建我想要的页面之前
使 API R 位于 nextjs 中
在此 API 内部，我们将
继续并退出，然后我就走了
向前并创建路线。 jsx 和
我们将继续进行出口
函数不是默认函数而是
导出同步函数
的帖子，它有一个请求作为
争论，现在我们继续
构建这个所以请记住它
不是你所看到的默认函数
有了这个，那是因为其他
方法也可以在这里，它是
只是它的构建方式
方法只是一个函数
导出好所以我们在这里做什么
我们真的知道删除令牌吗
所以我们能做的是我们可以使用
删除标记方法就这么简单
删除令牌，然后直至 API
担心这几乎完成了，我们
可以返回下一个
响应和基本上的状态代码
喜欢200个赞就成功回复了
删除这些令牌所以我也会去
继续并执行 const 我的令牌响应或
沿着这些思路我们会
控制台将其记录下来，好的，这就是方法
我们要继续并注销这个
实际上只是从中删除了这些令牌
我们当前的会议（如果有的话）
所以这是我们要做的另一件事
在我们去之前先检查一下
接下来我要继续
复制登录页面，然后我们就可以了
继续并将其更改为日志
所以这不再是下一个
应用程序 API，但现在它只是
一个简单的页面
前进并渲染，所以我要走了
提前并改变一些事情
这当然与此相关，所以
注销 URL 我们将取消此权限
这里的注销 URL 将是我们的
将我们的数据发布到我们需要的地方
发布此内容不处理提交
可能会更多
就像手柄点击一样，所以我们将其保留为
我也不需要任何 Json
数据，所以我将继续并摆脱所有
然后身体就只是
这里有一个空字符串然后它就会消失
继续并运行所有相同的响应
我们之前见过的数据我可能
不需要控制台记录任何内容
到此为止，我会继续
假设句柄点击将用于
按钮本身，所以我们只需执行一个 on
单击此处该句柄的单击事件
我会一起摆脱 Al 的形式
然后我们就继续说点什么
就像是
您确定要注销某些内容
像这样，然后在班级名称中
我会继续把 BG 呃红色
500和PX3
py2 我们会继续说“是”日志
出来，我们也会把文字变成白色
然后悬停
BG红300之类的东西只是为了
在这里给它一点样式
让我们继续注销吧
转到该页面，然后我们就可以了
现在我们可以在这里注销了
单击它，我收到错误，所以我们开始吧
如果我继续，看看错误是什么
进入节点我看到有东西
与节点本身相关，接下来
如果没有 new 则无法调用响应
那么让我们继续看看为什么我们有
下一个回复实际上在这里
我看起来是正确的，但让我们继续吧
看看哦，就是 Json
这没有 Json 小错别字
抱歉，好吧，接下来我们走吧
回到我们的注销页面 注销看起来
就像什么都没有失败一样，但我们得到了未定义的结果
所以实际的响应是未定义的
这很有趣，然后我
想看的是页面本身
基本上当这种情况发生时我看到
它说已登录，这可能应该
说过
注销
是的，但是如果我们回到前面
在这里结束检查我去安慰它
说已登录，让我们继续吧
现在它说注销了，所以
就目前而言，这里没有错误
对此表示关注，并进一步核实
我们能做的是我们可以使用
router hook 这样我们就可以做 const router
等于使用路由器，如果我这样做
错误的版本作为下一个路由器会导致
一个错误，所以现在实际上是下一个
和
导航发生变化的原因是
与应用程序路由器有关，这几乎是
现在我们已经在这里安装了路由器
我要进来做路由器。
更换，我们就会得到它
替换并进入登录页面好吧
一切看起来都不错，让我们继续吧
现在注销将我带到登录页面
这次我可以继续登录
这实际上应该带我去某个地方
一旦反应还好我也可以
可以摆脱所有其他的东西
关于这个特定的注销页面 返回
进入登录页面，我将带入
Ed 路由器在这里，这样我们基本上就有了
所有这些我都会去掉一些
这些评论在这里，然后只是
继续说 const router 等于
使用
路由器，然后在没问题的时候进入这里
我们将继续做路由器一次
再次执行我们的替换方法，然后
将其放入主页原因
因为替换方法大多是这样
当你向后退时它不会
实际上会带您返回登录页面
我的意思是你可能想要它
但让我们现在就开始吧
主页在这里让我们进入我们的
登录 让我们继续登录并
就这样，它带我回到了
主页就像那样，当然
现在我可以退出并可以做各种事情
的事情，但下一部分是
我们需要某种方式来跟踪
该用户是否已登录
这并不意味着他们一定
登录正确但是我们的前端
需要认为他们可以
换句话说，他们是在之后登录的
我们运行这个登录部分，我们得到一个
成功调用我们的登录页面
现在应该更新上下文
客户完全，而实际
令牌本身仍将存在于
API 实际的 nextjs API 它不会
实际上住在客户端中
换句话说，当我们注销时
我们正在做的是我们实际上正在删除
前端需要知道的令牌
在不知道的情况下
令牌本身，这就是我们可以安慰的原因
在这里也记录各种事情
呃或者删除我们所有的控制台日志
我们不再需要它们了
这里可能不需要这些令牌
不再这样了，只是做一些事情
使用我们的各种 API 进行全面清理
我们在这里做的事情很棒
我想做的另一件事
登录路线是我想返回
如果确实是这样，则调用成功
成功了，这就是我要做的
已登录
存在
确实如此，并且
然后其他一切都像 400
打电话并做
登录正在
false，我们可能还有其他错误
此处的消息与
我们总是可以响应数据
也在该响应中解压等等
这将来自服务器
当然，就目前而言
当我们登录时担心我们
仍然需要一些处理
所以如果我们进入登录路径并执行
这里有些乱码我仍然应该看到
现在发生了实际的错误
它并没有真正向我展示任何东西，但是
它让我看到我做了一个
这里的请求不好，因为我现在已经
更新了我的登录页面的工作方式 注销
如果
令牌由于某种原因失败了，但是我
不会在以下时间经历该过程
这一点很好，所以现在我们需要做的就是
要做的就是构建前端上下文
确保我们可以使用记录的
在用户前进但在我之前
我真的很想建立
与我一起完成概念验证
关闭代币，这当然意味着
然后我们现在可以使用常规令牌来
然后向我们的后端发出一个请求
那些需要的重量清单项目
一些身份验证让我们看一下
现在我们有了登录的方法
令牌并执行我们想要使用的所有操作
那个令牌实际上可以抓住一些东西
Jango 后端所以这也意味着
我们想要更新 D Jango
后端一点或API
实际上需要身份验证所以
我们想要在权重列表 API 内部
把我们所拥有的同样的笔记记下来
对于 slme，所以我们要继续
将同样的东西放入我们的
重量清单在这里，我们就继续吧
并将其放在路由器旁边
本身就那么不重要
两个地方都关闭了，我们继续
并保存它，这样 API 就应该
需要身份验证本身，所以
让我们继续跳回 nextjs
现在就开始构建这个
我要构建的第一件事是
页面本身所以我会继续做呃
我们将创建体重列表作为公正
一般页面在这里，我要去
前面并复制主页本身
因为我们已经使用了 SWR
在这里，因为我们将实施该
我将删除其中一些评论
这里以及其他一些
我们根本不需要的数据好吧
所以我们将继续向下滚动到
底部并留下那些东西
就这样，好吧，所以这个我就
称之为页面，只需将其返回到该页面即可
命名约定，我会摆脱
其他一些东西关键部分在这里
我们正在使用客户端 我们正在使用 S SWR
我们有了我们的获取器，然后我们就去
继续并必须更新我们的
端点 我们要去哪个端点
好好利用我们当然不会去
使用 Jango 端点，所以我们
继续说类似的话
const 和权重列表 uh API URL 或
端点，这将是
简单地API SL重量列出了一些东西
沿着这些思路，记住这一点
我要继续并回到
我的应用程序，我们将制作一个新的
页面 API 权重列表 SL 路线。 jsx 和
这里我们需要声明一个路由什么
我们想要什么样的方法，我们会去
继续我们的异步，我们想要一个
函数，因为我的页面将是
使用 S SWR 我们的路线应该是 git
路线并接受请求，然后
我们可以返回我们的下一个
响应，它应该是这样的响应
然后是 Json，然后我们就开始
并将我们的默认状态放入
在这里，我会继续说是 200
好的，所以我需要做的第一件事
我的 API 请求中要做的就是获取令牌
所以我们要继续并抓住我们的
关闭令牌，这当然会
是我们刚刚创建的方法获取令牌
基本上我们会说如果不是
然后我们就回去
回一个
41 所以我们将继续执行 401 等等
现在我们可以将此 401 状态代码视为 AS
嘿，我们需要登录，就是这样
我们会回来确定我真的
只是想看看如何实现这个
关闭令牌所以这就是我们现在的位置
现在继续定义我们的
Jango API 端点或类似的东西
我确实想要那些线条
与我的另一个一致，所以我这样做了
日志和 URL 所以 jeno 你知道重量
列表或权重列表 URL 类似
那和同时列出我们去等等
会怎么样，只是
就像我们的登录路线一样，但只有一个
不同的端点，所以我会进来
在这里，我们将其更改为只是
我认为只是简单的体重清单
尾部斜杠我们可以仔细检查
这肯定有一个设置
Jango 确保这确实发生
但我们会继续添加它
现在，这就是我们的结局
现在我们已经获取了部分数据
打电话给我们想做的事情，这是
将是响应等于等待
获取我们需要构建的 URL
现在是此 fetch 调用的选项
这些实际上相当
直接第一个就行了
成为方法默认值以获得相同的结果
我们现在使用的方法很酷
关于这一点我们可以使用
post 方法，然后在后端我们
仍然可以使用 git 所以那两个不用
必须关联起来，但是
当然，如果你在这里使用帖子，你
应该在这里使用帖子，这就是
如果你打算的话基本上这个想法可以
正在更新后端使用帖子
每当有必要的时候好吧，所以方法就在
那么我们将继续
现在我们已经引入了我们的标题
看到了标题之一，那就是
内容类型这是我们的东西
绝对想要拥有，那就是
应用程序和
Json是你可能会考虑的另一件事
在这里做的就是将其复制到
除了完全相同之外
类似的内容类型不会接受
除了该内容类型之外的任何内容
其他可能是个好主意的事情
接下来我们要继续做
我们的
授权，这将是
我们的令牌，所以我们将使用一些字符串
与 Bearer 一起替换是
默认值就像你知道的名字或嗯
您将在此处输入的令牌值
然后你输入实际的令牌
本身，这会给我们带来
我们对该 API 的回应 wi inpoint
假设我将选项引入为
很好，所以马上就可以了
希望你意识到所有这些
东西在一定程度上可以重复使用
一遍又一遍，所以我们绝对
将来想考虑这一点，但是
现在我想做的是
继续说结果等于等待
回复。 Json 这当然是要的
向我们提供数据，这样我实际上可以
将结果解压到此 Json 中
现在当我登录时我不想做
这是对的，但在其他地方我可能会
想要这样做只需直接获取
结果本身因为我基本上
将此请求本身代理给另一个请求
部分原因可能是如果我们说
类似如果没有回应。
好的，那么我们继续前进然后返回
一种不同类型的反应
结果本身，但只是改变
状态代码本身为 401 之类的内容
这当然意味着我可以使用 let
在这里做我的状态，你知道的
200 然后做这样的事情
它只是抓住那个地位并且
说它是 401，因为我们需要登录
也可以从以下位置获得相同的响应代码
后面的实际响应本身
我们的结局取决于你
这样做呃但我要继续
现在就这样把它带进来
呃，让我们继续实际控制台
记录该响应，以防万一我们确实想要
稍微改变一下，然后继续
这样做好吧，现在我们有了我们的
重量清单路线应该选择
那个端点那个 URL 那么我们也有
我们的页面现在需要
使用该 API nextjs API URL 和
现在我们有了重量
列表页我们继续看一下
在这里，我们将做Weit列表，就像
我们已经加载但无法加载
加载我们遇到了 f 500 错误 好吧，我们已经
发生了一些并非如此的事情
正确让我们继续确认一下
所有内容都拼写正确
获取权重列表 权重列表路由
API 在那里列出它是 weit 列表
好吧，也许你发现了，也许没有
但现在当我在这里这样做时，我们已经
我们的结果在这里
此 API 入口点的实际数据，因此
回到詹戈，也许会跳跃
进入管理员本身以获取这些条目
让我们继续添加另一个
我就做 abc abc.com 保存它
让我们继续添加另一个
abc123
不管怎样回到我们的主页
好了，我们现在拥有了所有这些
我们的回复中包含的项目
非常简单
我认为接下来要做的就是
我们看到的是这个响应本身的内部
我们应该能够看到的是
实际状态代码本身而不是
有了这个回应，我可能可以
只是做回应。状态和基础
好吧，让我们继续吧
使用该状态仍然在那里
让我们继续并实际注销并
看看会发生什么，所以我们继续
长时间注销然后跳入等待
列表，现在我们得到一个空响应
在这里，我们得到了 401 未经授权
就像我们最初硬编码一样，现在
它甚至进一步使整个事情
代理请求更容易
我们真正所做的就是丰富它
有了这个代币我们就可以丰富
当然如果我们想要的话它有更多的数据
但这不是必要的
漂亮的小代理可以移动东西
转发嗯，所以我们只需要
继续越来越多地构建这个
现在这也意味着在我们的后端
我们必须考虑更多
关于我们可能想要做什么的 API
这些事情就像
实际上接受失重数据呃
这当然是我们
这里没有所以我们必须结束
也这样做，但好处是
现在我们的 D Jango API 和 nextjs
应用程序更接近于
显然我们已完全准备好出发
将会建造更多的东西
我们可以准确地看到我们想要怎么做
其中之一就是能够
让前端知道用户是
无需调用API即可登录
每次实际的 nextjs API
就像基本上了解这一点
我们现在要创建自己的学位
上下文提供者所以我们的整个前端
nextjs 应用程序可以访问
现在的数据基本相同
我们要做的实际上是我们会
结合本地存储一点
这样我们就不必不断地
检查我们的 API 是否
用户已登录，尽管我们会
有能力处理事情，如果
他们还没有登录，所以第一个
我想做的事情是在 SRC 内部
在这里我实际上要将 lib 移入
SRC 那是我应该放的地方
首先我们要说的是
移动，我们将更新所有导入
在那里，所以现在应用程序和库是
彼此相邻，因为现在我要去
继续创建组件
在这些组件的内部
我们会继续前进，创造我们的美好生活
称之为我的关闭提供商。 jsx 所以这个想法
这是我们想要创造的东西
取消了上下文，这将是
我们从反应本身创建上下文
从 null 开始然后我们
继续并导出
这次函数取消了提供者
我将使用大写而不是 uh you
知道这里的凸轮情况然后我们要去
继续并传递以下参数
简单地
孩子们，这将是全部
那些将出现的子组件
这里返回的是 O 上下文
所以关闭
语境。
具有某种值的提供者
这是我们可能想要的，所以继续吧
说被认证为其中之一并且
现在我就直接说吧
是
是的，好的，然后我们继续
关闭它并传递孩子
这里的元素让孩子们喜欢
然后我们还将导出一个
称为 use 的函数
关闭，这将返回
使用 O 上下文的上下文参数，这样
换句话说，O 中发生了什么
我们马上就会看到
所以现在自然地实施这个
它什么也没做，只是
一切都被验证为真实的但是
如果你不能纠正这部分
下一部分将非常棘手
但我们的想法是我们把它去掉
提供商我们回到我们的应用程序我们去
进入布局。 JS根布局在这里
这就是我们想要放入的地方
提供商，我们将予以纠正
现在围绕这个孩子元素
我想把它放在这里的原因是
因为我们希望这个关闭的提供商是
随处可用，所以我会继续
并在我的任何地方说“o提供者”
前端应用程序就像这样
好的，这样就引入了导入和
然后是我的关闭提供商中的最后一件事
我想确保我检查的是
说使用客户端好吧，现在我们已经
明白了，让我们继续进入我们的
主页在这里，在主页中我会
在这里删除其中一些评论
就在上面，我将继续
说 const 和 O 等于使用 o 我们
进入 O 内部，我们有一些
我们可以使用的论点所以我会去
继续并在此处使用这些参数
在实际返回函数内部
我们将继续用 is 做一些 jsx
经过身份验证，然后我们将继续
向用户问好，否则我们将继续
并打个招呼
客人很简单，好吧，让我们继续吧
并确保它正在运行 mpm run
希望一切顺利
我们将在我们的主页上刷新
如果我回去，它应该向用户打招呼
进入关闭
提供商并将其更改为 Simply
false 它应该打招呼，客人等等
无论我需要什么，这都是真的
使用上下文，所以我们当然想要
为了让这个现在变得更好一点
我们让它变得更好的方法是使用
说出使用客户端的另一个原因
在这里，但现在我们可以使用这些状态
变量并设置为
已验证到正在使用的状态和
默认值可能是 false 好吧
所以现在我们将继续做一些事情
就像登录一样，我们要设置这个
等于 well set 被认证为
真的就像
就这么简单
我们设置完认证就够了
然后我们将继续带来
旁边的登录部分是
经过身份验证，我们将复制相同的内容
并做类似日志的事情
拿出来，也把它带进来，太棒了
现在回到我的登录页面
例如，我们可以再次引入该 o，这样
缺点 o 等于使用
o 然后当我们真正登录时
这会给我们这样的回应
好吧我要走了。
登录，然后在日志中使用相同的概念
out 所以 const o 等于使用
和
现在关闭。
注销非常简单的方法，所以让我们开始吧
向前看一下，我们继续我们的
主页上写着“你好，客人，我们走了”
要登录，我们现在登录，它会说你好
现在用户如果我要在这里刷新的话
再次向客人打招呼，当然可以
那是因为国家本身并不
每次我都坚持得那么好
刷新它就会被渲染出来，这样我们就可以
实际上更进一步
并用本地存储做一些事情
我要继续做当地的事情
存储密钥，我会继续说
关闭或者更确切地说我们会继续做的是
已登录或类似的感觉
您可以随意更改它，但
想法是然后在登录中然后我会
继续进行本地存储。设定项目
你知道我们要抓住什么
那个键在这里，然后我就做
一个的价值或者让我们继续做
一串，然后我们就走
继续前进并在这里做同样的事情
和这串
零很酷所以现在我们正在设置这些
我们如何真正确保
我可以说他们是否是
是否经过身份验证 接下来我们要做的是
一种叫做使用效果的东西
会让我检查那些
值因此在使用效果内
这就是它的定义
检查常量
储存起来，你知道，嗯，这么说吧
争论或地位，我们会继续
并做本地存储 doget item
本地存储
关键然后我要继续做
int 等于解析
整数
实际上我们会说如果那样的话
即使存在在那里，那么我们就继续
并解析出该整数是什么
我们真正要找的是
设置已通过身份验证，这将是
取决于这是否是
确切地
太棒了，所以让我们继续保存
现在做一些事情让我们记录一下
在 登录 你好 用户 刷新 刷新
刷新 刷新 看起来很棒
良好的注销日志
出去你好
客人太棒了，现在重要的是
请注意，这并没有触及令牌
无论如何，如果我们真的进来了
在这里我们登录 登录
检查这里的元素进入
控制台或者更确切地说进入应用程序
进入本地存储，我们看到我们有
已登录，如果我要更改
归零并刷新在这里仍然
说是零，但如果我输入重量
列表
重量清单本身仍然是
渲染所以它实际上不是零
说为零，但它不是零，所以
当然意味着它不是
实际上检查你知道
实际令牌本身并没有做
除原因外任何与之相关的事情
我们至少这样做是为了
我们网站的其余部分都知道这
用户是
现在已经通过身份验证，我们要走了
提前并处理身份验证错误
使用令牌的 D Jango API 上的错误
换句话说，它被传递给它
如果我们看到 401 错误或者基本上
我们想要的不是 200 或 200 1 以外的任何东西
继续并将用户重定向到日志
我们将从一个简单的状态开始
代码，但这里的想法是关于重量
如果我们要控制台，则列出页面本身
长出错误并看一下
你一看到它就说什么
它是未定义的，实际上不是
给我任何关于这个错误的信息，如果
您在 S SWR 文档中查找
错误处理你会发现有一种方法
使用新的获取器丰富错误
这正是我们要做的
所以在那个重量 L 页面上我们将更新
fetcher 在这里，现在我们将能够
查看状态代码本身，现在如果
我们看看错误，我们可以做一个
问号。状态，因为它可能或
可能没有错误，但我们现在仍然可以
刷新该页面，现在我们可以看到
实际的状态码本身
当然意味着我可以做一些事情
现在这个状态的想法
编写我实际上要继续的代码
我要做的就是引入一个用途
此处和此用途内部的效果
效果我想做的实际上是
跟踪错误本身，所以在这个里面
使用效果我们主要想看看是否
我们会继续说状态是否为
将会是 401 这就是我们要做的地方
我们的重定向我们要去哪里
重定向它以及我们将如何重定向
重定向它实际上是
基于我们的其他提供商所以
回到我们的 o 提供商，这是
实际上我们应该处理很多
不同的重定向所以我要去
我要做的是 const 和
我们将继续说登录重定向
你的网址，这将是
我要先登录然后再去
const 注销重定向
URL，这些并不奇怪
实际上与什么配置相同
你会在 D Jango 设置中看到
但这个想法是当我们实际上
注销这些是我们要做的事情
想要继续做然后
最后一个是我们继续说日志
在
所需的 URL，这将是
只需登录即可，那么我们实际上该怎么做
处理好这些方法我们已经
在登录页面中完成了其中几个
当我们使用它时，我们有路由器来
然后在我们调用登录之后
我们实际上做了更换，但我们没有
不再想在这里做我们想要它
待在一个地方，所以我要继续
并从此登录页面删除它
我会继续做我要做的事
对注销执行同样的操作
页面我们将摆脱它并且
我们也会在这里摆脱它
我的登录和注销方法将
实际上执行重定向
我们所以让我们继续向下滚动
这就是我们要继续前进的地方
并这样做，以便我们继续进行 const
路由器等于使用路由器和
当然这需要从下一个开始
再次导航现在我要去
向下滚动，我会继续做
路由器。更换并登录
重定向 URL 足够简单 注销此
将是我们的注销重定向 URL
也足够简单，所以显然我们
可以测试这些东西但现在我
想要做的只是需要登录
重定向，以便我继续登录
必需的
重定向类似的东西
当然意味着用户不是
通过 API 登录，所以这只是一个
基本上处理这个问题的简单方法
问题，所以我们想更新这些
事情是理所当然的，所以这将会是
false 这仍然是零哦
我注意到我的注销也应该
说假它确实没有但现在它了
好的，现在我们已经注销了
部分，所以我会继续带来
这也在这里以及下一部分
这就是我要继续抓住的
登录所需的 URL 并将其放入
不过这里的东西真的很好
所需的登录将包括
当前的路径以及我要去的地方
这里要做的是我要说路径名
等于再次使用路径名
导航所以这意味着什么
在这里我实际上可以说我的
const new URL 或者比方说
我的登录
下一个 URL 等于登录
必需的
URL 然后我们可以做一个问题
标记下一个等于当前路径
说出现在可能是唯一的任何东西
我们不想这样的原因是
如果登录 URL 是实际的重定向 URL
与 p 名称相同，所以基本上
我们将继续说如果登录
所需的 URL 等于路径名 uh
那么我们就继续，不做
我们只提供登录信息
现在需要类似的东西
我们可能还有更多条件
可以放在这里以确保它是
不会是登录页面，而是
想法是，我们实际上想要
至少当我们修复我们的
登录 URL 在某个时候呃，但是当然
这将在我们这里完成
实际上然后重定向这不是
我要做的事还好
所以我们现在的想法是这样
让我们继续保存它，我会来的
回到我的体重清单，我们开始吧
并确保我们正在打电话
此登录需要重定向返回
进入我们的页面，我们要做一个
const 和 off 等于使用 off very
很好，我们将其传递到我们的使用效果中
此时此地，我们将继续
并在其中执行我们需要的登录
使用效果所以关闭并重定向让我们走吧
向前并获取函数名称
需要登录
重定向到那里，我们保存它并
它已经立即重定向并且它
将下一个 URL 放入此处
登录方法本身就这样
当然它并没有真正重定向我
到我刚才所在的页面，所以我当然
需要改变这一点，但这里的想法是
我们现在看到我可以登录并且
如果发生未经授权的事件
将迫使我登录到任何地方
它最终会继续，所以很自然地
我们可能会做另一件事
当我们这样做时想要继续拥有
获取我们的 API 我们的后端 API
xjs 当然会进行获取
到 D Jango API 但总体来说有
登录所需的重定向实际上是
现在回到登录状态真的很好
本身我们也可能想要得到
查询参数传入这里所以
也许我们想在婴儿车里
此登录但请记住，当
你有一个它可以真正抓住的提供商
这些参数也是如此，所以我们可以
实际上来这里并说搜索
params 等于 use 和 params 等等
回到这里，我们现在可以使用 pam
我要继续安慰
记录它们一会儿，以便控制台记录
搜索
婴儿车让我们继续前进，
日志
出来了，我们已经用过路由器了不是
定义了日志中的内容
哦，是的，我们需要摆脱它
我们去吧，这是一个很好的发现
我们要继续退出
现在它并没有将我们重定向到
出于某种原因，我们去看看吧
进入我们的关闭提供商替换注销
重定向
URL哦，当然是重定向到
本身这应该进入
登录很酷，我们开始吧，现在我们走吧
进入该体重清单
在这里，它自动带我来
回到体重清单以及我们的
应该在我们的控制台日志中看到
我们应该能够看到的搜索程序
应用程序接口
本身和我们的关闭提供商不是
还没有调用该函数，所以让我们开始吧
继续，只需控制台将它们记录在这里
一点点，我们会刷新什么
我们可以看到没有搜索pams
过来，那是因为这个
不应该是pams，而应该使用搜索
pams 我命名的变量是正确的，但是
钩错了所以我们走吧
一旦我这样做了，我就会有婴儿车
可以看到下一辆婴儿车在
在这里，我要做的就是说出下一个 URL
等于搜索 pam.get
接下来和现在我应该能够抓住
下一个 URL，我们可以在这里看到
下一个 URL 本身现在是权重列表
现在在我进一步之前我可以
可能并且可能会检查是否
或者这不是一个有效的下一个 URL，所以我们将
继续说 const next URL valid
基本上这里的想法是我们不
想要它，我们想继续说呃
下一个 URL 和下一个 URL 开始
与开始
带斜线，所以它是本地的
并且它不在某个列表中，所以
我们会继续说 const 然后我们会
执行无效的下一个 URL，这将是
类似于斜杠登录和斜杠
主要是注销，这样就不会重定向
那个，所以，不包括
下一个
URL 好的，现在让我们继续吧
控制台记录了这一点，我们得到的是
如果我们将其更改为，则对于威特列表为真
登录我们应该看到它是错误的
登录很棒，所以现在向我们展示了这一点
所有这些事情并不一定
需要在关闭的顶部
事实上我不会
我只是想把它们放在那里
在那里我们可以准确地看到是什么
就我所经历的一切而言
将把它们放回登录状态
我们实际上会在哪里进行重定向
所以现在就来把它拿下来吧
把搜索婴儿车放在这里，我们
检查它是否有效，所以我们
然后可以说它是否有效，那么我们将
继续前进并做到这一点
重定向，否则我们将坚持
我们默认重定向到登录页面
本身和我们去或登录
而是重定向页面本身等等
这只是检查以确保所有
这是正确完成的，所以如果我这样做
进入登录 登录它只是不需要
我马上回到登录页面
当然是一个错误，如果我退出
然后我转到一个页面，我实际上
想看下一个
我将能够它显示我登录
我点击登录，然后继续
然后点击登录，然后就可以了
实际上把我带到了那个页面
太棒了，这正是我们所要做的
想要用这个逻辑来做这可以
可能会稍微改进一下
确保它正常工作
你知道也许我们想做一些
在这里返回函数只是为了确保
那不会再进一步​​了，但是
我们的想法是我们希望能够
重定向到实际的登录页面
当它有意义时添加这个
实际上确实有道理我注意到我
实际上可能不需要检查
这个路径名我可能可以
只要在这里输入任何参数就好了
但很高兴在两个地方都有它
所以这不是偶然发生的，但是
现在我们已经登录了
当我们的令牌失效时重定向页面
这让事情变得容易一些
现在对我们来说这并不好
如果我填写表格的话
然后它告诉我重新登录
然后我失去了所有的表单数据所以
这当然是可以的
得到改善并且可能发生并且它
可能会发生在关闭的提供商中
这不是我们要讨论的内容
这个但是你的想法是使用使用
效果然后做一些超时方法
最终你会知道这样做
相同类型的检查或实际检查
与后端，然后重定向
用户是否需要登录（如果他们有）
最近注销，但这将涵盖
很长一段时间的范围，嗯，这是理所当然的
作为一个用户，如果你是
填写表格然后你必须
重新登录这并不好玩，所以有
可能是一种你可以做到的方式
那行得通，但在这种情况下我要
将其保留为
现在我们要继续
为一堆实施 Shad CN
shetsen 使用不同的用户界面
Tailwind 本身，但只是使用它
实际上实现了一堆快捷方式
不同的功能和一堆
我们可以重用的不同组件
所以如果你查看文档并转到
假设日历是这样的
日历组件，您可以
获取代码并使用它就可以了
非常适合各种事情
我们的 nextjs 应用程序的条款
当然有任何反应应用程序所以
我们将继续实施
现在请记住 chatsi 本身
仍在使用 Tailwind
它还使用像 radex UI 和你这样的东西
甚至还可以将 Lucid 用于不同的用途
图标也是如此，所以有很多东西
乍得是建立在其之上的
真的只有你知道才能缩短时间
实际上让所有这些事情发挥作用
所以如果你看一下像这样的组件
这你就像哇，看起来很棒我
希望我的应用程序看起来像你一样好
可以在他们的代码本身或你身上做到这一点
还可以查看不同的块
他们有你可以抓住的地方
代码复制并粘贴并得到所有
已实施，但当然是为了
所有这一切要发挥作用，我们实际上需要
按照我们要做的方式进行设置
这是通过进入他们的文档进入
我们nextjs的安装过程
已经有一个 xjs 应用程序，所以我们
不需要这样做，但我们会跑
我将要使用的 Shad UI 的 init 方法
继续运行它可能会提示
你要安装这个，在这种情况下你会
说“是”然后你就可以继续
然后选择你想要使用的风格
可以使用其中任何一个，并且您始终可以
如果需要的话可以更换这个打火机，但是
我的想法是我要继续
和纽约一起去然后我就去
继续选择一个基色，我是
继续说我们想要石头
为此我将展示使用 CSS 变量
你一会儿就可以了，但是这是
对于那些非常熟悉的人
有了 Tailwind，这将是
用于主题真的很酷
在沙登所以我要去答应
它将继续实施
一堆不同的东西注意到它
创建的组件。它还创建了 Json
utils 在 lib 中，然后它也
更新了相关的修改内容
package.json 中的 nextjs 项目是
可能并不奇怪
在这里安装了一些东西，然后
它还更新了 Tailwind，所以请记住如何
我在这里提到了 CSS 变量
这里有一堆不同的颜色
现在将要取代
这些变量所以它们相当
从字面上看，我们可以改变变量
在组件库内部和
其他地方也是如此，所以我们有
这里的基色是关键
离开这里，嗯，所以我要离开
确实如此，我们有自己的风格
这里有很多
您可以进行自定义写入
成分。 Json 然后我总是检查
如果您有疑问，请参阅 sh Shaden 文档
在那里，但接下来的事情实际上是
只是实现他们的字体我只是
想向你展示不同的东西
我们需要做的就是确保所有
这是有效的，所以我们有很多
在这里导入我要继续
复制这些，我们将进入
我们的应用程序布局。 JS 我们要去哪里
把它们放好，我会把它改正
在我的关闭提供商下面，好吧，所以这些
是我想要实现的事情
主体类内部就在这里
这意味着我要滚动
向下一点并改变主要
身体课，我们会在那里做
这是抑制水合作用的另一件事
警告我们要再次把这个
这与 Shad C 有关
这可能会在某些时候消失
点呃但是我们走了所以我们有
一些与根布局相关的事情
接下来我们想将该字体引入
你所知道的真实的U Tailwind
配置所以我们转到最顶部
我将复制其中的部分
相关，因此字体系列导入和
我们将继续放置该字体系列
导入到该主题的扩展中
和这样的延伸，好吧，太好了
所以现在我们可以做各种各样的事情
这个实际的实现是
超级好，但我想做的是我
只是想向您展示黑暗模式，这是
我们可以使用一个非常简单的东西
非常快，所以首先我们需要
导入或安装下一个
你知道的主题会自行打包，所以我们开始
继续运行然后我们就走
继续并实际使用该主题
提供商本身，所以我们有很多
与主题提供者相关的事情所以
我要继续复制这个
我们将进入我们的组件
这是这里的文件夹
当然，我们的关闭提供商旁边做什么
你知道我们会把它称为我们的
主题提供商。 jsx，我们将粘贴此内容
在这里好吧，所以我没有使用
打字稿所以我要继续
如果你是的话，请去掉这里的类型
使用打字稿你会需要
主题提供商 hm 应该看起来
与提供者部分一样不太熟悉
关于我们之前所做的事情等等
我们最终在这里看到的是实际的
导入该主题提供商的内容
主布局即根布局，因此
我们要做什么 我们要去
继续并复制导入你要做什么
我知道它几乎在同一个位置
将继续更新
但这个想法又回到了
就在我们关闭的提供商上方
继续做我们的主题
提供商，我将把它包起来
我们的关闭提供商我们可以关闭
周围的提供商也没有
实际上在什么情况下很重要
如果我们想要离开的话，我们就在这里做
在我们的主题提供商中可用
想要它在上面我们不需要它
不过，我们就这样吧，我们得到了我们的
主题提供商现在下一步我们要去
继续获取这些属性
对于那个主题提供商，我们会去
前面把它放在这里就像
这样我们就有了默认主题
系统的主题，所以现在它说
添加一个切换模式，因此添加一个按钮
在这里可以切换模式
所以如果我们看一下这里的代码我们可以
实际上看到了一堆相关的东西
对于这个切换，我将继续
复制这整件事，我要去
进入我的组件，我要去
继续执行主题切换按钮。
jsx 我将​​把它粘贴到这里
现在我们遇到了一个潜在的问题
这对你来说是新的，因为我
只需复制并粘贴一堆代码即可
也许所有这些都有效也许无效
他们可能不起作用的原因是
因为这些相对于我们的进口
项目我们看到我实际上并没有
安装了这些组件，所以这个
回到那时看着
Shad CN 中的组件正在寻找那些
在这种情况下你可能需要
按钮就在这里，所以我知道原因
它的按钮是因为嘿它是
导入一个按钮就是这样，然后我就开始了
向前看一下，看看那个
安装其实很简单
所以这实际上做了一些事情
真的很酷，它继续并添加了一个 UI
这里的元素称为按钮。 jsx
我自然可以教你如何写作
所有这些事情并让它们发挥作用
但所有按钮组件本身
就在这里，当然如果你知道的话
顺风真的很好你可以
移动并改变相关的事物
顺风和所有这些不同的
关于变体本身的事情
它没有被阻挡，它真的很像
可重复使用并且非常可编辑
好的，太好了，这就是旁边的按钮
当然是下拉菜单
菜单，所以我会向下滚动到该菜单，然后我们
看到我们添加了下拉菜单嘿
你知道什么 非常简单
好吧，所以我要去添加它
现在我已经拥有了那两个
我要继续并结束的事情
这一点我们要使用
那个主题切换按钮可以，所以这个
必须发生在主题内部
提供者就像在某个地方的孩子身上
在我们的根页面我们的主页上我们
现在可以把那个按钮带进去，我就走
在这里放一个div，然后我们就可以了
继续做主题呃按钮做了什么
我们称之为它 主题切换
按钮，让我们将其更改为主题
切换按钮以便实际导入
按照我们想要的方式工作，让我们开始吧
摆脱它并执行主题切换按钮
进口对我们来说好吗，所以我们可以节省
然后我要继续
刷新这里，它说不能
解决 Lucid 反应好所以这是
另一种我们从来没有进口过的东西
安装了，所以在这种情况下我会做 npm
安装 Lucid React 这实际上是
通过进入很容易弄清楚
清醒地进入他们的指南这里和
进入 Lucid 反应，有
安装过程是对的，嗯，很公平
就这一点而言很简单，但现在
我改变了纽约风格
请注意，您实际知道的文本和
如果我去的话一切都会改变很多
主页我现在有这个按钮
下拉按钮可以更改所有
我的造型或者我可以根据
系统所以这真的取决于你是否
你想要这个切换但是
我的想法是如果我想保留它
整个黑暗模式我可以回去
进入U我的主题的主要组成部分
本身在我们的布局中
这里的默认主题，如果我们将其更改为
只是简单地黑暗和刷新在这里我
有我的黑暗模式，那就是
授予默认值，我们需要
让我们进入隐身窗口
这样我们就可以看到黑暗模式了
改变那里很酷所以这就是chaten这个
是我们仍然想做的开始
更多的事情比如让事情变得更好
注销页面，以便我们可以看到内容
看起来像
好吧，那么回到 Shad CN
我们要进入街区
我将一直滚动到
底部并抓住这个登录组件
在这里我将进入代码并
我们将继续复制所有内容
然后我们就把它带来
登录，所以我要调用它
刚刚翻页
jsx 暂时将其粘贴到此处并
把旧的变成简单的
为那个页面旧的 jsx，然后我们将
将页面编号更改为简单的页面 jsx
太棒了，现在我们有一堆
更改了我们的页面，所以我们已经这样做了
添加按钮但我们还没有添加
输入或标签，所以我们要确保
我们这样做的功能本身我要去
将其称为页面，然后我也想要它
也作为我的默认功能好吗
所以现在我们已经得到了这个，我们已经得到了一切
与此登录相关的各种事情
我们需要实现的组件
我们需要添加输入按钮
回到Shaden，进入我们查看的文档
输入按钮在哪里
我们这里有代码，但我们也
有预览，我们有简单的
现在添加该输入按钮的方法
当然另一件事确实是
很好的是我们可以看到不同的名字
在这里，这样我们就可以上来做
标签正确，如果我们要运行这个
我们能做的就是再次看到
好吧，只是不一定
重新安装一遍就可以了
基本上是一样的事情所以我们
已经有按钮我们有输入并且
标签所以所有这些东西都是
可用 所有进口已准备就绪
对我们来说，当然这些来自
nextjs 所以我们不用担心
那些都可以，现在我们已经有了
让我们继续看一下
我们的登录页面，只是惊叹于它的
荣耀所以如果我们真的看看登录
这看起来好多了
对我来说是一个巨大的进步
已经发生了，而且发生得很快
这是你知道的事情之一
Reactjs 做得很好的是复制
甚至不同组件的粘贴
如果你不完全了解一切
尤其是在以下方面正在发生
Tailwind Tailwind 有很多东西
确实需要一些时间来学习，但是
好的是它实际上很漂亮
本身也很冗长，所以如果你
看到类似文本 3XL 的内容是什么
这似乎意味着这可能是
意味着如果你改变的话它会是一个大文本
变成 2XL 会是什么样子
等等所以一定要尝试
除了这里的想法之外，一切都顺风顺水
当然我们需要更新我们的
输入实际上与我们的旧输入相匹配
输入如此真实的我们的表格和所有这些
所以我要继续去拿一些
与它相关的事情进入我们的新页面
在这里，所以我很自然地已经用完了
在这里我想继续并带来
我们将继续使用
我们走吧，处理斯密特什么
那当然是为了我们的形式
所以让我们继续向下滚动我
实际上没有看到表单元素
尽管我确实看到了一些输入
这里的元素所以我们将继续
更改要包装的输入元素
变成一种形式和我要做的方式
基本上就是围绕按钮做的
所以我要继续看看
对于实际上拥有一切的 div
就是这样，所以我要继续
只需将表格放在此处并提交即可
等于句柄提交并且
然后我们继续把它放进去
该 div 一直向下并且
在那里我不想登录
此时与谷歌的合作将是
肯定很有趣的东西
但我们还不打算这么做 我
其实并没有忘记密码
要么我就继续吧
也链接出来，所以继续吧
假设我们把它隐藏起来
并摆脱任何其他样式
现在就在这里，然后我们就得到了我们的
密码标签应该没问题
登录部分本身实际上是
用户名正确，所以我们只想更改
从电子邮件到简单的用户名的一切
然后我们会继续说你的
用户名并将其更改为用户名
就这样，好吧，所以我想
这就是全部让我们回到我们的
旧页面我们已经处理提交和
登录我们已经得到了旧的输入
现在看起来一点也不太好所以让我们
继续，再次制作我们的页面吧
确保使用关闭在那里看起来
让我就这样
在这里重新启动并看看发生了什么
继续下去，很有可能
我们需要在其中添加一件事
页面，因为我们每次都使用 Uso
我看到这个未处理的运行时错误
我立即想到它是使用
客户喜欢它应该，如果我看看
页面不是这样，在这种情况下我
肯定需要使用该客户端
有时您可能不需要，但我们
有用掉的东西，我们想要
确保我们使用那个
特别是因为当我复制并
粘贴它渲染得很好但是
然后当我添加一些我自己的东西时
我意识到哦，也许就这样吧
这是登录信息，让我们继续吧
尝试一下，我们检查中的元素
在这里我们看到它实际上并不是
让我们登录，这样我们就可以得到登录 URL 了
未定义，所以我们还缺少一个
我们去那儿吧，让我们带上
结束了，让我们跳回来吧
使用我们的用户名进行测试并
密码我想是我的
被创建了，我在这里收到了一个不好的请求，所以
让我们进入 API 登录路径
全面获得 400 所以
响应数据没有让我同意
所以很自然地我们想要实际采取
看看这些数据最终会是什么
回到我们现在的 Json 页面
得到答复好的我会继续
做其他事情，我们将做我们的控制台日志
等待回复。我们可能需要 Json
实际上在某些时候会渲染出这些错误
嗯，但是我们会继续登录
这里我们有无效的 inpoint 用户名
为必填项且需要密码
好的，所以我们得到了不正确的数据
从表格本身我明白为什么我们只
有一个输入类型，我们没有输入
输入名称是很容易错过的事情
同样的事情可能也会发生
密码肯定是让我们
去添加那些，现在我们就开始
前进并登录看起来就像一切
现已登录 你好
用户我确实喜欢这个登录页面，但它是
缺少一些我认为相当不错的东西
至关重要，这是一个导航栏，等等
非常重要，我想确保我
有一个导航栏，那就是
在我的任何页面上都是如此，所以那就是
我们现在要实施的方式
我们要做的当然是在
鲥鱼我们要进入
这里的块，我们可以选择一个块
对于我们的组件类型来说是有意义的
现在想全面使用
我的情况是无论他们是否登录
我实际上想要相同的导航栏
正在发生，而其中很多很多
这些例子似乎好多了
适合您正确登录后
所以我们想要有一个
已登录或注销，我们就出发
向前并向下滚动相当多的距离
我们会找到一个适合的 AB 杆
所有这一切都好一点了
所以仪表板一个这真的很合适
很好，它给了我们一个
仪表板示例我认为甚至其他
仪表板 仪表板 2 已关闭
仪表板3看起来相当不错的仪表板
4 看起来不错，所以我们有一个
我这里有很多不同的选择
此时与仪表板 4 一起使用
我会去看看代码并
我们将把它复制出来，然后我们将
继续进入我们的组件
在这里我要创建一个新的
称为布局的组件在这里
我们将其称为 BAS 布局。
我们将粘贴到这个布局中
在这里，我想更改它的名称
到那里的基本布局，它是
将成为默认值，因此导出
默认函数就像我们一样自然
在我们需要安装之前看到
我们需要使用的一切
在我这样做之前虽然我
想要真正分解这个
一点点所以第一个 div 是
成为下一个看起来的一切
是我们的标题，我们可以看到我们的
标题在这里，它正在分解
一堆东​​西我会把它们弄坏的
接下来是 Main ，在那里
我们走所以我们实际上只有真的
标题中的两个组件
我认为这将是我们的导航栏，所以
我们将继续并将其保留为
我们将其称为我们的导出函数
我将其称为我的导航栏，我是
只是要继续剪切和粘贴
那个标题在那里所以我们继续
别再这样了，我们继续
返回那里的导航栏并
我会继续把它分解一次
我们将再次讨论这个问题
第二个，但我们的想法是我们会用它
导航栏就在这里，好吧
太棒了，所以你可能会做的一件事
想想也许我们把
这里的类名以及
争论或基本上就像我们的决赛
class 等于 class 之类的东西
名称本身或这个默认值
我喜欢做的另一件事，以防万一
我想更改任何给定的类名
纳尔本身我可能不需要
更改班级名称，这样我就离开
就这样，但我确实喜欢这样做
时不时 好吧，接下来我们有这个
主要街区在这里我认为是在哪里
所有的元素都可以所以我要去
删除此 main 中的所有内容
现在阻止我已经知道这是真的
但这是我使用的直觉
测试不同的东西，看看是否
最终结果是正确的，所以我们
已经看到类似的东西
这个基本布局实际上在应用程序内部
在布局中。 JS我们其实看的一清二楚
我们看到了根布局，所以我们
做一些与此非常相似的事情
除非我们不做主题
提供者和所有那些我们的东西
我们已经不需要重新实现了
但其中重要的部分
这里的布局是它通过了
在儿童中，所以在这个基本布局中我们
想做同样的事情好吗
就是这样，差不多就这样了
进入布局。 JS现在围绕着孩子
在我们关闭的提供商的内部和下面
继续添加我们的基地
像这样布局，我们就继续
并将其粘贴到这里，好的，这样就有了
我们现在的基本布局，如果我要的话
跳回我的项目我可能会得到
多次编译失败
找不到模块的原因最多
显而易见，所以让我们回到我们的
基本布局在这里，让我们继续
查看我们所有的不同模块
可能需要这些导入是灰色的
所以我很可能没有使用它们
此时但其他一些人还没有
好的，那么这个sheet元素首先是什么
让我们回到构建块
本身返回预览并拍摄
在这里查看您知道的手机尺寸
甚至是我们看到的平板电脑尺寸
实际上可以用这个看到导航
小汉堡菜单，就是表格
就在那里弹出的东西
已经很酷了
内置，所以这是一个很好的小触感
这将被添加到我们的你中
了解我们的移动版本
申请，所以这就是我要的
可能想要所以我们回去吧
进入 Shad 进入文档 向下导航
到工作表，我们将继续添加
床单就像这样，我们走吧
继续并添加到工作表中并确定
足以解决所有问题
接下来我们已经遇到了这些问题
我不知道我们是否有输入
下拉菜单所以我要去
提前添加它我肯定有
输入，因为我们是通过登录完成的
页面，我们就足够简单了
现在我认为它编译看起来像这样
效果很好，那么其他原因是什么
我正在做这种基本布局
这实际上与
导航栏本身所以我们要去
继续执行 const off 等于使用 off
然后在这里我想做的就是我
想要找到我的用户的下拉菜单
本身所以我要向下滚动
我有一个设置似乎
成为工作表上的用户一，所以我会去
继续前进并出发。是
经过身份验证，然后我就去
并将其放在该设置周围
到时候我也会做同样的事情
和我的另一个下拉菜单
菜单上写着在此处切换用户菜单
我会继续添加它
那个下拉菜单就像那样
太好了，现在我们有两件事了
对我们的用户本身来说有某种意义
这里还有很多其他链接
我们可能想也可能不想使用
某个点但现在我们已经得到了
让我们继续看看我们的
编译看起来我有一点
这个用途有点问题所以
也许我实际上并没有导入它
让我们继续看看它是否在那里
我在任何地方都没有看到它，我们继续吧
并用完并确保我抓住它
我们去那里，所以我们保存它
现在应该可以更好地编译，但事实并非如此
啊添加了使用关闭让我们记住回到
类似的事情会发生什么
对于那个编译错误，是的，我们需要
现在使用客户端进行基本布局
可以在这里看到我的实际物品，所以如果我是
登录让我们回到登录页面
部分并尝试登录它不是
实际上向我展示了任何东西
奇怪的井回到基地布局
我们看到的是我们实际上确实放了
在我们的基本布局中
孩子们，但我实际上并没有添加
我们去那里的孩子们
所以这里的主要类名是
确实是内容类，所以这就是
真的是我想成为的主班
能够改变所以我也会继续
将类名作为参数放入
就像我们对导航栏所做的那样，所以我会
将此称为我的主类名称，这是
将等于该类名
存在否则我们将使用任何
默认是，我们将继续并通过
现在在这个主类名称中保存
所有这些，然后刷新，我们就这样
现在我们的登录页面即将完成
正确但不完全正确所以我
然后要做的是检查元素
在这里看看第一件事
我注意到的是主类本身
似乎在周围添加了填充物
现在一方面你可能会
另一方面你想要拥有它
可能不适合我，我会去
一起把它除掉吧，但是
我要做的不是
这个组件而是我在哪里
实际上调用布局所以我会使用
同一个班级，我将复制它
整个事情都进入布局 JS 这是
现在我要继续放置
我的班级名称在这里，我们要去
继续添加我们的同一个班级
看到我这里有 P4 然后是 P10 我会
摆脱它，我什至会摆脱
我认为我不需要那个差距或者
这个主类本身我们
可能不需要整体调整
很多呃当然除非后面几页我
想要做到这一点，呃，就其方式而言
将被渲染等等
实际的登录页面本身我们已经有了
已经满了，我们这里有最低高度
现在这些最低高度就是原因
实际上现在这里有这个卷轴所以
如果我们真的去掉其中一些
让我们继续做 200 次
他们俩的卷轴都是这样的
这不太好，所以最小高度
在这里我要真正改变它
从像素到 80 垂直
高度或视口高度基于
超出任何给定尺寸的范围
所以让我们继续将其更改为
大概 90 岁就可以了
下降一点点 还有一点点
下面有一点差距，但是很多
更接近之前的样子，所以这个
与我们的大版本相同的概念
也可以这样做，也许我们只是
把这归结为更像我的东西
不知道 85 只是稍微小一点
现在如果我打破那里的网格
一旦下降到一定程度
水平不再是右边的两侧
这就是 LG 网格列 2
当然如果我想要的话
中等我可以做到这一点
将此更改为
MD 现在如果我刷新这里如果我
向下滚动一点，它实际上保留了
如果你愿意的话可以再长一点
走那条路好吧酷呃但是
这里重点是不要花一堆
和你在一起的时间知道做所有的事情
不同的 Tailwind 级别，而是
现在我们有了一个登录页面，当然
我们仍然需要做一些路由
导航栏，但整个网站是
开始看起来更像真实的
申请现在我们要继续
并移动我们的纳瓦尔进入它自己的
组件所以在我们的组件内部
布局我们将继续做导航栏。
jsx，我将继续复制所有内容
纳瓦尔相关的事情，这将
也包括该表，所以继续
然后剪切并复制所有这些
然后我们将继续将其从中删除
实际的基础布局本身和
相反，我们将继续导入导航栏
像那样从纳瓦尔来，我们就
将其更改为我们的导出默认值
导航栏好吧，当然现在就是这样
这里几乎有所有东西
就实际基地布局而言
需要这样我实际上可以摆脱很多
该基本布局中的这些导入
因为这主要是关于实际情况
纳瓦尔本身就是一件事，我们可以
那么现在考虑只是移动导航
栏本身位于此处的布局内，但
事物是除了我们所拥有的之外
在这里我们也可以改变这个基础
布局无论用户是否登录
所以这就是为什么我真的喜欢
这是因为也许我有一个
完全不同的布局
基于该用户一起等等
我将保留它原样
介意，但此时我要
我的纳瓦尔确实处理了很多这样的事情
在不同的链接上为我做的事情所以
第一个将是我们的
品牌链接 我要继续
将其更改为类似
功能和品牌链接好吧，我们会
来吧，把这个带到这里来，我
继续并带来原件
第一个品牌链接，我就去
向前并返回此权利
然后我们就继续带
这代替了我们之前的
所以我们得到了我们的品牌链接就像
保存它然后我要走了
继续，你知道最后一堂课吗
也许等于这个
一个或即将到来的类名称
所以我们继续上课
名字和我们
如此自然地进行下去，那就是
默认接下来的事情是是否
我们现在想显示名称
它没有被显示，所以我是什么
举例来说
显示我们将输入类名和
展示
name 我们将其作为参数
我们将继续说是否显示名称
然后我们将继续展示
否则我们就继续做这个
就在这里，当然，我只是
称之为 SAS 或其他名称
可以随意称呼
一个是跨度一个不是在这种情况下
我会在这里摆脱这个我们可能
需要根据何时进行调整
渲染后接下来就是链接
我们实际上想去
主页上有我的新品牌链接
我要继续复制它
请注意，我们可以执行显示名称和
类名所以在细分中也许我们
想要显示名称，我们可以说 true
如果我们想去那儿，我们就去，一旦我
这样做我应该看到分支显示
起来，实际上看起来不错
接下来 接下来我要继续
在我的故障上也这样做
工作表本身，所以在工作表内部我们
这里确实有显示名称，所以
现在我要把它粘贴到
我会继续并通过
类名本身，然后去掉
所有其他链接内容我们都会
在那里刷新，我们想要打破
下来看看那张纸是什么
当然我们的主页看起来很有趣所以
让我们进入我们的主页，我要去
把这里的一堆东西处理掉
与主页相关的我会留下
打开主题按钮并向用户问好
但几乎其他一切我们都没有
不再需要，因为这都是基本的
nextjs 不相关的东西
任何
更长，好吧，让我们确保我们已经
得到了我们想要的 div，然后我们就可以了
去吧，这是我们更新的主页
现在我可以看到我的 SAS 应用程序
如果我点击它它应该带我去哪里
我需要做得很好，所以记住这一点
让我们继续前进，进入下一个
实际有的部分
这些链接工作正常，那么什么链接
我们真的想这样吗
现在回到我们的布局，我将继续
并做链接。
jsx，这些将是我们的导航
链接所以我实际上只是
将其更改为导航链接
我们将继续执行导出默认操作
导航链接，实际上这不是
与其他所有组件一样的功能
这将成为我们的一个常数
将导出然后我们将
导出我们想要的东西
各种 Lings 所以我将从
只需贴上标签，我们就会做仪表板或
呃，是的，我们就这样称呼它吧
仪表板，然后我们继续
说类似的话
用户或喜欢关闭
需要并且将会是
false 然后我们继续说
href 将成为主页
好的，现在我们就去这些导航链接
进入我们的导航栏，我们要去
提前导入它们，所以导入
导航链接
从
或 naav 链接可能应该只是
正在出口
默认，我们可以这样做
出口
我们那里有默认的导航链接
返回我们的导航栏和导航链接
从导航链接很棒，这意味着那么
在我的导航栏中我想重申
带有导航链接的。地图，然后
实际值或链接本身，然后
索引号，然后我们要
用粗箭头把这些东西画出来
这里的方法或者回调到实际
这样做，所以我们要
返回链接本身，以便我继续
并说，呃，我们称之为导航链接项
只是为了不至于与
链接本身，所以在这里实际
href 我们可以留下类名我们可以
放入标签，然后我们
好吧，这样就不会改变
还没有什么但是当然如果我
摆脱所有这些其他的
链接已经在这里然后它
应该为我改变一些东西，我们保存它
现在是我的仪表板
看起来好一点了所以在这个
点我实际上没有任何链接
那是，你知道用户需要关闭
但我们已经让这个用户离开这里了
我们继续说应该显示
它将被用户关闭
经过身份验证的呃是平等的
到导航链接项目点，我们说身份验证
必需的，所以如果他们经过身份验证
如果 Au 是，那就是真的
要求这是真的并且
然后我们继续说应该
基本显示 如果不应该显示
然后为 null 否则我们将继续
只需发回该链接即可开始
往前看一下这里我要去
继续并先注销
然后我们将继续更改
成为作者需要的仪表板
是的，保存它然后它就会消失作者
虚假又回来了，当然
订购将基于
在这里订购，所以喜欢等待
例如，我们会继续说
作者要求真实，那就这样
转化为体重
清单就这样，现在我要
继续登录，这就是我的体重
列表和仪表板未显示
所以这实际上意味着
应该显示一点不同
如果经过身份验证的话应该是
需要并且他们已经过身份验证
确实是这两件事
如果它们相等就不是这样所以这是一种并且
并且应该显示 um 或应该隐藏
可能是这样，这可能不是
正确的，所以应该隐藏，如果它是
已通过身份验证，或者如果未经过身份验证
经过身份验证，这是必需的
也许我们应该这样做
隐藏哦，如果应该隐藏的话我们就走
前面并说 null 否则我们将显示
该链接因为我们肯定仍然想要
向用户显示的仪表板或
对于不是用户，所以如果我继续登录
出去，我们可以做点什么
这样好一点了 好的 很好 所以
现在让我们继续并回到
登录然后我们就可以了，这些只是
那些侧边栏链接应该可以使用
在这两个地方，所以在我们的基本日志应用程序中或
基地呃纳瓦尔在这里回到
表格同样的呃想法将
也必须经过这里
所以让我们继续获取这些导航
再次链接，我们将把它们包装在里面
在这里，我们只需更改默认值
类名与那些相匹配
我们去那里吧，我们会摆脱一切
除以下之外的其他链接
也许我们的用户的东西所以用户
验证了这个我就走
前面说退出然后就这样
注销，这样实际上就可以了
可能是我们想要的东西
只是与用户相关的东西等等
侧边栏注销在那里很重要
有道理，而我们要
继续使用这两个项目
这里的侧边栏有相同的类
实际工作表本身应该只显示
这些，而我们拥有的其他部分
我们的用户也一直出现
是的，所以我们希望这个按钮是
有点不同，我们会改变它
用户一会儿就掉下来了，但现在我们已经
让我们的仪表板链接正常工作
正确，当然如果我打破它
下来它在两个地方都能正常工作
如果我想退出，我可以去
继续前进，嗯，然后如果我打破了
它再次下降我不应该看到那个日志
仅显示仪表板本身
太好了，现在让我们看看我们如何
可以做用户相关的链接，这样就可以了
与我们这里的导航链接非常相​​似
我要继续创建另一个
一，我们会继续说非用户
链接或类似的东西这个是
将会正确注册，因此请注册并
这个将要登录然后
登录，我们将继续导出
那也是如此，我们现在将带来这个
进入我们的导航栏，然后我们就去
向前并带来
就像这样我们就得到了
非用户链接，所以第一个链接
以下半场为基础
这样我们就有了导航栏
拥有其他所有主要链接
我想要的链接在这一侧
搜索产品表单现在是
所以我要继续前进并崩溃
首先我们会回到这个表
然后我们将继续查看
表格在这边，我实际上没有
也许你想要搜索栏本身
希望它出现在您的登录信息中，您可以
完全可以，但我要去
一起摆脱这一切
但我确实已通过身份验证
现在我可以在这里使用问号
实际渲染出来然后
我将使用一个片段来绘制我的
基于基本相同的新的
所以我要继续复制
在这里，我们将继续粘贴
非用户链接的东西代替
导航链接所以非用户链接在这里那里
我们去保存它，在这种情况下我
实际上不会隐藏任何这些
因为它们是基于用户的
用户本身已经经过身份验证
我可能不想隐藏任何
他们但问题是导航链接
我们只想确保自己
他们基本上正在接受治疗
同样的，所以当我们渲染它时，我们
现在看到登录和登录都在这里
这当然不是我想要的所以
让我们继续回到我们的
纳瓦尔，看看为什么会这样
最终发生在我们拥有的地方
此处有弹性项目，所以我要走了
暂时复制一下
并引用或撤消所有内容，然后看看
我们的表格发生了什么
到处我们都有这个毫升
汽车就这样停在这里，我们走吧
继续并暂时保留它
然后我们将继续并带回来
我们的片段在这里，我实际上会
变成它自己的 div 我们会
将其粘贴到此处，现在我要
继续学习一些课程
从那种形式，因为我认为这是
继续解决这个间距问题
至少对于那些链接我们来说是个问题
我们会去保存它，现在确定
如果我愿意的话，他们就在这里了
把它分解一下，它出现了一点
更多一点嗯等等下拉
不幸的是我们再也看不到了
当我们打破它时，它就是 SAS 品牌本身
向下太多，而且这些按钮也是
彼此太近了所以我们走吧
前进并摆脱也许的变化
让我们摆脱它，看看是否
解决了它不解决的按钮问题
让我们做空间
X2 给了我们一些间距
如果我真的把它分解的话
看起来不错
接下来我们想要看看为什么
您所知道的实际项目缺失了
品牌链接所以我们在这里看到的是
当它变得足够小时它就会被隐藏
由于该工作表而被隐藏
我们稍后会看到，那又怎样呢
然后我想做的是引入另一个
div 就在它旁边，我们将做 div 和
这将是呃班级名称并且
这将会是
医学博士
隐藏，我们将继续并放入我们的
品牌链接让我们看看是否最终成功
为我们工作所以让我们休息一下
再次下降，我们就这样了
我们的品牌链接也再次出现
因为汉堡菜单还在那里
我认为拥有它是完全可以的
品牌链接多次出现
就实际外观而言
移动应用程序呃很酷所以现在
我们已经知道了，让我们继续吧，我们
可能实际上不需要做太多事情
与登录以外的工作表和
注册以便那些实际的链接可以使用
就像我们之前看到的那样
让我们继续看一下
所以此时我可能会考虑
将工作表移动到其自己的组件中
但我其实不想花
花了很多时间，所以
想法和我们刚才的一样
看到了所以我要继续复制
这些非链接在这里，我将把它们
就在这个旁边所以如果他们是
经过身份验证后我们就可以注销了
否则我会继续带进来
整个部分在这里，我将使用
再次片段，但这次我们将使用
来自所有其他类的类名
这些链接本身的保存它
如果我们测试它，我们就可以打破它
向下我们现在看到那些相同的链接
总体来说我认为很棒
现在看起来不错之一
纳瓦尔有一些需要改进的地方
事情就是把这张纸从
在这里排队并让它成为它的
自己的组件，但也包括所有的
nav Lings 这里我们有很多
这里发生的情况
转向可能很有意义
这到它自己的组件中作为
与我们的品牌并没有太大不同
链接我会让你这样做，它实际上是
将会相当简单
因为它的渲染效果是一样的
一遍又一遍的事情意味着
我们不会重复多次
这就是我们最终要做的事情
我们当然不想那样做但是
我将保持原样
现在我想做的实际上是
启动允许非用户的过程
和用户提交一些东西到
主页上的重量列表意味着
我们需要重新审视几个概念
我们也已经看过了
在 D Jango 上介绍一些新的
API方面我们来看看如何
做正确的事
现在我们有两个小家务用品
在我们之前需要在我们的导航栏上做
启动体重清单表格，以便在其中
当我们实际迭代时的导航栏
通过网站上的每一个链接
我们需要添加实际组件本身
在一个键中，所以第一个键将是
是导航链接，然后像破折号一样
然后 idx 在这里，所以我们要去
无论我们在哪里重复这个过程
实际上映射了所有内容，所以我会
只需快速搜索地图即可，这里是
另一个链接我称之为 B
你希望这些在
页面然后我认为最后一个是
我们称之为这个
C 实际上这是最后一个
正确，然后 D 很好，接下来是这个 div
与我们真正想要的 ml Auto 的类
这也在我们的下拉菜单上，所以去吧
前面把这个放在这里
围绕该下拉菜单，所以当
你登录你的用户东西就结束了
我们走了一点点
比它更好
太棒了，现在我们有了
让我们继续吧
开始构建我们的过程
weit 列出了我们的 weit 列表表格，那又怎样
我要在这里做的是我要做
根据什么创建表格
我们对登录页面做了​​这样的操作
登录页面将其复制到 weit 中
我们会继续做的清单
形式。 jsx 将其粘贴到那里并
实际上只关注形式本身
所以我们将继续从形式到
表格把它剪掉并去掉所有的
另一个 return 语句并且只有
表格本身，以便我们可以工作
基于接下来足够简单的内容
我们将继续将其更改为
只需登录我们的体重列表即可
URL 或我们将要使用的 URL
已经看到它是权重列表 API
我们将使用相同的 URL，因此
当然表格会发送
回到 nextjs API，这样我们就有了
使用 O 方法的能力
完全如果我们需要的话
处理提交，我们将继续并带来
这是我们获取方法的地方
仍然会是我们仍然
这时候就要用到Json数据了
我们不会真正回来
此处的响应我们将更改它
一点点所以我们会继续来
在这里摆脱我们不再需要的O
但我会继续发消息
并设置消息，我们将继续
使用 State 将其作为空
string 我也会做错误并设置错误
然后使用 State 我会继续
把它设为 null 好吧，如果是
成功，这就是我们要做的，我们走
向前并将消息设置为感谢
你加入这样的事情如果
不成功，我们会继续
说那里
您的请求有误
请再试一次，这应该不是
设置消息而不是设置
错误还好，很简单，所以现在
我实际上会将其保留为字符串
好吧，所以我们就到这里来
在我们的形式本身中我会继续做
div，我们将继续设置它
消息，如果是
在那里我们会做同样的事情
错误如果是
好吧，表格本身很好，该怎么办
我们需要在这里输入电子邮件
董事会因此发送电子邮件
电子邮件和您的电子邮件，我们不这样做
完全需要我们想要的其他输入
提交，但我会继续
将此称为“加入”之类的东西
韦特
好吧，现在我们的表格就出来了
所以我们需要更新我们的后端
能够处理这个我们可以摆脱
我们可以摆脱这里的关闭提供商
链接的后端我们该如何做
以及 nextjs 的后端和这里
case 将是路由中的 API，并且
基本上就像
这个 git 路线，但这将是一个帖子
现在再次我们已经看到的路线
一个帖子路由，并且是在登录中，所以我
将继续使用那个作为
我们的默认值又回到了我们的体重
列在这里我会直接在这个下面
然后按回车键，我们就得到了我们的帖子
这里的端点将再次是
与我们的 git 相同的端点，我们会明白为什么
当我们到达那里但想法是
我们将在那里发布一些数据，以便
这的下一部分实际上是
令牌，因此登录实际上没有
这里的令牌这就是为什么我
其实想让它现在就出现
所以另一件事是这些标题
也许我们只想接受申请
再次使用 Json，所以继续使用
与我们对其他标题所做的类似的标题
是清单的一部分所以我会去做
const 实际上我们会说 let headers
等于这个，然后是 off 令牌
如果用户在那里的话
所以我要继续复制
获取令牌方法
此时此地我们将继续说如果
关闭令牌然后我们将继续设置
授权标头如
这是因为在等待的情况下
列表我们甚至不需要有
最有可能经过身份验证的用户，但如果我们
如果我们想保留的话就想保留
我们可以通过身份验证的用户，那就是
接下来我们实际上不知道接下来是如何完成的
需要在这里用我们的代币做任何事情
这些事情都不是
不再需要呃来的数据
回来后我们就不得不担心这个问题了
就在那里，呃，但现在我就
将其保留为空，我们将给出
状态为 200 否则我们会给出
状态400
现在我们可能会看到一个错误
Json 数据本身，因为我们
最终会查找到一个页面
根本不存在所以我要去
继续并在这里做其他事情
控制台日志和响应。状态我们刚刚
想看看该状态可能会结束
从这里开始并调整它
因此，现在我们已经有了
我认为这篇文章的一切
数据已准备好我们的表格已准备好
我们将继续并给予这个
我们将把它带入我们的主页
这是我们的主页，我要去
前面并把它放在正上方是
已通过身份验证，我们即可继续
并在这里填写我们的体重表
我们走了，然后回到我们的
主页
在这里，我们已经加入了Weit名单，我会去
继续执行，但出现错误
根据您的要求，好的，如果我们滚动
一直到底部我们得到 500
在这里，如果我上升一点，我会
get 是 405 然后这个方法不是
允许它不是有效的 Json 所以它确实如此
显示状态代码部分
实际控制台记录的原因
状态码基本上是假设
上面的一切都正确完成
如果当然不是的话我就会
控制台记录所有发生的事情，直到我
找到错误发生的位置并在此
如果错误发生在这样之后
基本上如果它不回来
Json 我要继续说尝试
如果这是的话，请抓住这里
如果失败了，我会继续
在这里返回 500 等等或者也许
比如 400 现在我们就说 500
这是服务器错误，但是基本上
如果那不存在 如果乔恩不工作
那么情况就会是这样，好吧
所以在其他地方我可能不会
实际上需要返回 Json 呃
此时我们可以做到，但是
我们的想法是我们要继续
这样返回 500 错误
我将再次执行该错误
符合我们的要求，但现在我们的控制台是
显然它实际上向我们展示了
有点接近我们想要的
实际上想要我们的回应
嗯，所以我会继续做 400，然后我会
发一条消息，说类似“呃”之类的内容
你不知道
发现或者实际上应该是404
很可能是因为这就是正在发生的事情
如果我们在这里执行我们的请求就会发生
呃，我们一切顺利，所以我们得到了
405 在这里，但是我们在这里得到了什么
实际上是 405 是在方法中不是
允许，因此找到了端点，但是
方法不正确，因为在我们的 API 中
我们所拥有的一切都在哪里进行此通话
这里的列表条目我们只有一个
get 方法我们没有 post 方法
在我们的后端，这就是为什么状态
代码实际上是 405 所以这应该
可能与响应相同
状态代码并沿
错误行
呃或者让我们将其保留为消息
无效的呃请求或类似的东西
那么现在我可以继续做
我们进展顺利，所以确实如此
告诉我们有一个错误
真的很好所以回到前端
那部分正在工作，所以我们有
回复好的，否则就结束了
向前，只是说嘿，有一个错误
根据您的要求，请再试一次，我们
可能可以卸载 Json 数据并且
把它也放在这里，但这只是
这不是必需的
所以我们真正需要做的是现在
回到 D Jango 并能够
我们自己处理发布数据，直到
目前我们还没有这样做
让我们继续看看如何
做正确的事
现在进入我们的 Django 项目
将使用 Jango ninja 创建一个
post 方法或处理即将到来的 post 数据
通过所以它与
我们已经看到了 但是这个想法
我们进来做路由器。发帖
我会把它留为空
字符串，这样基本上你就知道了
API API 权重
列出与 git 完全相同的路线
方法，这样我们就可以处理不同的路线
就像我们接下来看到的一样
继续努力创造体重
列表条目，它将接受
请求然后我们想要返回
现在我们想要什么
返回将与
数据本身，但现在我就去
继续说一个，所以这里的想法是
post 方法我们能做的是我们可以
声明类似数据的东西，然后
我们想要使用这个模式或者我们想要
验证，以便架构
当然在我们的例子中将会是
只是在此处创建该模式的条目
只需电子邮件本身，我们就出发
向前并从
模式，然后我们继续
将其带入数据本身
这是数据类型
我们会看到我们将继续并打印出来
数据本身，然后我们甚至会
返回该数据我们会看到什么
最终结果是现在假设
仍在运行，让我们继续
并确保它与转速运行
服务器，我们将回到 nextjs
应用程序确保端口是
在这里对齐，现在让我们继续
并确保 nextjs 应用程序是
也仍在运行，然后我们就走
继续看一下我们的表单值
在前端，好的，所以我们要去
在那里输入一个条目，我们得到了
感谢您的加入以及我们所得到的
返回的只是数据和
这个Json数据真的是问题吗
在这里打印语句返回
有了该数据，但是这个 Json 数据是这样吗
让我们实际看看nextjs
在路线本身的内部让我们走吧
前面和控制台记录响应
回来了，所以我们得到了响应数据
在这里我想继续做
控制台记录响应数据，所以我们
去看看那是什么
看起来就像让我们继续把
在这里我们点击提交，是的
实际上以 Json 数据的形式返回
很酷，但问题是我实际上想要
将其存储在我没有的数据库中
已经做到了那么我们可以做什么
我们可以在这里采用相同的模式
我们可以获得体重清单条目，我
实际上可以创建一个新对象
所以我们在这里获取实际的数据
体重表入门级我们做OB
对象。创建然后我们就可以做数据了
我们可以在这里调用一个字典，这意味着
我们可以用两颗星来解压它
创建该数据，现在我们实际上
有点想要返回对象
实际创建的实例等一次
我们将再次看到一个响应
我们可以引入的潜在对象
就这样，我们要
去保存它，我们将继续
现在就在这里刷新，所以我会继续
运行这个加入权重列表我会继续
看看不同的重量
此处列出的列表
嗯，看来我的网址不正确
所以我们也必须改变这一点，但是
这里有我的清单，所以我们走吧
向前跳到前端并
只需更改我们导航上的链接即可
前面的酒吧
结束所以进入我们的组件
布局到 Navar 链接和权重
希望您列出，注意，如果您
我们现在不是在重量清单中这样做了吗
页面在这里我要继续
再次提交该表格，以便我们继续
和我们的体重清单
形式还好，现在在体重清单中
我们自己在这里看到了表格
或我们点击加入表单中的数据
我只是在这里快速刷新一下
果然没有问题所以理所当然
我可能不会加入重量
列表与显示在同一区域
表单数据，但重点是我想要
确保它仍然有效
所以显然我可以继续前进
不断添加越来越多的条目
那个体重清单很棒，所以这个帖子
方法绝对有效，而且是
返回同样的类型
响应模式，因此没有此响应
我们可能会遇到某种错误
但下一个问题当然是
这是用户，所以如果我打印出用户
他们自己并注意到我已登录并且
我可以继续尝试做的一切
这和我得到匿名用户所以现在我们
留下了如何做的难题
身份验证，这是我们要做的事情
一会儿但我们的想法是
实际上还没有用户登录
通过这个创建权重列表条目让我们
继续看看我们如何做到这一点
我们可以让两个用户同时登录
并且未登录
现在我们要允许登录用户
或未登录的用户能够
按照我们的方式提交体重清单条目
要做到这一点是通过使用 Jango
Ninja 的自定义功能在这里，所以我们
也可以立即看到我们可以 IP
白名单所以这实际上非常好
所以这意味着我们的 Jango 项目和我们的
nextjs 项目实际上可以关联
也基于此 IP 白名单
所以这只是另一层
您可能还想进行身份验证
为了更加安全我们不会去
此时要做到这一点，但方法
一切都完成了，将会得到正确的解释
现在，在我开始之前，虽然我
想实际看看
nextjs 代码是我没有做的事情之一
实际上做的是替换原来的
白名单发布方法的标头
我们将继续更换
这些标题确保您有
正确的一个
现在还包括代币本身
这样做的原因是因为在我们的
在这里创建白名单我们想看看是否
用户无需放置即可通过
无论如何，我要走了
继续看打印语句仍然
现在你可能已经看到了
如果你自己发现了这个错误
但我没有，所以我要继续
并在这里加入，它仍然说
匿名用户自然是我们
那么我们可以做的是引入
在那里记下所以我要走了
提前并记下作为其中之一
位置或物品在这里，现在我们可以
继续运行它，我们点击 join Weight
现在列表它向我显示该用户
我能做的就是我可以走了
前面说对象。用户等于