day20【项目总结】/07-尚硅谷-谷粒学院-总结项目技术点（前端技术）

就是下面来总结，咱们就是这么写啊。总结我们在线教育项目中所涉及到这些技术点，也就是说我们项目中用了哪些技术，给各位来做一个教育总结，那我在里边来说一下啊，首先第一句话希望各位记住啊，因为咱们现在的在线教育项目所采用的一种方式叫做前后端。分离开发，这是我们项目中一种方式，就是我们写后端接口，然后写前端页面，通过前端调接口做这个过程，咱做的是前后端奋力开发，包括之前也是这么做的，就是后端我们写个接口，然后前端写这个页面，页面中调接口，得到数据在中显示，完成它的功能啊，就是前后端分离开发。这各位给他记住啊，这是我们项目中采用的一种开发方式，叫前后端分离，这是一点啊，然后在里边呢，先给大家总结咱项目中那个前端技术，然后再总结后端，因为后端技术比较多啊，咱就引来做。

然后写一下啊，就是项目中所使用到这个前端的技术。那前端技术有哪些呢？具体列一下啊，应该说咱用了很多的前端技术啊，里边有这么多，我写一下啊，首先最基本的技术，比如咱用到这个。Voe啊，这是最基本的，而在voe中咱主要用到什么呢？咱随便找个页面，咱来看一下啊，您用到很多，随便找个页面看里边我们用了什么。比如说我就找。这么一个页面啊。然后咱们看到啊，就是在vuee中呢，其实咱主要用到什么呢？主要用到里边的就是它那个基本的一些写法，包括它一些相关的指令啊，比如什么VG if VG for等等啊，主要就是这些东西啊，那我写一下，就wee中主要用到就它那些基本的语法。

包括它一些相关的指令啊，这是我们当时特别用到的，然后语法就不说了啊，就是咱们最基本这些，咱就看下指令，那在voe的指令应该有很多，我这里边把一些比较常见的给大家列出来啊，希望各位都要记住啊，我就列一下第一个这个东西。V杠，Band。是不是那个单向绑定啊，它的简写肯定就是写一个冒号，还有一个叫V-model，是不是双向绑定啊，比如说我们现在做那个条件查询过程中，咱们用到这个叫V-model啊，就是你这里面有数据，然后那个声明那个变量中也有数据，双向绑定V-model啊，也是一个很常见的包冒号，就是V杠半。然后除了这个之外，还有一个指令也很常见，叫V-if，咱就做一个判断，还有一个叫V-for，就做那个循环判断，循环的这个操作啊，主要是有这些指令有很多，另外咱还用一个指令，虽然不是特别常用，但咱们当时也演示过这个指令。

微杠。而且买楼。这是什么？不是，各位是不是有印象啊，给大家再说一下啊，比如说我们当时啊，做那个课程的时候，课程的描述，描述信息是不是有样式候，里边是不是带很多的HTL标签呀，那我现在如果你不用指令，那你标签会原样输出，用这个V-HTL之后会要标签给做个翻译啊，就把标签内容做个显示，这个叫V-NTL，这是里边几个比较常见指令啊，当然还有更多指这几个是比较常见的。给各位啊，在里边列出来，这是咱们当时说的。Voe中的这个基本部分。然后在voe中呢，除了基本语法，常见指令之外，还有一个东西也是咱们朋友用过的，这个东西叫做生命。周期。这部分啊，然后生命周期中有什么呢？主要各位记住啊，生命周期中里个里边几个比较常用的方法可以了，因为咱们在生命周期中，当然咱们讲的时候介绍到很多方法，而用的比较多的主要就是两个方法。

然后写一下啊，第一个方法，这个方法叫create的方法。还有一个方法叫蒙岛。主要有这么两个方法，那两个方法什么意思，给大家都写一下啊create，咱应该之前都在一直在用这个方法，咱随便找个页面应该基本上都有这个方法。来找到啊，可是这个这个方法什么意思呢？它就表示啊，在你的这个页面渲染之前执行。啊，页面渲染之前。执行，还有一个叫wanted，它表示在页面渲染之后执行，这是两个比较常见方法，Created wanted created用的最多，咱之前一直在用，就是这里边一般是调方法嘛，在页面渲染之前有数据，然后页面中做过显示，所以这是voe中的这个基本部分，包括它的基本语法，包括常见的指令，还有生命周期啊。另外里边就咱经常用到那个ES6的这种规范写法啊，就是这个VE的部分。

