00:00
好,那从今天开始呢,我们要去讲啊,VI的一个实战项目叫硅谷外卖,那这是一个什么样的项目呢?那首先我们要去给大家去演示一下这个项目的一个效果是吧。来。在我们这里面呢,有一个扣,打开扣,这里面说一下啊,这一共有四个工程文件夹,项目文件夹啊前三个呢都是呃,客户端项目的,看出来吧,呃,第四个呢是服务端项目的,那客户端项目有三个是什么原因呢?大家看一下第一个呢是一个。那客户端应用的一个空项。嗯,这个准备是因为大家下载的时候比较慢,所以直接用脚手架给大家搭了一个下,大家可以节省一下啊时间啊,因为前面我们已经练过了,如何去啊下载一个模板项。下面这个呢,是我们客户端下面的最终的版本be了,是最终的版本能看到吧,而我们这个server也是什么,最终写好了就是这两个了,一个客户端应用,一个是后台应用。
01:08
那也就是说我们写的应用还是叫一个前后台分离的项目。对吧。一个前台应用,一个后台应用嘛,呃,这个是我们涉及到前面的一些部分的静态页面。这个大家前面是不是已经画过了啊,已经画了,好来,那我先运行谁去。运行谁这个呀,先赶快把后台跑起来对不对,CMD啊运行的命令呢,很简单,NPM大。那最终呢,我的后台啊,应用会运行起来,最终应该会有一个有一个文字提示来说明啊,一些东西我们来看一下啊,这说什么数据库连接成功,实际上服务器已经起来了,听懂吗?是吧,后台应用已经成功的跑起来了,而且连上了数据库服务器对吧。
02:01
没问题吧,没问题,好,下面进入我们的课堂应用。也是CMD,也是NPM是大的。那它这个病例呢,就会去将我们的应用进行内存的编译打包,并且运行起来我当前的项目,并且启动浏览器访问端口号是多少?8081还记得默认是多少吗?8080,应该这个是改过的,是不是好,这是一个移动端应用,所以我审查啊,切换到移动端的模式。好,那现在呢,我们就运行起来了啊,大家知道一个应用是不是很多新惯这个主界面就是这样一个一个推广里面有些内容啊,啊可以进行切换,对不对,算吧啊是样的啊好,我们这个这个这个相当于是我们首页了,能看到吧,专们首页,这实际上是我们外卖应用的一个部分啊,其实真的一个外卖应用肯定前面还有什么定位啊。
03:11
对吧。能懂吧,啊这直接就相当于已经有位置了,大家看到。实际上这个位置呢,就是我们当前我们这栋楼啊。好啊,前面这里面呢,显示的是什么。知道吗?食物分类的一个一一个一个列表,实际上是轮播列表是吧,是不同的啊实物嘛,下面这下面的是什么。商家店铺的列表是不是商家店铺的列表这一个呢,是什么呢?能够去跟商家进行什么呢搜索。嗯,看搜一下。有没有?是不是有啊,有啊嗯。好,往下看,下面呢,这个呢是订单列表啊,但这个功能呢,我们没有真正去实现啊,因为因为这里面功能太多了,每个都实现太费时间了啊,我们主要是做一些重要的就行,就如果大家后面去也可以继续的往下做,这都没问题啊。
04:16
再一个就是用户的一个界面,用户界面就涉及到一个概念叫什么。是不是登录注册呀,啊登录注册的一个功能,好,我们登录一下是不是,其实这里面啊是注册和登录二合一,什么意思呢?啊,这个里面它会判断你的用户到底有没有,如果已经存在,就是相当于是登录如果没有存在了。那就是注册并登录上懂不懂啊,现在很多应用都是搞登录注册二合一啊。而且我这里面有两种注册登录方式。一种是密码,一种叫什么短信啊,先看一下密码,密码能登不看看啊用户名啊,随便搞一个额的硅谷可以吧。
05:05
密码呢,假设123啊,我这还可以切换呢,大家看。是吧,可以现在不有有有这样的功能吗?有这一个是什么。叫图片验证码,这是个图片。你不可能复制粘贴对不对,只能自己输对了,这是EIW,这是那后面那个是多少哦,你就确定下啊,啊万一不是L了,所以说我换一个啊L啊这里面不区分大小写啊,一般的都不会区分大小写,LNFD。对吧,来走你。是不是可以啊,就这可以什么退出登录,诶这个实际上是用了meet UI,我们这里面啊,只有部分用到me UI。
06:00
这要搞清楚啊,好退出了,接着我再换一种,再换一种呢,就需要手机,你因为发短信嘛。啊发短信嗯,13716962779,好,这个时候把手机打是真实的啊,会真实的啊来点一下,我来看一下。啊,51369。啊513699好,假设我再加一个对吗?这样肯定不对,对不对,扔了吧,他说短信验证码不正确是吧,那我应该怎么办,是不是删掉一个。刚才我读了吧,513699是吧,走你。是不是成功了?啊。你别看了啊,就是首先你你有老师这注册登录是不是有点太简单,咱还要做吗?你会吗?你你得回想一下这个事对不对,不要觉得啊,注册登录就一定说很简单很简单,首先大家保证简单的事情,确实注册登录不算特别难的业务对吧?不算特别难的一个一个业务功能,但是呢,是比较基本的。
07:19
真的吧,你先把基本的搞了再说对不对。好,可以去退出登录啊,没有问题一样啊好,这里面还有一些,比如说我们这里面某一个商家啊,是不是可以进来啊,进来就看到这样一个商家的详情界面,而商家详情界面里面呢,会有我们商家下面的。这个才是你最终要访问的页面,你不要经常在这里面点餐嘛,对不对啊,这里面就有一个实物的列表,以及这里面有一个评论列表,以及这里面呢,有一个商家的一些信息,还有这里面有一个投入。
08:00
这是个头部啊,在头部里面呢,能展现,实际上也是展现商家的一些信息的啊,而且还有两个可以点的地方啊,这个商家呢,提供了一些优惠活动,说白了就是你买多少减多少是吧啊或者给你打折什么的。嗯。这个实际上是跟我跟那个饿了么他们那个官方的应用基本上很像啊,非常类似的。啊,效果也是基本上一样的。好,那接着呢,可以进行进行什么呢。是不是点餐呢,是不是在点餐嘛,那点餐的时候呢,譬如说我这个这点上,这点上面点两份,下面点三份,我这是来点好吃的行不行。我靠,这里面好像没看到什么好吃的,如果想看详情,这好吃吗?这叫。
09:04
叫什么来着,好像听那个在那个在那个抖音上面说这个这这种拍黄瓜叫叫什么青龙脆骨,这不青色的吗,不不打碎了吗,就来一盘青龙脆锅,老板一听不知道他你想要什么。啊可以,这里面也可以点啊,也可以点可以消失啊,这里面可以看啊,你的一些是不是购物车里面的一些购物箱啊,那后面呢,可以进行啊,后面的后面的逻辑就没怎么做了啊,就做到这里就没做了。行啊,那基本上就是这样一些,这里面都是可以可以去动态的,你看可以同步滑动的,看到了吗?能看到吧?啊这里面你看我在右边划的左侧是不是也变化呀?啊,这个也是需要做的一些效果,这些效果那可能就要花点时间去做。
10:05
对吧,嗯嗯。其实你说这个这个整个应用呢,你说有多难呢,也不至于,但是得说只要你自己最终能够把这个应用写出来,我相信你要去公司里面写个项目,写个项目。说不上绰绰有余,但应该可以应付。啊。你想想前端应用要不就是把数据展现出来做交互,再去提交一些数据过去,对不对啊,你难的可能就是出现一个什么特别炫的效果,会特别繁琐的一些效果,看看能不能搞定,对吧?你首先得保证啊,你说老师我得搞定了,没关系,特别难的事情,特别难的效果,你搞不定这个你不会被开除了。听懂不?你被开除或者你干不下去啊,不是被开除啊,你干不下去的原因是什么?你连基本功能都做不出来,那不就做不下去了吗?对不对,你特别难的效果,那你做不出来对吧,那这个是情有可原的。
11:11
这个能懂吧,啊,这个能懂啊行,这是关于它的一些基本的功能啊。后面呢,我们就一个一个做啊,这个你不用着急啊,一点一点做啊,有的几天。
我来说两句