00:00
哈喽,各位小伙伴们大家好,那接下来咱们去完成首页当中的这些数据,可视化去展示动态的数据。那首先说啊,对于我们目前而言啊,这些静态的组件咱们已经完成了。那当然啊,将来你是需要向服务器发请求的,获取服务器的数据进行展示。那所以说呢,咱们呢,去完成相应的这部分的业务逻辑。当然那咱们呢,是没有真实的这个接口的,那所以说呢,咱们得用到一个技术work去模拟数据。那所以说啊,呃,老师呢,准备好了一个杰森,这个杰森呢,就是咱们首页当中所需要的一些数据。那这个呢,老师呢,给他拖拽到咱们的开发者工具当中,稍微呢去看一下子。他呢是一个杰森,那有相应的很多的数据啊,这里面的数据有很多,那咱们呢,无非就是发请求,获取模拟的数据展示即可,所以说剩下的活几乎都差不多,那所以说老师呢,只是举一个例子,那其余的数据啊,你可以接着啊,比如说按照老师这个步骤,再一步一步的给他完成就行了。
01:22
对吧,咱们呢,以谁举例子呢?就以这儿吧,销售额和访问量这里。对吧,当然咱们现在这儿呢是能切换的,但是数据是不能切换的,数据呢得变为服务器真实的数据。那所以说啊,咱们呢,把这一部分的功能给它完善,就是利用真实的服务器的数据去进行展示,当然咱们得默一些数据,那剩下其他的数据啊,你可以拿到数据进行替换就行了。对吧,那所以说啊,那回到咱们的项目当中,那咱们呢,需要work一些数据。
02:00
那咱们呢,先把咱们的这个项目给他拖到咱们的呃,VSQ当中,那咱们呢,要去模拟一些数据,那老师先把这里呢,先全都给它关掉。对吧,那咱们呢,找到咱们模拟数据的地方,那不就是这儿吗。对吧,那咱们呢,可以把咱们的这个杰森老师呢,给他拖拽到咱们的默文件夹当中。但是啊,咱们所要做的事儿呢,还有很多,对吧,那咱一个一个来。那首先说第一件事儿,这是咱们要模拟的数据,是一个杰森。对吧,那怎么去work数据呢?其实在前台项目当中啊,咱们已经讲过了,呃,那咱们去看一下子,因为人家这里啊也在默一些数据,那咱们呢,可以照葫芦画瓢,对吧,画一个。那咱们呢,可以把table当中,人家当年默克这个数据啊,咱搞一个。对吧,比如说咱们也来一个模块叫home的这个数据home.js。
03:05
对吧,那这里呢,老师呢,把它呢给它粘过来,对吧,这是人家的数据,那首先说人家这里呢,用了work以及模拟数据,当然咱们的数据呢,就不需要再模拟了,咱们呢只需要从date点阶层当中引入即可。所以说咱们呢,引入一下子咱们的这个date,那就是一个date等于。Require,应该是咱们的点杠啊,Date。对吧,贝塔点杰森里面的数据。当然那这里面呢,就是对外暴露的数据了,那这里面呢,咱们先去改一下路径对吧,比如说呢,咱们将来数据格式化,首页这个接口呢,就叫做杠后杠list吧。对吧,以及呢,是get的请求以及返回的数据呢,那咱们的就是对。对吧,那这样的是KV一致省略V。
04:02
对吧,这个得大概能看懂对吧,那好了,那咱们的home模块有了,像人家的table啊,User啊这些会进入到index JS当中,看一下子人家会进行合并的。那所以说啊,老师呢,先把没用的先给它关掉啊,这个老师先全都给它关掉,那就说回到咱们的入口文件去引入一下咱们默那个数据就是后。应该是谁呢?是咱们的,呃,点杠这个后,当然那这里面呢,咱们呢,就照葫芦画瓢点点点谁呀后。对吧,那咱们的模拟的数据是有了,但是呢,要注意你不一定能获取的,为啥呢?因为咱们从项目第一天应该知道,咱们已经把work假数据的那个配置已经删除掉了。对吧,因为现在咱们所用的接口都是真实的接口,那所以说回到哪呢,回到咱们的呃,voe.con.gs当中,咱们呢,需要配置一下。
05:04
对吧,就这里当年是有个配置的,被咱们删除掉了,这块就是什么呢?开启mark的数据。叫做比方引入谁呢,引入人家的这个默serve啊文件,所以说呢,Require一下。块。2EQ require,那应该是点杠,应该是咱们的墨下的墨so.js。对吧,那当然还有一些事儿要去做,那就比如说人家现在发请求的呢,是找真实服务器发请求,人家用的这个request,你看啊它啊,对,还有一个配置项需要配置,就是Mo so这里。墨色5.gs这里面呢,还有一个东西要配置,就是谁呢,就是这个路径。对吧,如果你开启work模拟数据,你这个路径了,就不能再用它了,就什么base API,为什么呢?因为咱们的真实的服务器的接口上啊,它才有这个呃DV啊杠API。
06:11
对吧,这是咱们真实的接口在用的,那所以说这个字段呢,咱们换一下子,那就叫换的什么呢,换个吧。对吧,当然咱们呢,现在是没有这个变量的,那所以说回到咱们的DV这里,那咱们也给他来一个。对吧,那这个呢,咱们就叫做呃杠莫哎杠呃杠API。对吧,那当然这些配置项呢,你都需要去给人家配置一下,对吧,那这个呢,老师呢也全都关掉,省得看着心烦,这个老师呢给它关掉,当然你工作当中那一般那都是真实的接口了,对吧?你不需要默克数据,但是咱们是需要。对吧,那接下来呢,要注意一件事,咱当年发请求用的这个,呃,request.js这个呢是找真实服务器发请求,所以说呢,这个呢,得像咱们当年前台项目是一样的,你给他来一个叫做work request发请求。
07:09
对吧,那这个咱们就叫做mark request,用它去获取mark的数据,当然那这里呢,你得提换成谁。对吧,那么万事俱备,只欠东风,那咱们呢,需要把咱们这个项目啊重新运行一下,因为配置文件发生了变化,对吧?那接下来呢,咱们就要向服务器发请求获取数据,对吧?当然咱们看下咱们这里,这里呢出现了一个语法的错误啊,就是importt home from,点杠home,那咱们看一下子应该呢,是在咱们的work这里。对吧,啊,应该是用这个require的形式,这个呢,咱们叫做home等于。等于蕊快哪个模块呢,点杠home模块,那这回呢,咱们先给它运行起来,先看一下咱们配置的这些东西有没有问题,如果有问题赶快去给他调一下,对吧,先让他跑起来。
08:14
OK,等待一下,看一下子能不能跑起来,OK,这是没问题的。对吧,那咱们呢,看一下子OK,这是没问题的,那接下来呢,要注意一件事,咱们得向服务器发请求,获取数据,展示数据。那所以说因为咱们的这个数据量嘛,还是挺大的,你看嘛,数据量还是挺大的,那如果说你在组建当中获取呢,你还得一层一层的往底下传,因为咱们的结构是复套子,子子里边有套子。所以说呢,咱们就在V叉里面发请求获取数据就行了,所有的组件找V叉要就行了。那所以说找到咱们的star,找到这在modus当中,咱们再给它加一个模块,那就叫做home.js对吧?那当然那你需要在index当中啊,去合并一下,那咱们引入一下子in partt,它呢,应该是谁呢?应该是home for,应该是咱们的点杠啊,Modus下的这个home,当然你这里需要注册一下home。
09:18
对吧,那剩下的活回到这儿,那不就是咱的那个三连环嘛,对吧,那咱写一下子constant state。以及count的mutation。对吧,以及comes的一个action。以及K的一个GS。那以及对外暴露X default。忘了谁呢?忘了咱们的state。Mutation action和。对吧,那咱们呢,保存一下,先看下程序有没有问题,没问题咱们再继续,OK,没问题。那接下来咱们要发请求,正常说发请求你是不是得在咱们的API里面去完成,对吧,那这里面咱们就不用了,因为呢,咱们的这个U下已经有这个请求的这个request了,所以说咱们引入一下import。
10:10
那咱们呢,就叫做work request from,应该呢,是I杠下的这个more request。对吧,那当然你要派发action完获发请求获取数据了,对吧,这个呢是发请求。获取哎,首页的模拟的数据。那咱们呢,就叫做get,呃,Date。对吧,那当然,将来你得三连环,那这呢得有谁啊commit。对吧,那咱们呢,去发一下请求,那这个请求咱们就在这儿了,More request.get。找谁发呢?应该是杠home下的杠list,当然,那你这呢,需要a think away去等待他成功的结果。对吧,那咱们呢,去light一个。
11:03
对吧,那咱们呢,去打印一下子,看一下子有没有数据,当然咱们目前呢,是没有派发action的,所以说你是发不了请求,拿不到数据。对吧,那所以说当home组件一挂载,找到咱们的home组件。找到咱们的home组件,找到这儿对吧,当home组件一挂载,那我就发请求呗。Mon mount的派发action。这点到。Store第二,PA多了个Dollar啊,当然这是咱自己写一下store。又多了一个,这是咱给他删掉。第二,PA叫做get date,那咱们先看一下能不能获取相应的服务器的数据。对吧,如果数据能拿到,那展示的数据就so easy。对吧,哎,没问题的,那所以说它的被子呢,是一个对象,那么咱们呢,去存储一下,找到这儿,那这块呢,咱们呢,也是进行相应的判断,如果扣的等于多少来,那这咱搞一下子,比如说如果扣的,如果咱们的result的点扣的等等于200,应该是200,咱们瞄一眼啊,是不是200。
12:19
刚刚打印的是不是200,那咱们呢,在这儿打印一下吧,cons.log。对吧?Ret,那咱们呢,还是得看下这个扣的值各十百千啊,2万,如果等于2万。对吧,那咱们呢,就提交相应的数据,那就是commit。对吧?那应该是谁呢?叫做get date,那数据谁是result点。那以及呢,在这呢,你得有相应的music get date。对吧,那得有state。那以及咱们这个叫list吧,那就说state.list等于list,当然起实你仓库当中得有list一个值为空对象。
13:05
对吧,那咱们的刷新保存一下,看一下咱们的开发者工具一定要耐住性子。对吧,找到咱们的VIVO叉,找到咱们的这个仓库,看一下有没有相应的数据,OK,有了,那接下来呢,咱们的就是展示数据了,展示数据很简单,但是呢,这里呢,老师呢,以这举例子,因为这块相对而言呢,有一些难度。对吧,但难度系数也不是很大,因为就展示一下数据对吧,那这块的数据是谁呢?老师说一下子他们是谁呢?咱们可以看一下这个数据啊,它呢,分别叫做什么呢?叫做这个东西还是有点多对吧,咱给它展开。一个叫做呃,User for y啊Y轴user for数据,其实说白了一个就是啥呢?一个就是这个水平轴。这不一月到12月嘛,对吧,以及还有相应的这个柱状图的数据啊,说白一个是X轴,一个是数据,另外呢,还有一个,因为一个是访问量,你看嘛,访问量有相应的数据,销售额也有,销售额是谁呢?咱们可以看一下顶上就这呢叫做order什么什么。
14:15
对吧,这不分别都是对应的X轴和X轴需要展示的数据,那所以说回到咱们这个组件,那咱咱们得找到这个组件。这个组件是谁呢?咱们还真得看一下是不是咱们那个销售组件。对,不能找到咱们的首页,找到咱们的这个销售组件,找到这儿。对吧,那咱们得拿到相应的数据,那所以说这里咱们引入。对吧,辅助函数map state。From,从谁那儿引呢?从vir,那咱们呢,需要获取到数据,那咱们在这里呢,你需要搞一下了。对吧,那这块呢,咱们就叫做,呃,起个名字吧,就叫做list date data,对吧,或者直接这么搞就行了,点点点map state。
15:09
对吧,那这呢,咱们叫做list state state,那应该state点呢,点home。下等,呃,咱们还真得看一下数据啊,state.home下的叫啥玩意叫叫叫list。对吧,哎,第2LIST,那咱们呢,先确保一件事,什么事能不能拿到数据。对吧,当然咱们这个语法呢,现在是有错误的,那这块呢,别忘了是不是得有一个state。对吧,这块咱们好好搞一下,就这。对吧,这块都有state。那这块呢,访问的是state下的home下的这个list,咱们先看相的组件能不能拿到数据。对吧,找到咱们的这个组件去看一下的,应该是这个。对吧,那咱们瞄一眼相应的数据有没有有了。
16:04
对吧,那这里面呢,咱们就得调试数据了,一个是X轴,一个是Y轴。对吧,那咱们呢,得调试一下数据,数据得看哪当年咱在这儿是不是计算对吧,你看嘛。你看嘛,老师呢,在这儿呢,我先给你打印一下子title这。对吧,这是咱当年计算属性这里嘛,Console。哎,点log,咱就来个123。对吧,那你看啊当老师,你瞄瑶当老师。来先看这我点击的时候是不是会触发对吧,刷新。你看上来的时候,它会执行一次,以及当你点击的时候,它也会执行。对吧,那所以说你在这里只需要做一件事就行了,啥事儿呢,就是修改咱们的这个这个,呃,修改咱们的这个数据就行了。对不对,你就修改咱们的谁这个set option数据就行了。
17:03
对不,那所以说其实你也可以再计算一个对吧,或者在监听属性这里都可以。对吧,那咱们最好呢,还是在监听属性这里吧,因为监听属性咱们是监听这个title,当这个值发生变化的时候,咱们重新配置这个一叉S的数据,因为咱当时修改这个一叉S这个logo的时候,不就是吗?再看它的title有没有发生变化,如果有,OK,修改它的数据。对吧,那咱们呢,在这儿去修改一下它的数据,那在这呢,老师呢,打印一下子,比如说咱们在这儿修改。配置的数据,那咱们呢,刷新先看一下啊,先看一下它会不会执行。刷新。对吧,那咱们先看一下子走访问量。对吧,修改访问量,修改访问量修改。对吧,但是你要注意啊,刚开始它的值没有发生变化的时候,它不会触发。对吧,那咱们呢,先把修改的这个数据啊,先给他倒饬一下。
18:03
对吧,那也就是说最开始的时候这块的数据看这X轴,哎呀,X轴这块数应该是空的。对吧,哎,那以及咱们的柱状图的数据,应该也是一个空数组,啥都没有。对吧,那咱们呢,刷新去看一下,你看这数据是不是啥都没有了,对吧,那接下来咱们先完成这样的,就是点击的时候,点击的时候把数据给它切换一下。对吧,那咱们分别要改谁改X轴对吧,改X轴的这个date。那咱们呢,在这儿呢,给他搞一下子一个是X轴。那咱们去在这搞一下,这个是X。X轴对吧,它的date要分情况。对吧,如果你的title啊,如果你的title是谁呢?是销售额,那你展示一个数据,如果说你是访问量,你再展示另外一条数据。
19:02
那所以说这块呢,咱们要判断就是这点title。哎,t.t title,如果它等于谁呢?如果它等于销售额,销售额。对吧,如果是真,那你就显示这个数据,当然这个数据咱们得看一下。看一下呢,应该是X轴的。那咱们呢,还是得看一下相应的组件,找一下相应的数据。找一下咱们相应的数据啊,找一下赛对吧,找一下如果你是销售属性,OK,你应该展示的是list state下的这个叫,呃,看一下的应该是这个order。对吧,Order这个数据CTRLC。对吧,那咱给它打开,那应该就是它这点list state点它。对吧,那么否则呢,应该展示哪条数据呢?咱们看一下,否则应该展示的是,呃,应该是还是一月到12月。
20:07
对吧,那应该就是它user Asia。对吧,X轴嘛,所以说否则呢,就是这4.list。哎,贝的点它。对吧,当然,那咱们先看一下子走刷新。你看现在呢,上来的时候是没有,当你点击的时候才会有。对不对,对吧,咱们一会儿再说上来的时候他就有对吧,所以说你看这不就有了吗。对吧,当然还有这个Y轴的数据,你也要分情况,就是这个系列的数据。对吧,就是这个系列的数据serious,它这个date,那咱们也写一下子在这儿。SERIES。对吧,他的这个斜下的也是这个态度,那咱们就给他直接拿过来得了。对吧,这是一样的,只有谁在改,只有这个date在改。
21:02
对吧,那咱们呢,在这儿呢,也搞一下吧,这块呢也是得判断,看你到底用哪个数组这点开头,那如果说等于销售额哎。销售额那是真真的,你就用list state,咱们还是得看一眼数据。对吧,如果是销售额,那咱们看用哪条数据。应该用的是这条数据,User for year。对吧,那应该是z.list点它,那否则呢,应该是z.list。对吧,State点那还是得看一下数据。对吧,应该是谁呢?我看一下子啊,12个就这个吧。对吧,应该是order for order for year和这个呃,User和这个user for year对吧,那这个咱找一下吧,这个是order,这数据有点多对吧,Order for页前面用这个order for页。
22:04
对吧,Order for year,后面用这个user user for year。对吧,其实这个数据谁前谁后都行啊,因为他们数据都是假的,那这个呢是user。啊,For页,咱们看怎么写吧。这个叫做user for year,瞄一眼啊,就这对吧,用这个数据。所以说呢,X轴和Y轴的数据呢,都会变化,对吧,当你点击的时候,它就会变化,当然有个逗号,那所以说咱们的回首呢,去看一下,当然你现在不点,你观察不到数据变化,它是没有没有图的,对吧,你看你一点是不是就有了。对吧,那所以说当咱们点击的时候,它才有数据,那假如说用户一刷新。OK,我上来我没点,那你就没数据吗?那你至少默认展示的是不是应该是销售额的数据,当你点击的时候,数据是不是在切换,那也就是说至少你上来的时候,你这里得有数据。
23:03
那这怎么办?这个很简单,那咱们呢,可以监听来自于服务器的这个数据,对吧,就是仓库,如果这条数据有了,OK,那把咱们的配置项给它填充一下。对吧,这不就是咱们的配置项对吧,比如说写一下顶部。对吧,是的对吧,那他为什么为什么第一次没有数据。对吧,因为你自己看monkey它只执行一次,而他的被都啥都是空的。所以说是没有数据的,对吧,因为执行一次没有数据。这会老师切换一下,没有数据。对吧,因此不显示,那所以说咱们呢,要监听一下子list state,当他有数据之后,OK,立马重新设置一下数据。那所以说咱们在这儿呢,去监听属性list state。
24:02
对不,那么当数据有了之后,那咱们呢,立马去打,立马去展示就行了。对不,那这块呢,咱们去找一下数据,那这个应该就是谁点list state,那咱们看一下数据对吧,List state咱们找一下子这个title,这里咱们看用哪条数据。对吧,那咱就用它吧,叫order什么什么。对吧,啊,这个X轴我们叫order for year写下的order for year对吧?Order,哎,点order for year对吧,X轴以及还有它相应这的数据,那咱也给它填充一下this.list state.order for year。对吧,一个是X轴,一个是数据,那所以说咱们呢,可以刷新去看一下子,那也就是说当服务器的数据回来之后,OK,我立马展示一下,你点击切换的时候,该切换切换。
25:01
所以说咱们去监听V叉仓库当中数据有没有,如果有立马展示对吧,立马展示销售额的,当你点击切换的时候,我能监听到属性值的变化,那我也将切换相应的数据进行展示。
我来说两句