day12【首页登录和注册功能】/14-尚硅谷-谷粒学院-整合登录和注册页面

各位看啊，在我们的首页面中的右上角有登录和注册，那咱要怎么做呢？大家注意啊，当我现在点登录或者说点注册，它是不是要跳转到你的对应的页面中去，比如说点注册可能到咱们的注册页面，我点登录是不是要到我们登录页面，所以这是第一部分，点登录注册到咱对应页面，然后在注册页面中咱家可以输入注册这些基本信息，在登录页面中能输入登录信息进行登录啊，主要是这么两页面，所以咱们首先先把这页面先给它弄出来，然后再写里边的具体功能。好，那我们来做一下啊，第一部分。我小的位置。咱们先把这个就是首页面中的登录和注册，它的页面先整合出来，然后再往下做到没有页面，但效果不直观，那我们看应该怎么做啊，这个过程呢，不需要各位去写，你直接复制可以了，因为就是一些静态页面。

那怎么做的，按照我的流程，我这里边每一步应该都写到了啊，那我们来看一下啊，怎么做啊。首先大家看啊，就是这里边呢，我们需要做的第一步操作，在咱们当前的nat环境中，咱需要先安装一个插件啊，主要就是这个插件咱需要做安装，这是它的第一步啊。我写一下。这些都是为了咱一会儿做准备，不安装有问题，第一步。安装一个插件，这插件咱都见过，就是什么。Element UI啊，就这个插件，因为咱们说到我们这个纳斯框架本身只是基于这个voe做到它本身没有element UI，所以咱要用的话，需要给它手动装上才能用它不像咱之前那个后台那view的命令里边都有，它里边没有，所以第一步咱需要把这个MUY给它装上，这是第一步啊，我这个已经提前装过了，那怎么装？很简单，就是你现在来到这个控制台中输入命令NPM，因此到MUY，它就会在你的note Mo里边有，你下载之后这个依赖啊，这是它的第一部分装个依赖。

然后除了这个之外呢，我在课件中啊，还写了一个插件，这个暂时用不到，咱也可以先给他装上，这是咱后面用到的，这个今天暂时用到啊，但我也写到这里啊。这是什么呢？这是为了咱们后面做那个就是微信支付的时候，因为大家都见过微信支付是不是有个二维码啊，他是为了下载二维码使用的，但是目前用到啊，咱也可以先装上，不装到后面咱讲的支付装也可以，我是都写到这个课件中啊，这是第一步，需要先装插件，主要是这个MUY，这咱们必须要装上这个可以后面再装。啊，这是第一部分啊，咱各位可以都给它装上，或者后面方便啊，然后这个装上之后，我们看第二部分，第二部分怎么做呢？因为现在呢，咱们装了这个MVUY，还有这个插件，这个插件装完之后呢，我们要在NAS环境中使用，或者给它引用才能用这个插件，那怎么引用，咱看第二部分啊。

它的做法就是小这里。就是我们第二步需要在我们的NAS的环境中使用咱安装的这个插件，主要是这个IU啊，包括这个后面咱有用到，那怎么来使用呢？大家看啊，咱们之前呢，在我们这个前台页面整合的时候，咱曾经装过一个叫幻灯片的插件，就是我们这个轮播图这个切换插件。我说各位是否记得啊，当时咱们装的话的时候呢，先下载，然后咱们做一件事情，在play里边呢，建立一个文件，里面就是引用了这个插件，当然咱是这么做的，而现在你需要把MUY和其他插件在里边都这么来写啊，这是它的第二步操作，就咱需要修改这个配置文件，然后里边加上你的内容就可以做到。

啊，这给大家寄过来啊，然后这个内容呢，不需要各位写一遍，你直接复制就可以了，前提条件把这先下载好，我把它就直接拿过来了，然后咱们看一下啊，这步是必须的啊，你不这么做，后面用不到MUY。然后你看写法中啊，首先先引port from，把你的插件先引入，包括vuee的，包括咱这轮播图的，还有下载二维码的MVUI的，引入之后用Ve.use来用到里面这些插件啊，包括MVUI是咱们主要用到的啊，这是里边的第二部分，我们就需要这么来做。这各位啊，给他按照这个流程给它复制过来就可以了，不需要你去敲扁啊，因为都是固定的这么一个结构。这个啊，第二步。大家知道啊，然后这一步做到之后，咱们继续往下来做，做它的第三步，第三步呢，咱就需要做这个登录，包括这个页面啊，那我们先弄页面这个JS，一会再来定义啊，页面怎么做呢？给大家写一下啊第三步。

