day11【首页数据显示和添加Redis缓存】/02-尚硅谷-谷粒学院-搭建项目前台环境（NUXT）

咱们的第一个内容呢，先把咱们项目的前台环境先做一个搭建，把这个搭建出来，就是搭建之后呢，就类似于我们的这种效果。那这里边啊，有个概念希望各位要明确啊，是咱们在项目第一天说到的，我再提一下啊，有的同学可能啊不是很清楚，我再提一句，然后什么概念呢？第一个各位要知道咱们项目现在用的是不是叫BTOC的模式，这是第一个，这你要明确啊，然后BTOC什么意思，咱之前都是提到过的啊，他就指啊我们BTOC里边有两个角色，一个叫管理员，一个叫普通用户。写一下啊管理员，还有这个叫普通用户。而管理员、普通用户市里边的两个角色，所以说我们按照这种模式做的项目中，咱需要有两套系统，一套系统是管理员用的，一套系统是普通用户用的。咱之前写那个，不管是讲师管理、课程分类管理还是课程管理，其实都是管理员用的部分，所以咱们今天做的是普通用户用的部分，也就是说比如我们作为用户进入到那个在线教育项目中，咱们就是普通用户，那咱们能做什么事情，这就是普通用户做的系统。

这是两部分，而这系统中呢，一般我们给它叫这个名字，官员用的部分原咱们给它称为叫后台。管理系统，而普通用户用的部分，咱一般叫前台的这个系统。所以这个啊，是咱们两个部分。一个是管理员用的后台系统，一个是普通用户用的前台系统，咱们今天就来做前台系统啊，包括就是每个系统中都包含咱们的前端开发和后端开发，这个各位要明确啊，每个里边都有这个叫。前端开发还有一个叫后端开发，前端指的就是我们现在写页面过程，后端指的就是咱们开发这个页面啊，每个里边都是前端和后端，包括你不管是后台系统，T系统中都是这个部分，咱们是按照前后端分离的方式做到的啊，所以这个更要明确啊。

咱们做前台系统，而咱们今天呢，首先第一部分就先把咱们这个项目的前台系统环境，我们先给他搭建出来，搭建之后咱再做里边的具体功能啊。这是概念上的介绍，那这个前台系统环境要怎么来搭建，给大家来说一下啊。那我这个位置画个图，咱们的第一个内容。搭建。项目的前台系统环境，而这个环境我们要怎么搭建呢？当然在这搭建过程中，我们就要使用到一个新的一个框架，这个框架之前咱们没学过，是前端中一框架叫这个名字。它叫做NAS的，咱就用这个NAS框架来搭建咱们系统的前台的环境啊，当然这个前台你用我们之前那个vuee那个模板也可以，只有我们现在换这么框架来搭建，就是咱们学更多的这个知识啊，用这个来再搭建，那里纳到底是什么，首先把这概念我们先做个介绍，然后咱们做个搭建，搭建过程很简单啊，但是这概念你需要有个认识。

我强调啊，这个概念主一个词，它叫这个词。叫做服务端渲染技术，然后把这词给各位先做个说明，这个概念虽然属于前端工程师必须掌握知识，但是咱作为后端人员，这个概念各位要有一个认识，要各位对这个概念也有一定一个了解啊，因为这个也是属于一个基术知识，那我下面给大家就介绍一下什么叫务端渲染技术，咱们用这个NAS这个框架就是一个叫服务端的渲染技术。

啊，那我来做个说明，给大家来画一下啊。首先我这里边啊，这么来画啊。比如说啊，我们在最原始操作过程中，答案肯定是这个过程，就是我现在左边部分是我们的叫客户端。比如这是一个客户端。然后咱们右边部分是咱那个服务器端或者说服务器，而咱之前我通过客户端要去调服务器，咱之前做法就是咱是不是要发送一个叫阿贾克斯请求来调用，然后你调这个服务端，通过服务端返回数据写一下啊阿贾克斯请求屏端的服务端，然后服务端返回数据，返回数据之后呢，在咱们的这个客户端的页面中得到数据，然后把数据你可能做便利做什么获取，最终在页面中做个显示。这是我们最原始方式，通过阿贾克斯发送一个请求到服务端，然后服务端反应数据在页面中做显示，啊，咱们最显示过程也是这个过程中呢，咱用的是阿贾克斯这个操作。

