day06/下午/127-尚硅谷-尚融宝-前端页面的修改

那么为了大家以后更容易上手一点呢，我做了的第一个处理呢，就是禁用了ES的语法检查，它这个前端项目里面呢，有一个语法检查，这个语法检查呢，它其实对于我们啊来说，对我们后端人员来说是个双刃键，就是它确实是很很高级，你写错了之后呢，它都自动给你报错，自动给你改，但是由于这样的一个呃功能吧，有的时候让我们的同学很困扰，就不知道的刚才写完什么了，它就给我改成什么了，然后也不知道我这块哪错了，他就过不去，他就是一堆一直给我放红色的波浪线，然后但是呢，我一看呢，还没什么问题，就是就是过不去，实际上对于我们来说确实是没什么问题，但是基于一些前端的非常严格的要求的话，他可能就是有点问题，但是由于我们的前端的基础知识还不太够，我们还不知道怎么去改，所以这就很头疼，很纠结，那这样的话呢，我就把这个语法院检查给它禁用掉了，禁用掉了之后呢，我们换另外一个啊，换另外一个格式化配置，这个呢比这个呢稍微。

稍微就宽松一些，然后呢，检查的时候呢，稍微就没有那么多条条框框啊，然后呢，对于我们后端同学来说呢，就不会陷入到一个不知道哪错了，不知道改什么，或者是说人家给你检查完了，他都给你改好了，你不知道他刚才做了什么这样的一个混乱当中，所以我们用一个简单的这个呢，也是之前我们安过的一个格式化配置，就是我最开始的时候给大家，呃，让大家下载一个插一个插件。这个插件啊，我让大家下载了这个插件，就是在最开始咱们第一天学前端的时候，下载完插件之后呢，我还让大家就配了一下，哎，等一下啊。黑了一下咱们的这个。黑文件。哎，这篇文件稍等啊。先关上出来。

好在这儿哈，然后接下来呢，打开。这个设置啊。那打开设置之后呢，打开这个啊。打开这个啊，点错了，刚才点这个，然后接下来呢，打开这个配置文件，这个里面呢，这几个选项，其实就是还有包括这个，其实就是关于那个格式化配置的，这个格式化配置是什么呢？我一说大家就想起来了，就是之前我们写代码的时候。比如说我这个代码，我说我的这个代码是无分号的，对吧？啊，然后我说我这个代码是基于这个，呃，是单引号的是不是啊好，然后我一保存诶，它自动就给我转换过来了，所以这个呢，就是那个格式化啊，那个格式化配置的啊这样的一个插件，好，那现在呢，呃，我们的这个代码环境变了，就是原来我们的代码都是简单的GS啊，简单的HTML啊啊简单的这这这样的一些环境，然后现在我们这代码呢，是基于这样的一个NNPM的项目，基于这个NPM的项目的话呢，那它这种项目配那个格式化插件呢，就还得用这个特有的方法，和原来配置的这个呢，就稍微有点不一样了，所以呢，我们要再配置一下啊，然后呢，所以呢，我们用的这个格式化插件呢，就是这个插件，而不是而不是这个插件，好吧，啊，我们把这个插件禁用掉啊，因为这个对我们来说太复杂，我们用这个简单的啊好，那怎么禁用。

后呢？找到view code con.gs。在这个项目下面，我们找到view computer JS，这个就相当于我们前端项目的一个核心配置文件，有点像我们后台的application.email文件似的，这里面有很多核心的配置，这个配置里面呢，其中有一个选项呢，叫做linkt on save，我们直接找到它啊，把它直接禁用掉就行了，怎么禁用呢？就直接让它怎成bos，这样的话我们就不用纠结于它的这个保存了，你会发现这个我设置完了之后，一保存它这个单单引号变双引号，是不是就说明实际上这个格式化工具里面是不是也有自动把我的这个双引号变成单引号的这种功能啊，啊，当然了，现在我们把它禁用掉了已经啊，然后呢，接下来我用什么呢？我用这个。