啊，这是第一个啊，各位给到知道是咱们用的计算技术，也就是说比如以后在面试中，别人问你啊，说你们前端你们用的什么框架，那咱用的就是vuee啊，用vuee完成里面这个操作啊，咱在项目中也一直在用，然后在里边我们用的是那个叫ES6这个写法，我也写一下啊ES6的这种。规范。都是用E6，比如说箭头函数等等啊，这些都是ES6的这种规范。这是咱们的第一个啊，然后除了这个之外，咱在前端中还用了很多，那我来说第二个，第二个呢，这代码不需要写，但是咱确实在用到这个东西叫UI。啊，Element ment element UI，咱用到了这个组件，而UI是什么东西呢？给大家强调啊，就是咱们做这种页面的效果，用的是不是都是UI，比如说咱找这个绿色页面，各位看到啊，咱做那个列表功能，包括表单部分用的是不是都是MUI。

因为他会帮我们把里边的样式都帮我们生出来。所以用它会特别方便。这是咱们用的第二个啊，I这么一个组件。然后除了它之外，在前端中等咱还用到一个东西，就这东西一直在用啊，是一个环境。我下第三个这个东西叫做no的改。这个位给他知道啊，Notes是个什么东西呢？就是这个东西要说的话很复杂，咱理解为它能干什么就可以了，也可以理解为note JS是一个Java，此刻有一个。运行环境就是咱们不需要浏览器可以直接运行你的JS代码，另外它能够模拟出你服务器那个效果，就是它不需要tompad也能做这个IP逗号进行访问，这个叫note j啊，是咱当时说到的，而我们现在这个前端这个代码都是在note j中运行，就好比说我们的照号代码都在GK环境下对运行啊，这是note j，这是咱们当时特别说过的，这个给他记住啊。

然后除了他之外，在前端中来涉及到另外几个技术，继续总结啊，我们看第四个，就第一个vuee。第二个MUY，第三个都S，然后咱看第四个，然后第四个有什么呢？注意啊，咱当时讲前端的时候，应该也学了很多的这个东西，B里边的很多东西呢，虽然咱后面没有直接用到，但是它东西也都很重要啊，那我们继续来看啊，首先下面一个就咱们后面也用到。这个东西叫NPM。然后写一下啊NPM这是个什么呢？NPM列为是一个包儿管理工具，它就类似于咱们那个微稳。

因为大家知道ma呢能管理炸包依赖，而NPM是管理你的这个GS依赖，就是它通过联网能下载里边一些新闻依赖啊，这叫NPM，而在NPM中，大家主要掌握NPM中一些比较常见的命令，咱之前一直在用啊，那我把命令给大家写一下啊，首先第一个命令。这个命令叫npinit。这是什么？是不是一个初始化的命令，然后还有一个命令，后面咱再用的很多啊，叫NPM。In此的，比如加上你那个依赖的名称，它是不是能联网去下载依赖这个啊，是咱们说的NPM，是一个包管理工具，就是它类似于我们这个微问，它能够下载你的Java依赖啊，这个叫NPM，是咱当时特别用到的啊，和后面一直在用，这是第四个。

然后除了NPM之外，咱往下总结，就咱后面还讲到了这么一个技术叫bubble bubble呢，虽然咱在项目中没有直接去用，但是其实我们后来做那个前端，咱是用了一个框架里边，其实他帮我们自带这个功能，本身也用到了bble啊，所以这各位必须要给他知道，然后写下这个buble。B是个什么东西呢？你理解为啊，它是一个叫转码器。啊，转码器就是它可以把我们的ES6的代码。给它转换成ES5的这个代码啊，主要是一个转码器的应用，当那转码器特别强调啊，因为咱之前也演示过，咱们写ES6代码在某些浏览器中它不能用，而用ES5它就没有这个浏览器接容器问题，所以咱们一般在开发中都这么来做的，写ES6代码，然后把它转成ES5去执行啊，只是咱们当时用这框架，其实他帮我们做这个步骤，但是如果你们用这个框架，你自己需要把E6变成ES5，然后去执行，要不然可能浏览器中会有这个问题。

