day16【统计分析功能】/14-尚硅谷-谷粒学院-统计分析-图表显示（前端）

首先啊，我们这节课做的第一件事情，咱先把我们刚才写这个接口，用swagger先做个测试，然后测试之后来找握这个前端啊，但是这个啊，我可以去掉，因为咱当时做那个测试就是那个定时任务啊，这个让它执行，就是它每五秒就行一次啊，那咱们给他测试一下啊，我现在打开这个swa。就是local house，我们应该是8008把这个打开，打开之后找到刚才我们写这个接口，就这个里边有三个参数，那三个参数我们来写一下啊，比如现在我就想统计它这个注册人数，第一个参数传这个值就是注册人数，第二个传个开始时间，比如说开始时间我传一个就是2020年这个3月1号。结束时间传一个这个3月20号啊，这是一个时间范围，然后传完之后，下面我们点这个try it out，咱看它的结果什么样，先看一下数据，如果数据没有问题，再整合我们的前端，那我们来执行，大家看啊，这里边返回成功，然后再看数据啊，第一问数据是咱日期，各位看到日期是不是就咱们表中的三个3月3号，3月5号和3月9号，也就这三个，然后后面是你对应的注册人数十40和三。

咱看表里边是不是数据是对的，所以咱把这个构建出来了，而大家仔细看啊，这些数据中，我们这里边因为返回是一个外机口，刚才我说到外集合会变成个对象形式，里面有KY6 KY6，而咱的Y6中是个list集合，而list集合变成是不是一个这一次的数字形式，你看这是第一个数组，这是第二个数组，然后咱们在页面中显示就可以做到。这个啊是咱们的接口，然后接口写完之后，下面咱们来转下前端。按照咱这个过程我来写一下啊，首先第一步还是在这个API中，咱把这个方法先做个定义。

这是刚才第一个方法啊，然后咱们写第二个方法，第二个方法就是。我想这个位置啊。他就是获取到我们那个。统计的数据，然后进行这么一个显示，那这方法起个名字，比如叫这个get，这个呃，Date。Sta。这个啊，我们写的方法，然后在方法中各位注意啊，里边有一个特点啊。因为咱们在页面中，我们是用这个叫search o BG这个对象做的封装，所以里边呢，我给它直接就传播对象。然后下面写上咱那个方法，把方法的地址我到这里边复制一下。找这个地址啊，前面是sta service，后面是叫show date。就是咱这个地址，但是现在有一点有一个小问题啊，各位注意啊，什么问题呢，你注意我现在前端。

燃是一个对象，但我后端要接收的并不是对象，其实你可以改成对象加个request body传播对象，但我现在我不是传对象，我是把三个值通过路径是不传过来了，这单需要把这个做个处理，那怎么做啊？其实我是故意想这么写的，你传个对象肯定更方便，我想故意这么做，在接口中是参个参数，但我前端有个对象，那这该怎么处理？给大家我来写一下啊，这个做法首先第一个呢，咱们把符号先变成飘的符号。变成飘，变飘之后是不是能用表达式，然后在里边我们加上这个表达式，在表达式中怎么写呢？因为这是一个对象，那我们写一个色OBG啊，里边啊，Search VG，然后点上里边那个值，它的值有三个啊，咱们上面三个值，第一个值叫type，所以咱就传一个叫。Type后面以此类推，传它那个begin啊，包括什么and，包括那个这些值啊，那咱们给他继续来传啊，咱看第二个值还是加上一个斜杠，然后加上这个表达式，我们来传第二个值。

第二值就是search o BD。点上这个开始时间，然后还有第三个指色指OBG传入它那个。结束时间就加一个and，这样的话，咱们把这个作为定义啊，所以大家把这写法给他知道啊，因为咱们现在在前端是一个对象。就是色BD，而我接口中呢，又是三个独立的值，所以咱做法就是用表达式从对象中把值取出来，分些是type，比记和and，你要跟你这个对应起来啊，第一个type，第二个笔记，第三个and，把这传过来，咱们把表达式还是写到咱们那个飘的符号中，然后这个实现出来啊，最后我们再看一下挑方式是一个get几交把这个。

