react配置底部导航路由

这个视频我们介绍 react uil 配置，首先我们需要安装 react， 要安装最新版本 v 六的版本，这个版本比较强大，然后到我们的 a p p 入口页面 index， 我们需要引入 browser brother， 把我们的 app 包裹住，这样我们就可以在我们的 app 里配置我们的 url 路由。可以看到这个 app 比较简单，只有上面有个 number， 就是这些，我们预先做好了几个页面，都是比较简单的，我们要把这几个页面通过 react 把它串联起来。 那我们在哪里配置呢？我们就可以在这里配置。最外程，我们需要引入一个 rot 模块，这种模块是整个路由的一个 rot， 每一个 url 路径我们需要配置一个 rot， 然后 rot 模块呢，我们需要有两个参数，一个是 pass， 也就是我们的 ur。 第二模块呢叫艾力文字，这里我们要引入对应的主线，比如我们这里要引入 home 主线， 这时候他就会可以实现这个根部路的漏油了，那么我们还需要引用这个图书列表关于的路径，我们可以把这个复制一行，然后写上 look， 这个会写上 alt， 然而组件这里要换一下，我们这个是 look 组件， please 的组件， 这个是 about 组件，但是我们要把它再引入进来，那我们就可以实现我们的 然而漏油了。在这里有一个问题，可以看轮流棒，轮流棒还是用一个 a 标签， a 标签还会去后台拉页面，在浏览器还会重复渲染，这样非常影响性能。所以我们要把这里所有的 a 标签都替换成 vicro 的提供的 link 组件。 link 组件呢，它这里就不能写 hif 了，它就要写一个度数性，度数性就是我们的 url， 这时候我们在保存，我们可以看到我们再去点击的话，这个就不会再去后台拉新了。这是我们 url logo 配置的第一部分，更精彩的在第二部分，如果你感兴趣请点关注吧！

上一次我们介绍了 react router 的基础功能，这一次我们来点稍微高级的内容，其中路由欠套和奥特里特最有意思。好，我们开始。这次我们要在项目中加入图书详情页面， 图书详情页用图书 id 来区分，那我们就需要在 ur 中加入图书 id， 热爱和 rotor 加入 ul 参数的方式非常简单，就是只要在 ul 上加入一个冒号，一个参数名称，就可以把一个参数加入到 ul 中。 我们可以在列表页加上两个视力的链接， 这样我们看页面上点击图书列表的链接，就可以跳转到详情页。那我们在详情页当中如何获取 url 的参数呢？要使用 reactor router 提供的钩子函数， 你可是使用这个 use param 就可以拿到具体的 u l 上的参数，比如这里我们就就是 id， 拿到 id 之后可以把它展示到页面上，这时页面上就可以看到显示具体 id， 比如说 book 二，它就会显示二，点击 book 一，它就会显示一。 那有的时候我们需要在代码里进行呃，页面调整，怎么做呢？比如说我们这里有一个 button， 我们就要让他返回首页，那这个时候呢，就要使用 react 绕特提供了另外一个构思函数，就是 use navigate， 使用这个函数呢，我们就可以通过代码来动态编辑他的跳转，跳转路径， 比如这里这个八字，我们先响应一下他的点击实践，这个昂克里克是 react 的点击实践，然后我们传入一个箭头函数 室内，我们直接让他第一个参数就是我们要跳转 ur， 直接让他回到首页，这是我们看到页面上 有返回首页的这个按钮，你看点击返回首页，它就回到首页了。好，下面我们来介绍 reactort 的路由欠套。 reactor v 六版本的路由欠套非常简单，它可以在 rot 之下做子 rot 节点， 这样行， 这样就形成了一个二级路由的嵌套。当然他还功能不止如此，他可以在这里写一个 outlet， 一个组件， outlet 是所有匹配当前 url 最优的词，组件就会剪展示在这里。那如果我们这样，你看我们这时候再点 不可一不可二这两个例子，这两个链接就会在图书详情页上面直接展示出来。那么假如说我们稍微给他改动一下， 加上一个样式，这个样式是提前写好的，那也都很简单，就是用了一个 flag 布局， 这时你看这个图书列表的链接就变成了一个 setba 的二级菜单。 怎么样，联合绕特 v 六版本的功能是不是很强大？如果你感兴趣的话，请点赞关注，持续关注我们的分享，谢谢！