啊，这是咱说的buble，各位给他知道啊，然后除了Bible之外，咱之间还说一个质点，就是这个叫前端的。模块化。所以当时我们应该是重点讲过啊，那模块化什么意思呢。各位注意啊，咱们写了这么多的切换代码，我觉得这个概念各位应该有这种思路啊，什么叫模块化呀？就是你看我们当时的写法啊，咱在API中是不是定义的这个JS文件，然后我在页面中是不是就引入这JS文件，引入之后调里面的方法，是不是做功能，这就叫模块化，就你通过一个页面或者一个JS去引入另一个JS，调另一个JS中的方法，这过程就叫模块化，咱之前也是这么做的，API中定义你的方法，在页面中引入，然后就会调用，这个就叫模块化。啊，所以各位啊，把这个给他知道啊，什么叫模块化，就是说的简单点啊，咱们通过一个页面，或者说一个JS文件去调用另外一个JS文件里边那个方法，这过程就叫做模块化，也就是说咱做前端的时候，也能做成我们后端的一个效果，因为后端中的是你肋肋之间调用，前端是GS之间的调用。

啊，这是我们说到的啊，然后在模块化中，各位要掌握就是它那个ES6的写法，包括S5，但是咱们当时写的应该都是S6，就是import from这种结构。啊，这个啊，是咱们当时特别说到的前端模块化。这是我们提到的啊，然后在咱们当时讲前端文化中，我们还遇到过一个问题。或各位是否有印象啊，那我们来看一下啊，但是各位也回顾一下啊，当时我应该特别说过，这还演示出来过啊，就里边有一个注意的一个红色的地方。

这句话。那来说一下什么意思啊，比如说现在呢，如果说啊，你用ES6的写法写模块化，那他在我们的note宅子中不能直接执行，你需要给它转成ES5才可以做到啊，这是它里面这个特点啊，这各位记住只说咱用那个框架，它帮咱做到，但是本身有这问题。这问题我再重复一遍啊，ES6的文化的写法在我们的node JS中不能直接运行，你需要用B变译成ES5，然后才能执行，这是咱说的。模块化啊，是咱们当时提到的啊，这些都是前端技术，然后除了这个之外，咱还讲这个叫web派啊，这就不写了，因为这个咱们后面没有直接用到它，就是做一个打包，把你的多个文件打成一个文件外派啊，大家知道就可以了。然后这个都说完之后，咱们就是在我们项目中呢，我们用的是框架做到的。那我写一下啊，这个位置首先第一个咱们项目这个后台系统使用的是这么一个前端框架，它叫做vuee。

Mid里用的它，而我们这个就是前台系统用的是框架，叫那个na。使用的这个叫na啊，这是我们用的这两个框架啊，就是后台系统用的是willmin to，前台系统用的是这个叫na。这个位知道啊，而咱们具体说一下，就是咱们用这个weein to，它是基于两个基数做到的，一个叫wee。还有一个就是我们用那个element。U啊，用力做到的，而这个na它本身就是基于voe来做的一个封装啊。这是咱们当时一直在用，后台系统用这个view的mean里，前台系统用这个叫na，包括咱们9528端口用的是view的mean to里3000端口用的是这个纳，把这个我们做到了啊，咱用这个。

项目这么一个框架，比如说以后别人问到你，你可以跟别人说，我们这个前台把我们的前端中用的都是框架做的，咱用的VI的mean，包括NAS，把这个都做一个实现。这个啊，就就是关于我们前端中的一些技术，然后这里边还有几点啊，咱再继续来说，那咱当时说过啊，那一个词，还有这个词。叫做。服务端渲染技术啊，因为咱们现在把这过程都在服务端做到，他就为了节约我们那个Su那个操作，这各位也给他了解一下啊，就关于里边的这些东西啊，前端部分，然后这里边各位注意啊，咱们就是到现在为止写了这么多的前端代码，大家会发现前端代码写法应该说都差不多，都是这个结构，就我们有一个引入，然后在date中定义变量初始值，在这个method中写方法。

