00:00
大家好啊,这一章节开始,我们来完成商品管理的这个功能啊。那首先把我们的这个项目给启动。之前我们在推送get,把项目给停掉了,使用这个DEMO来启动,那这样的话就不走模客吗?好,现在是启动的,呃,那在它启动的过程中呢,我们先把该准备的东西准备一下,比如说我们的这个路由对吧,那我们来在这个用户管理下面添加一条路由,就是商品管理。目请求的路径是固。内幕叫故子配置下面的故子啊。那接下来呢,我们是不是得去找一个商品的一个图标。哎,先让它启动了,我们去找图标。I couldn't。在这里我们来搜索这个啊校。啊,用这个吧,这个有点就是像那种商品的。
01:05
把它给换掉。啊,那接下来是要准备我们商品的组件是吧?啊,因为第一个模块用户管理啊。就是说可能是大家第一次写项目,我就带着大家写的比较细啊,一个页面一个页面写的,那其实后面大家在写一个东西的时候呢,就没有必要完全重新开始了,那太费时间了,所以整个这个商品我就直接复制用户的。然后我们用到哪个页面再去改哪个页面就可以了啊。那这样我们的商品管理就有了。对吧,页面就有了,图标也改了好。看一下我们的项目啊。啊,刷新一下。啊,有这个商品管理,嗯,接着我们去把国际化给配置一下。
02:01
找到这个,然后ZHCN没有复制意思啊。商品管理。那这个改完把它给折叠起来。关掉。看一下商品管理是有了对吧,然后这个icon和这个名字都换了,然我们点到商品管理好路径也变了啊数据啊,当然我们这个是直接复制的这个用户的那个页面嘛,所以说啊,它的这个列表啊,还有这些都是用户的,那接下来呢。那我们这小节任务就是。把商品的列表完成啊,我们找到商品列表这个页面去去改改就可以了啊,这是刚跟大家说的啊,你新开一个功能的话。你完全可以从一个就说你写好的一个功能啊,有点类似的啊,大差不差的那种,你复制一份去改一改,你要说你这个再一点一点的从头去开始写的话,太费事了。大家学习阶段呢,要学的比较认真,学的比较细,但是在写项目的时候要把效率给想办法给提升上去。
03:04
文件复制完之后啊,那我们想想要先改什么。啊,你先改这个表格这个字段也可以啊,你先改。这个数据的返回也可以,就是说先改请求的这个数据也可以啊。那我先干什么呢?我就先改这个get data,就是获取数据的这里,那为什么我先改这里呢?那我先改这里的话,我就可以拿到商品的数据,这样的话我去再改表格的字段,我就可以,呃,比较能实时的看到我字段的,就是说显示的一个效果清楚吧啊。我也是这样,比较建议大家先去把这个获取这个数据给改了啊。来获取商品。列表数据啊。那这个。我们就把它get good啊,把这个名字都改了,哎,然后这个引用的地方改了,这个不要,然后是从。
04:00
柜子里面引入它啊,当然还没有这个固子这个文件对吧。来从这个service里面直接复制一个user改成固好,接下来呢,在固字里面,我们把这个方法给改了。找到当前这个用户信息肯定不要啊,那这里改成该good,那获取商品列表,商品列表下面的暂时用不到,先出示啊,那地址肯定是得换啊,地址是裤子啊。好。这个弟子呢,因为。嗯,比较遵循这种rest for。这种API的这种这种规范,所以说呃。我就能直接写出来了,你要不确定的话,就去首次看嘛,来找到这个商品管理。商品管理,你看商品列表啊,就是good子啊,怎么样故子。好,那这个。获取的商品列表。
05:01
方法名我们改了,然后请求的地址也改了,包括查询的参数我们传进去,因为你不传参数的话,我们搜索啊什么都不好使啊,那接下来在首页里面呢,我们这个。啊,Get good从这里获取,接着get date里面啊这个注释啊,包括。啊,请求的这个方式啊,都已经改变了啊好,那接下来看一看我们。商品的这个数据啊,先看一下啊来。诶,这是我们商品的这个数据啊,已经有了,对吧,包括商品的创建时间。我这也是刚才伟大说的,为什么我喜欢先去把这个数据给改了呢?这样的话我们就能拿到这个商品的这个数据,你看有很多对不对,那接下来我们只要去改这个表格的字段,我们改一个它就会显示一个,改一个就会显示一个,我们能能比较实时的看到一个效果清楚吧,好。那接下来呃,我们就开始去改表格字段啊,把一些影响我们的东西先给注释掉,比如说这个,嗯,风景和启用用户。好,这个先不先不注释吧,注释的话表单字段里面,因为它有的用可能会报错啊。
06:05
然后我们这个就先先不用管它啊,先不用管,先不用管。大家知道就可以了啊,这些是暂时用不到的。我们现在只用到了获取这个商品列表数据的这个方法,接着来改个字段,那第一个字段。我们肯定就不是头像了啊,而是谁是商品的这个图片啊。商品图商品图。嗯,取哪个字段呢?那不一定是这个字段来看一看啊。看看它返回的这个数据,Data里面返回的数据,找找这个商品。嗯,是这个啊,封面图cover your,我们来用这个字段。嗯,大家在写这个东西的时候啊,就是看着文档写就可以啊,当呃出现问题的时候呢,你就打印一下数据啊,一切以就是说API返回的数据为准,因为有时候文档有可能会写错。清楚吧,嗯,大家可以在这去。获取数据,这里呢,Get data啊,这里去打印下这个数据,一切以就是说我们获取到的数据为准,文档真的不不一定准确。
07:07
啊,在data里面。来,我们随便点开一条啊,确定一下是有这个。我们的Co跟U2是这有这个Co跟U2了啊,所以我们这个们用去问题,当然这个文档是啊,一般没什么太大问题的,那我们就直接看文档去写就可以了,好,那这个打印就注释掉。接着来写。写什么呢?商品图啊,这个地址我们换了,然后图片不用搜索,还insert,然后render render这块我们就得换了,我们就不用这个头像了啊,去找一个组件啊,找一个去NTD里面找,找一个图片。我为什么要用它这个NT里面这个图片呢?我给大家看看效果大家就明白了,我们先找到这个图片这里啊。嗯。在哪儿呢?
08:00
搜一下哦,在这呢。有时候看的多的话,不好找来看一下啊,我放上去它出现一个预览,是不是我一点能预览大图啊,这也是为什么我用它的组件,你当然你自己写那个以外级标签也可以,哎,但是你就没有这种这种效果了啊,所以我们直接就复制这个。看看怎么用啊。嗯,直接就是一个以麦迪标签,然后把这个隐麦迪引入就可以了,用法比较简单,嗯。然后可以,呃,给上一个。宽度。嗯,好,我来复制一下啊。那这个就不要了啊,这个就不要了,来我们用这个用这个image。给它加个括号吧,因为我们这么写的话。
09:03
不加也行,因为就一个标签是不是不加。把它给引入过来,从什么NT里面去引入。这个图标不用了,删掉。已卖。那地址呢,就肯定是不用他这个src用谁呢用。Record这条记录里面的。这个靠L对吧。好,我们先来看看效果啊。啊,有了,当然这个。大家会发现这个图片比较大是吧,而且预览的图比较小,其实我们去看它的API,它应该有能控制大图和小图的一个显示。我们就用这个吧,啊,大图使用。Place holder渐进加载啊,来看看这个效果,你看这个就是它的大图就就比较大,好我们来看看怎么写的。
10:03
嗯。这样一个图,这样一个。嗯,就是加了一个这个东西啊,那我们直接复制这个就行了。看一下。嗯,是没问题的啊。把它给加上。把地址给换了,这个地址肯定不对,我们要用自己的这个地址。自己的是这个地址。好,那外面这个是那个列表的那个图,列表的图呢,我们让它小一点。来,回过头来刷新一下啊。把这个关了吧,是不是这个图就小了啊,那我们点开预览是不是就大了一点。对吧。图片处理好之后啊,接着处理其他的这个字段来看手册,看文档。嗯,创建者的ID暂时不需要,分类暂时不需要啊,接下来我们来写这个标题。
11:00
来。找到我们字段这里啊,标题呢。啊,直接把它改了就可以了,标题。然后。就是说取的数据字段是取这个开头啊,这些我先往下靠,我们接着往下写。啊,这个我们要能搜索啊,其实能不能搜索你要取决于。这个文档它提供的这个可以搜索的一些字段,比如像这个抬头啊,分类啊,像这个啊,是否上架呀,是否推荐啊,这些都是可以搜索的。啊,所以title是可以搜索的,所以我们把这个title,哎,就是不用加这个had in search写了啊,那接着往下看,还有什么字段啊。嗯。标题。然后这个描述,描述的话会比较长,其实没必要在列表里面显示,我们在看商品详情的时候再显示这个描述就可以啊,接着往下过啊。我们简单的就是列表的话,因为它就这么大一个区域,它显示不了特别特别多的一个东西啊。
12:03
然后再做成那种左右滑动的,就嗯,比较麻烦,看起来不太方便,我们就把一些比较重要的信息显示到列表里面。然后看那这个标题已经有了,对吧,然后像那个什么描述啊,详情啊什么的,就就是放在详情里面去看。接着来看啊。那价格我们肯定得要,对吧,价格,库存,销量这些都得要。好,那封面图我们用过了啊,来,接着写。啊,复制一个啊,改一下啊。价格。加上CE啊,那价格呢,又不支持搜索,那肯定就直接嗯,Had in search出。价格有了。库存销量。看一下啊,是库存销量SK。
13:03
价格这个改成库存。这个是销量。销量,我看看用的字段是什么。是这个。好,来先看一看啊。那这个字段。价格、库存、销量都有了。啊,那这个邮箱其实我们不需要啊,没有这个字段。这个就不要删掉啊,接着来看什么呢?再往下看。这个封面图我们用过了,在第一开始就显示了啊,这个小图呢,就是一个商品详情里面那个可以查看很多的一个小图,这个我们不用列表肯定用不到。接着是这两个,我们肯定要是否上架和呃是否推荐对不对。来这个呢,刚好就可以复制这个是否禁用啊,把这个是否禁用改一改就可以了,那个这个就是是否上架,嗯,那取得字段就是is are。
14:03
嗯,这个我们就呃,Had in search。呃,我们上架不上架是支持搜索的,所以这个我们就。删掉,让他能搜索。清楚吧。啊。嗯,接着呢。啊,Render就是Switch,那这个我们就把它改一改,改成这个,比如说已上架啊。没有选中的就是已下架就是未上架嘛,啊,接着就是它这个值的一个判断,这个值呢,到底是零的时候上架,或者说是一的时候上架,这时候你看文档啊。一是上架看到了吧,所以说。我们得判断让它等于一的时候,再让他选中对不对,因为一才是上架嘛,我们选中的时候是上架。啊,那这里啊,那这个处理这个什么方法,先不用管,到最后换我们再改写这个功能的时候再去改它。好,是否放假写完了,接下来写谁?
15:02
是否推荐对吧。推荐,那这个字段就打换了就不是一张了,而是一日为comment的,而且是否推荐的话,应该也是支持搜索的,看一下啊支持搜索的。是否推荐,那直接把它给改一改,把它给改一改。然后是。这个。嗯,这个是否推荐。这个显示的这个文字啊,我们给它改了,改成比如说已推荐。未推荐。啊,那判断的这个条件呢,同样的你得去看文档确认啊,一是推荐临时不推荐,所以我们就让一的时候让他选中,这些都没问题。好,接着来看一看效果。哎,有了,哎标题是否上架,然后是这个是否推荐,但是我们是否上架是否推荐。他不是输入框,我们应该是一个单选对吧。
16:01
啊,你要么选这个查询这个已上架的,要么就查询这个这个没上架的啊,所以这个输入框那肯定不对,这种情况怎么改。啊,就是我们要改它的搜索条件啊,它肯定会有这个属性来控制,但是是哪个属性呢?不清楚啊,不清楚我们就看看手册。啊,来找这个手册。找哪呢?嗯,那肯定是表格相关的,来找到高级表格,表格的话你在这里去。去,去找。找这个value type啊。当然我是,我是知道怎么去找,所以我可以直接告诉大家,你要自己去,不知道的情况下你找,你就看例子,看例子,往下翻来看看例子。看他哪里用到了那种单选的搜索对吧。哎,这儿看到了没有。哎,这就告诉你了,Y轴type选择类是不是。啊,你可以下改成下拉的啊,单选的这种多选的啊,这样的单选的都可以对吧。
17:06
那比如我们就想要这种效果啊,那我们找到这个看他怎么用的啊,大概是123第第三个啊。找到下面把它代码给它展开,然后看一下。它是怎么用的啊。嗯,在。这边首先是定义了这个啊,我们每举的一个枚举的一个字段啊,它定义了一个常量,其实我们不在这定义,直接在字段里面定义也可以啊,接着往下找。大概是第三个啊,这种单选按钮状态好。嗯,那。这个。对,我们主要要这个就是Y6TYPE这么一个类型,然后加上这个枚举的这个值对吧,只不过枚举的这个值就是它是在这定义的啊,那我们。来,你写一下啊,Value type,因为表格会根据这个value type去,呃,渲染成不同的一个数据的一个展示。我们把这个加上啊,那接着。
18:03
那既然我们要展示成这种单选,那你单选的这个可选的值都有什么呢?就要通过。另外一个值来定,另外一个属性来定义,就是这个枚举这个属性啊啊。这个例子呢,它是把这个定义到了外面对吧,那其实我们这个就两个就无所谓了,直接在这写就可以了啊,啊注意它的这个格式,你要不清楚的话,你就看看它上面这个是怎么定义的啊。首先是一个K。K里面是一个,就是最外层是一个对象里面这个是KK里面又又指向了一个对象。那所以呢,我们也可以这么去去定义,那K呢,实际上就是我们选择的这个值。清楚了吧,嗯,来。我们这个K是什么?我们的K就是零和一,那一就是。呃,已上架的对不对,那零就是未上架的里面有个T字。已上架,来,再来一个零,未上架,未上架。
19:05
啊,你注意啊,这个K是,呃,我们的就是说select,就是选择那个值。啊,因为他要用这个K最终当做搜索的一个筛选的一个条件来进行使用的,我们先来看看效果啊。来。是不是就有了?啊,比如我选择这个查询,这个未商家的来查询。就把所有微商家给查询到了,清楚了吧,那他传的是什么条件呢?就是传的是这个。这个K就是传的这个值就是这个K,所以这个K你不要乱写,根据我们这个单选或者多选就是它的,实际上这个value就是它的这个值,你来进行设置啊,那这个我们就写完了,那第二个来。这个也给复制一下,就是是否推荐的嘛,那个这个是一还是已推荐。零就是未推荐看看效果哎。
20:01
嗯,没有显示啊,没有显示是就是说我们的页面宽度不够啊。啊,因为它会自己就是说当显示不够的时候,他这边会多一个展开,让我们能能展开啊,比如说我们查这个未推荐的来查询。是不是所有这个未推荐的就有了,那查这个已推荐的。好,所有已推荐的就会显示在这里。看到了吧,啊。然后我们还可以查已推荐已上架的啊,都可以联合去查询的啊,看到了吧。啊,包括这个这个搜索,比如说我们搜索一个命令大全,因为这个是模糊搜索啊,是可以搜索查询,是不是命令大全就有了。啊,当然数据有重复,为了就是让数据多一些,我们生成了很多这种呃,模拟的一个数据啊。接着我们来重置查询条件啊。那接下来看看还有什么字段。详情我们也不写,然后就是一个。这个添加的一个时间啊,添加的一个时间。
21:00
时间呢,这个已经用上了,是对的,时间就是。就是艾啊操作我们也先保留商品的话,我们也得需要编辑清楚了吧,好,那商品的这个列表已经完成了,刚才给大家试了搜索呀,包括这个条件的筛选。然后呃,以及这个分页都是好使的啊,比如我们到最后一页啊,嗯,比如我们来回第一页,然后查这个所有已推荐的对吧,那查到所有已推荐的以后呢,查到了这个。呃,109条11页,然后我们去在就是说有筛选条件的基础上去分一页都是好使的啊。那这也是这个pro的一个强大之处,当然光他强大也没有用,你后台的这个API也得配合,比如说。你像这些搜索的字段,你只有你API你支持这些字段的搜索,我们才能用,对吧,你如果你都不支持这个抬头的搜索API都不支持,那你这边表格你再写也没有用是不是啊。好,那这节课先到这里。
我来说两句