大家好，哎，我们这个是最后一章节，这一章节内容是把我们完成的项目部署到云服务器上啊，让大家都能访问。那这是 我们第一节小课，第一节第一节课呢，我们来先购买一台云服务器啊，把服服像这个环境都构建好。那云服器上呢？市面上有很多，这里我们就选择这个阿里云，在阿里云方面这个云服器就是叫这个 ecs 啊，点进来直接购买就可以啊，购买这个福气呢，分两种，一个是包年包月，就说每月多少钱，每年多少钱，那我们是 就是说作为这个讲课演示的话，这个就不太合适，还有个按量付费，就是你用多久扣多少钱啊？我们如果配置选择低一些的话，一小时大概一块钱，那我们就用这个啊，选完按量付费之后选择这个区域，区域的话 啊，你如果是新号随便随机就可以啊，当然我这个是呃呃，旧的一个账号啊，就是说我选那个一区，因为我的网络组在一区。 嗯，接下来选择啊，这个啊，两盒四季你看就够啊。好，两盒四季就够用啊。接下来呢选择镜像，镜像选择优斑图二十点零四， 那其他的就默认就就可以了，不用管啊，然后接着下一步，安全就是网络和安全组，嗯，专有网络。哎，这个是我为什么要选 e 区，因为我之前是有一块交换机是在 e 区，要不然的话我还得去创建新的交换机，比较麻烦啊。如果是大 大家是新号的话，你就去创建新的就可以了啊，那我就直接用用现有的这个啊。嗯，接下来 官网 ip 一定要要，如果你不要官网 ip， 那我们这个项目就没法让这个就是公开访问。好，接着这个贷款的计费方式啊， 他有也是有两种按量计费，就是你走多少流量扣多少钱。再一个是固定带宽啊，我们来看一看这个钱啊，这个固定带宽的话这个钱是比较贵的，你看一小时就二十多了。那我们选择这个使用流量啊，使用流量我们把这个网速调到最大，因为， 哎，这个使用流量的话他只会按这个流量给你击黑他这个网速我们调大点就没事啊，大概就是八毛钱一个 g 啊，那我们就是说部署这个项目的话，我估计也就。 嗯，就是可能用不了一机币都啊，也就一小时大概加上这个一块五毛钱左右来。这个安全组默认就可以啊。 安全组呢啊，有点类似于这个防火墙，他可以控制你这台机器就是我们的这个服务器啊，哪些端口能访问呢？哪些地址能访问啊？默认就可以啊，如果没有你可以去创建，接着往下走好了，直接下一步配置下这个系统 登录凭证啊。呃，新手的话我建议大家用密码吧，容易用密药的话大家还要去创建公药和私药比较麻烦。然后密码呢，我们去设置一个密码，注意这个密码他必须得是有大写小写还得有字母，就三种以上的包含三项比较复杂 来确认密码。好，实力名称。嗯，无所谓啦，这个随便形象改改吧。效果把这名效果 我们是小伙的面是吧。描述商城。这个写不写都可以啊， 后台管理系统主机名啊，就是计算机的一个一个名字啊， 随便写一下好了，其他的就无所谓了，其实这些都是不用，就是无所都都是。呃，写不写都可以，最主要 我们把密码设置好，如果没有密码我们去连接这个服务器，就不要麻烦接着下一步分组。呃，分组的话这个是资源组以及这些不用管啊。那直接下一步确认订单了啊。嗯，没有问 题啊，然后把这个须知勾上，把这个自动释放勾上啊，然后我选择这个两个小时以后，哎，两个小时应该够把这个课程录完，现在是 三点三十，那我选到五点四十吧啊，大概就是两个小时以后吧啊，到时候就是说一旦到了五点四十以后这个机器就会自动释放，就就不会再扣钱了啊，这样的话防止我们比如使用 完之后忘了忘了释放，忘了手动释放了而造成一直在扣钱。呃，就是如果你做测试使用把这个自动释放时间给设置上比较好一点，根据自己可能要用的时间去选择。 嗯接下来就创建实力啊。还有点就是你要使用这种大量付费的这种福气必须得保证你的账户余额是，呃，有有一百以上才可以啊，他会提醒你， 那我直接就创建了啊，创建成功我就可以直接去呃管理控制台去管理这个服务器。 好，那这个就是我们的这个服务器，这是我们的官网 ip， 官网 ip 大家一定要记住不管我们去连接这个服务器或者说是，嗯去解析域名啊，都会用到这个 ip 来。接下来他正在启动，我们先说一下 啊，这是一台雷尼克斯的一个服务器啊，我们系统选的是 u 盘图，那我们怎么连接上这个服务器呢啊，有这么几种方式啊，一种是你可以直接在这个浏览器里面就是用他提供的这个远程连接，就这呢啊，用他提供的远程连接，然后输入你的这个密码就可以了，清楚吧啊，当然 我不太爱使用这个，比较麻烦。那第二种方式推荐大家使用什么 ssh 工具啊？ ssh 呢，你不用自己去装，一般你的电脑自己都会带哎，来打开你的 cmd 或者终端 之后，哎，我们就可以使用这个 ssh 命令去连上，这个福气啊。 ssh 呢，就是电脑就会自己会带哎，不用你去装， 连接的方式是 ss h 入册，然后艾特，入册呢是你的账户你的这个账号啊，之前我们创建密码的时候就 是用这个入册创建的吗？就是入的账号。艾特呢，就是一个啊，艾特服啊，就是一个普通艾特服，后面就是跟服器的地址，那这里来复制一下我们这个官网的这个 ip 来粘贴上啊。这个时候我们来回车，他啊会让我们就是告诉他这个福气，要采集我们的这个电脑的一个指纹，你就页就是 yes， 回车就可以啊，然后接着呢，他会要求我们输入密码帕苏的，对吧？那你就输入密码，就刚才我们在创业时的设置密码就可以啊，设置密码的时候呢，是看不见的 啊，你就凭感觉输就行，错了就是错了，错了再来啊。好，我已经输完了啊，就是在这个灵敏克的系统里面，你输这个密码都是看不见的， 出错了啊，再来一遍这边，对了啊， 一旦你看到你的入他艾特你的这个效果啊，这个就对了，这个效果就是我们设置的计算机的名字就是浮现名字啊，好，那这个入色是我们用户名，那这个意思，就这个意思，就是这个用户在这个这这个主题上，是吧？然后这个井号呢，就是代表我们是管理员的身份啊， 然后这个前面这个波浪号呢，是我们当前所所在的一个目录，波浪号代表加目录，清楚了吧？啊？我们一进来就是这个加目录，就是简单的稍微介绍一下，那其实， 呃我们在连上这个伏击之后要干什么呢？那整个的这个文档，我其实啊就是 aet 的部署上线的，整个文档写的非常的详细，包括所有的这个配置文档都给大家准备好了啊， 如果大家呃在看视频的时候也可以结合这个文档一块去看，前面的这个就是一直在给大家讲如何去购买这个服务器啊，然后我们来看一看 啊，连上，连接上，我们也连接上了，对吧？好，嗯，推荐使用公药啊，如果你不会使用这个公药的话呢，就使用密码就可以了，但是公药的话就是公药和饲料比较麻烦，你还得去设置一下啊。这里最后有个提醒，就说去这个 ecs 的控制台看看是否开放了一些必要的一个端口， 我们来去看一下吧。那这个终端呢？我们使用这个 ss 已经已经连上了，现在是连着啊，我们后面还有用，接下来去看一看这个实力的旁边你去找，这边会有一个网络与安全，你去安全组里面啊，好， 我们不这么看啊，这么看呢，因为如果你这里面比较多的话呢，你会找不到，但是我的机器比较少，就一台，你可以找到啊。你是看这个实力，你看这个实力，嗯，他这边使用的网络和安全组， 然后这边有个安全组配置，你这么去点是直接就会进入到这个实力用到这个安全组的一个配置，清楚了吧？你看更多，然后网络和安全组安全组配置 啊，好，这个就是我们这台计算机使用的这个安全组，然后我们来配置下他的规则。嗯，好像是 因为我这个安全组呢，是很早以前就设置过，所以不用设置啊。你看我是开放了所有端口啊，在一七年的时候就把所有的端口就开放了，你如果是一个新的安全组的话，可能就只开放了几个啊。你要手动去添加， 把这个啊端口的这个一些必备的端口给开放出去。比如说这个八零端口啊，因为我们要部署我们的这个项目，项目的访问我们 一般就是使用八零端口，不是我们本地使用的这种八千什么的啊。我们正式的项目一般使用八零端口，然后八零是一个。啊，我在这里写一下吧。啊，这里，哎，你看你快速添加的时候，你点那个快速添加也可以去选， 比如说把这个八零给开上，然后还有一个四四三对 ats， 这两个一定要给开上，对吧？还有这个 s s h， 如果不开 s s h， 刚才我们这个使用 s s h 就连不上，这个就没法使用，知道吧？他会走二档口， 清楚了吗？就是如果你 sss ag 零失败，你检查你的安全组是不是这个没开，这个一般的话默认就会开着，我们我们只要主要是要把这个这个四四三和八零给开放出来，就是你不开放 app 的话，你这个项目别人怎么访问项目别人没法访问了，清楚吧？好，然后点确定就可以了啊？ 那我就取消，因为我这个已经全部开放了啊，快速添加就可以了啊，快速添加，然后选择就可以了。好好，那这个是安全组这一块给大家说一下啊，接着呢， 这块我们就做完了，是吧？然后就是对我们的这个福气，你看我们这个终端现在就是在福气中，对吧？我们要对福气干什么呢？安装一些必要的运行环境，对吧？因为这个福气呢，他其实虽然是离你的系统，但是实际上也是台电脑，我们得装软件才能去运行我们的项目，让我们项目比如说弄的写的，你必须带装弄的，对不对 啊？那我们一个一个来，首先啊，你可以按照这个一个一个来执行啊，我我就直接输入了啊 app 啊，不对头，先更新一下整个系统的软件源啊，因为我们这是百兆贷款，速度还是比较快的。那现场的更新的回过头来准备下一项 安装这个 get 啊 get 呢，我们可以用来进行版本控制以及去远程仓库拉取代码外。确定， 接着再来下一个。呃，下一个呢？其呃是在安装这个，注意你要复制到这个，复制到这个短杠。这啊是在这， 这个是在设置这个呃， note gs 的这个十四版本的原，如果你默认安装的话版本比较低可能是 no 的是十点几这个版本。我想要最新版本，我就先指定原再去安装这个 note s 清楚吧。你如果没有这一步，你直接是下一步 note g s。 那 note s 的版本可能是在十点二一二左右吧。好像是啊啊，所以我们在这里指定版本 来粘贴回车先让他走的啊，不用管他，接着来。下一步准备安装 note 键 s。 那这个弄得监视我就不说了。那是基本上是必须得装的是吧。你不装弄得监视这环境怎么玩没法用了。接着啊，这个样也安装一下啊。 呃，压呢，我这里使用 app 安装吧，当然你也可以使用这个 npm 安装，因为你安装完弄的 gs 就会多一个 npm， 就会自带 npm。 那你使用 npm 去安装这个样也可以啊。我那我就直接使用这个去安装 好。嗯，刚才装了两个是吧。装了两个，我先看看版本看有没有装成功啊。不要慌， get 杠微。嗯，对，侧杠杠 有 get 是有的啊，然后是我们的 note 杠微十四版本也对，对不对。那接着再去安装这个样啊。呃，这个样安装以后呢，我们也看一下版本啊，就是每每装一个都都确定看一下版本，防止 有的没有装成功。这个等一下，我看看这个样子。 这个版本好像有点不对劲啊，等会再说啊。好，等会再说他，然后最后去安装这个 ng ngx 呢是我们的外部福气。外部福气呢有很多，像这个阿帕奇啊， ngx 都比较常用的，还有 topp i 啊，他有一个一点一八的一个版本啊，查看版本呢？有的是这种刚刚 worx， 有的是 刚大威。那这块我们就安装完了啊，这还给大家提醒一下啊，你如果说是其他的这个服务器的话啊，如果说是这个是普通用户身份，你可能要加上加上这个速度去以 入他这种管理员的身份去运行，但是我们现在是警号，他这上面也没有给我们创建其他用户，所以不用加这个速度也可以啊。啊，来 那啊，我刚才我输了一个 exit 就退出了，从伏器推出来了啊，现在是在我的本机啊。呃呃，那这个这节课我们就先到这，主要是把这个伏器给安装一下啊，把东西清空下。