那就来整合这个页面。那我们先整合，比如咱先整合里边这个，呃。登录页面或者先整合注册页面啊，在整合登录页面，我们先整合一个注册页面，那怎么整合呢？首先第一部分啊，咱们之前呢，在这个set里边应该复制过很多的set文件，但它里边啊有这么一个东西叫赛。这个东西它这是针对你的登录注册的样式，之前咱都复制过了，所以这步不需要了啊，所以各位就看一下你复制东西有没有少，你到我这个资料里边。有一个叫前端相关资源页面原型中的set，你把这些都复制过来，这些不能少，少的话样式会有问题啊，这咱之前复制过了，然后复制之后往下来做啊，下面干什么呢？我就按课件中的流程啊，我这里边是在layout里边建一个文件，这个文件。

我想这位置啊，做法就是。整合页面中的第一部分。咱们在layout。这个文件夹中创建一个登录和注册的一个布局页面，页面名字我就叫散点vuee啊，这是第一步，但是这步不做也可以，这步做的目的是什么呢？就我说过了layout。找到啊，料子是不是叫布局啊。咱们之前的布局是这个样子，有头。还有尾中间是不是引入其他页面，但是现在我登录注册，比如说现在啊。我不想用这布局，我想换个布局他也能做到，所以我这个散页面就是为了登录注册，咱给他换个布局使用，不换也可以不换，默认用的都是default啊，那咱为了我们这里边大家知道的更多，咱就换个页面来操作，那怎么做呢？Lay中建一个文件，比如起名叫赛点voe啊，名字随片体，然后在页面中我就写一个简单一段内容。

把这个复制啊。这内容中呢，主要就是写着一个图片啊，然后纳用其文件，这是咱们建立一个新的一个布局页面。在里边这么来做到啊，叫sin.vuee这一步没有也可以，但咱写的就是更多一点啊。第一个啊，然后这个做到之后，咱往下来看，下面呢，就来创建那个页面啊，就是页面中写的内容，那怎么做啊，看第二部分啊，这过程步骤多一点，但是它不复杂，但是每步都必不可少。往下写就是整个页面中的第二个。咱需要修改那个登录和注册那个超链接的地址，把这需要改一下，也就是说啊，你把首页面中的。这个地址需要改一下啊，因为咱们要让它跳转到咱的页面中去啊，这你不改也可以，就是页面你要给根据它改名字，这是我们要做的这个事情啊。

这给大家寄过来，那怎么改呢？第一个各位要知道啊，这登录注册目前是在我们这里边的哪个页面中有登录注册，就这位置它在哪里。要你要知道啊，咱之前说的特点，登录注册是不是咱的头的位置，它是不是应该在default里面啊，是咱的布局页面，那我们找到default，然后咱找到上面那个登录注册网上找啊登录注册。各位看到是不是这里啊，就是你现在把这个路径需要改一下啊，这是我改过的，之前默认不应该不叫这个名字，不叫也可以，咱就改的清晰点，Log in要登录reject叫注册，把这个需要改一下。啊，这是我们改的这个位置啊，给大家。截一下啊，就是登录和注册。然后写到这个位置啊，咱们就是。

到这个layout。里边那个就是叫default。点VE中进行这么一个修改啊，到这里边我们改一下，然后改的地方就是咱看到的这个位置，把这个登录改成Lee，注册改成reject啊，这是它里边的第二部分啊，所以每步我在里边都写到了啊，这是第一步第二步。然后这个改完之后，最后咱就来做那个登录的页面，比如第三步。写下啊第三步咱就可以创建这么一个登录或者注册页面啊，咱是注册先建一个注册页面，那怎么创建呢？按照咱这个规则。大家看啊，这名字是不是叫reject，然后这reject如果你写到超链接中，它会怎么做呢？它会到咱的配置四里边去找一个名称叫点voe的这么一个文件，所以咱们在配S里边就建这么一个文件，文件名字就叫点。

