day09/上午/170-尚硅谷-尚融宝-Excel数据导出的前端实现和接口定义

好，那我们简单的看一下之前我们做的Excel的数据导入的功能是这个位置，对吧？我们写了一个import啊，那么呃，这个Excel数据导入的功能，我们具体的实现呢，在页面当中对应的就是系统设置数据字典，然后点了一下导入Excel，接下来呢，我们点击上传就可以执行啊，刚才的这个接口调用了，那我们就可以把数据呢导入到我们的数据库当中了，那接下来呢，我们再做一个数据导出的功能啊，数据导出的功能呢，我们可以先在我们的页面上呢添加一个导出按钮，所以说呢，我们啊这一次呢，咱们试着先来做一下前端哈，嗯，做一下前端的话呢，那就是上面既然是导入按钮，那我们呢，再在下面呢写一个导出按钮，那这个导入按钮和导出按钮我们都写在这个div里啊，就这样写导出按钮。好，然后接下来呢，在下面这块呢，我们也参考着上面添加一个button层对吧？啊，然后在接下来呢，这个导出按钮呢，我们呃，在。

我我先把。这个呢，给它改成一个导出方法的调用啊，比如说X part data，好，这个是导出方法的调用，然后这个呢，Type等于primary size等于mini啊，E呢等于啊导出。它对应的一个图标呢，是upload to哈，这个呢，大家可以在element UI的官方网站上找到，那这块我就不去上那个官网网站上找去了，咱们直接把这个按钮的图标的名字写上，然后呢，这面呢啊，我再添加一个，再添加一个结束标签。好这块呢，就是导出一下。我看一看后面没有什么问题了。

行，然后我们来看一下页面。页面呢，我们就有了两个按钮了，那么呃，我们的页面当中呢，我们需要点击导出Excel呢，执行一个Excel从数据库当中的导出并下载的一个过程啊，所以呢，这块呢，我们就要定义一个X part data这样的一个。方法我在这个地方呢，写一下。S data，然后这个方法怎么写呢？好，这个方法呢，我们来看一下，我们就得参考一下啊，我们的宇阙那个网站了，看一看官方文档是怎么写，所以大家未来在写程序的时候呢，一定要。

习惯于去参考官方文档哈，我们把阿里巴巴的这个Excel简介打开。然后在这个地方呢，咱们找到它的这个官方文档。然后呢，我们找到啊。我们要导出对吧，导出的话应该是写Excel，所以点这个。然后这个里面呢，我们来看一下，这里面呢，有web中的写，就是你看简单的写，这是我们直接往磁盘当中写，然后再往后呢，这块有一个web中的点一下。好，外部中的写呢，就是它这块也有一个DEMO摸代码啊，大家有兴趣的话，可以把自己的这个DEMO代码给它啊运行一下哈，当然我们直接看这个下面的这个在线的这个版本就可以了啊，它实际上就是一个文件下载，也就是说我们从呃，我们的内存当中呢，把我们的数据。

导入到我们的Excel这样的一个数据流当中，这比如说是我们的Java内存在他T上运行，在服务器端运行，然这个呢是一个Excel数据，它呢会把内存当中的数据呢，填充到Excel的这个数据流当中，当然内存当中的数据哪来的？那在我们这个项目当中，我们是从数据库里取出来的是吧？我们先从数据库里把数据取出来，然后放在Java的服务器端的内存当中，然后从内存当中呢，咱们再放在Excel的这样的一个啊流当中，然后放在这个流当中之后呢，我们会以这种文件的形式去做一个下载，为什么呢？因为我们是web端，Web中的写我们的这个数据文件呢，是从服务器端来的，那怎么才能啊导出来放到用户的浏览器的本地呢？那么就是做一个文件下载工作，那这下载怎么做呢？具体呢，就在这个方法里面给咱们做了一个演示哈，然后我们简单的看一下关键节点啊，啊或者是关键代码，关键代码呢，实际上这款是一个。

就是啊，大家知道在我们的啊controller层我们去写响应的时候呢，这个响应呢，它是有响应类型的，比如说响应类型呢，是图片类型的，那么它就会展示一张图片，那这个一般情况下验证码啊，图片类型的验证码都会这么做是吧？啊那如果这个响应类型呢，它是一个文本类型的，HTML文本类型的，那么这个响应呢，到浏览器端呢，就会显示成一个HTL页面啊，那么如果这个响应呢，是这个类型的。叫做application v n d Ms Excel，那么这个响应呢，实际上是作为一个Excel文件的形式响应的，那另外呢，这面还有一个响应头的设置啊，这个响应头呢，如果你把它设置成为attachment，就是附件，那么这个文件，也就是说这个响应里面的这个文件就会以文件附件的形式作为浏览器端啊的一个附件下载下来，所以呢，它就会弹出一个下载框，然后让你去下载，所以整个的一个响应的一个关键点呢，就在于这第一呢，就是响应的数据类型我们要设置成Excel的啊，然后第二个呢，就是响应头我们要设置成附件类型的，主要是attachment这一块啊，这样的话呢，在web端我们就能够在响应当中以文件Excel文件的形式去下载这个附件了，所以呢，这个是我们整个的这样的一个内容，那这个方法怎么调用呢？这个方法其实是一个接口啊，我们直接就是在浏览器端打开这个地址。