这各位应该很清晰啊，咱之前都是这么做到的，当然各位要明确啊，这阿贾克斯是什么意思？咱应该在之前学到学到过阿贾克斯是不是叫异步请求啊，就是他说的通俗点啊，什么叫异步请求呢？比如我现在他可以刷新我页面的某一部分，局部刷新，然后得到数据做个显示，这个叫异步请求，通过阿贾克斯做到，所以阿贾克斯呢，有它本质上的优点，但是呢，阿贾克斯也是有它一个缺点的。它的缺点是什么呢？给大家要强调啊，这属于前端重知识，各位也给咱做个了解，咱看个词，不知各位是否听过啊这个词。就是它这词叫做SEO。

那我来给大家说一下啊，就是我们现在啊，如果说你用这种启用方式，它虽然说功能能做到，但是它有一个缺点是什么呢。写到这里，它的缺点就是不利于咱们那个网站进行这个叫SEO，这是一个缺点，那什么叫SEO，给大家解释一下啊，其实SEO呢这个东西啊，属于一个叫那个网络营销中这么一个术语啊，这个各位了解一下，我就说一个最简单的一个说明什么叫SEO，但是你要真正学SEO，里边可能有更复杂一些流程啊，咱说的最简单的。那什么叫Su呢？给大家解释一下啊，比如说我现在啊，我就打开这个网址，就是咱们一直用的这个百度。我打开啊。百度。是3W点百度点com把这个打开，假如现在啊，我在这个百度里边，我输入这么一个词，比如输入一个叫Java，然后咱有回车，你注意当我输入Java之后，在百度里边是不是显示和Java相关的信息哦。

但是大家注意啊，这里边显示的信息是不是有它的先后顺序啊，比如第一个显示，第二个显示，第三个显示，会显示很多，但是大家要明确啊，咱们换个角度考虑问题，因为咱们这个在线教育网站要做完之后，最终是不是要给别人去用啊，那别人怎么知道我这网站一个很主要的途径，他通过百度搜索，比如搜索一个在线教育网站，这里边是不是能看到，但是大家要注意啊，咱们就是大家考虑我们的实际，我们一般看里边搜索内容，咱是不是一般习惯看前几页的数据啊。很少有人看最后几页的数据吧，这种几率不大，一般咱都看第一页，第二页，第三页，如果没有内容，那咱可能换个词再搜索，一般都这么做到的，但是你要明确啊，咱们看前页的数据，它后几页的数据一定比前面数据要不好。

是不是肯定是不一定的，后面数据可能比以前数据更好，但是它前面它没有显示，它为什么没有显示。各位要知道啊，首先希望大家明确这个概念啊，第一个呢，咱不考虑那种就是花钱的情况，因为百度中啊有个东西这个东西。它叫百度竞价，也就是说啊，你只要花钱，那你这个排名永远在前面，其实一般来讲啊，排名在第一个那个，那个搜索那个信息绝对是花了很多钱，要不然他可能在第一个啊，咱就不看了，不给他做广告了啊，而后面这些肯定他可能做一些什么优化，做什么处理这个啊，咱们肯定让他排名靠前，那SEO是什么意思呢？说的简单点啊，但实际中肯定比我这更复杂，咱说一个最简单流程。就是现在，比如说你在这个搜索栏中输入一个Java，输入之后怎么做到呢？它会到你的网站中去检索，看网站中有多少个词跟Java相匹配，如果说你匹配东西很多，那他排名就靠前，假如你匹配的Java这个关键字它比较少，排名就靠后。比如说同样两网站，一个A网站，一个B网站，假如说A网站中跟Java关键字匹配的词有100个，B网站有十个，那A网站排名肯定靠前，这叫Su啊，就是让你的搜索排名靠前啊。当然它里边有各种那种策略，咱说一个最基本的概念。