在你的create里边是调方法，帮你写事件，下面也是做这个相关的操作。主要就是这些东西啊呃，然后VE中啊，刚才他还少写了一个，就咱说那个事件啊。是绑定事件。咱用那个叫做。V杠那个on啊，加上你的那个事件。或者说我们写个艾特，加上你的事件名字啊，都是一样的，这各位给他也要知道啊。所以这些都是前中啊，代码都差不多，主要就是这些结构啊，然后写代码中呢，当时咱写那个前台系统中还写了另外一种写法，其实你这么写可以，但是人家当时还讲这种写法。咱也看一下啊，我说各位是否有印象啊，当时咱曾经这么做过。这个写法。这是不是叫异步调用，就用这个cameramos，然后里边啊，取到它那个I值，通过ID值，然后做查询，这也是一种写法，或者你用我们最原生这个写法都可以做到啊，所以这些都是关于我们前端中的一些相关这个技术点啊，包括voei u log GS n PM b模块化，包括咱们的两框架啊，咱后面在项目中应该都用到了。

这个啊各位知道，然后除了这个之外，就是前段中还有一个，这跟我们这些啊，其实无没有太大关系，但是咱后面一直也在用。就是他。叫做一叉，一叉S是什么呢？就是一个叫图表工具。这图表工具咱当时做用它做了我们那个统计分析模块那个折线图的显示，而ears各位知道啊，E叉呢，最开始是百度的这么一个图表工具，后来呢，他就百度把它捐给了阿帕奇，优帕奇做这个维护，包括做这个各种的分发，所以咱现在用的E叉所我们的图表工具使用啊，这些都属于咱们的前端中的这些技术。

所以各位把这些都在掌握，但项目中确实都在用到。也就是说啊，比如说以后各位在面试中，或者说你在写简历的时候，虽然说咱的重点啊，肯定以后你不是去找前端工程师，咱重点肯定是找后端工程师，但前端知识你在你面试中或者简历中给他也来一个体现，你可以写我这里边我项目中用到这些东西，这些东西我基本上也都会用，也都熟练，或者面试中你可以提出来。这个啊，也算是我们一个算是一个亮点吧，因为毕竟在实际公司中，公司他要求我们这个员工是什么样一种素质了。说的通俗点，就你什么都会最好，我会前端，会后端，会运维啊，能当美工，能当项目经理，能当什么保安，能做什么秘书都能干，能开车，这公司最欢迎，所以这里边啊，虽然咱重点不是前端，但是各位把他也做个体现，但是你在面试中，因为咱们不是面试前端嘛，面试中别人也会问到你啊，说你前端熟悉吗？可能别人问这句话比会熟悉，别人问你熟悉什么技术，比如我熟悉voe，熟悉什么IUI，熟悉什么Java，熟悉query，那别人可能不会往深了问，往深了问的话，问的也就是我们课上学这些，如果再问深，你说你不会也正常，因为咱们毕竟不是专业前问。

但是这些各位要掌握，或者说按照我之前教大家这种方式，别人问你所以能做全站吗？大家怎么说，别人我教过各位啊，这怎么说？你不要回答他我能做和不能做，你说你能和不能都有问题，那你怎么说？你给他举具体的例子，让他去判定那么做，比如你说我们这项目中做的是前后端分力开发，而我们项目代码中80%代码前端都是由我来写的，能不能做由他去判定，因为咱们项目就是这么做的，咱们大部分都是我们进于写的，只是后面那个权权管理JS是咱们复制的，其他的都是咱们从零去写出来的啊，所以这个关于前端。在实际的开发中的前端，我们虽然作为后端言有时候也会写到，虽然不会写的特别的深，但是我们上课中也是这些，各位可能都会写到啊，所以大家把这个再好好去看一看，帮你在面试中把前端只要有个体现。

但是记住一个原则啊，你在写简历或者你在面试的时候，如果你写出前端这个技术，至少你能把这技术能说出点东西来，不要说你写一个这个NPM，别人问你NPM是什么东西，你告面试官我不知道。他怎么用的，你说我没用过，那你为什么要写啊？这是一个原则，写上东西必须要能给他说出点东西来，比如NPM，别人问你用过吗，用过怎么用的，你给他说出来，他怎么去使用，包括什么地方用的，把这场景都能说出来，咱在项目中其实咱们都应该都用过。这个啊是咱们前端技术总结，主要这么多啊，当然还有很多细节我在课上都讲到了，我这里边给大家是做一个总体一个说明。关于前端。