我们加这个啊，然后呢，这个怎么加呢，这个加起来呢，稍微要多一个步骤，就是我们得先加一个这个啊pretty啊RRC这样的一个文件，但是前面有个点啊，就是根据咱们刚才的那个格式化的一个特殊的配置文件。在这个右键右键新建文件就可以了，然后别忘了前面那个点，然后呢，我们把里面的这个内容呢，给它粘过来，好粘过来，粘过来之后呢，你会发现这个也是针对就是没有分号，然后单引号分格啊，然后这个是HTML当中的空格什么忽略掉啊，是这样的一个配置，然后这样的话呢，我们啊，就你看我回头再保存它是不是又变成单引号了，就说明我现在呢，禁用了这个格式化方案，启用了这个格式化方案，明白吧，切换一下格式化方案啊呃，完全其实如果你是前端同学的话，咱们就没有必要这么做了，因为咱们是后端同学啊，刚才我们被我们禁入掉的那个格式化方案呢，未来我们开发的过程当中会给我们带来很多困扰啊，所以呢，具体什么困扰我在这块也不强调了，因为大家都没见过，是不是啊，所以呢，我我就不不不说了啊，总之呢，就会帮你减少很多困扰啊好了，那我们把它先配置上，配置上之后呢。

接下来呢，我们来修改一下页面的标题啊，就是零零碎碎的地方修改修改啊，顺便呢，熟悉一下整个这个项目的这个页面结构，然后如果不太熟悉的话呢，后明天我们还会具体的去讲，所以呢，刚才呢，我这个把这个呃。

工具关上了是吧，关上了之后你就会发现那个服务就自动停了啊，因为我刚才调这个配置项的时候，把工具关上了一下，关了之后服务停了，服务停了这块你看就访问不到了，所以这种情况呢，你就只需要重新访问就行了，所以在这个地方我们右键。然后NPMD再重新给它运行一下。好，然后接下来呢。我们就呃，把这个你看这页面的标题啊什么的啊，都都给它改一改啊，还包括这个登录页的这些这些内容啊，我们都给它改成我们项目的这个具体的内容，所以呢，那先说一下这个。具体的呃，页面的标题在哪修改页面的标题呢？就它有一个统一的配置的地方啊，是在我们的src这个路径下有一个setting的JS文件。

然后这个里面呢，就有title，这个title是咱们整个页面的标题，所以你会发现咱们这个页面呢，实际上它并没有一个说我这HTML，然后我这个页面的HTML它没有啊，就是对应的HTM的一个具体的页面，它所有的页面都是最后自动生成的，包括这个页面的标题都是自动生成的，那页面的标题在哪配的呢？是在这儿配的。好，我们给大家写一个，比如说上荣榜。上荣宝管理平台啊，然后我们再来看这面，你看这面就变成上荣宝管理平台了，当然我们现在访问的是table宝啊，那它这块就前面有个table，你访问tree的话啊，那它上面就有个tree，就说明正在哪个页当中哈，好，然后接下来呢，我们就嗯再改一些其他的内容，嗯，那就照着笔记改就行了，笔记当中呢，首先第一个就是嗯，禁止e link，第二就是添加这个格式化，第三个流程修改标题，第四个我们来做一个国际化的设置，国际化的设置呢，就是在这个位置呀。

你看它这个插件呀，尤其是日期插件呀，都是英文的是吧，我们得给它改成中文的啊，那这个国际化在哪设置呢？在这个位置。它也有一个默认的配置，在S2C下面有个闷点JS，这个叫启动的入口文件，就类似于这个门点JS，类似于我们Java程序当中那个主类啊，它是一个入口文件，所有的一些，呃，初始的一些设置有很多呢，也在这个里面进行设置的，所以呢，我们找到入口文件。RC下面这个闷点GS，所以现在你其实就看到有几个配置了，view.con.g是一个配置哈，setting.gs也是一个配置，然后闷点GS呢，是一个入口文件，它会做一些初始化的东西啊，好，然后呢，在这个里面呢，我们找到这个位置，这个地方就是它国际化的设置的部分，我们给它改成ZHCN就行了，好改完了之后呢，这面我们再点，你看这个就变成中文的了，看见了吧啊，这日历就变成中文的，当然其他部分的中文它是应编码在页面当中的，到时候我们直接在页面当中写中文就可以了，我们主要改的这个中文呢，主要是这里面的一些啊，有这些国际化功能的插件啊，好，然后接下来呢。

就是第五个部分的内容，第五个部分内容呢，就是改一下下拉菜单啊，比如说这个地方的下拉菜单，我们想给它自定义一下，那这个地方的下拉菜单在哪呢？啊，这个可能对于大家来说，第一次尝试的话就不太好找，那我先告诉大家在哪，后面我再找时间给大家分析一下它的这个页面的结构，整个的这个嵌套的层次是什么样的，所以今天咱们先第一个步骤先找到它啊，我先告诉大家在哪先找到它，然后你先改它，那在哪呢？根据笔记当中的内容就找就行了。src叫布局文件，叫布局文件当中的组件叫导航组件啊，我们找到这个文件。