哈喽，大家好，今天我们来讲一下 nice 的 gs 的动态路由啊， 我们以 app root 为例啊，首先我们写一个静态路由，我们在这个 app 目录下面新建一个文件夹，比如说取名为 blog， 然后在这里面新建一个文件，叫配几点 tsx， 我们导出一个函数啊， the port default， 这样我们就写了一个静态录友， 当我们访问这个浏览器地址，里面输入一个斜杠 vlog， ok， 我们就会看到一个 vlog 配置，那这是个静态路由啊，我们想要在这个 vlog 后面跟上一个斜杠，比如说， 哦，哎呀，那，那这这个页面不存在。呃，我们创建一下这样一个动态的页面呢，我们在这个 vlog 文件夹上新建一个文件夹，取名为中括号是那个， 这里取什么名字都不重要，你取名 slag id 都可以啊。然后再在这个 slag 里面新建一个配置点 t s 叉， 我们刚才这个文件内容复制过来，我们稍微修改一下，改成 prolog dynamic 配件 动态内容我们保存看一下，我们可看到现在我们输入这个 blog a， 斜杠 a， 他是动态页面，我们输入 b 的话，他也是输入 c 的话，他都是啊， 那我们刚才给他取了这个名字叫 slag， 是吧，那这个值就有用啊，我们怎么取出来呢？他其实是在这个佩奇的，他这有个川数叫， 那他这个值就在这个 param 里面的，我们可以把这个 param 值就是 params， 点一个 slag， 这个 slag 就是我们给这个文件夹取了一个名字，就是动态的名字，保存看一下， ok， 我们会看到这个单米格配的 c a， 这随便加个长点什么 hello 都可以取得到这个值啊，那这个就是一个动态路由啊，但是这个动态路由他只是一级的，我们如果还要想后面卡了，后面斜按跟上一个 word， 是吧？ 那这样又不行了，那这样怎么办呢？我们可以把这个是那个前面这个综合号里面我们写成这个点点点，三个点写成是那个， 那他这样就可以匹配两二级目录啊，不仅仅是二级，就是三级，多长的目录都可以啊。我们可以把这个纸打印出来，就知道打印一下这个 param 是点，这个是哪个？ 他打印出这个 hello word， 实际上他是一个数组啊，就是个制服上的数组啊， 我们写了两集，这就是两集啊现在，后来我写了一个 aabcd， 那他就是三集啊。这里还有一种写法，如果我们把这个外面这个佩奇给他删掉啊， 就是 blog 文件夹下面这个配置删掉，我们访问这个 blog 啊，我们看到这个页面不存在啊，但是我们输入 blog 斜杠 a， 他又有啊。 我们是我们想要这个动态的这个配景，它包含这个 blog 这个路由的话，怎么办呢？我们可以把这个重命名，把这个是那个中国号，这里面我们加两个中国号啊， 保存看一下，我们会看到加两个中分号的话，他就可以匹配 它匹配的模式就是包含了它那个自身呢？就是包含了这个 vlog， 包含了它一级木乱。我们写一个中文号的话，它就是不包含那个 vlog 啊， 能明白吗？不写这个两个中号，只写一个中文号的话，那他就只包含那个 blog 后面的啊？就是你看他这 blog 自身就不包含了。 嗯，他后面都能匹配啊，区别就在这里啊。有很多人可能不明白， 所以一般的话，如果你不想包含 blog， 你可以给他写一个 blog ts， 他 因为有可能你的 blog 它是个列表页面，是吧？然后它里面是一个，就是一个具体的详情页面嘛。所以一般的这个页面外面这个页面是列表，你不想，你不想里面进行匹配的话，你就写在外面吧。 对，这个 blog page， blog list page。 ok， 那这样的话，它外面这个 vlog 的话，它就是 blog 的一个列表页面。你加一个斜杠 a， 它就是里面的一个动态页面 a， 杠斜杠 b， 它里面的一个动态页面 ab， 二级目录、三级目录都可以啊。好了，今天分享就到这里，关注我，教你更多前端知识。