啊，这是我们一个注册页面，咱们需要做个创建，这是它的第三步。在pas里边建这么一个文件reject voe，而文件的名字根据这个re EF中的名字要对上，比如说你叫A，那叫a.vouee你叫reject，它就叫点vouee啊，这是第三步，建一个注册页面。然后建完之后，在注册页面中，咱就可以写它那个具体内容，这内容不需要各位敲一遍，我把内容咱就直接给他复制过来啊，就是我们这部分我就复制这个。呃，这个代码啊，我先都拿过来，然后代码我删掉，一会儿咱重新写啊。我先都分过来。然后把下面这个代码部分，我先给它去掉啊，咱就保留一个最基本的结构，然后这个部分咱一会儿重新来写啊。这个我先给他。拿掉啊，保留一个最基本的结构。然后这个。Method里边这些全都给它删掉啊。

这个先保留啊，一会儿再我会说这些都是什么意思啊，所以现在咱把这个注册页面就创建的，然后在里边有这些内容啊，就是这些内容你从我课件中直接复制就可以了。这个哈，我们就整出来了。小这个位置啊，就是复制我们课件里面那个页面的那个内容。渠道完成啊，然后完成之后呢，咱们现在啊，先看下这效果有没有啊，当然他可能会报错，如果报错咱写完之后再测试，它里边有一些数据需要取。啊，这个啊，我们现在先试一下啊，这个基本的效果。呃，这个我也先给他少了一个括号啊。先放这儿吧，这个暂时用到啊。然后咱们看结果啊，就是现在我这里边，我把这个环境我们先启动。NPRUDV，然后咱们看注册页面啊，登录页面的整个过程跟这是一样的，登录的过程我在这里写了，比如我直接复制页面就可以做到啊，过程一模一样，再也是在配里边建个页面叫low in.voe然后里边复制页面中内容。

过程都是一样的啊。那我先启动啊。等它停起来啊。啊，这个啊启动了，启动之后我们先来到首页面啊，咱就不干它，因为这没启动，咱就看登录注册啊，现在我点这个注册，大家看它就到这个页面，就咱们这个叫reject，这会到你的配里边找到你这个页面，所以这个页面就是注册在里边咱可以输入，比如你的昵称，手机号啊，包括这些啊，这里边加了一个校验，怎么校验，比如我会说啊。然后你这个位置可以输入手机号，包括验证码，最终点注册数据可以加到数据库，这是注册页面，我们就快速整出来了，然后整合之后还有一个登录跟它一样啊，咱快速复制一下啊，在配里边呢，我建个文件叫log in.VE然后我把登录这个页面中的内容从我课件中直接复制过来啊，咱找那个登录应该是这个啊。

这个咱们也拿过来啊。页面中东西不需要你写，咱写的就是扎子中的元素，这部分需要各位去写一下哈，我把这结构先给它删掉啊，比如咱们重新来写。得先拿掉啊。这么一部分啊。这个也先拿掉。然后这是一个登录的页面，那我们看一下啊，当然登录中可能有点小问题，因为这些值咱没有写到啊。我们来看啊，登录一点是不是这个界面，然后里边你输入手机号密码啊，这是注册，这是登录，包括咱回到我们的首页面中，在首页面中我点登录它到这个界面，点注册这个界面，这是我们要做一个效果啊，而大家看到啊，我们不管是登录还是注册页面，它现在页面布局跟水面是不一样的，里面只有一个叫鼓励学院，这就是用到我们刚才新创建这个布局，就这里边这个布局。

啊，所以这个啊，关于页面整合，各位按照流程能快速做到啊。这里我特别标注就是。登录的页面。和注册页面。整合过程是一样的啊，把这流程各位给他快速做到啊，所以这个咱就完成了啊，关于页面的整合，然后整合之后呢，在里边咱就可以做功能，在注册中咱调接口做注册，包括手机验证码登录里边输入手机号昵称，输入手机号和密码，最终做一个登录。