所以呢，Src，然后呢叫布局文件，布局文件当中的小组件，小组件当中有个叫导航组件，我们找到它，你会发现这里面就有home呀，还有lock out呀，Get up呀，Dogs呀这些东西了。就是这几个是不是我们把它们呢都给它改一改，比如说这个呢，我可以叫主页，当然你你觉得叫home好，那你就不用改哈，就根据个人喜好吧，然后这两个呢，我觉得没有用，你把它删掉好，这个呢，我想给大家退出就可以了，那这样的话，我们这面。就根据我们的修改变成我们自己的了，这样的话，其实我们其实如果要是真正的去做项目的话，你就得去找到相应的位置，一个一个的把需要改造成你自己部分的内容呢，或者说改造成你的项目当中的内容，你就都给他改造过来，那基本上我们的初始化的工作就就做好了哈，然后我们再来看一下还有什么，还有最后就是登陆页了，登陆页在哪？我们照着这个路径去找哈，S RC views log in下面的index，好，S views这里全都是呃，具体的页面了。

然后log in下面有个in，这个就是登录页了。好，这是登录页的完整的内容，我们会发现，当我们真正看到一个页面的时候呢，那并不是一个完整的HTML，它就是一个代码片段，所有的代码片段呢，都会放在一个叫template的节点下，然后所有的内容呢，都会被放在这个template的节点里面，这个有点类似于什么呢？有点类于我们原来的这个去学router的时候。我们看一下页面啊，我们不是说在做路由的时候，路由里面嵌到的页面，我们是用template这个东西定义的，对不对？好，这个里面定义的页面就是初级页面了，很简单，里面的内容就可以写一些简单的也是调整，你要想实现一些复杂内容的话，这一个字符串你根本就没有办法实现，所以怎么办？我们必须得把template作为一个独立的模板文件给它创建出来。

是吧，而且未来这里面我们可能光有HTML是不够的，肯定还会有代码，还会有脚本的，所以呢，那真正的项目当中，我们肯定是不会这样去创建页面的，我们怎么创建，我们就创建time类的模板文件，而time类的模板文件在咱们项目当中在哪呢？在s RC views下面，Views下面所有的都是模板文件，那么log in index.view就是我们的登录页模板，所以你会知道所有的模板文件的扩展名就是点vuee了啊，当你看到点vuee的时候，就知道它是模板文件了。好在temp类的这个节点下面的所有的内容就是我们这个页面的模板了，那这个就相当于我们原来写的什么呀？就相当于我们原来写的这东西了，是不是就扩展了，功能就更强大了，不是写在字符串里了，是写在一个独立的文件里了，明白哈，好，然后接下来呢，下面你看还有还可以写脚本，所以那你这样的话，你这个模板是不是功能就可快。

感性就就非常大了，还可以写，还可以写样式，那你这样的一个页面，那它功能就比较强大了，明白吧，可偏可编程性就更高了，总比这样写一个字符串要好的多啊，所以这个是咱们的模板文件，那这个就是我们登录的模板，好登录的模板呢，我们把这个一些内容吧，给它改一改，比如说就这一块log in风，那我们把它改成什么呢？给它改成后台管理，就是给它改成我们项目的标题吧，比如说我们这个项目的标题叫什么，叫上荣宝管理平台哈，那我们在这地方也叫这个名字，比如说叫上荣宝管理平台，对吧。

好，这是这一块，然后接下来呢，我们还可以改改其他的，你看看还有哪块要改，比如说这登录这块，我就写登录或者写老音都行，那我想改成登录。那你就找到登录那个按钮，这是登录按钮啊，然后这块是冷印，这个你自己找的时候可能效率没有我那么快，没有我找的快，那你就一定要耐心细心啊去找一下，然后接下来呢，再往后这个。这一行没什么大用啊，我们把它删掉就行了，这个div删掉太多了，这个div删掉好。这样我们这个登录页虽然简单，但是还算比较大气，肯定比你自己做的要好看一些是不是啊好，就用它吧，然后接下来呢，我们就登录就行了，所以这块呢，是我们最开始对这个前端项目的一个初始化，那么今天大家做到的啊，就是前端这块，你把这个做完就行啊，后端那块呢，就咱们今天学习的这个基本的项目的基本的这些内容统一结果呀，异常啊日制给他写上就可以了，好吧。