今天是学习 react 第三天，然后我们今天也是开始装 react 的教学站老师主要讲的就是 react 的路由，路由船舱，还有一个千滩路由。 他这个路由的话写法比较多，对比 v e 的差别还是挺大的啊。路由传通的话也有多种方式。嗯，清朝路由的话也比较麻烦，而且是差不多的。 然后今天这个作业的话也用到录入床单盒清仓日本写这个作业的时候发现一个小问题， 就是用防枪过来之后再跳转至足五十，复古键还是又会重复一次，这样的话这头就变成空了。 我的解决办法就是第一次拿到纸就把它放在本地存储，然后从本地存储登印就好了，不愿意的话他就不会出现。篮球打的怎么样？

real native 的导航库有什么容易弄错的属性？ real navigation 是热爱项目中最最常用的导航库，其中有五个常用的属性， push， navigate， pop， go back， pop to chop。 其中最常用错的就是 push 和 navigate， 其实他们很相似，但是区别是或是无论如何都会加一个新的路由到对战上面去，而 navig 会先查找这个对战里面是不是已经存在这个路由了，如果存在就跳到他去，如果不存在才加一个 新的到这个对战里面。如果有一个应用场景是想返回之前的页面，如果我们没有用 pop 或者 navigate 而是用了 pose 的话，就会导致同一个路由在对战里出现多次，会浪费内存。

从零到一搭建一个 red 项目，怎么样才算一个保姆机的教程？我们团队里面目前正在使用的 red 项目的一个模板，该怎么样设计他的木结构，包括里面的每一个配置项目，他是干嘛的？ 配置下里面的使用说明，每一项的配置就拍点接生员，我安装了这么多依赖，有些依赖是干嘛的？我们团队里面的这个模板，每一项都有详细的说明，包括你做打包优化构建的时候，这个外派的配置，每一个插件是干嘛的？我们应该怎么样配置？ 开发环境我要做不同的处理。还有咱们看所有的项目都会有背包的配置文件，背包怎么样才是一个最佳的配置，它里面的每一项应该怎么配，包括他为什么这么配，最重要的是他还有代码的视力，比如我要做一个功能， 该怎么去做，我们拿过来比着更改就可以了。一个盖了图，我们这个项目所涉及到的一些模块和生产环境上的模块，每一个配置都有一个老图，目前这个项目呢是我们团队在使用的。

今天我们来讲一个超级热门的前端 gs 框架 react， 你也许没有用过它，但一定听过它的名字。现在绝大多数的外并用，包括很多前端的开源库都是使用 react 开发的。 它最大的优点呢，自然是简单和高效，这单包括它的性能，还有开发效率，尤其配合上 nex， j s gatsby bleat 这类框架，可以让你在很短时间内快速搭建一个相对复杂的应用。 今天呢，我会带大家快速入门 react， 并向大家讲解 react 中的核心概念和一般开发流程。最后我们用它来举例搭建一个非常简单的应用。 考虑到 rex 新版本中加入的一些新特性，比如后允许我们使用更简洁的语法来定组建，我们就不再介绍传统的类的定义方式了。另外， rex 中的核心概念其实并不多，我会尽量通过实际案例将那么完整的呈现给大家。 细枝末节的部分可能就一笔带过了。在使用 rack 之前，我们需要确保计算机中安装有 note j s 运行环境。随后打开命令行，我们可以使用 n p x create rack tab 后面跟上应用的名称来快速创建一个 rack。 听用。 和一般的 no 程序类似， npm start 可以启动一个本地调试的服务器，它会自动在浏览器中打开我们的应用。 首先呢，我们来快速浏览一下 react 工程的结构，可以看到这里全是自动生成的代码，文件比较多，不过大多数我们可以暂时忽略。 首先，我们打开 source 路径下的 index 点 j s 文件，也就是我们应用的主程序。这里最最重要的是这个 react on 点 render 函数。整个页面的渲染都是从这里开始的。第一个参数是我们要渲染的所有元素， 可以看到这里是 html 的语法。第二个参数代表将渲染的结果插入到页面的哪一个容器中。可以看到这里对应的是这个 id 叫 root 的元素。 这里的第一个参数乍看之下比较诡异，因为我们在加了 script 代码中嵌入了 html 标签。这个其实是 react 对 jsd 种语法扩展，也被叫做 jsx， 它允许将 html 标签和 js 代码混合使用。 他的优点是我们不再需要分开定义 html 和 gs 文件，因此编写和阅读代码会方便很多。我们可以尝试去修改这里的标签， 可以看到浏览器中的内容也会自动刷新。我们继续回到之前的代码，可以看到这里的 app 显然不是一个标准的 html 标签，如果我们按住 ctrl 跟随进去，他会跳到另一个函 数的定义。这里是一个非常重要的概念， react 中的组件都可以被简化成一个函数的定义。函数的输出是一串 html 标签，也就是组建最终渲染的结果。 我们可以通过组合其他的组件或者 html 标签来创建更多复杂的组件。但这里的例子过分简单化了，因为我们的渲染结果是固定的，并且没有任何动态的逻辑。这里我先删除掉暂时不用的代码，仅仅保留最核心的部分 react tom 点、 render 函数和这里唯一的组件 app。 接着我们来介绍一个最常见的场景，根据数据来动态生成用户界面。数据通常是通过 a p i 从后端获取，不过这里为了简单起见，我在文件开头定了一个用于返回假数据的函数 fetch to dos。 随后在生成界面的时候，我们 可以调用这个函数获取数据，并通过 map 便利土豆丝中的每一条数据，然后生成一个个列表元素。这里需要特别注意的是花括号的用法。如果我们想在 html 标签中嵌入 javascript 表达式，则需要将他们嵌套在花括号中。 这里生成的每一个列表元素由复选框、 input 和一个标签 label 组成。复选框是否选中取决于数据中的 completed 属性，而标签的文本则是来自于数据中的 title 属性。 到目前为止呢，我们的界面看起来依然十分单调。我们知道 racked 的一大优势在它巨大的生态系统和开源库，比如常见的 ui 框架， bootstrap， semitic， material ui 等等，在 rack 中都有很好的继承。这里我直接使用 rack bootstrap 来对界面做一些美化。 首先我们按照文档中的步骤来安装 react bootstrap 这个包，然后在文件开头导入我们要用到的组件和样式表。接着我们替换掉之前的 html 标签，按照文档中的用法来加入复选框和文字组件。 另外，文字的部分，我们会根据 completed 是否为处来加入一条删除线的效果。这里是修改之后的结果。 可以看到用 react 创建一个漂亮的界面其实非常的容易。目前我们的界面还非常简单，假设我们之后加入了更多的代码，当组件变得更加复杂以后，我们可以考虑将其中可以重用的代码拆分成一个个独立的组件，也就是模块化。 比如这里的列表元素可以被抽离成一个单独的组件，我们教它 to do item 列表中的文字和复选框状态，我们可以用类似于 html 标签属性 的语法，并作为函数参数 props 传递进来。随后我们可以通过 props 点 title， props 点 completed 来访问他们。 这里的 props 在 react 中也被叫做属性。首先，属性一定是由上层元素自上而下传递下来的，其次，属性是指读的。换句话说，我们不能在函数内部修改他们 一个组件的属性，会直接决定他的输出，也就是我们最终渲染的结果。这种模式呢，也是我们经常听到的单向数据流模式，因为他从源头上避免了数据在组件之间的来回传递，因此更加利于调试和维护。 之前我们讲到的属性可以在元素中传递静态的数据，但在实际使用中，肯定有数据是动态的。比如这里的代办事项列表，我们应当是允许去更新或者删除其中的条目的。 因此，要存储动态变化的数据，我们需要用到 react 中。另一个重要的概念，状态状态，你可以把当做是组建自身的一个私有变量。在 react 中要定一个状态，我们需要用到 use state 方法， 他会返回两个值，第一个是存储当前状态变量的 to dos， 第二个是用于修改状态的方法 set to dos。 最后，这里的参数代表状态的初始值。 需要强调的是，要修改一个状态，我们是不能够直接对这里的 to dos 变量复制的，这样是没有用的，相反，我们必须调用 set to dos 方法。 那你可能会问，为什么我们不直接定一个普通变量，而是依靠 react 提供的这套机制来管理状态呢？首先，使用函数的局部变量肯定是不行的，因为他们在函数退出时就自动销毁了。如果使用全局变量的话，我们还要考虑到他和 组建生命周期的同步。因此这里呢，我们只需要简单记住 rex 提供的这种特定的写法。具体的时间细节呢，我们就不多做解释了。 有了状态之后呢，我们可以给列表的每一行加入一个删除按钮，用来删除对应的代办事项。 当我们点击按钮时，可以响应 button 的 on click 事件，调由属性传进来的 on delete 毁掉函数。然后我们在之前的 app 组件中来定义这个 on delete 函数。 首先，我们挑选出删除之后剩下的列表选项，然后调用 set to do 来更新当前的状态。修改程序之后，点击删除按钮会看到这样的效果。 整个过程呢，大概是当我们点击按钮之后，状态被更新之后，界面会随着状态的变化而重新渲染。随后我们可以用同样的方法来响应复选框被按下的试键 on change， 他会调用有属性传递进来的 ontogo 毁掉函数。然后我们在之前的 app 组件中来定义这个 ontogo 函数即可。当复选框被选中或者取消选中时，我们会去修改对应元素的 completed 属性。最后调用 set to do 来更新当前的状态。 在我们点击复选框之后，会立刻切换当前代办事项的完成状态。通过这个例子呢，我们就讲完了 react 中最核心的这几个概念， jsx 取法组建的渲染属性和状态以及事件的响应。 当然， react 的强大之处肯定不单单在于这个库本身，而是它背后庞大的生态链和数不胜数的开源库。要配置路由，我们有 react router。 要创建动画，我们有 spring frame emotion。 要管理状态，我们有 redux， flux， mobics， recoil。 要进服端渲染，我们有 next year's gatsby 等等。这里特别值得一提的是 nex gs， 你可以把当做是一个 gs 的全站框架，它支持 api 路由，浮端渲染，前端的 rex 组件等等，几乎是零配置使用。

