day11/下午/228-尚硅谷-尚融宝-srb-site前端网站的介绍

好，我们今天最重要的功能呢，就是了解了一下咱们的前端的这样的一个，呃，服务器端渲染的技术对不对，那然后呢，接下来呢，我们就要用这个NAS呢，把咱们的这个网站呢，给它搭建起来啊，那搭建起来的话呢，我们来看一下用户注册的第一部分的内容，叫前端整合发送验证码啊，这块也是一样的，大部分代码呢，都给大家写的写好了啊，但是里面的一些核心页面呢啊，先给大家发几个啊，就是登录页，注册页以及用户中心的首页啊，这几个页面呢，给到大家那都放在哪里了呢？放到了这个压缩包里面，这个上午的时候呢，给大家发了一下啊，我们来找一下他们。呃，在嗯。大家从今天的那个资料里面去找就行了，然后我呢，把它放在这里了。嗯，那嗯，SRB赛点Z把它解压。

好，然后接下来呢，我们把它剪切出来，剪切到我们的项目目录中。PROJECT0921。嗯，Front。好。把它粘到这个位置啊，接下来呢，我们打开我们的这个，嗯，开发工具，然后在开发工具里面呢，咱们就先看一下，刚才咱们引进来这个S2B set这个你看它有next这个目录，它很显然是一个next的项目，然后它还有一个next点点JS，那么很明显它就是next的配置文件，对不对，那个核心的配置文件，然后接下来呢，pack.jason里面，我们呢，除了引了X，引了next之外，还引了element UI啊，还引了JS cookie，这个是操作cookie的一个工具，好，就引了这么几个，然后这面命令这块呢，我们啊用的是这个DV命令啊，还是这个命令，那其他的呢，就是一些啊，就是打包啊，运行生产环境什么的那些命令了，好，这是我们开发环境的这个命令啊，然后接下来呢，我们再来看，呃，Plug ins下面我们呢，就配置了这个刚才刚刚说到的这个xus X里面呢，我们配置。

了啊，它的请求拦截器，还有这名响应拦截器，当然了，请求拦截器和响应拦截器里面我们写了一些内容，那这个内容到底是什么，后面我们讲到的时候再说啊，所以这个实际上都给大家写好了，然后另外呢，这个插件除了X的这个插件之外，我们还配了element UI的插件，还配了一个。

嗯嗯，这个没啥用啊，目前为止，好，然后接下来呢，我们再来往后看，在咱们的这个next.con.js里面，我们呢，就把这几个插件就配配配进来了，那目前为止只有这两个插件在我们这个项目当中有用啊，这个就是一些其他的功能，我们并没有并没有把它删下去啊，然后接下来呢，啊，这个你看配置插件，咱们上堂课学了一个X，那你在整合其他的插件的话呢，其实不需要你自己会整合，但是你一看到你就知道它和它是一致的就可以了，明白哈，好，然后你看上面这个地方是不是就是X的一个啊，这个基础的一个啊，主机地址的一个配置啊，然后上面这款是不是X的一个配置啊，然后这个配置有什么用，后面我们再说啊，然后这个是不是咱们全局CSS配置啊，这不是都有了吗？都上堂课咱们都讲了对吧？然后这个是不是搜索引擎相关的一些配置啊，对吧？嗯，好，这个是不是端口号的配置啊好。

那所以啊，我们能达到这个目的就行了，诶看到这个代码90%都认识就可以了，知道他们是什么就可以了啊好，然后接下来呢，这面。就是有一个static，你看里面是不是也有咱们这个，呃，这个标题啊，栏当中的这个图标啊，然后你像这个pages，这里面有咱们很多的页面，当然了这个咱们未来的这个项目当中还会有一些其他的动态页面，后面会陆续发给大家啊，因为后面有一些页面的内容，我需要再给它优化一下，所以呢，就把需要优化的，嗯，页面呢，我就把它摘出去了啊，后面再发大家，然后这里面呢，已经包含了呃，就是绝大部分页面了，然后接下来呢，这个呢，就是我们的呃这个模板，模板呢，它有两个默认的模板，一个呢是默认的啊，就是全局模板，一个呢是默认的错误页面啊，就是一旦页面发生错误了的话呢，它就直接跳到这个错误页面当中来了，好，然后接下来呢，这个呢是。

