4.尚硅谷全套JAVA教程—实战项目（71.89GB）/尚硅谷-云尚办公系统/视频/17-尚硅谷-云尚办公系统-前端基础知识-vscode安装和使用.mp4原创

各位同学大家好，在前面咱们已经完成了角色管理的监管接口，那下面呢，我们继续往下进行开发，因为我们的项目采用的是前后端分离开发，目前接口已经完成了，所以下面我们开始写前端，在前端里边调用接口，最终反应数据，实现我们的具体功能。虽然咱们的重点是放到后端，但是第一个模块，也就是角色管理模块的前端，我会带着各位同学从零去，然后后面的重点都放到后端，前端咱直接整合可以了，所以下面咱们开始写前端部分。在前端里边呢，咱们首先先学习前端中的基础知识，为了后面的开发做准备。前端里边咱们基础知识中主要学习以下一些内容，那咱们来快速看一下啊。首先第一个给大家介绍什么是前端开发，然后第二部分咱们来装一个前端的软件code，第三部分讲一个技术，就是ES，第四部分讲的基础包括note j SN PM以及前端的模块化开发。

当然这里边还有一些知识，各位可以关注上回谷古力学案，或者B站中关于上回谷Java web中讲中的知识，我们这里边只讲些最少的必要知识，为了后面开发前端做准备，那下面呢，我们来具体看一下这个内容。首先我们看第一部分，什么是前端开发，大家看我这张图里边啊，咱们之前写的是不是后端，我们说到后端咱们做什么，是不是开发接口，实现咱们的具体功能，比如说你做一个添加，做一个修改，做一个查询等等，后端我们就是操作数据库，实现具体内容，而现在呢，咱要做前端，前端是做什么的？大家想一下前端干什么？

有同学可能想前端嘛，那就是页面展现，页面展现只是一部分，那我们具体做什么给大家写一下啊，我们前端咱们是不是要调用后端接口，这个调用呢？我们目前用的是阿贾克斯技术进行调用，然后由接口返回数据，前端得到接口返回的这些数据，把数据进行显示，这就是一个基本过程，前端调接口，接口返应数据，最终实现我们的具体内容。所以大家就是这个过程，而在我们实际开发中，咱们分成有前端工程师和后端工程师，在国内来讲呢，一般来讲啊，有前端后端中间层，也是咱说的调用过程，可能由前端做的，可能也有后端做的，在不同国家中有不同的应用场景啊，大家感兴趣看一下这个历史，比如说在美国它是怎么做的，在这个加拿大，日本等等是怎么做的，大家知道什么叫前端开发，就是前端到底做什么事情。

然后这个之后我们继续来看啊，咱们开发前端呢，其实我们可以在idea中进行，但是咱们前端讲一个新的开发工具进行操作，这个工具简称，那我们看一下啊，code.com，我把这个打开，就是打开之后呢，你在官网可以下载它最新的软件，你点那个download Windows一点。然后它会弹出一个框，我们在里边给进行下载，我这里已经下载过了，然后下载之后你把这软件在你的电脑中按照下一步下一步进行安装就可以了，这个安装没有什么特别的地方，你只要下一步下一步就可以了。所以这是一个基本的软件，然后软件装完之后，它有一个图标，就这个图标，咱把这图标双击打开，就打开我们这个code的软件，我这里边已经装过了，各位按照下载下一步，下一步安装可以了，现在我把它打开，然后咱们介绍一下啊，这个软件该怎么进行使用，我这里强调啊，因为我这里边做了很多的配置，默认应该不是这样子，首先第一个它的颜色，包括这应该都是英文，我这里做了配置，所以咱们在装的时候需要设置，或者说安装一些相关的插件，让它使用更加方便，那怎么做，大家要看课件中啊，首先第一部分啊，我在课件中啊，这个图里边写下啊。

这位置首先第一个咱们安装一个Vs code，你到他的官网上下载，然后按照它那个下一步进行安装就可以了，这个没有什么特别的地方，各位应该都能装上。

然后这个之后，我们的第二部分在code中需要安装一些插件，为了它使用更加方便，你也可以只装完之后使用会更加简单，更加方便。第二部分。在Vs code里边安装插件。这里强调啊，这个插件有很多很多，但是不建议各位装太多，我们这里边为了满足咱们这个项目使用，咱们只需要装这么四个就可以了，那怎么装给大家说明各位点这位置叫扩展。然后在里边呢，有它新闻插件，我这里是装了四个，但是它实际中有很多很多这四个满足咱们项目的基本使用，我把这个啊给大家截个图。这个给他拿过来。然后在里边安装这个插件。也就是说，你现在点击我们的。这个部分。

然后咱们这个位置有四个插件，然后大家看一下啊，第一个插件。你看是什么？很明确嘛，就是让他做到中文简体显示，就这里边显示都是中文，然后里面有第二个插件，看这个叫。Server是一个服务嘛，用它你可以理解为可以直接通过这种服务器的IP号方式运行你的网页啊，就类似于M，它是一个服务器。然后第三个和第四个，这两个是用于我们进行we部开发中，它有一些更友好的提示，或者开发中一些工具类，一些帮助类等等，更加的方便。这是我们安装了四个插件，那怎么装很简单啊，首先你电脑能联网，然后你在这里边直接搜索，比如说现在啊，我搜索一个。叫Chinese。是中文简体，你点然后进行安装就可以了，括比如说我们搜索一个这个server。

