day08/下午/167-尚硅谷-尚融宝-前端路由的配置和页面的创建

好，前端这一块呢，我们首先呢，就看一下需求，需求我们肯定是要创建一个路由了，有个系统设置，有个数据字典，然后呢，在这个数据字典这块呢，我们要创建一个啊组件对吧，这个是相当于我们的数据字典列表页面，然后在这个数据字典列表页面里面呢，我们两个功能，第一就刚才咱们做的导入Excel啊，把这个Excel呢导入进去，导入进去之后呢，这数据不就跑到数据库里面了嘛，然后咱们在这个里面再显示一个数据列表，把数据从数据列表里取出来，展示在页面当中，然后最后呢，我们还可以导出Excel，那这样的话，我们就把导入导出在这个模块当中就都做了，所以这里面其实是三个功能，一个是导入Excel，一个是展示数据列表，一个是导出Excel，当然了这三个功能呢，都在这一个页面当中，那接下来呢，我们就先把这个页面呢给它创建出来，那所以呢，我们先打开我们的前端啊，然后呢，我们找到views。

在这个靠里面，咱们新建一个文件夹，叫做好在这个文件夹里面呢，咱们新建一个页面叫做list.view那么在这个页面里面呢，咱们先把它的基本的结构给它写上。就是这个结构。Template和script。我直接把它复制过来了啊，一个temp类的节点，Time类节点里面有一个有且只有一个根是吧，一般用div，然后呢，一个scriptscript，直接把这模块先导出去，然后未来里面我们要写什么呀，Data呀，嗯，MYS呀，这些内容啊好，我们先把它整体的这个结构呢，先给它定义出来，然后接下来呢，我们把这个路由给它配一下，配路由的话呢，我们就来到这个rootr啊，找到这个index JS，把刚才我们刚刚创建的这个页面呢，作为路由配到这个里面，那这块呢，我们就直接参考这个文档吧，我直接把它粘回来了，复制一下，我们配到哪呢？配到我们的。

刚才这个。新增积分等级的后面。好，那我们这个路由呢，就叫靠。Date list是吧，靠date list啊，这是负路由，这是子路由，所以整个的路由合起来是这个，然后呢，它负极的标题呢叫系统设置，它子集的标题呢叫数据字典啊，然后呢，定位到刚才我们刚刚串建的这个页面组件当中。接下来呢，我们来看页面，这面呢就有个系统设置了，这面呢就有个数据字典了，是不是好，大家想一想，未来你如果要是自己再让你创建其他路由的话，你会不会会呀，这这都一样嘛，是不是啊，只不过就是自己。你要是三个就加三个children对吧，三个children子节点，你要是这边就一个，那么就一个children子节点不就得了吗？啊所以这块是我们的路由配置，好路由配置之后呢，我们就来实现这个数据导入了。

所以在这个页面里面呢，我们要写什么呀，要写这个。要写这个导入按钮啊，要写这个导入按钮好，那这个导入按钮呢，我们用这个东西写啊。我直接就复制过来了，因为前端这个大家最主要就是能理解，不要求大家全都啊自己从零到一的写出来，所以我们直接复制一个导入按钮过来。放在这里面，好，这款呢，是我们的导入按钮。好，这个导入按钮呢，实际上就是我们的element UI里面的这个EL button啊，这个EL button呢，它叫导入Excel啊，所以呢就是它了。

对吧，意思，然后呢，这块有个图标啊，就是这个download的图标，就是这个小的图标啊，然后接下来呢，这个button呢，它是click等于this a，哎，这是什么？这一会再说，但是你能知道的就是这个肯定是一个变量，因为这是个事件，这个事件里面写了一句话，把这个东西设置成true了，所以这种呢是一定是在这定义的，好，你把它定义出来，Di个V字吧，从字面意义上来说，应该是对话方是否显示。好，然后接下来呢，蓝色的按钮，蓝色的小按钮，好，所有的要素我们都分析完了，那这样的话呢，我们就来看一下这个吧，当我们一点这个按钮的时候，啊，Dilo with包就设成处了，当我们没有点这个按钮的时候，Di with包等于false，那这dio with包是什么呢？下面我们会显示一个。