rex 快成为必须的技能了，这个视频教你从零搭建 rex 开发环境。我们要去下载 no 的，然后我们去下载 vs code， 进入开发目录执行 npx create react app， create red app 是 reacts 脚手架，它可以帮我们快速构建好开发环境。 安装好依赖后，进入英录目录，执行命令，分 pm stop， 这时就可以看到 react 的其中页面。我们来看一下脚手架帮我们生成了哪些代码。巴比卡目录下的 index dgm， 这是一个模板，只有一个 id 为 root 的 d， 在 src 目录下才是真正的代码。这里的 app 到 gs 返回了这样的一段 hgm 的页面，这个既不是字物串，也不是 hgm 标签，这段代码浏览器是没有办法执行的，这部分实际上是 gsxaka javascripts charmml， 他是通过 bibo 把这部分标签转换为瑞 x 对象。我们可以在 bibo 中测试一下，输入一个 alimand， 然后可以看到它自动转化为瑞 x 的对象。 bibo 会自动识别 jsx 语法。现在我们来写一个 rex 应用，先把原来的文件都删掉，然后引入 rex， 引入 rex 度， 利用镇压三级语法创建一个 read 元素，然后再把它渲染到页面上， 看一个 react 的应用就搞定了。如果你想听关于 react 的教程，请给我点个关注，我会持续更新 react 教程。