址就可以，并不需要用阿贾克斯的形式去调用这个后端接口啊，所以呢，在这个位置既然是浏览器端直接打开这个地址就可以了，那么我们呢，因为因为刚才说到了，这是浏览器的那个响应，对不对，这些响应你必须不能用阿贾克斯去发起请求，为什么？因为阿贾克斯发起请求它是无刷新的，它是这些响应是静悄悄的在我们的这个HTTP和啊，就是这个服务上发生了，然后它不会呃显示的在浏览器端发生，为什么是无刷新嘛，那你怎么才能让这个想显示在浏览器端发生，一定要显示的去访问这个地址啊，那如果你想显示的访问这个地址的话，那在这个地方我们就window.location.h rap啊，就是我们一定要浏览器呢，做一个客户端的主动刷新，而不是像我们之前做的啊这种什么啊，阿贾克斯操作X啊调用啊，不是那个啊好，然后所以这个地方呢，我。

我们去调用它，调用它之后呢，在上面这块呢，我们再定义一个，呃，Base API，就是这不就是我们后端接口地址嘛，好，我们把base API拿过来，this.base API，然后加上。杠in杠啊，也就是我们后台的这个接口的这个地址，In杠靠杠是吧？嗯。

好，然后接下来呢，咱们再。在这个位置呢，再添加一个方法啊，就是。Public好，然后呢，这个方法呢，我们就要参考刚才宇翠网站上的这个这个了，就类似于这样的一个方法啊，所以呢，我们可以把它直接复制过来。好，复制过来之后呢，这块呢，我就叫port好吧，然后上面呢，这个地方呢，我就叫API operation，然后这块呢，我们写Excel数据的导出，好然后接下来呢，这面呢，我也叫一个好了，好然后呢，这面呢也要有一个response，因为后面我们要针对这个response设置值，对吧？好然后接下来呢，嗯。

啊，对，这这块还有你看他在上面还写了就是。他这面还写了用用swa测试的时候会有问题啊，那这个是没有办法避免的，那有的时候他就是。毕竟是两套系统，所以wer是wer，程序是程序，他们呢，就是有个别时候情况比较特殊的时候，比如说像这种响应头啊什么的不太一致的时候，确实呢啊测试的时候会会导致一些问题，所以这个时候呢，咱们就这个功能，咱们就不要用swa去测了，是不是直接呢，在我们的程序当中通过前端代码来测啊，好，然后呢，所以这块呢，就是他在嗯，他在文档当中给咱们标注的，大家一定要认真读一下，然后接下来呢，就是这块。我们的set content type啊，让它设置成刚才我们所说的Excel啊这样的一个数据类型，然后这面呢就是啊，编码方式utf杠八啊，然后接下来呢，就这面，这面呢就是response的header，然后设置我们的以附件的形式啊下载这个文件到本地，然后后面呢是attachment，然后这块呢是file name啊file name呢啊我们这面呢，它也是写的是。

一个叫什么UTF8FILE name X ls哈，我们把这个，呃，File name呢，咱们就自己定义一下吧，他这边就是定定义了一个这样的名字哈，Replace啊测试咱把这个名字写到这行吧，嗯，叫做MY，然后这款呢。把这个class呢，给它引进来，好，然后接下来呢，后面这块叫easy，嗯，Easy excel.right这个easy Excel right呢，就是咱们之前学的写Excel文件的一个方式，对不对，好，我们。

把什么东西写进去呢？把这个response.get output stream这个东西写进去啊，然后写进去之后呢，我们。嗯。Download data.class这个download data class实际上就是你要封装的那个数据类型了啊，你要封装的那个数据类型，那你要封装的那个数据类型是什么呢？是Excel BA d to对吧，在这个位置啊。嗯，我们找到我们的Togo，找到d to应该是它对吧？Excel这个的d to好要class，然后呢，这个地方呢，就是点sheet.sheet的话呢，我们默认情况下叫模板哈，我们给它改一下，比如说呢，就叫数据字典好，然后接下来呢，就是do right啊do right后面我们写什么呢？我们写一个就是数据列表，当然这个数据列表是它官方文档上之前的一个辅助方法，那我们在这里面呢，我们的这个数据列表应该是从我们的Excel。

呃，所在Excel数据所在的那个数据库表里面取出来啊，应该在那个数据库表里面取出来，所以接下来呢，我们要解决的问题呢，就是如何返回这个数据列表的问题啊好，那接下来呢，我们来看一看这个数据列表的一个啊具体的一个返回方式，那当然了，我希望呢啊，咱们把这个东西呢，写在我们的，呃。业务层对不对，所以呢，我们可以在业务层呢，创建一个方法来返回这个数据列表，好，那这块呢，我们先呃停一下啊。