水哥澎湃编程教程

大家好，我是讲师井水，那这节视频我们来学习 react 当中的 use context 这个勾字函数， 在我们的项目当中呢，往往需要在多个组件之间共享数据，现在我们看到的呢就是我提前准备好的一个例子，那我们先看一下这个样例。好， 呃，现在这个 myapp 是我们的跟组件，那跟组件当中呢？我用 use state 呃创建出来一个状态，那就是 count 以及 setcont 修改这个数据 啊，紧接着呢，我下边呢使用了这个数据，然后，哎，我希望在另外或者说希望在他的子组件当中也使用这个数据以及这个修改数据的方法，那我怎么办呢？哎，我在引用这个组件的 的时候，通过两个属性传递了这两个值啊，那紧接着在我们这个 parent 组件当中我们看一下啊，那我首先呢，呃是先通过 props 呃去接收，然后把这个 props 进行一个结构， 拿到副组件给我们传过来的。呃，这个，呃两个属性，一个是 count， 一个是 set 啊， set count 啊，当然我在这说副组件，准确的说应该是跟组件是这个 myapp 啊，因为我们在 myapp 当中啊使用的这个 parent。 好，那在拍润他这个组件当中呢，我再次使用了这个 cont， 那就实现了在两个组件之间共用一个数据，共享一个数据。那同时呢，在我拍润他这个组件 当中呢啊，我又引用了另外一个组件 child 啊，那这个子组件，那同时呢，我也希望 child 这个组件可以使用这个数据以及修改数据的方法。我再次通过这个属性啊向这个子组件进行传递， 同样道理，在子组件当中呢啊，我们依然是通过 plus 去接收这个，呃，上一层组件传过来的数据，然后对它进行一个结构，结构之后，那么我去使用它 啊，使用它呢？在这个 child 组件当中，我除了使用这个数据之外，那么呢，我还使用了这个 sidconte 啊，对我们这个数据进行了一个修改。好，那这个就是我提前准备好的这么一个样例啊，那我们看一下它的这 这个执行结果，现在呢，其实我们是三层组件，那最外层是根组件，根组件里边呢有副组件，副组件里边再有一个子组件，哎，是这个样子，那这个数据我是从外到内 逐层的去传递进去的啊，啊，那在子组件当中，我这有一个按钮按钮，我呃点击可以修改数据，那么我点击走。 好，那么可以看到当我点击按钮的时候，这三个数字同时变化，就证明什么呢？证明我在多个组件之间确实是共享了数据啊，共享了同一个数据， 好，但是这样来说啊，我们比较麻烦，就是每一次我们都要通过呃 呃呃属性的这个传递，然后呢再通过这个属子组件当中呢，再去接收这个属性， 这样去使用，那如果说我们的组件签套的层次比较多哈，那，那就意味着我要写很多次，每一层我都要这样写，因为它是逐层传递了 啊，所以这个呢是比较麻烦的。哎，那因为这个麻烦呢就诞生了，或者是说呢，哎，给我们啊， react 给我们提供了一个相对来说要好用一点的这个护抗，那就是 use context 啊， context 呢？上下纹啊，或者说上下纹？环境 好，那么我们现在就用呃 use context 来同样实现这个共享数据的这个能力啊。啊，那这个 时候我们怎么去做呢？我们首先，呃先要把这个 use context 解构出来啊，那我在这呢，呃要要解构出来两个啊，那一个呢是 use context。 好，那你其实通过英文名字就是什么？就是使用上下文，对吧？你要使用上下文呢，前提是说你要有一个上下文，所以呢其实我们在这还应该有一个 create c o n t e x t。 哎创建上下文啊，这两个呢是结合使用的啊，先创建再使用。好，那现在呢，我已经有了这两个方法。呃然后呢我们来做，首先呢我在啊所有的这个呃组件之外 啊，或者说我可以理解为单独的一个组件，或者说我们在这也可以理解为全局。那我首先干嘛呢？哎，我先创建一个环境对象， 好，在这，那我给它起名字就叫 my context， 好啊，然后调用 create context。 好，那在这里呢，我不用去传餐啊，那我直接就是得到这一个对象。好，然后这个对象我们怎么去使用呢？过来， 哎，我，我们到哪了？我们在这个跟组件当中，那跟组件当中呢？啊，这个呢是它的内容，然后我们用刚才创建的这个，呃所谓，呃 context 上下文对象， 我们把它包裹起来啊，那我创建的这个叫 my context。 好，还没完，然后呢点儿大写的 p 啊 p r o v i d r provider， 好， 那他是一个双标签。然后我们把哎这个跟组件当中所有的内容呢进行一个包裹啊，包裹了包裹之后还没完啊，然后我们在这个这里写一个 while you， 哎，好，这个样子，那么在这里我们写这个 while you 将要传的值呢？哎，它里边任意的组件啊，它，它的子组件，它子组件的子组件都可以获取到啊。好，那么在这 while you， 我们传什么？假如 说我们在这个当中，我们当然是希望在多个组件当中去共享这个 cont 以及赛的 cont， 对吧？好，那么我们就可以把这两个值拿过来啊，好，那把这两个值拿过来呢？我当然可以还是数组的形式，我也可以是对象的形式 啊，那在这呢，一般我们来说呢，呃，更习惯于对象的形式啊，所以我在这一个对象，哎， 外层括号是这个语法啊，然后呢，里层这个括号，这对括号表明我是一个对象啊，然后我在这 count， 然后呢 set count。 好，那也就是说，哎，我这其实传了一个 while you， 这一个 while you 是什么？是一个对象，对象里边两个属性，一个是数据，一个是操作数据的方法，就是这样啊。好，那我们现在呢， 创建了这个，呃，环境对象，或者说上下文对象，并且呢，我们使用了这个上下文对象啊，把这些包裹起来也传了数据， 那接下来啊，接下来怎么怎么弄？我在这应该先先写个注释啊，因为这个呢，算我们的第二步。 好，我们的注视呢，是这样去写啊，因为这两个括号表明我里边要写 gs， 那，呃， gs 注视呢？我在这采用一个多行注视啊，那所以他就想当然的可以是注视啊。好，那么第二步，那么我们这其实可以理解为是配置这个环境 对象并传直，哎，这个就相当于我们传的直。好，那第三步就是我们在里边的任 一组件当中要去啊使用，或者说拿到我们这个环境对象所传的这个数据。哎，我们先在哪去拿呢？我们先到这个最里层的这个 child 里边去拿。 好，那最里头的这个呢？我把它改造一下。哎，这个行餐不要了啊，那这个 context 我也不要了啊，那我们怎么拿到这个 count 以及赛的 cont 啊？那我们这样去做， 我们就可以怎么样呢？ use context。 哎，我要使用。好，我要使用谁？那我要使用，我全局可以访问你的这个啊， my context 啊， 在我们的项目当中呢，那我们这个 contex 可以是一个单独的文件，然后我们怎么样呢？我们把它，呃，我们把它 import 进来，我们把它导入进来 啊，比如说我这是一个单独的组件，那我这个组件那可能就是一个 t s x 文件，对吧？然后我把这个，呃这个环境对象引 port 进来，我就可以使用它，哎，我就可以调用 use contex， 然后把这个环境对象往这里一放， 哎，就可以了。好，那在这里一放之后呢，我们就会拿到，呃，这个环境对象当时所配置的那个数据。好，那这个数据呢？我们 他是一个对象嘛，对吧？他是一个对象，那在这呢，我们依然是给他解构一下，解构一下呢，就是 count， set count。 啊，那就是这个样子啊。啊，你看，那这就少了我的一个什么呢？少了我的一个接收啊，我直接在里边 uscontex 就可以了。啊。啊，那在 在这呢，我不去接收他，那么在他的上一层组件里边，也就是这个 parent 里边，那我也就省去了给这个组件的一个什么呢传递，哎，我也就不传了。是这意思啊，就是这一部分我就不传了。好，那删掉， 哎，就变成了这个样子。好，那这个样子呢，我们就看一下最里层的这个 child， 首先它的这个数据以及操作数据的方法啊，啊，那我们切换到这个刚才这个 demo 来刷新一下。 哎，我们看一下啊，走好，现在还是没有问题，对吧？哎，我子组件这里所采用的这个数据以及操作数据的那个方法，都是通过 use tex 拿到的啊，从最顶层那拿到的啊。好，那最后呢，我们再练习一下，我们在啊中间的这个拍润他这个组件里边，我们依然呢可以去改一下。那这个呢？啊，属性的这个行参啊，接收属性不要了 啊，那也就没有这行了啊，那我们这怎么做呢？好，我们在这还是啊 use context， 那我同样 my context， 我要使用一下这个环境对象，然后呢对它进行一个结构，结构出来 count 和 set count 啊，就这样子，当然，那你比如说在我当前那个代码当中，我不需要 setcond， 对吧？哎，这环境我不需要，那我就可以不结构，我只用哪个，我就结构哪个就好了哈，就这样子啊，那这个就 ok 了，当然，那我 在这呢不需要接收上一层的，那么上一层呢，也不需要给我传，所以在我们的 myapp 跟组件当中呢，那我在这也就不需要传了啊，那这又会少一些代码啊，走，去掉它。 好，那现在就是这个样子啊，那这个样子之后，我们再看效果刷新一下 啊，依然是没有问题的。那也就是说我们现在通过了这个 uscontex， 同样实现了在多组件之间共享数据，那这样共享呢？不需要在每个组件使用每个组件的时候传数据， 不用传了，那么在那个组件当中也不需要啊，刻意的去接收了，我只需要 use context 就 就可以了啊，好，这就是我们的这个呃 use context 啊，另外呢，我再稍微说一下，因为在上一个视频当中呢，我们呃分享了一个 use reducer， 那我们其实呢 use reducer 可以结合我们的 use context 去使用，那比如说，那我们在这儿呢，不是用 usedate， 那我们可能会用用什么呢？我们用 use reducer。 哎，这个样子啊，那我们 use reducer 在之前的这个例子当中，或者说我在之前的例子当中，我已经把它封装成了 use count 啊，那我们解构出来，一个是 cont 数据，一个是 disapatch， 是这个样子，那紧接着呢，哎，我 我们基于 use reduce 封装的 uscon 的，然后得到的这个数据以及这个派发器，我们可以把这两个传过来，那这样传过来之后，同样在其他的这个组件当中，我就可以使用这个数据以及使用这个派发器 啊，那，那那就说明我可以在多个组件里边使用这个同一个 usecome 的结果啊，是这个意思。 好啊，那呃本节分享呢，我们就到这里，那如果呢，你呃有收获，那你可以在底下评论区呢啊，给我呃留言啊， 这个学到了啊。当然呢，如果呢，我在这节视频当中呢，还是有一些点啊，你认为没有讲清楚，也同样可以在这个呃留言区呢啊，提出你的问题。好，那我们今天呢就到这里，拜拜。