一些组件就是我们，嗯，在全局的这个全局的这个layout当中，我们呢，有公共的头，有公共的尾，但是公共的头和公共的尾呢，我们是以这种组建的形式引进来的啊，和我们在这个后台管理系统当中以组建的方式呢，都差不多啊，然后这个公共的头和公公的尾呢，实际上这块啊，就是用了两种方式来写啊，就是你可以用这种方式去引，就是这个是引入，这个是注册对吧，注册完了之后用这个名字直接用就行了，这边也是一样用这个名字。直接用就行了，或者是怎么写呢？就是它有两种命名风格嘛，或者是这样写啊，就是用这种中华线的风格都可以，那这个你也可以改成这种风格都是一样的啊，就这两套风格都可以，就给大家了解一下就可。都可以是吧，那这块呢，就是我们的那核心页面的占位符了，所以呢，这块就两个部分的内容呢，就通过组件的形式给它引进来啊好，然后呢，那组件这块很显然就是我们所有页面的页面头部的内容啊，我们改页头的时候上这改，然后这面呢，是所有页面的页面的尾部的内容，我们改页尾的时候呢，上这改。

啊，所以这是引的组件，然后另外呢，这块还有导航，这个导航呢，一个是借款人的导航，一个呢是投资人的导航，呃，这两个用户他进到我们系统当中来的时候呢，他的这个啊，所看到的左导航是不一样的啊，那么这个左导航是在哪被嵌进来的呢？在用户页面里，所以在pages下面呢，你会看到一个用户页面叫user啊，User里面呢，你会发现这块就嵌了不同的导航，一个是investor，一个是包内，那这个investor内和bar内呢，就分别来自于刚才我们这个components下面的这两个导航了啊，当user type是投资人的时候，它就显示投资人的导航，当user type是借款人的时候，它就显示借款人的导航。所以这面呢，作为基础页面架构的部分呢，都给大家写好放在这了，然后大家呢，有一个了解就可以了，知道咱们这个页面是谁谁谁和谁调用的啊，然后呢，同时呢，你会发现在这个user user.view里面呢，它会有一个啊那。

Child是吧，Index child呢，就证明它是一个嵌套页面，那你会发现这块有个user对吧，有个index，所以这个用户中心它肯定未来会显示在这个last child里面，所以到这为止，不管大家啊能不能从整体上把握这个页面啊的细节，但是呢，你其实是可以通通过刚才咱们学习的知识，在这个里面去找到一些你能读得懂的痕迹的，这就够了。啊，然后更细节的内容，更具体的内容，后面我们再呃写写代码，真正写项目的时候，咱们再去啊熟悉它啊，再去认识它就可以了，所以现在呢，咱们从整体的角度一看啊，啊，就是刚才咱们学的这些内容啊，原来都对上号了就可以了，明不明白啊，所以这是这样的一个页面的一个组成。

然后接下来呢，最后还有一个就是size嘛，这里面就包括咱们的CSS呀，还有一些图片呀，还有一些字体呀等等这样的一些内容啊好，然后呢，我们就来把这个给它运行一下。运行的话呢，就是嗯，直接和我们之前的这个那APP是一样的啊，然后就右键在集成终端打开，然后当然了，建议大家把之前的这个啊，那APP的这个给他就停掉吧啊，因为他俩如果都是三天端口的话，就冲突了，是不是啊就一致了，一致了就冲突了嘛。哎，为什么卡住了。稍等啊，我这个卡住了。嗯。

嗯，我先我先停一下这个视频啊，他这个有点有点问题。