这位要明确啊，Su，而咱们一个网站肯定希望他排名越靠前是不是越好，我不花钱排第一个才好，肯定需要这样，所以现在用阿贾克斯有这问题了，因为他叫异步操作，也就是说啊，你在打开网站这些数据可能还没有，但是这个时候那个搜索引擎已经把那数据给你搜索完了，他发现没有这个东西，然后这个时候可能你数据才有，这时候就无形中让你这个搜索的匹配度给它就降低了，所以阿贾克斯有这么一个缺点，它就不利于咱们的SEO，因为它是异步加载，就是你有页面之后再去请求才有数据，那这个时候你搜索引擎可能就检索不到你关键字的匹配，无形中造成你的匹配度就降低了，就不利于我们的啊，这是它本身一个特点啊。

你把这个做个了解啊，不算什么重点，但你要知道这个概念，而我们现在呢，用这技术叫什么纳斯，其实纳斯呢，无形中把这问题就得到了很好的解决，纳斯叫什么？注意这个词啊，它叫做服务端渲染技术，比如说这个过程中的，咱们现在这一些过程都是在服务端做到的，而客户端只做一次显示，他不做其处理，这些过程通过服务端来做到，那他具体怎么做到的，给大家啊，我来画一张图，咱们做个了解啊，知道这个技术它的这么一个特点。

那我来画一下啊，这是原始方式，然后往下把这个图咱给它稍微改进一下啊。这么来画？就现在啊，就是同样左边还是咱们的客户端，然后右边是咱那个服务端。而现在呢，比如说用到我们这个NAS这种方式，那怎么做到呢？比如现在啊，我们这里边它的做法就是客户端肯定他要显示数据，但是他一显示数据的过程中，肯定在我们服务端有它数据，而服务端数据要干什么的强调啊，比如说这是我们那个真正那个服务器，比如我们是Tom k那个服务器。假如说里边是什么800或者801这个端口里边有我们查数据库的逻辑，然后这个过程中，它过程你可以理解为咱们之前发送请求过程都是在务端做到的，指服务端中呢，除了我们的客户端和to派D之外，它还多了一个东西。

这东西是什么呢？咱之前提过这个东西啊。就是它叫做node JS，也就是说通过node JS去请求你这个com k，然后得到数据，得到数据之后在node JS中把你数据做各种封装，然后封装之后把数据给他就一次性返回到咱的客户端中，当我客户端一进行加载，就是浏览器加载，它就把数据得到在里边显示，这过程啊，就是咱们表面上看到是同步的，但是其实它本质上做这个请求，只是请求不是通过客户端做到，客户端只是做到一次性显示，而过程通过服务端实现，就是通过一个叫NOEJS来替代我们之前这个流程，但是它是在服务端做到的啊，这个叫服务端渲染技术，通过服务端把数据一次性给你返回，而不需要再做什么异步加载。

这个啊，是里边的这么一个过程，各位给的知道一下啊，而not j呢，是咱之前说过的这么一个东西，你可以理解为这na就是对note JS里边的一些封装，那就是note JS本身的这么一个框架。里边啊，就是这么一个过程啊，写一下就是N。就是node j框架，所以咱们现在用的就是na搭建咱们的环境，而na就是在我这服务端的内部做到这么一个请求，然后把数据给他返回，它就可以很好的解决我们说这个SEO的这个问题啊，这称为服务端的渲染技术。我再重复一遍啊，各位可以给他做个了解啊，它的过程就是如果说你用普通的阿贾克的方式是效果数据都没有问题，但是过程中呢，就是不利于咱们的SEO，因为你这个搜索引擎排名靠前，他要到你网页中去检索关键字，如果你的关键字义务请求肯定它会就是再去发请求，有数据，它会降低你的匹配度。

但是咱用这种方式把这过程都在服务端做到。而通过服务端一次性把数据返回，直接我一打开浏览器，那就由所有数据只是过程。通过服务端做到在我浏览器中只做显示，它不做加处理，而这个过程中呢，我们要用到一个东西叫note j，咱现在要讲的叫na，就是note j一个框架，它就在服务端做技术的渲染，然后把数据一次性返回到浏览技术，这个就叫服务端的渲染技术。啊，大家对这个做个了解啊，这步要求重点掌握，但你知道有这么一个词，就是咱们你就各位就记住咱们现在搭建项目的前台环境，用到就是这个NAS这么一个框架，用它来搭建，而NAS就是一个服务端的渲染技术。