改一下，所以咱们把这个做定义啊，这写法各位给他记住啊，我是特别换一种写法，然后写完之后咱来到一面中，在页面中，因为咱要调离方法，所以首先还是把它先引进来，我们来引入一下啊。加个import，我叫s t API from加这个地址艾斜杠apista啊，咱看地址对不对啊，应该是里边的。API中的s ta啊，这个地址这个没问题啊，然后有之后下面咱就来调这个方法，这create的应该不需要啊，因为咱是点击这个查询按钮，它调的方法叫数电啊，那咱把它来写一下啊，大看怎么做啊。首先呢，比如说我就这么来做啊，我这里边我现在把这方法咱给他换个名字啊，就为了我们写起来就更加方便啊，不换也可以啊，啊为了更方便，然后这个方法我就叫。这个set chart啊，里边就专门设置你那个参数就叫set，然后在这个收chart里面，因为咱们点这个查询按钮，它会调这个叫收塔的方法，在这里边我们就做这个接口调用啊，做咱那个调的过程，那我来调一下啊，就是sta。

API点上咱们里边的方法，这个方法叫get date sta，然后里边传入咱这个对象，这点测OBG。把这个传过来，然后传完之后加上这么一个叫点赞。点赞里边呢，加一个response。箭头函数通过response得到反应的数据，而反应数据啊，因为咱是有两部分啊，就是那个，也就是说对应的X轴和Y轴，X轴是在那个日期部分，Y轴是它的数量，那咱给它取出来，因为它是在外中吧，我在上面先写这么两个。变量啊，为了咱能取值，比如第一个我就叫X date，就是X轴的数据，这是第一个啊，第二个叫y date，就是Y轴这个数据啊，用这个做个封装，那我们来取一下啊，第一个S轴。

X date，它取的是那个应该是日期部分，那我们写一个response.date.date这得到map，在map中的日期的名字到里边咱们复制一下。日期是不是他呀，叫date这个历史集合啊，这个名字。把这取到，然后第二个是咱那个Y轴的数据叫y date等于response.date.date加上咱那名字，这个名字应该叫um date list，所以这样的话大家看啊，咱现在通过调我们的接口，把这两门数据我们应该都给它取到了，一个是X轴，一个是Y轴啊，这各位能给它做到啊。然后做到之后，咱下面你注意啊，这个方法中的就是这个地方和这个地方，咱知是不是要改一下呀，最后在里边做个调用啊，就是调用一下我们下边那个就是真正生成图表的那个方法。

啊，图表的方法，然后改变里面那个值，用咱们数据库中的值，然后这位置我做个调用啊set这个方法叫T，名字可以随便起，然后咱把这两部分值给它改一下，这是第一部分，应该是X轴，我来一个这点。X date，然后还有第二个值这个地方，然后改成叫这个c.Y。State，这样的话，把这个过程我们就最终完成了啊，主要就这一个结构啊，所以咱们就写完了啊。然后这个过程中啊，有一个点给大家要强调一下啊，这点是什么呢？因为咱们现在啊。写的是这个vuee啊，或者说是JA索，这个代码主要是vuee代码，所以这个代码跟咱的Java代码不太一样，它不一样在什么地方呢？给大家举个例子啊，比如说我现在啊，在这外边我写个成现变量，你在方法中向成现变量中设置值，我其他方法是不是也能去用啊，这肯定没有问题，Java中这些都可以，但是在wee中这是不可以的，所以你注意一个地方啊。

你看我的方法在什么时候掉的。什么时候调，是不是在方法内部调，就是在你的response箭头函数里面掉的，如果说你把这个代码，比如说我们放到它的外边去。那这不可以，这里边取不到你这个值，这是voe中一个特点，就是指指定你这个变量有一个使用的范围，只有在你的当前方法内部才能使用，如果你换一个地方，那这个值它取不到，所以大家注意这个特点啊，这是比较特殊点，是VE中的特点，跟咱Java完全不一样。我再说一遍啊，你注意。

这方法中呢，咱是要设置X和Y这个值，但是这个值但是通过调接口得到的，所以说咱们在vuee中，你这方法得到之后，你只能在方法内部使用，比如我把这个调的方法，我放到它的外边去，比如放到这个位置，那这值我们是取不到的，它会有问题，必须在里边用，这是VE中特点，所以我现在把它放到这里边设置，或者说你把这代码直接复制过来啊，都一样的，我是单独写方法，就为了特别说这个。特点啊，这是voe中的特点，然后这个做到之后，最后咱这效果应该实验出来了，咱最后把它做一个最终测试，看一下咱这结果到底对不对。最后啊，我们来试一下啊。咱大概检查一下啊。我们点这个输chart调这个方法，方法里边调接口，得到我们这数据X轴和Y轴，然后向里边分别设这个值，这是X，这是Y，另外啊，这些应该都定出来了，这个完成了啊，完成之后最后咱们把这个效果我们来做一个最终的一个测试，看一下它最终的结果是什么样的。