好， next j s 官方文档的这个 demo 教程，那第一章我们来创建我们的这个项目。 首先呢，我们先打开我们的呃命令行终端，那在这呢，我使用的是 windows 操作系统，所以我在这呢使用这个 windows 加 r 回车，然后打开了运行对话框，再输入 c m d 回车，打开我的命令行。 在呃命令行之后呢，我个人习惯呢，是让他在一个干净的目录下边去创建项目，所以我在这呢地冒号回车切换到地盘。 然后呢，因为有的时候我们可能之前在 d 盘的某个目录，所以我 cd 反斜线回车，这样呢，就让我呃到达了 d 盘的根目路啊，那接下来我们再去按照官网当中的那个 命令去创建我们的练习项目。好，那么呢，官方文档当中的这个命令行呢，它比较长啊，呃，为的是让我们把更多的精力放在这个呃 nix j s 的核心功能上面。好，那接下来我们来看一下这个命令。 首先呢，第一部分，它是我们创建 nix j s 项目的基本命令啊，这个应该是说啊不可少的。那第二部分呢，就是我们要创建项目就需要给项目指定一个名称， 当然这个项目名称呢，也是呃我们将要创建项目的这个目录的名称。那接下来呢，我们 nix js 呢，呃，支持很多的这个包管理工具啊，那在这呢，呃，这个命令当中 指定了使用 n p m 作为包管理工具。接下来这个命令行参数呢是，呃指定一个项目模板，项目模板存在的意义呢？就是说，呃，我们不是说从零到一去创建项目，而是呃 使用一个模板去创建，呃这个目的呢，也就是说让我们我们把大量的这个学习的精力 放在耐克斯 gs 的核心功能上边啊，而不是说去啊写一些 css 啊，啊，写一些这个 ts 类型啊之类的东西，所以呢， 这个是呆默教程当中给我们提前准备了呃一些呃内容啊。好，那接下来呢，我们把这个命令直接 啊复制到命令行，然后回车，那我们就是呃去创建项目。呃，其实从命令行当中我们也可以看到，他是从这个 github 这个仓库把我们这个项目模板呃拉取下来的啊，好， 那么呢，在拉举完成之后，我们还是在命令行当中，那么我们 c d 啊， c d 到这个项目当中，然后呢再使用我们常用的这个 v s 扣的编辑器，把这个啊下载下来的这个 demo 项目我们先去看一下。 呃，这个呢，我们在编辑器当中呢看到的是这个样子，那当然呢，他有目录，有文件，有很多啊，那我们在这呢主要的看哪些文件呢啊？在这我们官方文档当中也给做了一个提取经验啊。好， 那首先呢我们第一个目录就是我们这个 app 目录， app 目录呢，我管他叫主目录，相当于我们在其他的项目当中的 src 目录，那也就是说我们之后编写的大量的代码都是在这个目录当中啊，那当然以及他的子目录当中， 在 a p p 这个目录下边呢，它有一个 l i b， 也就是 library 的这么一个目录，那在这呢它主要呃用来存放呢，呃，比如说我们一些工具函数啊，以及我们用于获取数据的啊，接口函数啊。 好，那接下来呢？嗯，还有什么呢？还有就是我们的 ui 目录，那 ui 呢？一般来说我们在这个项目当中用于存放，呃，这个组件文件 件啊，好，那再往下呢，就是我们的这个 public 科目录， public 科目录用于存放我们项目当中的静态资源，那静态资源，比如说我们啊地方第三方的 c s s 文件，那比如说我们这个， 呃页面当中要用到的图片啊，等等等等。啊。好，下边还有一个呢，这个是 scripts 这么一个目录，在这个目录当中呢，会存放一些脚本文件， 那在我们这个 demo 的项目当中啊，呃，他有一个文件呢，呃，脚本文件其实是 js， 用于，呃在我们这个将要使用的这个数据库当中去添加一些供我们操作练习的这个数据库记录啊，是，是这么一个功能。 好，那最后一个呢，就是我们的这个配置文件啊， next j s 啊， next 点 config， 点 j s。 好，这就是我们这个 demo 的主要的目录结构啊。好， 那在这个我们这个 demo 项目当中呢，呃呃，有一些文件也还是给我们提供啊，提供好了，或者说预先准备了，比如说我们现在看到的这个叫做，呃，在 l i b 下边啊，呃， place holder data 点 j s 这一个 啊，这个呢是在我们连接数据库之前，那么我们可能要做一些啊，数据展示的一些练习，那所以呢，这个项目已经提前给我们准备好了一些模拟的 数据，除了这个模拟的数据呢，因为我们的 max j s 它默认情况下是呃支持或者说使用 t s 的啊。啊，那为了照顾说我们有一些同学呢，这个 t s 不是很好啊， 另外呢，也就是说把我们的这个精力还是主要放在 nice g s 本身，所以这个单目项目当中同样给我们啊预先定义好了一些 t s 类型啊， 好，这个文件，嗯，也是在 lib 这个目录下边啊，那这两个文件我们只需要指导一下，然后我们用的时候呢，就是在从这个相应的这个文件当中直接导入就可以了。好，那么我们继续。呃，我们刚才只是看 看了这个 demo 项目的目录结构，以及看了两个文件，但是现在我们这个项目呢，还不能去运行啊，因为我们只是啊下载了一个模板嘛，那模板这个项目呢，需要依赖，所以我们在这呢还需要执行 npmi 啊，好， 去安装这个依赖，安装完这个依赖之后呢，然后我们去把这个项目跑起来，就是执行这个 n p m r d e v。 好，呃，那在执行完 n p m 软 d e v 之后，我们可以看到它大概的提示啊，这儿写的是 next j s 十四点零点二啊， 当然那个你的那个版本可能和我这个商务险不一样啊，同样呢提示我们，嗯，可以在浏览器地址栏输入 logo 号 三千，那么查看我们的这个项目的啊，一个刚创建之后的样子。 好，那么在这呢，我就是在浏览器输入了这个地址，然后看到了这个页面在这呢，我稍微吐槽一下啊，就是，呃，默认的这么一个新的项目页呢， 它这个箭头啊比较大，你可能看不到，所以我在这呢摁了 f 十二，把这个页面缩小，我们看到这个页面的啊，完整的这个样子啊， 我们之后的学习练习就是在这么一个啊啊半成品的一个项目的基础上，然后去学习他的核心技能。 好，那接下来呢，就是我们去查看这第一章的啊，或者说阅读第一章的英文 文文档。好，那接下来呢，我们来进入啊，我们这个 demo 项目的第一章啊，好，那第一章呢？我稍微把这个字再大一点啊，啊，在这呢，我们首先是来开始，然后呢创建一个新的项目。 好啊，那去创建一个 next 的应用项目，那首先呢是打开你的终端， 然后呢通过 cd 命令切换到啊指令的这个目录区。哪个目录呢？ folder 文件夹目录啊， 是你希望的想把你这个项目放在哪哪个目录，那你就切换到哪个目录去啊，然后我们去执行下边的这个命令啊，那 下边这个命令呢？我，呃在刚才也解释了啊，那这个是我们的基本的命令，然后呢项目的名称啊，这里是使用 npm。 好，以及我们有一个项目模板啊，在这个项目模板的基础上去做这个练习。 好，然后这啊这个命令使用的是啊这个 create next a p p。 啊，这么一个啊，那它相当于什么呀？相当于一个啊，命令行接口工具，命令行接口工具啊，它呢帮我们去 建立这个 next j s 的应用啊，当然是为你哈好，嗯，然后呢在上边的这个命令当中，那么你也使用了这个 example 啊，这么一个标志，那他的这个标志呢，就是让我们去，呃，在这个课程当中呢，是使用这一个模板啊， 好，再往来，那在这呢，我们就是浏览我们的这个项目，也就是我们刚才执行命令完的那个项目。 呃，那在这呢是 unlike， 呃，这个教程，那这个是不像这个一些教程那样，那怎么样呢？那就是，呃让你去写代码，呃。从哪从什么 程度去写呢？从这个零去开始写代码，也就是说我们当前的这个教程不会让你从零去开始啊，写代码啊，然后后边呃 watch off， 那更多的这个代码啊，更多的这个，这个 或者说叫许多吧啊，就是这个课程当中的许多代码，那我们是已经写完了啊，已经为你写完了啊。 好，那这样做是为什么呢？那这个这样做的好处啊？那是它反应乐 reflect 真实世界的这个 开发的这么一个状况啊，那就是我们在实际工作中开发呢，就是这样，一应该是有一部分代码已经创建好了，或者说已经写好了， 那 where 就是你 likely， 就是你更像于说你在工作的时候已经有 了一个，或者说你在工作的时候，呃使用一个已存在的代码仓库啊，那我们就是他的意思就是我们在实际开发当中肯定是，呃有之前的代码积累，有仓库，我们一部分代码就直接从代码仓库拿过来用就好了啊。 好，然后下边啊，我们的目标啊是什么呢？是帮助你聚焦于啊，学习 主要功能啊，学习 nix j s 的主要功能。哎，这是我们呃的主要目的，让你聚焦在这啊，那所以呢？是 result how to， 呃就没有必要去写所有的应用成 程序代码啊，就是把大部分的精力啊，主要精力集中在我们这个耐克斯 gs 的主要特征，上边啊，好，然后下边 那在安装完成之后，那么呢你去呃打开你的这个项目啊，用这个编辑器去打开，并且呢跳转到这个项目目录当中啊，这个项目目录当中，那在这呢，他执行了 cd 命令， 然后啊，那让我们花一些时间 spend 啊 sometime 去浏览这个项目， 然后下边呢是 folder structure 目录结构， 你可能会啊，或者说应该是你将 注意到啊，注意到，注意到的东西是什么呢？啊，这个这个项目有下列的目录结构啊， folder structure 啊，这是这些，然后下边是文字的一个说明，首先是 app 这个目录， 它包含了所有的路由组件，然后呢还有就是你的这个应用逻辑啊， 这个是啊，你将在或者说你大多数的工作的位置啊，或者说从这这个 from 哎，怎么翻译好呢？就意思就是说你之后的大量代码都肯定是在这个 a p p 这个目录 里边的啊，好，再往下 a b b 下边这 l 呃 l i b， 那这儿呢是包含呃函数，那是被用于你这个应用当中的，这个函数 好放在这 l i b 里边，然后比如啊，可用的可重用的工具函数，然后呢以及数据获取的函数，那就是我们封装的这个接口啊， 再往下，呃 a p p u i 那 u i 这儿呢？包含了所有的呃 u i 组件，那就是你这个应用当中所有的 u i 组件，那比如说我们可能会有一个 car 的组件啊，这个表格组件 表单组价啊，那后边这句啊，呃 to save time， 那就是为了节省时间啊，那我们已经替你准备了这个相应的样式 啊，这个组件为你，哈哈，对，就是就是给你准备了这个这个组件以及这个样式了啊，也不需要你去写，因为我们的焦点还是在主要的这个。呃，耐克斯 gs 的功能上边啊， 好啊，下边 public 目录 public， 然后包含所有的静态资源啊，就是你这个 for your application 啊，就是你这个应用当中的啊，比如说图片啊，好，然后呢？这个 scripts 啊， scripts 呢？包含 a seating script。 那怎么翻译？叫种子文件还是什么？那其实他的目的就是，呃被用于，呃 populate 填充你的这个数据库，在后面的章节当中啊， 我们操作数据库的时候，那执行这个一个这个目录里边一个脚本文件，那么就让我们数据库里边呃，有这个数据了， 好，再往下。呃配置文件，那就是 config files， 呃，然后呢？呃你也会，你可能也会，或者说你将也也能看到 注意到。呃配置文件，那比如说这个配置文件啊，好，那它在哪呢？在我们的这个根部录下啊，就是 your application 在，在这，嗯，那他多数的这个相关的这些配置文件，因为不光是他啊，还有其他的这个配置文件，那都呃是被创建好了的，并且那个 pre 肯定是提前或者说预备预先配置好了。就是，呃什么时候呢？就是在你去创建这个项目的时候，那许多文件呢？就被创建并且被提前预设好啊，预先配置好了啊， 所以呢，你，你将怎么样？你将不需要去修改他们啊？在这个课程当中你不需要去修改他们啊，然后 feel free， 那么就是随意去浏览这些 目录，然后呢？呃，别担心啊。什么别担心啊啊？如果你一点都不知道说这个代码是干啥的啊？如果你不知道这个， 如果你仍然 it， 如果你仍然不知道这些代码是干啥的，那也 don't worry 啊。别担心 好下边啊， place 啊， place holder data， 那什么占位数据？呃，那在这呢是，呃，当你去创建这个用户界面的时候，那这个占位数据是有用的 it helps 啊，它是有用的， 你去使用或者说你去拥有一些占位数据啊，怎么样呢？哎是有 用到啊是是这个意思啊啊？那如果呃数据库或者接口还没有， not yet 还没有，还不能使用 available 可用，对吧？还不可用的情况下，那 他当然是 helps 啊。好，那你可以怎么办啊？你可以 use place holder data 啊，使用这个占位数据，那这个占位数据可能是，呃 jason 的格式啊，那 也可能是呃 javascribe 的对象的这个形式啊 啊？或者呢？呃我们使用第三方的这个服 物啊，比如说啊 mock api 来模拟这个数据。呃在这个项目当中，那我们呢已经提供了一些。呃模拟数据或站位数据。在哪啊？在这个 play the holder data 这个里边 啊那呃这个数据里边呢？每一个 g s 对象啊，在这个文件当中，呃 represents 那是代表着一个表啊，代表着一个 table， 代表着你数据库当中的一个 table 啊，那举个例子，呃这个呢，就是我们的 invices table， 那就是我们它代表了数据库当中的那个发票表啊啊？当然他这是说，呃 javascribe abject 这个 abject 呢是呃广义的 abject 啊，你比如说他这说 invices， 那你说他是对象吗？啊？那他是一个数组，我们可以说数组就是对象啊，他这意思，所以，呃，所以说是 它代表着我们数据库当中的一个表啊，一个 table， 好，再往下，呃， in this chapter， 那就是在这一节啊， 呃，不是不是这意思啊，英姿 chapter， 那就是在这个章节，哪个章节呢？啊？这个建立数据库那个章节，你将使用这些数据去填充你的这个数据库啊， 就把这些数据库真实的写到你那个数据库里边去啊， populate it， 那填充它使用，呃，使用一些初始数据，另外啊， type script， type script， 呃，你可能也注意到了，那很多或者说大多数文件都有一个 t s 或者 t s x 的后缀 啊，那这个呢？是因为我们的这个项目，呃，是 is written 音是基于啊，或者说是用 t s 去写的啊。 啊，我们想，呃去创建一个这个课程，想通过创建这个课程来反映一个，呃，当代的 web 场景 啊，应用一个景象，嗯，其实直接翻译就是说，我们就是想让你，呃同学们知道说，呃，现在，嗯，实际的这个，这个 项目开发是一个什么样的状况啊？所以这个是 land space 啊，什么景象啊？这样 好。然后呢？呃， it's ok， 什么？ it's ok？ 如果你不会呃 typescribe， 那也是没有问题的。 然后呢？呃，我们将会提供这个 ts 代码片段， s snips 啊，当需要的时候啊，那就是当这个课程讲到一些部分的时候，他会提供啊，然后呢？ for now。 那么 当下，那咱们可以 take a look， 看一下哪个文件呢？看一下这个文件啊， definitions 啊，这个文件，那这里呢，我们手工的去定义了一些类型啊，那这这个呢？并且啊，或者说他将 被这些类型被返回啊？从哪返回？从数据库返回啊？嗯，这个其实我的理解是说当我们从数据库拿，嗯， 拿数据的时候啊，我们从这个从数据库拿数据拿出来数据应该有一个类型，那所以呢，我们去手工的定义了这些类型啊，是这样啊，然后 for example， 那这 这个 invises 发票这个表，那具有下边的这个类型啊，在这个文件当中这也是定义好了，那就是说我们从数据库读取发票信息的话，他会有这些内容，那么在这呢，我们手工的去呃定义了这个类型啊， 这不需要我们作为学习者定义啊，而是说这个项目模板当中已经定义好了，好再往下啊，那，呃，这他说的是，那通过使用 ts 呢？那我们可你可以去确保，呃， 嗯，没有什么，呃，不会发生什么意外啊，你不会意外的传递错误的数据格式给你的这个组件或者是数据库啊，你要 是有了这个 ts 的话，你就不会意外的啊，传错误的数据格式啊，错误的类型啊，给给组件或数据库啊，那比如说呢，你就不会错误的说把一个字符串 而不是数值传递给我们的这个发票 amount 这个属性， 因为 amont 肯定是金额嘛，那你应该是一个 number， 对不对？那那你要是给传了一个字符串，那这个肯定就是 这个叫什么？这个就是 accident 啊，就是这是一个事故啊，或者说这是一个意外，那么他这句话是说确保你不会发生这个意外，那就是说如果你使用了那个 ts， 你就不会说有这样的一一个意外啊，那其实更准 准确的说是你有了这么一个意外呢，那当时就报错啊，让我们提前的发现错误 啊，再往下啊，那如果你是一个 typescribe 的开发者啊，那我们呢？啊，我们这个虽然这个手工的去定义了这个数据类型， but 啊，那更好的这个安全什么类型啊？应该我们推荐使用这个 prisma。 这这这这一个啊，那这个可能当中没有去说这个 pricema， 在我之后的可能当中会介绍它啊，然后呢，这个 pricema 呢，它会自动的去生成 类型啊，基于你这个数据库的 schema， schema 也本身也是定义了一个结构啊，它会根据这个结构去 生成对应的 ts 类型，它是这个意思啊啊，然后呢，我们的耐克斯 gs， 那么也会呃去检测啊，如果是检测什么啊？如果你在项目当中使用了 ts， 并且安装了相应的必要的包 啊，以，而且呢进行了配置，那么呢，我们的 nice 这个项目啊，这个这个框架，他也会去这个这个进行一个检测啊，或者说检测到 呃 come with， 那么也会呃，使用 type script plugging， 呃，在你的这个编辑器当中去帮助你去自动完成啊编， 并且确保这个类型安全啊，这这句话我还真翻译的不是很好啊。 然后下边啊，下边呢，那就是执行啊，运行我们的这个服务啊，那这个服务呢？那首先执行 npmi 啊，那去安装这个项目的依赖啊，拍给这摘损啊， 这个一来包啊，好，执行完。然后呢？呃，再执行啊，呃，再遵循下边的这个命令，那就是 npm 专第一位去执，呃，开启我们的这个 开发服务器，或者说临时服务器， n p m r n， d， e， v。 啊，那么执行完 n p m r n， d， e， v 之后，那你就呃 snas 让你的这个启动起来了。在哪启动？ 在端口三千的位置，然后呢，让我们查看一下他是否工作了。那怎么查看？那就是在这打开啊，在浏览器当中打开这个地址，你就敲呗。啊， 好，然后呢，那你的这个主页应该，呃 should look like， 像这样啊，你的主页应该像这样，那就是这个样子啊，其实这个样子因为他下边有一个箭头你看不见啊，所以我在 ppt 演示的时候我摁了 f 十二。啊， 好， ok 啊，那这样就就完成了啊，啊，那你已经完成了这个第一章，然后呢？ congratulations， 恭喜啊，你已经创建了一个啊 next j s 的， 呃，项目啊，当然是用呃这个像模板去创建的，并且把它这个跑了起来。啊，好好，那本节视频呢，我们就到这里，那如果你觉得这节视频对你有帮助的话，那欢迎给我留言点赞。