大家好，这节课我们来看一下页面的跳转，页面的跳转呢有两种方式，声明式和命令式，声明式呢就是通过跳转的这个组件我们来进行跳转，那命令式呢？就是通过这个 gs 的代码我们来进行跳转。我们来写一下，先把我们注册 撕掉的这个漏油给打开啊，然后啊准备一些东西啊，把这个给删掉，然后这个用户页面一，那我们就请求这个这个优色一组件，那这个用优色二组件同样复制一下这个优色 一个 u 三二，这个我们改为 u 三一啊，为了做一个区分 u 三一 啊，把里面的内容改一改，优色配计，哎完，然后这个改成优色配置。 接下来我们来写一下这个链接啊，我们把这个链接写在哪呢？写到这个啊模板里吧。好，我们就假定 在这个头部，我们有一个哎导航，我们的链接导航要使用这个生命式的，我们得先引入他的这个令客啊这个组件，那这个令客组件 从哪引入呢？从这个优米里面引入，引入之后我们就可以使用 这个组件， 他有一个突出性，就是我们要跳转到哪个地方，我们这个是 用户一，然后让他跳到这个优势里面的这个腕啊，这个路径就是我们定义的这个陆游啊，我们这里定义的这个陆游。好，那再来一个图， 我们让他跳到用户来保存看一下，在这里啊，我们刷新， 因为这个首页呢，他没有继承我们的这个模板啊，所以这个链接没有出来，我们去改善我们的这个陆游，让我们的这个首页也用上我们的这个模板 改造一下啊，让他使用这个 i out 这个模板，接下来我们定一些指路油， 怕死还是跟。然后这个时候他要使用的这个组件，就是 kitts 里面的领带这个组件啊，这个重定向的这个我们就删了啊，那我们定义的，呃，这个 根，请求这根他会用这个，对吧？那请求这个优势他也会用这个。好，那其实呢，这样的话我们可以把它给，就是把这些给合并一下啊， 合并到这个里面，对不对？也就是这里面的这些东西可以给合并到一块，那下面这个就不要了啊，那这个中间键的应用我们， 嗯也可以给他加上，那我再车效一下，那整个把，把这个都给拿过来吧啊？都给拿到这里面，只不过把 这个给他删掉就不要了。行，来保存一下啊，给大家折叠一下看一下。其实就是，呃，我们匹配这个根，然后去使用这个公共的这个模板啊，接着他有一个子路由子路由呢，有 一个这个根，我们访问这个引带子，接着呢又定义了一个优色的陆游组啊，去啊，让这个优色的陆游组呢，使用上我们的这个组件，并且他还有两个子陆游啊，就是这么一个回事啊， 来粘贴一下啊，那我把最后再给他放一个四零四啊，防止找不到这个情况。哎，这是这样的一个结构，把代码改造一下， 接着来访问现在这里面就有我们的这两个导航了，对吧？现在我点这个用户一，他会跳到这个这个地方，对不对？接着我点用户二，会 啊，这个打错了，找一下我们的这个 模板，这里啊，这个路由打错了啊， c w o。 这个时候来我们回首页重新看一下啊 啊，点用户一来到了这个用户一的这个路由，点用户二来到了用户二这个路由啊， 并且这个地址栏也是发生改变的啊，我们再来看看这个配置，如果大家感觉比较乱的话呢，我就先把这个无关的都给删掉。好，那这个四零四呢？我们也先不处理了，怕大家给搞混啊，这样的话就会简洁一些。 好，这个是我们使用这个声明式，使用的是这个令卡，当然声明式呢，这里面我看他有没有说其实还有一个 nice， 我们在这里继续改一下啊，写个分割线，把这个给他复制一下啊， 这个注视点使用这个 nirl 领克 和林可有什么区别呢啊？南欧林可呢？是啊，专门用做这个导航的。这个啊，这个路由啊，他会给我们自动去加上一个克拉斯 来看一看，我在这这个页面刷新一下来清空。现在我点用户二啊，你这么看是看不到效果的，因为他是给我们加了一个克拉斯的话，现在我们没有写克拉斯的样式，对不对？但是 你如果注意这里的话，我现在点的是用户一，这里是万，是不是他有一个这个 x 五的一个卡子，那我当我点这个二的时候，大家可以看到这个二，这个导航，他有一个 x 五，对不对？一就没有了啊，那我们来写一下这个样式啊，还是在这个末班里面，我新建一个 nice， 点 nice， 在这个里面我来定一个点 x two， 呃，我让他颜色是蓝色字体呢， 让他大一点，二十二。 px， 在这个模板里面我要引入我刚才定义的这个样式才可以当前目录下的引 xix。 好，接下来我们来看一下， 刷新一下。哎，他是不是颜色这个这个二，这个颜色是不是变了？看到没有？那我点这个一，是不是一的这个颜色变了，我们的这个字体呢？给的有点小，那给大一点，给他是三十三。好，是不是 当前这个一他就会有这个蓝色，并且字体大一点，那我如果是陆游是二的话，那这个二他就会有这么一个克拉斯啊，他的这个显示就会 应用上这个样式啊，那这个是奈维林克和林克的一个一个区别啊，林克呢，他不会给我们去自动加那个样式，这个南欧林克他会自动加。那如果你的样式 如果不是这个 xt 五，就是你自己写的这个，哎，处于这个激活状态的这个样式不是 xt 五，你还可以去通过他的这个属性去啊去 修改啊。好，那这个是声明式的，我们再来写一个这个 命令式的啊，那命令式的呢，其实就是通过这个黑色的啊，去使用他的一些 api 去完成我们的这个跳转啊。这里只是简单的举了一个啊，铺起的一个参数，那在这个陆游 这个里面，哎，我们当时讲这个令他的时候，上面啊，上面讲这个页面跳转，讲这个录的时候，这个跳过了，说说是放到这块一块讲，对吧？那这个他举例就比较多，比如说我们在跳转的时候呢，还可以去带一些参数啊， 甚至还可以去回到就说返回啊，回到上一个陆游都是可以的，让我们简单的用一下啊，我看看写到哪里， 写到引代词这里吧。啊，写到引代词这里，然后先把这个打印删了啊，写到这里我们写一个定时器吧。啊，定时器，比如说，呃，两秒之后去跳转到某一个地方， 定时器呢？我们一般会写到呃生命周期中，对吧？啊，那这个是啊，函数式的一个组件，我们要使用生命周期的话，需要用到一些 hox 啊，来用后侧柚子一 face fromruck， 然后在这个里面我们来写我们的生命周期啊，这是一个函数， 给上第二个参数是一个空数组，不然的话组件更新的时候他也会执行。我们在这里写一个定时期赛的泰姆 out， 第一个参数是一个 回到函数，那第二个参数是一个时间，我们给个两秒，两秒之后我们让他去跳转到。啊，用户一啊，这时候要要借助于这个啊，黑 siri， 对吧？那我们从五米里面去导入这个黑 siri， 我们从五米里面去打之后就可以使用这个黑斯特瑞的复习方法，跳到 u 四二里面的 one 来，我们来保存 在浏览器中运行看一下。啊，那我先回到这个首页，我们来看一下过两秒之后是不是给我们跳到了这个弯啊，那这个就是我们通过这种命令式的方式来控制这个路由的一个哎，控制一个页面的一个跳转，那这是 我们常用的两种方式啊，因为有一些情况下是会用到这种命的。是，比如说我们验证，如果用户没有登录，我们给他去跳转到这个登录，对吧？ 当然我们可以直接从这个五米这里面去，哎，使用这个黑丝瑞，哎，之前我们在 打印这个路由组件的时候，大家可以看到有很多参数，那其中有一个参数呢，就是黑色瑞，也就是说我们可以从组件的属性中，哎，直接去使用这个黑色瑞，我们来看一下啊，那我在这个 usi 这里面，哎，这里面还在打印 popers， 对吧？那我们先看看打印的一个结果啊，好找到康斯 logo， 这个是我们打印的这个啊， us one 这个组件里面的这个 popers， 大家可以看到是有黑 siri 这个啊，这个属性的啊，所以说我们不引用的情况下，也是可以直接从 popers 里面去， 哎，这个使用这个黑丝瑞的，那比如这里我写一个按钮啊，写一个八寸 butt on 啊，八寸，我要从 atui 里面去导入一个八寸 butt o， 然后上面这个写错了，是八寸，之后来写一个点， 点，我回首页，点，我回首页，好，那我给他一个昂克里克试键，点击这个试键的时候，哎，我们让他触发一个函数啊，从这个 popers 里面点黑 siri， 哎，点出息让他回首页，好，呃，简单的写了一个按钮啊，然后点击的时候会触发这个点击事件，点击事件里面呢，会从这个 popos 里面去使用他的黑 siri， 然后使用他的复习方法回到这个首页，我们来验证一下啊，来保存， 先从首页看首页，因为我们有一个计时器，他两秒之后会给我们啊，跳到这个有所弯，对不对？那在有所弯呢？这有一个点我回首页的按钮，那我点击可以看到回首页了，对吧？所以说我们在使用这个命令式的跳转的时候呢？啊，有两 方式啊，一个是哎，你可以从这个乌密里面去啊，暴露出来这个黑色瑞啊，使用这个黑色瑞去进行调整。 还有种方式是在这个陆游组件里面，从他的 popos 里面去使用啊，这个黑 siri 啊，注意是陆游组件啊，你有时候你自定义的一个 其他的一个组件的话，你可能就啊不具备这个属性。那这个是关于页面跳转的产物的几种方式啊，这小件先到这里。

终于把 react 系统的学完了，用了 box 真的舒服了很多，革命性的变化，简洁太多了，都一一记起来了。我把笔记放到我的网站上了，方便自己回顾知识点， 希望帮助你更好的理解和应用语言。