这个啊，我们做了一个简单介绍，大家对它有一个基本的认识就可以了。我们做了一个说明啊。然后这个说完之后啊，咱下面重点啊，咱就把这环境搭建一下啊，就重点咱要搭建环境。然后这个环境怎么搭建，跟咱之前搭建后台的过程是差不多的，那给大家我来说一下啊，咱怎么做。我想这位置啊，首先第一步就是各位啊，到我这个就是给大家提供到资料里边，找到NAS的这个框架的那个压缩文件，把这个先找到，这是里边的第一步，那我来找一下啊，找到我这个给大家提供的资料里边，咱找到资料，在资料中有一个叫前端相关资源里边，大家看有一个叫什么。N，而na中的这个压缩文件给各位应该共享到了，咱们现在用的就这个。

你找到这个。压缩文件啊，就是它。把这个给大家截过来啊，然后找到之后怎么做呢？咱就把这个压缩文件做个解压，解压之后放到你那个工作区中就可以了啊，这是第二步。写一下啊，我们就是解压这个文件，然后把这个内容给它，直接就放到我们的工作区里面去，那怎么放，我来说一下啊，咱说细节，这是我解压之后的这么一个结构，然后解压之后呢，里边你不是说把这个直接复制过去，这不对啊，在它里边有个叫看里。他们这里边的这个内容，咱给他直接复制到你的工作区中，但是你在工作区中需要给他建这么一个，就是项目名称，然后把这个做复制啊。这是它里边的第二部分。这个需要各位给他就复制一下啊，有这么一个结构，所以咱第二步就是做这个事情。

然后做完之后呢，咱在里边来到这个位置中啊，那怎么做呢？按照咱之前说到的，还是把这个用终端打开，然后有一个命令，这个命令叫NPM。因死斗用它。这命令不知各位是否记得啊，我在里边写一下啊，第三步。给大家写到下边啊。就是这个位置啊。第三步我们要做的事情就是使用一个命令，叫这个命令n PM in install，然后咱做操作，这命令要各位给他记住啊，这命令是干什么的呢？是不是根据你的配置文件去下载那个相关的依赖，就用它把依赖下载下来啊，这是第三步，然后这个依赖下载之后，我这里边已经下载过了啊，并且我在今天给大家的源码中把人下载好依赖东西也听出来了。

然后下载之后，最后咱就做个启动，启动方式跟之前是一模一样的，还是这个启动方式，Npm ru DV，用这个命令，我们最终把项目就请起来。这是它里边的第四步。写到这位置啊，第四步我们就是启动这个项目用的命令npm ru DV，这样的话，咱这个环境就可以打印出来啊，就是这么一个基本过程，就是第一步找到压缩文件，第二步解夹复制到你工作区中，然后你创一个文件夹，把里面复制过来，注意要复制这个汤里面内容，然后都做到之后，第三步用命令下载依赖最后一步。启动项目npm ru DV，把这个做到啊。这个大家知道啊，然后启用之后呢，这个项目就可以了，做到了，但是我这里边啊，就是在今天的这个源码里边给大家提供了这么一个，就是下载好依赖这个东西啊，这是我提供好的，所以各位你把我的解压直接用就可以了，但是还是我之前说到的啊，比如说你是苹果电脑，那我这肯定不能用，按照我的过程重新下载，或者说你的系统可能有的时候也不能用，你用我这个方式重新下载，但是大部分同学应该可以用到啊，你就用我这个，如果不能用，按照过程下载一下。

我写一下啊，就是我提供好了下载依赖的那个文件啊。下载依赖的这么一个项目，各位直接使用。就可以了。这个啊是咱们提到的啊，然后把这个给大家已交图上啊，这是我提供的，在源码中已经提出来了啊，这是关于我们做这个基本环境介绍啊。