day04【项目前端相关基础知识二】/16-尚硅谷-谷粒学院-搭建项目前端页面环境

然后咱们搭建环境之前给大家我要说什么呢？写到这个位置啊，首先第一个咱们在项目第一天，咱们特别说过，我们项目用的那种商业模式是不是叫BTOC模式，这各位我觉得应该知道啊，不要说你不记得了啊，咱没过几天啊，咱们用的叫BTOC模式，而什么叫BTOC模式呢？在这模式中呢，应该有两个角色，一个叫。管理员还有一个叫普通用户啊，就是咱们有两部分，一个管理员，一个普通用户，所以说我们在开发的时候，其实咱们做的是两套系统，一套系统是管理员用的，一套系统是普通用户用的，咱要做两套系统，咱们先做的是管理员用的，而管理员用的系统咱一般给它起个名字，我们一般啊经常给他叫这个名字，叫我们的系统的后台部分叫后台系统。或者说叫后台管理系统，而普通用户用的部分，我们叫前台用户系统。

啊，一般我们可以这么来叫啊，这是一个后台，一个前台，然后后台中他就是管理员用的，前台是普通用户用的，咱们就是在之前写的接口叫讲师管理接口，就是咱们后台系统中的一个模块，前台咱们有写到，后面咱会写到，比如前台中你可以视频的播放，包括什么微信扫码登录是微信支付，后面会做到，咱现在做的是后台，而后台里边的分成两部分，一个是咱们的后端接口，一个是前端页面。啊，给大家画一下啊，就是一个是后端的接口。这么写啊，后端接口还有一部分我们是那个前端的页面。这里边啊，咱们叫前端页面。所以咱们两这两部分啊，这两部分都在咱们的后台系统中，因为咱们的项目叫前后端分离开发，所以咱们肯定有后端接口部分和前端页面部分，所以咱们接口部分呢，已经写过了，讲师那个管理模块的接口咱已经做完了，下面咱做的就是前端页面，所以咱们下面要做的事情是什么，把这个前端页面的环境给大家搭建出来啊，咱就要做这个事情。

这个希望各位能理解啊，我再说一遍啊，咱们项目用的叫BTOC模式，它有两部分，一个是管理员用的，一个是普通用户用的，所以咱在开发中有两套系统，一个是管理员用的系统，一个是普通用户用的系统，而管理员系统是咱们现在在开发的，我们之前做的讲师管理模块，就是后台系统中的部分，后面咱会做到前台目前没有做到，然后在系统中肯定分分成接口部分和页面部分。咱们的讲师部分我们把接口已经写过了，就是CTRLC的部分，现在咱们要写的就是前端页面，所以咱下面就来搭建这个前端页面部分，就是把页面效果做到，咱不能只有接口没有页面，页面必须得要整合出来。

啊，这是都要知道这个概念，报单后面写，前台也是一样有接口有页面啊，后台也是有接口有页面，每次都是写完接口写页面调用，然后做数据的操作。啊，这个啊是咱们说到的啊，那下面咱来搭建这个前端页面的环境。这是啊，咱说的一个基本的一个概念啊，这个咱知道。然后咱下面来搭建啊。搭建。我们这个项目的就是前端的页面的这么一个环境啊，就把页面部分咱给它整合出来，那这个怎么搭建，给大家说一下啊，首先第一个就是在我们的实际的开发中，一般来讲咱再搭建一个页面环境，很少是从零开始写，这种几率不多，比如你从零开始，那我们创建H页面，然后写各种样式这么来做，这种几率不是很多，很多时候呢，我们都会选取一些框架或者一些模板来搭建页面，因为这么做效率更高，它里边可以帮我们实现了很多业的功能，所以咱们现在搭建我们这个在线教育的其他页面，咱也是选取一个模板。

啊，就是我们选取一个模板，或者说一个框架。咱们来进行这么一个环境的搭建啊，咱这么来做，包括咱写接口，咱是用SM，现在写页面，咱用个框架或者模板来做的啊。这各位知道啊，而咱用的模板是什么呢？给大家说明啊，咱的模板叫这个名字。它叫we admit temp里。这是我们用的模板，就是vuee啊，它里边做的这个集成，它做的这套东西，就是这个模板中把很多功能都帮咱们做到了，所以咱们项目中就选取它来搭建咱的环境。

给各位啊，给得先知道啊，Voe和me to姆利的。然后这个东西怎么去用。给大家我来做个演示啊，就是它的使用方式。首先啊，我写一下啊，就是它的第一步。各位啊，到我那个就是资料里边找到这个模板，我给各位应该已经提前共享了，或者说你到他的官网去下载最新的，但咱没必要，我这里边都已经听出来了啊，咱看我这个课件中啊这位置。就是这个啊，咱用的就是这套模板啊，然后这里边呢，你可以到官网下载，我这里边已经提供出来了，然后在哪里呢？咱找一下啊，在我这个就是资料里边有一个叫前端相关资源，然后在这资源中大家看到啊，这里边有两个压缩文件，这两个都是咱们用那个模板啊，就用哪个都可以啊，这是我们它那个位置啊，所以各位先找到这个压缩文件啊，是在这里。