很多的初学者朋友在学习面向对象的时候会觉得有一些难度，所以呢经常会问我啊，我一定要学习这个面向对象的知识吗？当然呢，在我看来，我们初学者在学习面向对象的时候，只需要了解这些语法就可以了，或者说呢，我们进一步能够做到看懂别人写的这一些代码就行。 呃，因为呢，我们初学者来说，你自己写的这个代码基本上很少说会进行一个封装继承这些操作， 那封装继承这些操作呢？我们可以在自己在实际的练习一些复杂的项目的时候啊，在项目当中去对他更加深入的了解。所以呢，呃，学习面向对象不应该作为我们一个呃 心智负担啊。啊，那在整个面向对象的这个知识体系当中，实际上呢，它存在着一个假设，就是说假设我们所编写的这个代码比较多，需要多人合作来进行代码开发， 那既然是多人合作，可能就会牵扯到我所使用的变量名称，我的函数名称与其他人的这个变量名称、函数名称可能会冲突。还有呢就可能是说， 哎，对方别人写的这个函数呢，我觉得对我也有用，我能不能把别人写的那个代码拿过来给我使用，或者说我写的代码我写的功能给别人去使用啊？这也是在多人合作当中可能会发生的情况。所以呢，我们面向对象的这些语法的知识， 其实呢在这个多人合作的假设里边去解决一些问题，或者说呃优化一些问题，他是干这个事啊？好， 你比如说我们面向对象当中的继承这个功能，那我要使用别人的这个代码，哎，那我把别人那个代码直接拿过来，当然拿过来之后呢，我可能就是百分之百拿过来直接使用， 也有可能是说我在他代码的基础上我去再添加一些内容，或者说改造一些内容，然后再作为自己的代码去使用 啊，不管是说呃，我百分百拿过来使用，还是说我做修改，实际上呢，他这个是一个聪明的偷懒的行为啊，一个手段拿来既使用嘛，对吧？好，所以呢，从这一个角度去看，我觉得我们也应该呃去了解一下面向对象的这个知识啊。 好，那除此之外面向对象当中的封装我刚才还是再重复一遍说我们多人合作，我可能使用别人的代码，别人也可能使用我的代码， 那封装呢？假使说我使用别人的代码，那这的封装其实就是对方将他自己的代码进行一个打包，然后呢，我想使用他的代码，就把这个打好的包拿过来给我使用就可以了。 当然在我之前的具体的语法知识里边，那我们封装啊有介绍到所谓私有属性，其实在这呢私有属性不是说不让你去修改它，而是说呢你没有必要去修改它。 呃，我们在这私有就意味着让你呃不能直接看到，让你眼不见心不烦啊，隐藏这些细节，你比如说 商家卖给你一个手机啊，卖给你这个电脑，那你这个手机是用来使用的，电脑也是用来使用的，你没有必要说你一定要把它的后机盖打开，看到那些螺丝，看到那些元气件啊，因为 你只是使用它吗？所以在这呢，那些东西就用所有漂亮的外包装给它包裹起来啊，隐藏这些细节，这是私有的这么一个用处啊， 当然我们还有学到说这个 property 啊，这么一个，这个叫呃，装饰器啊，那它呢，就是把方法当成属性，对吧？好，这个语法你不知道没有关系啊，我只是说明问题。那那个把方法当成属性，那对于我使用者的角度来说， 我都不需要知道你是一个方法，我就把你当成对象点啥啥啥使用，从使用者的角度来说，这个就是很很简单啊。啊，那魔术方法也是，你定义你的代码的时候说，当我使用这个对象点啥啥啥的时候，你可能执行什么函数啊？执行一些复杂的逻辑，但是我使用者啊，可以不知道这些东西。 那我现在说的这个所谓私有，所谓这个 property 以及这个魔术方法啊，我想表达什么，那就是针对一个封装，实际上它们的作用是你这个功能可能复杂， 但是呢，我们把这些功能全部隐藏起来啊，细节隐藏起来，你作为使用者不需要知道这些细节。假如说对方封装了一个类啊，封装一个代码啊，它又有魔术方法，又有什么私有属性这些东西，那我使用它的时候我不需要知道这些细节，所以呢， 那我就降低了我作为使用者的这个使用难度，我只需要知道啊，我通过他这个，呃，他这个代码实际化出来一个对象，然后有对象点啥啥啥就完了 啊。所以那就是封装让的封装这个代码的人啊，可能要学一些刚才我说这个那三行的那些语法细节，但是使用者是完全忽略那些细节的，不用知道那些细节的，就是对象点属性就可以了。啊，是这么个意思啊， 好啊，当然呢，还有同学说说，老师，我觉得还可以啊，那我不使用这个面向对象的这个形式，也实现了我想要的这个功能。没错啊，那当然很 ok， 那 我在这呢，呃，刚才强调的一个就是说我们面向对象呢啊，他是假设在说代码重复使用，或者说多人合作的时候，那你比如说 你写了这个功能代码，但是呢，别人想使用它，在你写的代码基础上再丰富一些啊，实现更多的这个功能，那这个别人呢，就是拿你的代码进行一个附用啊，或者说你自己下一次你想开发其他的功能，觉得你之前写的那个代码也可以有一部分拿来使用，那也是自己附用自己的这个代码， 那这个时候你说你怎么去使用它啊？如果说你想实现的功能完全一样，那你就直接运行之前的代码就可以了，那我现在这说的是是在你原有代码功能的基础上再去丰富，再去修改，实现新的功能，那这个时候你的代码如何赋用？ 那我们可能会想到说我直接 ctrl c ctrl v 手动复制啊，好，那当然这样就比较乱了，对吧？那稍微科学一点的做法，我们可能是说把你之前写的代码放在一个文件里边，视为一个模块，以模块的形式来去重复使用之前的代码。啊， 好，那我就从这作为一个切入点来给大家演示说我们面向对象所谓这个封装他能起到一个什么的作用？当然，呃，除了刚才我说隐藏细节的那个啊， 哎，那你比如说我在这啊，这个是我之前自己写的代码，我也没有用面向对象啊，我是 a a a 点 p y， 那 也就是 a a a 这个模块啊，我定义了一个变量，定义了一个函数啊，假设说这就实现了我的功能， 然后呢啊，不管是别人还是我自己，我需要使用之前的代码，那我当然可以直接把之前的代码以模块的形式导入进来，然后呢，我就可以痛痛快快直接的去使用我之前的函数，这个都是没有问题的啊， 但是说呢，因为我最新的也就是左边这个练习点 p y 当中，我的目的是要实现更为复杂的其他的功能，所以在我这个当前编辑的这个文件当中，可能不小心也会有 x x 这个变量，也会有 f o o e 这个函数啊。假设说我当时代码比较多，那这个时候呢，其实它们的名称就发生了冲突，那这个时候我左边最下边两行它的执行结果就和我开始预想的不一样了啊，因为它们改变了， 那在这儿 x x， 它是我当前这个文件里边的二百二百 f o o e， 也是我当前这个文件里边定义的 f o o e 函数了啊，因为名称冲突了，那我们为了要解决这个名称冲突的问题呢，我们当然可以给它所谓在命命名空间上边给它包裹一层啊，那你比如说 我直接把模块导入进来，所有的我之前使用模块的变量，模块的函数，我都给它加上模块名称啊，比如说啊，左边倒数啊第一行和倒数第二行，那我打印的是 a a a 模块的 x x x 变量 啊，我调用的是 a a a 模块的 f o o e 函数啊，那这样不就和我当前文件当中的 x x 变量以及 f o e 函数呃所区别开来了嘛，对吧？啊，那这个时候他们打印还是如我最开始的那个预期，这个就没有冲突了啊。啊，那但是呢，我再接着来演示啊，我再写一个代码啊，那假设说呢，我还有一个文件 在呃，右下 b b b 点 p y 这个文件，然后呢，我使用 a a a 这个模块儿，接着我只对 a a a 模块嘚 x x 这个变量啊进行一个修改，我改成七百了。 再接着我们，我们来看我这个代码，我在左边练习点 p y 文件当中我只加一行啊，就是把 b b b 这个模块导入进来。 好，那这个时候其实就有差别了啊，当然主要差别在我打印这个模块的 x x 的 时候，它打印的结果是七百， 为什么呢？因为左边第二行我导入了 bbb 这个模块， bbb 这个模块里边的代码就会执行，就会把 aaa 模块里边的那个 x x 啊的值进行一个修改。 假设说啊，这个是我不期望看到的啊，因为我们现在的结果就是说我 a a a 模块里边的变量或者说函数它是一份，然后呢，我在多个其他的文件当中导入使用，这多个其他的文件之间可能会发生一个互相干扰 啊，然后我现在的假设说，我希望他不发生干扰啊，咱别抬杠啊，说我就希望他干扰啊，我现在就是假设，我假设他不希望干扰啊，各自实现各自的这个能力，各自维护各自的数据， 那这个时候我们怎么办呢？啊？这，这个时候，我们现在已经是完整模块了，对吧？啊，那这个时候 我就把原本的 a a 这个模块里边的变量以及函数，我用类里边的属性以及类里边的方法来表示它啊， 那既然我用类来表示了，那以前的所谓这个选举的变量，选举的函数，再使用它的时候，它就是对象里边的属性，对象里边的方法了，就相当于在代码层面上给它包裹了一层。啊，好，我把上面这三行去掉，实际上就是这个样子， 这是我在最呃最第一个文件 a a a 这个里边做的一个修改，那么使用这个类的时候啊，比如说右下这个 b b b， 哎，我重新写一下，我导入这个类啊，从模块 a a a 导入这个类，然后呢我实力划出来一个对象一， 那对象一呢？有它的 x x 属性，我改成七百，这个没有问题啊，好，然后呢，在左边练习里边我也导入 a a a 模块的类， 然后呢？当然同时我也把这个刚才 bbb 里边对象一我也拿过来导入进来啊，好，没有什么用，我只是为说明问题。然后第三行我导入了 aaa 模块的类，我紧接着实力划出来一个对象二， 好，再接下来两行代码，我打印对象二的 x x 啊，以及调用对象二的 f o e 啊， 哎，那他这呢？一百一亿，其实在这呢可能对于一些同学来说就已经绕了，就觉得这是啥呀，在说明什么好，我这个代码哪怕你没有看明白，你要听清楚我想说的这个意思，那就是此时我们用累的形式啊，来 用类的属性类的方法来组织代码之后啊好，那么对象一的叉叉叉以及对象二的叉叉叉，以及我练习一点 py 这个文件当中，我再自己定义一个叉叉叉， 他们之间互不影响啊，他们之间没有关系。哎，这就是多人合作的时候，你的代码已经封装成一个类了，我把你代码拿过来， 把，把你这个代码也就是一类拿过来，然后我直接自己实力化，对象是我自己的啊，另外一个文件拿过相同的类，他实力化出一个对象是他自己的。哎，那我们之间都使用 a a a 模块的这个类，但是它们互相不影响 是这样的一个意思啊，这是面向对象当中封装的这么一个用途，当然我在面向对象封装一里边有说到，实际它是改变了变量或者说函数的这个作用域 啊，是这么个意思，只不过现在这次我是通过代码的形式再给大家说了一遍啊啊，因为偷着所以简单，我是讲师井水，那这节视频呢，是我面向对象这个这块内容的最后一个视频啊 啊，那如果你有什么疑问或者说你有什么自己的意见，欢迎在评论区给我留言，那我一定会啊，积极的给你回复的啊，当然也欢迎关注我的这个账号。下节视频呢，我就会进入这个蟒蛇书的下一章，也就是第十章啊，我们下个视频见。