然后把它装，包括在搜索，就是其他的部分啊，咱们依次可以进行安装，就是VE相关的或者相关的，所以用它直接搜索直接安装就可以了，这里边都有相关的这个提示，只要能联网就可以了。所以这是我们的第二部分安装插件，这里边推荐各位装这四个就足够了啊，当然可以装更多这四个满足我们的需求，然后这个之后我们到第三步。写一下啊，大家注意啊，我们在这个code中要进行开发，你首先必须做件事情，什么事情呢？要创建一个叫工作区。这个强调啊，工作区什么意思呢？你可以这么理解，咱们前端开发其实并不是简单就写个页面这么简单，它有一个标准的这个创建的一个规范，那你需要创建工作区，然后在里边做的开发，因为很多功能如果没有工作区，它根本就做不到，所以咱们第三步需要建个工作区，然后在工作区里边进行开发，这是第三步，那怎么创建，给大家演示一下啊，我就不读这课件了，咱这些演示一下。

首先第一个打开code，在这里边呢，本身并没有这个选项，咱需要手动创建，那我说下怎么做啊，我写到这个里边啊。首先第一个咱们创建一个空的文件夹，这是一部分，然后第二部分使用code。打开这个文件夹。就把它打开，我先写，然后演示啊空文件夹，然后打开之后第三步把这文件夹就给它另存为工作区。这是它一个基本的步骤，那下面给各位来操作一下啊，首先第一步，我现在呢，在我的D盘里边已经建了这么一个文件，然后在里边呢，再个的文件夹，我就叫谷OA。

大家看啊，这是一个空件夹，里边什么都没有，然后这个之后code把它打开，咱们点文件，然后打开文件夹，找到刚才这个叫硅谷杠OA选择。各位看到是不是打开了，然后打开之后呢，把它另存为工作区，怎么来做呢？你看啊点文件，大家看到这个将工作区另存为我现在一点注意别点错啊，然后选择你刚才文件夹给你工作区起个名字，这名字随便起，但是后缀名，比如说这个code，现在点保存。大家再来看这里边是不是叫工作区，包括你看啊，在刚才的空件夹中多了一个文件，表示它是一个工作区，这是我们如何进行创建，给各位自己来操作一遍啊，并不难，自己操作一遍应该就能知道怎么来创建。

第三步我们做这事情，然后第四步呢，我们简单做个测试，比如说我现在啊创建一个，然后访问我们做一个测试。那咱们啊，最后来示一下怎么做呢？演示一下啊，首先你在工作区中呢，可以建个文件夹啊，建文件夹，比如现在我做个创建。啊，文件夹或者说你点这个按钮啊，都一样啊，看你的习惯，我就直接点它了，建文件夹，这个文件夹我就叫test的，然后建完文件夹之后，在里边呢，我们新建一个文件，这个文件啊需要你自己手动写它的后缀名，比如叫这个零零啊。是个里写啊快捷键的方式，你写上一个感叹号，这就是感叹号啊，你点。

出来了啊，我再演示一遍啊，感叹号一点它就出来了，这时我们快速生成这个代码，然后在里边我随便写上那种。这边写个啊，H1标签这个V。现在保存，保存之后把它运行怎么运行呢？注意啊，刚才我是不是装了这个插件，用它能直接访问这个插件怎么用，你点右键点这个。Open with这个server就在里边打开，然后你点它会通过浏览器打开，就表系统，然后里打开，当打开的时候呢，这里边可能他用的是你当前系统的默认浏览器，可能跟你当前想浏览器不太一样，所以说或者说有些同学呢，可能浏览器它没有弹出来，这些都没有关系，你怎么做这么来做。

打开你自己习惯浏览器，然后在里面直接输入地址，就是127.0.0.1加上这个叫5500回车。然后大家看是不是到一个页面，然后在里边点文件，再点文件，一样可以访问，用127.0.015500。这个端口进行访问，然后就能访问到你的页面啊，就是没有弹出来无所谓，你直接在浏览器中输入直接访问也是可以的。所以现在啊，咱们就演示了code，它的一个基本的使用过程啊，就这么来做啊，然后除此之外里边还有一些细节问题，比如说我现在啊，我觉得这个颜色比较难看，我想换个颜色，那怎么做，你点这个图标里边有一个叫颜色主题，然后它会列出很多颜色，就是大家看啊。

这些颜色，呃，它默认应该是这个颜色啊，可以根据自己实际改成你自己习惯的颜色，我就改成这个颜色了，另外里边有它的字体大小，你可以改一下，比如说这个字体这么大，你可以改的大点或者改的小点，根据自己实际进行修改。所以咱们到这里啊，就把这个code完成了安装，咱们后面开发管理前端的时候，用这个工具开发，我们在这个项目中完成第一个模块中的前端，后面前端我们直接整合了，重点都放到后端，但是第一个前端也和各位必须能给它写出来，也算是我们练习一下前后端分离开发的过程。所以这个我们先说到这里，关于code的使用。