会显示一个dialog。就显示一个diallo，这个diallo什么呢？就是当我一点击导入按钮的时候，会弹出一个文件上传表单，然后呢，我们的那个文件上传表单呢，会放在这个dialo里面啊，就是这个意思，所以我们先弄一个dialo，你先别管文件上传表单长什么样啊，先把dialo写上，Dialogue长什么样呢？Diallo长这个样子，就是我先给大家看一下。嗯，这个element UI吧。稍等啊，我这个机器它每次访问百度都有点慢，不知道什么原因，嗯，然后这样的话呢，在这个地方我们还是输入IUI。好这块呢，快速成型工具啊，把它点开。

点开之后呢，呃，我们在这个地方呢，去看它的组件，好在这个组件里面呢，我们去找到有一个叫做dial的一个组件。Dio谁看到了，你搜一下啊，叫做dialogue好在这呢，然后呢，在这个地方我们点，诶它其实就这么个东西，明白吧，啊然后呢么行，然后这块自定义内容就是表格的lo，就是表单的lo啊我们希望呢，就是打开一个表单的了，但是这个里面呢，只有一个文件上传对话框。好，那么这个怎么去做呢？在这个地方你会看到这个dialogue呢，其实就是这么个东西叫EL dialogue，然后EL dialo呢，它有一个visible的这样的一个属性，这个属性呢，它绑定到了一个dialo visible，诶就是它啊默认情况下呢，这个dialo vis包呢，等于false，那这个dialogue呢就不展示啊，如果这个dialogue with包被你设置成处了，那么这个dialogue呢就展示出来，就是这么简单的一个道理。所以呢，我们把。

这个diallo呢，先给它粘贴过来。这两个到这儿啊，你先给它粘贴过来。好，里面的内容大家可能不太理解，我先把它删掉。好，然后接下来呢，我们来看这个VISA宝这个动态的属性呢，正好呢，就绑定到了这个Di visible啊这个属性这个东当中，所以默认情况下呢，这个visible的意思呢，就是visible就是显示嘛，Viible等于false就不显示，对吧？所以呢，默认情况下呢，这个Di然lo是没有显示啊，当你点击的时候，诶那个VI就true了，VI true呢，它就展示出来了，展示出来之后呢，这个diallo呢，它自己有一个插按钮。

啊，默认情况下呢。这个插按钮呢，我把这个删掉啊好，默认情况下呢，这个插按钮呢。他不工作，你得自己给他注册一个事件，当然方法有很多，那么我在这里面呢，给大家说一个最简单的方案，就是实际上呢，我们的diallo组件给我们提供了一个叫做修饰符的这么一个东西，这个修饰符大家就你就把它记住就行了，因为我们就不去详详细的讲解这个修饰符是怎么来的了，总之你就知道dialogue它的visible这个属性，它里面有个SYNC这个修饰符，这个修饰符加上之后，我们就可以用保存一下，我们这个dialogue就可以自动关闭了，就这么个功能啊，就是其实修饰符就是像一些语法糖似的，它通过简单的方式实现一些本来你自己写要要比较复杂的功能，它就给你提供这么一个修饰符，你一加这东西就好使了，你就这样记忆明白吧，嗯，好，然后所以呢，这个就是当老VI给我们提供的一个语法，它只要加上那一个点SYC，然后这个差就好使啊，所以这块呢。

就是一个比较方便的啊，让我们的diallo能够被点击叉关闭的这么一个方法叫SC。好，那这块呢，就是整个我们dialogue的一个一个实现了，然后dialogue里面呢，咱们就写里面的这个内容了，我先把这个form给它复制进来啊。好，这内容看似挺多哈，我们先不用管它到底是什么，细节是什么，我们先打开看一眼，好打开看一眼呢，就是这么个东西，这块有一个请选择Excel文件，然后这块数据字典导入，然后这块呢，我们点击一个按钮叫上传，然后选择它，点击它，然后A它就上传上去了。

你明白这个意思吧，啊，就上传上去了，好，然后呢，这整个的这个过程呢，我们还得给他做一个优化啊，就是首先第一上传怎么回事，它的细节是什么，第二就是上传完了之后，你得弹出一个提示，对吧，说上传成功或者是批量导入成功，应该有这样的一些内容，所以呢，我们要对刚才这个上传做一个优化，那我们同时呢，也看一看这个上传组件到底是怎么回事。