咱来试一下啊，接口应该都启动了啊，然后包括N这个应该也启用了，咱现在用的是8008端口，咱刚才看过都改了，然后在这个。页面中啊，这些也都实验了，那咱们试一下最终的结果，因为咱们现在要生成是一个就是折线图效果，或者柱轴饼状图都一样啊，我就以折线图为例，那现在测试啊。我点图标显示里边选择一个，比如这个注册人数，然后我选一个范围，比如说选择3月1号到三月20几号啊，3月25号这是一个范围，现在我点查询来看效果对不对啊一点。大家看到我一点发现是不是没有效果，那咱看什么问题啊。那这个问题怎么看呢？当你点发现没有效果，咱就最直接方式点F12，看他哪里报了错啊，大家看啊，他哪里报了错。

各位看到啊，它里边有一个提示就在那点啊。他说这个东西没有做定义啊，就这个没有啊，那咱看问题在哪里啊，因为这个应该是咱们由接口是返回那个名字啊，那我们来到里边啊展示一下，看哪里写的不对。它里边就是这个地方啊，就是response.date.date然后咱们是取的这个值，这个值是通过我们那个后端接口反应数据，那咱们这么来试啊，比如现在我给他换个位置啊，是不是它这个名字有什么冲突啊，或者我这值没有取到啊。你先给他拿过来啊，然后把这个我给他做一个输出，咱来做个调试啊。就是输出这个response。呃，加个特殊符号啊，或者咱能看到。比如response date。点data。

把这个啊，加一个特殊符号，咱试一下啊，看这里是不是哪里写的不对啊。或者名字可能有什么冲突啊，咱来测试啊。看看这个啊，然后现在我们来测试啊。在这里边啊，现在比如说我这个位置一刷新。咱发现这只是没有输出，那什么问题呢？那可能就是我这里边可能取的不对啊，那我把这里的棒子我做个输出，这个我先注掉啊。先出掉。来看这问题啊。现在比如说我再做个刷新。然后里边啊，我点击这个数据啊，它执行一下啊。注册，然后这是开始，这是那个结束点查询，大家看response是不是输出了，那证明我到这一步都是对的，那可能是下面这个曲子有问题，那什么问题呢？咱看一下啊，我说各位是否能发现这个问题啊。你注意啊，因为咱们现在啊，写这项目有点写的有点就是混乱，不叫混乱，因为咱们既写前台系统，又写后台系统，咱现在写的是我们的后台系统啊，其中有一个地方我说各位是否记得啊，咱们就在昨天，包括前几天写的前台，在前台中咱是不是加上两个date，这是没有错的，但是咱们今天写的是我们的后台系统，后台系统中啊，你再加的话就不能加两个date了。

为什么不能加呀，因为在我们这个有一个地方啊，它帮咱们做了一个封装，就在这个叫U里边有一个块的文件，大家看这位置。你看这里边。就我之前说过，他把这date是帮咱们封装了一个，所以咱写的话，写一个是不是可以了，就这问题，因为咱们又回到了我们的后台系统中啊，咱按照前那个写肯定不对。包有同学给我提示response.date就这个意思啊，这各位注意啊，写的话头脑清晰，咱现在又来到了后台中，在后台中呢，里边是做了封装，就咱写的话就加一个date就可以了，不要加两个date，两个date是咱后台那部，就是前台那部分，现在是后台中。

这个啊，有一个问题啊，刚才我也定位到这个，可以数出那证明就是下面取的不对，包括咱们找到是这个写的不对啊，这个啊解决了啊，然后咱们集中再试一下啊，回到页面中。在页面中，我先点击到页面，选择注册人数，开始时间和结束时间，点这个查询咱看效果。大家看效果是出来了，这就是我们看那个折线图，你看下面啊，3月3号，3月5号，3月9号，然后有它的值最大是40，然后这是十啊，包括这是五啊等等数据都做到了，这是我们一个效果啊，比如说咱可以再试一个，然后现在我选一个，呃。登录人数，比如还选择日期查询，是不是这个效果，这样的话啊，咱们把这个图表形式在前端，我们就完成整合啊，就这过程各位写的时候注意这个取值的特点啊，包括你用我这种方式，或者你用其他方式也能定位到刚才这是执行了，是取值不对。