是高邮的就立刻马上执行，然后把这个其他量比较大的东西，这个油烟机低的扔到这个 star 传费这里，我们看一下效果， 然后比如说你看一二三，这就是新的一点。然后这样的话，就是比如说一二三你看底下东西他在他慢，但是上面东西基本上就是事实了。因为我这个电脑开的东西了。然后然后这个这个电脑里面的话，就是就是这个这个用法，这个用法这个盆顶上可以加上盆顶上，就是 就是他在喷的时候，咱们去讲这个 logo 好疲惫， 录进，然后录进完了结果回来以后这样展示的话，这样这个书框里的东西就是相对来说就是他是高邮的，就是相当于怎么说昨天去做的收入就出来。其他东西是，呃开销比较大的就去放到这个后面去。 嗯，那里面可以放请求吗？请求一般不要在这里面放，因为因为请求的话你可以做一些别的触屏，这个的话就是做一些高开销的东西，就是你尽量要大的话，就是你算一些东西，甚至比如说你看看我的发布，你画一些东西，他情况很大的时候 扔进去那种是有有有必要的，就是其实他作用就是低优低年级去处理一些，放进去一些耗时一些开销变蜡的东西。

我在这逛推测的时候，又发现很多人对着这个 view 和 rex 哪个好，又在那争论，然后我就想起来我以前看过的一篇文章，就是就是国内 view 这么火，为什么大厂都是用 react 去做？ 那今天我想给大家看一下啊，到底国内有哪些公司他在用 view， 哪些公司大概在用 rex？ 就之前有人在回答， 大概你看优酷用 react， 爱奇艺 view， 腾讯视频用的 view， b 站也是 view， 抖音用 reactor， 然后小红书嘛，他也用 view， 然后音乐类呢，除了酷，我用 view， 然后 qq 和网易云音乐都用 reactor， 然后百度网盘用 view， 阿里他用 reactor， 腾讯也用 view， 然后像商城类嘛，商城类最主比较典型的是拼多多，他用的 rect， 美团，饿了嘛都用 rect， 然后美团呢，有一部分其实也用的 view， 然后小米嘛， oppo 还有 vivo 还有三星，他们用的都是 view， 苹果用 rect， 然后像资讯里啊，知乎，今日头条，腾讯新闻他们用 rect， 微博用 view， 然后还有其他的呢？比如说 time， time 后面还有比亚迪 glab， 他们用 view， 然后还有蛮多的，然后还有一部分呢，也用的 view， 然后想起来这个问题我就想跟大家说一下啊，就不要整天对着 view 还是 react 哪个好，或者是要学哪个在那 争论不休，也不要自己在那一直说纠结。真的到了工作或者工作几年之后，你真的会发现 语言或者是框架不是限制你学习技术或者是进步的一个问题，最终目的其实还是为了解决问题。

一百秒快速认识 react react 是用于构建用户界面的 javascript code， 起源于 facebook 的内部项目，于二零一三年五月开源，现在已然成为前端最流行的库， 主要用于构建 ui 组件化开发模式。这里跟标签长得一样的就是组件，每个组件负责不同的功能，然后对其组合已构成复杂的 ui。 它的美妙之处在于构建组件的简单性也降到了理论上的最低水平。 它只是 javascript 的一个函数。这个函数的返回值呢，就是要渲染 rt 描或 ui， 采用的是 g s 叉模板引擎来实现结构和逻辑。 如果你想实现组件的数据传递，在组件定义的地方用一个 props 参数接收，然后可以在组件调用的地方传递对应的数据。当我们页面需要动态更新时，会引入 hoox 里 the use state， 然后通过 use state 得到返回的两个数据，一个是我们使用的状态 count， 另一个是我们要修改状态的方法 set count。 接下来，我们可以在渲染页面的 g s 叉中通过具体的业务逻辑实现页面的动态更新。当我们在页面上点击按钮时，那么 ctrl 的值就会实时响应。

百度、阿里、 word price 都准备放弃 react， 那为什么要放弃？后来为什么又没放弃？这就和 reactor 的开元协议有关了。 什么是开源协议？咱简单说一下，就是说正规的开源项目，他都会有一个开源协议，那这个开源协议咱不用签啊，只要你用了这个项目，你就默认要遵守这个协议。那瑞艾特开始使用的是一个 facebook bsd 加拍真实协议，这个协议大概意思就是如果你使用了 react， 同时你和 facebook 有一些专利纠纷，那咱们不管这个纠纷谁对谁错， facebook 都是可以禁止你使用 reaction 的。对于咱们这些普通人其实无所谓，因为咱们肯定不会和 facebook 打官司。 而且说咱们如果说真不让咱用了，咱换 vivo 也可以啊，一样写代码。但是如果你是一家国内的大厂，那核心产品如果用了 reaga， 那这个事就可大可小了，它是有一些风险， 因为大厂他是有可能和费事不可发生一些纠纷的。那为了避免日后有一些小麻烦，有一些法务问题，所以大厂他就选择了放弃使用 react。 但后来这个事闹得沸沸扬扬，最后 facebook 也是退了一步，把瑞 x 的开源协议从之前的这个修改成了 mit 协议，这才皆大欢喜。 那这些开源协议都写在哪？有什么作用？有什么区别？咱们今天就把这三个事给他说清楚， 先书写在哪？我们随便打开一个正规一些的开源项目，比如 react， 可以看到这里有一个 license 文件，这个就是开源协议。 点击之后就可以看到 reactor 的开源协议使用的是 mit， 那具体这个 mit 是什么意思？一会咱们再说。大家只要知道，如果说自己真的要发布一个开源项目，最好是在项目中加上这个开源协议，为什么呢？因为开源协议的第一个 通用作用就是免责。那咱们举个例子，比如张三啊，他用 view 开发了一个有颜色的网站啊，他被抓了，张三就说，哎，我的技术支持有雨兮啊，他也得承担法律责任， 那这个锅人可不为啊，因为开源协议里面以书面的形式已经写得很清楚了，就是我的代码啊，你可以用，但是出了事别找我。那这就是开源协议的第一个作用就是免责。开源协议的其他作用咱们就要区分，不同的协议来说， 开源协议还是非常多的，而且很多条款都是重复的，我们就找三个最常用的开源协议，这三个协议它可以涵盖百分之八十的开源项目。第一个说的就是刚才 react 使用的 mit 协议， 那像 viewno 的 alematoy 这些前端小伙伴经常使用的一些开源项目都是 mit 协议。这个协议还是非常宽松的，基本上就是拿到了一个 m mat 协议的开源项目。那原码想咋用就咋用啊，基本上是没啥限制的。所以很多公司在选择开源项目的时候， mit 协议是最受欢迎的。这就是为什么 facebook 把 react 的协议改成了 mit 之后，就天下太平，极大欢喜了。 但是其他协议就没有 mit 这么宽松了。比如咱们介绍的第二个 gpl 协议，比较有代表性的项目就是利尼克斯，那这个协议比较有特点的特性就是你开发的项目如果使用了一个 gpl 协议的开源项目，那么你的这个项目也得开源 啊。比如说程序员张三他开发了一个推荐系统，使用了这个 gpr 协议开元了。那李四他又开发了一个视频平台，这个视频平台就用到了张三开发的这个推荐系统，那么李四的这个视频平台也得遵循 gpl 协议，也得开元，如果不开元，那就 就等着被告吧。虽然这篇儿协议加入了一些限制，但是这篇儿协议其实是包含了一些理想主义精神的，就是我开园给你用，你也得开园给大家用，大家都热爱技术，都热爱分享，都藐视金钱， 那听着可能是有一些过于理想主义了，但是这种理想主义其实是渗透到程序员骨子里的，大家想一想，三百六十行， 哪一行的人最愿意把自己的总结经验以及劳动成果无偿的分享给陌生人？去看去用啊，那只有程序员了， 当然我说的不是我啊，我发视频是有收益的，但是很多程序员他其实贡献圆码的时候是不挣钱的。再收回 gpr 协议，那这个协议他有一些理想主义特性，那开发者就可以利用这个特性去让自己的代码遍地开花，无限发展。比如说利牛克斯就是一个使用 gpr 协议非常正面的例子，那利牛克斯 是如何发展起来的？如果大家有兴趣的话，以后我可以单独做一期视频讲一讲，先挖个坑，咱们再接受下一个协议啊，阿帕奇协议，这个协议最有代表性的项目就是安卓，这个协议有什么特性呢？就是如果你的项目用了阿帕奇协议的开源项目，你必须要有一个声明，你告诉别人你用了这个开源项目。 就以安卓为例，大家看国内各大厂商的手机系统，除了鸿蒙都是安卓魔改的，开机的时候是不是都能看到一个 power 的白安卓了，这就是阿帕奇协议的特点了，只要你用安卓，你就得显示这个商标，那不带这个商标你就得吃官司。 不过阿帕奇协议相对于 gpr 协议，在原码开原的这块是没有限制的，也就是说你用 gpl 的开源项目，那你的项目也得开源，但是你用阿帕奇的项目，你只要给个声明，那你是开源还是必源，这个是没有要求的， 这就是 mitgpl 和阿帕奇协议的区别了。最后再说一下协议具体的内容，我说的肯定是不全，大家有兴趣的话可以看一下协议的英文原文，内容确实是有点长， 内容都是大同小异的。大家在使用开源项目的时候呢，尽量还是了解一下这个项目的开源协议啊，尤其是自己创业的，免得以后有一些法务风险。那今天的内容就这些，如果对大家有帮助，一定要点赞支持一下，这是我更新最大的动力，咱们下期再见！