这是我们说的啊，第一部分。我写一下啊，就到我们的资料中找到那个模板的压缩文件，然后它的位置就是在这里。啊，就这位置。然后找到之后我们要怎么去用呢？给大家说明啊，用法其实很简单啊，首先咱们看一下啊，现在我这里边是不是有两个压缩文件，而两文件有个区别是什么呢？咱看它的大小，第一个文件。是不是100多K，第二个文件是不是900多K，而我们现在用的话，其实咱用100多K就足够了，900多K中有更多给我们写好的功能，但是咱没必要100多K足够咱用了，咱用它来做我们的模板的，就是项目的环境搭建啊，咱选用100多K这个压缩文件，这各位知道啊。然后这里写一下啊，找到压缩文件，然后咱就使用那个就是100多就171K的那个。

啊，压缩文件就找到它使用就足够了，900多K的没必要，因为很多功能我们都用不到，你要用它还得删，咱用100多K的是最合适的啊，这是第一步啊，然后这步做到之后，那我们怎么用的，给大家说第二步操作。小这个位置啊，第二步，第二步做法就是呢，咱就是解压。啊，这个171K的这么一个压缩文件，然后到我那个工作区里面去，这是第二步操作，那我现在给大家就点一下啊，咱就讲这个过程啊。呃，这里啊，你把它挤压，比如说这个位置先夹出来啊。先到当前目录啊，然后解压之后是这个，那把它点开，里边还有一层，然后就是这个文件，你把它直接复制到你的工作区中，那我现在做个复制。啊，比如说就叫这个名字啊，我的工作区呢，是在这个E盘，你看你的功能区在哪里，然后你做个复制E盘叫VS1010，然后把它拿过来，这是我们复制出来的这么一个文件啊，就是它这是我们做的第二步操作，把它直接复制过来。

大家啊，截个图。就是这里啊，这是第二步。然后这一步做到之后啊，咱们继续往下来做啊，就看他的下一步操作。往下拉一点啊。这个啊第二步，然后这步做到之后，下面我们来做第三步，那第三步干什么呢？咱就是通过这个Vs code打开啊，就是Vs code的那个终端。打开我们这个刚才解压的这么一个就是文件夹，然后咱们进行这么一个叫依赖的一个安装啊，依赖的安装就把依赖需要咱们先装上，因为里边默认没有依赖，那怎么装，刚才我也说过了啊，咱看一下啊，刚才我复制过来之后，它里边是这个东西，这些我先关掉啊。

来找到刚才我复制的应该是。是不是这个。就是will to master啊，咱把它用终端打开。这个就打开了，打开之后呢，在里边咱们把依赖装上，什么叫装依赖呢？因为它里边呢，默认只有一个配置文件叫拍摄点Jason，它里边就是有很多的依赖，咱看一下啊，就这些都是它依赖，比如你看有sis什么啊等等voe什么等等一系列的，咱需要把它装上，那这里边不知道各位是否记得啊，咱上午刚学过。通过配置文件安装依赖，咱是不是有个命令，这命令是什么。各要能想出来啊，我写一下。通过配置文件安装或者说下载依赖啊下载依赖。然后这里边我们使用一个命令，这命令要各位记住啊，它的命令就是NPM。

Install后面不加其他东西，然后用这个命令，咱一使用一回车，它就会联网去下载这个配置文件中这个依赖啊，把这个可以下载下来，那我们来试一下啊，这里边我写个n PM in动，然后咱们以回车，现在就会联网去下载这个依赖啊，但这时间可能稍微长点啊，一般来讲。三四分钟吧，下载下来啊，但是下载过程中还是我说到的可能会失败，如果失败的话，那各位就给他把你下载之后那东西删掉再重新下啊，咱先试一下啊，如果有有一个提前下载好的，咱们大概看一下，我就不在课上下了，咱不占用这个时间了啊，里边就这过程。他会联网去下列依赖。我把这个啊给大家截过来啊，就是在这个界面。所以咱们啊，就等它的依赖下载完成啊，而下载完成之后呢，会是什么样子呢？我就不下了，因为我就提前下过了啊，我把这个给它关掉啊，咱点CTRLC直接写个Y就结束了啊，不下了啊。

我这里边已经下载好了，然后下载好什么样子呢，就是我这个文件夹啊，在里边呢，会多出来一个叫no models，这就你下载好依赖的这个地方，它都在里边有，你各种依赖都放到了no models里边去啊。这是下载好的。所以各位注意啊，就是如果你想自己下载也可以，它可能会失败，如果说你下载失败的话，你把这个给它删掉，再重新用命令再重新下啊，一般你试一两次应该就能成功啊，我这个昨天晚上我自己下的话，第一次就失败了，我删掉再下第二次才成功啊，它可能会失败，各位写自己用的少注意一下啊。但是一般各位的网应该都差不多啊，大体上应该能成功。接过来啊，最终依赖就在这里边，所以现在就可以了啊，把这个这么做，这个环境就可以搭建出来，然后就是这个依赖呢，我在这个今天的源码里边会给大家共享出来啊，就是这个源码中。

里边有这个，我这里特别标注到了是后台系统页面已经下载好依赖，所以各位用的话呢，你把我这个直接解压直接用就可以了，我这里把依赖已经都给各位下载好了，就这个东西。这个应该能看到啊，有依赖。但是我强调啊，因为这个依赖在用的时候呢，可能有些同学的电脑可能不能用，所以你注意一下啊，一会咱说怎么用，如果你发现你的不能用，那你按照我刚才这种方式给他自己重新下一遍。什么不能用的，一般有这么两种情况，但是大部分同学，因为90%的同学应该都可以用，有10%的同学有这么两个问题，第一个如果说啊，你用的是一个苹果电脑，那我这个肯定不能用，你需要按照我刚才的方式，就是我这里写到的NPM，因此到重新自己一下。

苹果电脑这肯定用不了啊，另外还有一种方式就是你的系统啊，可能你的系统可能有一些什么不完整，或者你系统可能装的比较那种精简，它可能也不能用，所以各位试一下啊，但是苹果一般是不能用的，你需要自己重新下。啊，这个我给大家听出来了，但是大部分应该都可以啊，这是下载好依赖的，就是我这个依赖各位，就是你把我的解压先用一下，如果你发现不能用，你再把它删掉，自己按照我讲这种方式重新下载一下，你自己重新下载肯定是没有问题的。这是啊，关于这个基本过程，然后这个都做到之后呢，咱最后这个环境就可以了，那都可以之后呢，那最后我们怎么看这个项目能不能用呢？咱把项目最终就做个启动就可以了，咱就最后启动我们这个项目。啊，然后写最后一步啊。第一步，第二步，第三步都说到了，然后咱看第四步。啊，第四步咱就可以启动我们这个下载好依赖的这么一个项目，那怎么启动，咱们直接使用一个命令就可以了，这命令要各位记住啊，咱后面每天都要用到，只要启动都是这个命令，它叫NPM。

Lu。DV，这是一个命令啊，然后你看这命令啊，NPM用到n PM run运行DV开发环境，用这个命令可以启动我们的项目啊，这是里边的第四步，那大家启动一下啊，怎么启动呢？进入到你项目的这个目录，用终端打开，然后直接输入命令，Npm ru DV咱们一回车。这样的话就可以启动，他在启动过程中会有很多的日日输出啊，咱需要稍等一会儿，第一次会慢一点啊，我们等它启动起来。这个啊，就用它来启动啊，这个啊截个图。第一次卖点啊，咱多等一会儿啊。

然后把它给大家啊接过来啊，就这里边。NPRUDV，然后它启动过程中啊，会有这么一个就是百分比的显示，最终当你提示就是100%，它就成功了，它会显一个端口号啊。咱多等一会儿啊，第一次慢一点啊。后面它就快了啊，你之前没启动过吗。然后你看啊，当前有这些提示啊。那我们先看我这个图上啊，让他先后台启动着啊，然后在图上，我刚才说这过程啊，首先第一个就是我这里讲的是我们从零开始怎么去搭建环境，当然各位用的话，你把我这个提供好的直接解压用就可以了，如果说你这个不能用，就是你刚才用这种方式不能启动，那你得按照我这里写到自己重新下一遍，第一步解压，然后第二步在里边啊，把这复制到工作区中，第三步npm in，把这个自己下载一下，然后最后用npm ru DV把项目提供起来。啊，那我们看一下啊，呃，这个界面咱先看它，最后成功咱看到的就是这个界面。

这是成功界面，然后成功界面中大家看啊，它现在有一个默认端口号叫9528，这是它默认端口号啊，9528的端口号当然可以改，只是一般没必要改，用默认的就可以了。啊，这个给大家演示。截一下啊，最终我们看到的是这么一个效果。往下来一下啊，就最终是这样的啊，这就表示它这个启动成功的，如果说你用我这个下载好依赖不能成功，按照这个过程，你再自己给他重新下一遍啊，然后成功之后呢，里边一个特点啊，咱通过这个IP端影号可以访问，但是它这访问会给你自动打开，浏览器会自动访问，如果你没自动打开，那你点它打开就可以了，你看这里边打开之后的就这个界面。这就是我们后台这个系统的一个前端页面，它是一个用模板做到的啊，这是一个登录页面，当我们看到它，那就表示这就成功了。

啊，就是这样的啊。可以给大家截过来啊，这是它那个最终的这么一个页面。就这样子啊。来到这里，所以咱们啊，通过它我就把这个给大家做一个说明，咱们的环境怎么搭建，用的就是一个框架，做一个模板，叫VE或mean to。这个保存下啊，第11个。咱们搭建项目这个前台页面啊，就是项目这个，呃。前端页面的环境。这个啊完成，所以这是关于啊，咱们这个完整的过程，我们就做到了啊，各位利用自己时间，你就自己去试一下啊，你把我的解压看能不能用，能用就直接去用就可以了，如果不能用，按照这个过程自己把它下一遍啊，但是大部分同学应该都可以，有同学可能系统什么问题不能用，你把它自己下一遍应该也是可以的，下载过程中可能失败，你把它删掉，再重新下，一般一两次应该都可以成功。