大家好，这节课给大家介绍一下这个课程我们要写的一个项目，这个课程我们是用 relack 的来完成一个商城的后台管理项目，那这是商城的一个登录页面，我们来登录一下 之后会进入到后台的首页，首页简单的展示了一些统计的数据， 我们还可以在这里进行分类的一个管理，可以添加新的一个分类，也可以对已有的分类进行一个编辑， 然后还可以去查看这个分类当前的一个啊子级啊分类的一个子分类，然后是我们的用 户管理，用户管理会列出来我们网站的一些用户啊，在这里可以去啊简单的进行一个模糊的一个搜搜索，以及通过这个邮箱进行精准的一个搜索， 还可以在这里去添加新的用户啊，并且给他去设置一个密码啊，当然如果自断你没有提交的话，都会做一些表单的一个验证，还可以对现有的已有的用户进行一个编辑。 先来看一看商品管理，作为商城的一个后台管理，商品管理是最重要的一个模块，在商品管理里面我们可以对商品进行搜索， 还可以去添加新的一个商品，以及对现有的商品进行一个编辑操作，来新建一个商品看一下， 选择他的一个分类，比如说我们选择前端 gs 商品名描述随便写一下， 然后是价格库存，上传商品的一个封面图， 我们来找一个图片，然后是商品的一个详情，这里还支持插入图片提交， 添加完成之后，这里会多出来刚才我们新添加的一个商品啊，这边图片呢还可以去看他的大图的一个预览， 然后还可以对商品进行上架和推荐的一个操作，对商品进行一个编辑操作，这是商品管理， 然后是订单管理，当有人购买了商品之后，我们这里会看到用户的一个订单的一个情况，以及订单的一个状态，可以通过这个单号进行一个搜索以及支付的单号进行一个搜索， 在这里我们可以查看订单的一个详情，也就是这个订单他所包含的一个商品以及商品的一个数量以及总价。 如果是已经支付的商品，我们可以在这里进行一个发货，发货的时候我们要选择快递的类型以及快递的单号啊，那现在我是在讲的都是 后台管理的相关哪个内容，那等会再给大家说一下他对应的前台我们应用的地方，他是怎么的一个使用情况啊？订单管理说完之后，我们来看看这个评论的管理，在用户确认收货之后，他可以对商品进行 评价，我们在这里也可以看到用户的一个评价，那评价呢？可以去看到他所对应的一个评价的一个商品以及内容，以及我们回复的一个内容。 如果这个评价是未回复的一个状态，那我们可以对这个用户的评价进行一个简单的一个回复操作，然后还可以在这里去输入商品的名字，去搜索对应商品的一个评价。还有 就是我们的伦波图的一个管理，也就是首页那个班的图的一个管理，这里呢主要是对他的一个启用和禁用，以及他的这个一个排序啊，我们可以去编辑他的这个排序。 还有就是啊新建我们的这个轮播图，以及去编辑现有的一个轮播图，这个就是我们商城后台的一些功能， 之前在我们 vivo 的项目中，我们已经使用 vivo 三完成了商城的啊，前台的一个应用啊，这就是 对应的商城的一个前台的应用啊。大家可能有疑问，这边显示的是图书相关的啊，这边使用的是这个这些电脑啊，电子产品，这是因为这两个项目用的 app 啊，那我这个是为了方便演示，用的是我本 的一个 api 啊，这个是用的线上的一个 api 啊，当然是功能都是一样的啊，就是同一个项目同一个 api 的项目啊，只说用的 api 不一样。可以看到啊，刚才我们的说的这个，比如说 轮播的一个管理啊，他负责了这个首页的一个轮播我们的商品的这个管理，他会来控制这个商品的一个显示以及他的价格，然后包括这个推荐的一个商品。 在这个分类里面这些分类啊，这个分类就是我们在这个分类管理里面去编辑的这样的一个分类，然后 对应的一个该分类下面的一个商品，因为我们在添加商品的时候是要给商品去选择这个分类的啊，所以在前台我们就可以 可以通过啊不同的这个分类去选择筛选不同的一个商品啊啊，当我们登录之后就可以把这个商品去加到这个购物车， 我回首页给大家登录一下，看一下，重新去添加一个商品， 把这个加入购物车之后就可以去结算，结算的时候可以看到订单的一个大概的一个情况，然后选择完收货地址，我们就可以进行一个支付， 提交订单，这样会弹出一个支付的一个二维码，然后我们扫码支付之后，订单就会变成以支付状态， 那这个我就不往下继续演示了，那演示这个前台的这个项目呢？是 vivo 写的这个，我们的这个课程已经完结，然后这次的课程是将使用瑞艾克的去完成后台管理的一个项目，那这是我们要完成的这个项目的一个简介。