每周三集前端免费视频
每年帮助超100万前端爱好者学习

Vue.js+Koa2移动电商实战视频教程 (更新到33集)

课程说明

这个教程将全面讲解Vue+Koa的实战项目,学完本教程能成为以前端技术为主的全栈程序员。
这套课程总时长会超过20小时,每节课会控制在15分钟左右。
– 文字版教程免费:一分钱不花你也可以学习全部内容,可能稍微辛苦一点。
– 视频加辅导收费:预售阶段前500小伙伴188元(预售指技术胖录制视频过程中,每周更新3-4集,并提供每周一次的直播指导)。超过500名购买376元,在预售结束后,直播指导和群解答也不提供,视频会在CSDN学院上架出售。

涉及的技术栈包括:Vue+Vuex+Router+Vant+Node+Koa2+Mongoose+MongoDB

课程将从零开始搭建一个移动电商系统,包括首页展示,类别展示,购物功能,注册登录,积分系统,签到制作,查找页面,后台接口设置,权限管理。

付款方式

点击纯金网站付款观看
付款后,扫码发送付款截图,技术胖邀请你进群学习。

1 发送付款截图给技术胖。
2. 技术胖邀请你进群,查看群公告。

项目完成效果图

首页 列表页
购物车 个人中心

课程特色

课程用新的授课方式,视频教程+直播解答+微信群互动

  • 特点一:课程代码全部在视频中当场编写,保证跟着视频可以做出来。
  • 特点二:每周一次的熊猫TV直播解决问题(间和房间号在微信群内公开,预售阶段提供直播指导,预售结束后停止指导)
  • 特点三:每天技术胖群内提供20分钟课程问题解答,保证你的问题有人回答。

如果所讲知识学不会,可以直接找技术胖微信退钱。

预售更新频率

每周更新3-4集,每周一次的视频直播解答,每天20分钟群内互动。
(如果你有任何问题,可以在文章下方留言)

第01节:前端环境的搭建

2018年4月16日晚更新第一节:

当你看这套教程的时候,我希望已经有一定的基础知识。如果你没有那学习来并不轻松,幸运的是在博客上可以完全免费的通过视频教程把这些技术知识学会。点击下面链接就可以免费学习。
1. Vue的基础知识,技术胖的博客已经提供了很多Vue的免费视频
2. Koa2和Node.js的基础知识。技术胖也已经在博客中作了免费的视频教程。
3. MongoDB的基础知识,技术胖也为你准备好了免费教程。

为了降低教程难度,就算你没有看过以上基础教程,你只要跟着项目一起操作,多练习,也是可以完全上手视频中的项目的,这也算技术胖为自己设置的一个教程挑战吧。

前端开发环境搭建

教程中我们采用前后端分离的开发模式,也就是前端调用后端提供的JSON接口,让Vue和Koa2的代码没有任何的耦合。所以开发环境也是完全分离的,开发完成后你甚至可以分别部署到两个服务器上来进行运行。

1.建立前端文件夹

我在D盘的Code目录下建立了SmileVue文件夹。smile是微笑的意思,使用这个单词,我需要大家在学习完这套教程都对整个项目的理解和技术上的应用有一个层次的提供,露出微笑的表情。

你也可以利用终端的形式建立,打开终端进入D盘的code目录下,建立命令如下:

mkdir SmileVue

当然这个目录可以和我的不一样,你可以起一个自己喜欢的名字,也可以找一个自己喜欢的盘符位置。

目录建立好以后,打开代码编辑工具Visual Studio Code(以后简称VSCode)。并在VSCode中打开我们的项目。

2.使用vue-cli生成项目目录
使用vue-cli非常方便快速,它可以为我们生成基本的Vue的项目结构。

  • 检测npm版本,在终端输入 npm -v,尽量使用5.x以上版本。
  • 全局安装vue-cli,在终端里输入,npm install vue-cli -g
  • 在终端中输入 vue init webpack

等到上面这些都正确安装完成后,我们需要验证一下,我们安装是否成功。

3.测试环境是否安装成功

  • 使用npm run dev 进行测试环境的打开。
  • 在浏览器中输入 http://localhost:8080 进行测试。

在浏览器中打开页面,出现Vue的正常页面时,说明你的项目已经初始化成功了。下节课我们就可以愉快的进行编程了。

一个README.md的重要性

在一个实际项目中,特别是开源项目中是非常重要的。
所以我们要建立一个README.md文件,这个就是你项目的说明文件。
每个公司的书写要求有所不同,所以请根据实际情况编写。
我这里就记录每节课的讲述内容和项目的初始化方法了。

总结

第一节我们轻松一点,讲了用vue-cli建立我们的项目前端目录。虽然很简单,但如果你vue-cli还不会使用,那你需要花点时间把我以前讲的vue-cli的课程看一遍。这也是我为什么第一节课没有多讲的原因。
vue-cli免费视频教程(点击学习)

第02节:优雅引入Vant组件库

2018年4月18日晚更新第二节:

在工作中,有很多自己的组件库,但是在开发这些前都会选择一套稳定的开源的作为轮子作为基础(大公司是有能力造自己轮子的)。因为我们要作电商系统,所以选择有赞的Vant作为Vue的基本组件和样式组件。

Vant简介

vant是有赞前端团队提供的Vue组件库。它的有点有以下5个:
1. 国人制造,复合中国网站样式和交互习惯;
2. 单元测试超过90%,有些个人的小样式组件是不作单元测试的;
3. 支持babel-plugin-import引入,按需加载插件,无需单独引入样式;
4. 支持TypeScript,这个是2018年前端最应该学的技术;
5. 支持SSR,服务端渲染也是可以使用这个组件库的;

安装Vant

npm i vant -S:这是简写形式。
npm install vant --save:这是完整写法。

如果你网络很慢的话,可以使用淘宝的源,但是不建议使用cnpm来进行安装,用cnpm安装时我个人是会出现一些未知的问题的,所以我在实际项目中,都是用了这种安装方式。

安装好后,看一下我们的package.json文件,并确认一下版本,我这里使用的是1.0.5版本。如果以后版本有所升级,可能下面课程中的使用方法有所不同,这个需要注意。

引入Vant的第一种方法(不推荐)

安装好vant后,可以使用以前常用的方法进行引入-这是一种全局引入的方式。
直接在src/main.js进行全局引入。

简单的三行代码已经可以把Vant引入进来了,但是这并不够优雅,也使得最后打包发布时会增加包的大小,Vue的SPA首屏打开时本来就有些慢,所以不建议使用这种方法进行引入。

优雅的引入Vant

vant是支持babel-plugin-import引入的,它可以让我们按需引入组件模块,并且不用管理我们的样式,现在Vue项目组件库的主流引入方法。
安装babel-plugin-import

也可以使用完整写法

在.babelrc中配置plugins(插件)

按需使用Vant组件

我们设置好.babelrc后,就可以按需引入Vant框架了。比如现在我们引入一个Button组件.
在src/main.js里加入下面的代码:

有了这段代码之后,我们就可以在需要的组件页面中加入Button了.


总结:

本节重点在于引入Vant的方式,建议小伙伴课下自行了解一下babel-plugin-import.

第03节:移动端屏幕适配基础

2018年4月19日晚更新第二节:

制作webapp时一个很关键的问题就是适配各种机型不同屏幕的大小,让每种机型上的布局看起来都尽量一样,这让很多小伙伴很是头疼。在这里我介绍一下我平时工作中常用的适配方案,当然适配方案有很多种,所以你有更好的方法,也可以使用或者大家一起交流。

常见移动web布局适配方法

  • 固定高度,宽度百分比:这种方法只适合简单要求不高的webApp,几乎达不到大型项目的要求,属于过时的方法。
  • Media Query(媒体查询):现在比较主流的适配方案,比如我们常用的样式框架Bootstrap就是靠这个起家的,它能完成大部分项目需求,但是编写过于复杂。
  • flex布局:主流的布局方式,不仅适用于移动Web,网页上也表现良好,这也是现在工作中用的最多的布局方式,那我们的项目尽量采用flex+rem的方式进行布局和完成移动端的适配。

rem单位介绍

rem(font size of the root element)是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。

  • 适配原理:将px替换成rem,动态修改html的font-size适配。它可以很好的根据根元素的字体大小来进行变化,从而达到各种屏幕基本一直的效果体验。

现在我们作一个实验,你可以新建一个网页,并写入如下代码:

然后给html一个基本的样式:

上边我们使用了还是传统的使用px作为单位,我们在移动端调试模式iphone5环境查看一下。会发现div的宽度是正好的,我们再查看一下字体,发现大小是16px。

我们现在可以把CSS中的px单位换成rem单位来进行测试。因为html根元素的字体大小是16px,那么换成rem单位,直接除以16就好。

页面并没有什么变化,也就是说我们掌握了换算关系。为了更好的说明这点,我们可以试着给html根样式加入字体大小,比如换成font-size:32px;。这时页面和字体都扩大了一倍。但是我们现在还是不能实现适配,因为我们根元素的字体是固定的。

JS控制适配屏幕

明白了REM的原理后,我们就可以使用这个特点来进行适应布局了,这也是现在比较主流的移动端web适配方案。当然你有更好的方案,也可以在文章下方进行留言。
三行JS代码完成适配:

总结

这节主要学习了移动端用Rem + JavaScript完成屏幕适配的方法。重点是理解Rem的特性,因为我们以后的程序都会使用Rem进行布局。这节课的内容虽然跟实战业务逻辑没什么关系,但是我希望小伙伴们一定要进行练习和掌握。

第04节:首页布局和路由设置

这节开始布局首页,课程采用先静后动的原则,就是先用静态数据代替,然后使用Mock模拟数据,最后上真实的接口。这样的好处是,可以满足不同阶段不同岗位的小伙伴动能愉快的上手项目。

这节课的三个基础知识:
1. 首页路由的配置:这个如果有基础可以跳过学习的。
2. 建立首页组件(components):先把首页组件建立起来。
3. 讲解Vant的布局方法:我希望我这节课CSS的比重不占太多的课程内容,所以为了尽量少的涉及CSS,我们引入了第三方样式组件库。

user-scalable设置

先补一个上节课忘记加入的属性,在作移动端页面适配时,一般我们不希望用户自己缩放页面大小,我们可以在index.htmlmeta标签进行设置,加入user-scalable=no

首页路由的配置

打开路由配置页面:src/router/index.js,先删除vue-cli自动生成的HelloWorld.vue的配置,然后加入我们的路由配置.

这里的@代表的是项目的src目录。

建立首页组件

删除HelloWorld.vue文件,建立ShoppingMall.vue文件。编写如下代码:

这段代码手写是很麻烦的,我们可以利用VSCode的vue VSCode Snippets插件来解决,熟练掌握这个插件后,你写代码的速度会和思想统一,让代码飞起来。

写好这个可以使用npm run dev 进行预览一下。

Vant布局讲解

使用Vant的布局需要先进行按需引入,我们直接在/scr/main.js里引入RowCol组件。

他的布局是采用24格布局法,简单的理解,就是把页面均匀的分成24等分,然后我们控制这24个等分的比例就可以实现布局。

明白了这个编写方式,我们就可以愉快的布局了。

总结:
这节课学习了路由的建立、页面的快速建立方法和Vant的24格布局。这些在实际工作中都非常的常用,特别是Vue VSCode Snippets这个插件的使用会大大提高你的编码速度。

第05节:首页搜索区域的布局

2018年4月23日晚更新第五节:

课程因为刚开始,我会带着大家写一些CSS样式,但是随着课程的不断深入,我会把CSS样式这个环境省略掉,大家可以直接到GitHub上clone项目,来查看CSS样式。

解决小问题

但页面很大的时候,我们作的移动适配方案会呈现很大的字体,这不是我们想要的。所以加一个判断,解决页面字体过大的问题。
index.htmlscript里加入判断页面的语句。

当页面宽度大于750px时,我们就把页面的宽度设置成750像素。

搜索条的布局(search bar)

*** 1. icon图标的下载 ***

利用van-rowvan-col我们快速布局一个搜索条的html骨架出来,代码如下。

并给他一些简单的样式

*** 2. icon图标的下载 ***

图标的下载我们依然在iconfont(网址:http://www.iconfont.cn/)进行下载,
找到自己喜欢的图标后,我们新建images文件夹,目录为src/assets/images,以后会把所有的项目图片都放到这里。

*** 3. 正确引入图片 ***
有很多小伙伴都在引入图片时摘了跟头,有的是开发时引入错误,有的是开发完成后,build时路径不对了。如果用require引入图片,在不作任何配置的情况下就可以基本解决你的图片路径问题。
先把图片用require引进到页面中:

然后通过绑定属性的方法插入图片

这时候进行预览,图片已经正常显示在浏览器中了。

*** 4. 写input和button ***

这里都是CSS样式和基本的html结构,所以直接上代码了。视频中我会作讲解说明,你可以完全拷贝下面的代码来看效果,然后进行修改学习。

第06节:首页轮播图的制作

花点小钱看视频
这节课主要来制作轮播图区域(swiper),制作成功后,再了解一下Vant中swipe插件的全貌。

1.按需加载Swipe组件

按照惯例我们在使用Vant组件时需要把组件import进来。在/src/main.js下按需引入,代码如下:

现在我们/src/main.js的样子如下:

引入成功后,就可以写轮播图代码了。

2.下载这三张图片

我们作轮播图的三张图片,你可以先下载好。图片放到了七牛云上,你可以下载,也可以直接使用这些图片地址。


开始制作轮播图

首先我们在js部分写入一个data参数bannerPicArray,把图片地址放入到里边。
/src/components/pages/ShoppingMall.vue

模版文件如下

CSS代码:

这时候你会发现CSS样式并不是我们想要的效果,这主要是用Vant组件,他有一些默认的样式,所以我们要做一些CSS的修复操作。
overflow: hidden;,clear:both;

利用Vant实现图片轮播的懒加载

引入Vant的图片懒加载组件,以后我们的项目中会有很多远程图片,所以启用图片懒加载是必须的,那正好我们这里第一次开始用远程图片,就在这里学一下图片的懒加载

然后修改一下我们的template区域,加入v-lazy="banner.imageUrl"就可以图片的懒加了。

Chrome调试技巧 模拟慢速3G网络

视频中进行讲解,作为补充内容。

总结:这节课主要学习了Swipe组件的使用和图片懒加载的用处,最后还讲解了chrome浏览器下模拟slow 3G的情况。小伙伴一定要课下练习。

第07节:easyMock和Axios的使用

2018年4月27日晚更新第七节:
花点小钱看视频

上节课学完,我在群里组织了一次关于是否讲CSS布局的投票,大家虽然有62.5%的希望不讲,当时还有54个人是希望讲的。课程开始前我也答应要全部手敲代码,所以CSS内容我会在重要的地方进行讲解并手敲代码演示。

这节课我想来讲一下easyMock的使用,Mock的使用作为前端非常重要,比如在项目开始重启,前后端一起开发,后端并无暇照顾前端接口。这时候我们可以使用Mock的方式,来模拟数据。

Mock数据准备

这里我准备好了需要Mock的JSON格式数据,在实际工作中这些需要你跟后台协商,订制统一标准后,才可以定义接口标准,如果项目很大,这个过程是需要开会协商的。

进入easy-Mock

easy-mock是比较好用的一个图形化的网站,我们完全可以使用他来模拟我们的Mock数据。
网址:https://www.easy-mock.com/
因为图形操作比较简单,我就在视频里进行演示了。

axios的引入

直接使用 npm install 进行安装。

安装之后在要使用的页面组件中进行引入。

然后在created的声明周期里取得数据

如果能取得数据后,说明已经Mock成功了,那接下来就用这些数据进行布局。这节课的内容在工作中经常使用,所以我们一定要学会。

第08节:Mock数据的使用flex布局

花点小钱看视频

这节课我们开始首页的布局,如果你flex布局和CSS掌握的很好,完全可以跳过这节课程,当初答应小伙伴们项目代码全部手写,自己挖的坑一定要自己埋上。上节课我们已经取得了mock数据。

首页商品分类栏的布局

使用了flex布局,因为采用van-row是24格布局,你5个元素是不好分的,所以使用flex布局。
1.提取Mock数据


在js代码created的axios then 方法里写入下面代码:

编写html代码


有了数据,可以把html的骨架编写上去,代码如下。

这里使用了div嵌套的方式,这样只要在外层div上使用flex布局就可以让5个元素均匀分部。

CSS样式


CSS主要采用了flex布局,flex的详细语法不进行讲解,你们可以看阮一峰大神的文章,你完全可以学的很好。

代码详细的讲解会在视频中进行。

广告Banner的布局


先在created里获取数据,然后进行html骨架编写,最后进行CSS样式的调整。

html代码编写

改造swpie组件


前面的课程已经用静态数据模拟了轮播效果,现在我们有了Mock数据,完全可以用Mack数据代替。
先获取轮播图片地址数组。

然后修改html模版中的数据绑定就可以了

总结


这节课主要的知识点就是Mock数据在项目中的使用和flex布局实战中如何进行简单布局。我希望就算小伙伴基础很好,也要把这节课的内容做出来,这样你才会跟技术胖一起把这个项目作完。

第09节:商品推荐vue-awesome-swiper

花点小钱看视频

这节会讲解首页商品推荐区域的布局和vue-awesome-swiper的使用,作一个可以左右滑动的商品推荐区域出来。学完这节课你将对vue-awesome-swiper有个很好的了解,并能轻松使用在项目和工作中。

先来简单的布局


我们先把基本的布局做好,在src/components/pages/ShoppingMall.vue,里编写如下html和CSS代码,这里只是简单的布局。

安装 vue-awesome-swiper


还是使用npm 来进行安装,我这里的安装版本是3.1.3,写文章时是最新版本,但是你看时,可能已经升级,注意查看官方文档。
github地址:https://github.com/surmon-china/vue-awesome-swiper

引入 vue-awesome-swiper 的两种方式

  • 全局引入

可以直接使用全局引入,引入代码如下:

  • 以组件形式引入

这种方式是在需要的页面以component 的形式引入,好处就是依赖性不强。

获取推荐商品数据

javascript部分的data里加入recommendGoods:[]属性,然后在created生命周期里获得.

编写swiper的html


可以查看一下效果,现在还不够完美,下节课我们会调整一些基础样式。


总结:
本节课程主要使用了vue-awesome-swiper组件,大家虽然做出了效果,但是对swiper组建的使用还不清楚,我们接下来会用几节课时间讲一下vue-awesome-swiper这个组件,因为他在项目中经常使用,而且效果还不错。

第10节:vue-awesome-swiper 详讲1

花点小钱看视频

作为一个Vuer,vue-awesome-swiper组件在开发中是经常使用的,所以个人觉的是有必要详细了解一下它的用法的。他可以作轮播图,可以作滚动。

一个最简单的轮播图


我们这里作一个单独的组件,这样不会污染项目中的文件,这个只是一个最简单默认的swiper,我们在components目录下新建一个文件夹swiper,然后新建一个swiperDefault.vue文件。写入如下代码:

代码写好后,在shoppingMall.vue文件里进行引入使用。

然后注册组件,其实上节课的代码也是可以封装成一个component的。

注册好后,直接在template里使用就可以了.

添加分页器


作这类轮播图效果,现在主流的都是添加上分页器的,就是下方的小圆点,配置这些就需要在swiper标签上使用options属性来进行配置了。
我们现在data里进行配置,代码如下:

然后在template标签里加入一个div用于显示分页器,注意的是要在swiper-slide外层。

最后是在swiper标签里加入 :options="swiperOption"。就实现了有分页期的效果。
整体代码如下:

竖屏切换效果


在配置项里直接配置direction就可以了,配置竖屏代码如下。

整体代码如下:

第11节:vue-awesome-swiper 详讲2

花点小钱看视频

上节课我们已经作了一些swiper的效果,这节课我们继续增加swiper的功能。例如:无限循环滚动,分页器可以点击选择,文章内容滚动等效果。希望小伙伴们能在教程中学到知识,让技术有所增长。

区域滚动效果

在移动布局里,在大段文章的下拉上拉时,有些老旧手机会有卡顿效果。都需要我们自己加入上划下拉的组件,这里就可以直接使用vue-awesome-swiper来解决。我们作一个组件,里边有一大段文字,然后给文字加入顺畅的下拉上拉效果。

重点看一下options的加入属性:

  • direction:’vertical’设置竖排显示

  • slidesPerView:’auto’ 设置同屏显示的数量,默认为1,这里使用auto是随意的意思。

  • freeMode:true 默认为false,普通模式:slide滑动时只滑动一格,并自动贴合wrapper,设置为true则变为free模式,slide会根据惯性滑动可能不止一格且不会贴合。

  • mousewheel:true 开启鼠标滚轮控制Swiper切换。可设置鼠标选项,或true使用默认值。

只要掌握好这些属性,其实做出文本滑动效果是非常简单的。

让分页器可以自由选择

花点小钱看视频

在实际工作当中分页器都是可以自由选择的,只要配置一下Options的clickable数据就可以了。注意这个属性要配置在pagination下面,才能起作用。

这时候再预览一下,就可以看到swiper分页器加了选择功能。

无限循环滚动

工作中还有一个需求就是无限循环滚动,不要到底了就要往回滚动,这个只要在options里加一个loop:true就可以实现了。

总结:vue-awesome-swiper还有很多好玩的配置,可以做出很多酷炫的效果,大家可以看API文档自己学习,在项目中如果用到,我会再讲解。小伙伴赶快动手练习一下吧。

第12节:首页楼层区域布局

花点小钱看视频
学了两节的vue-awesome-swiper这节课回归正题,删除这些swiper组件,然后继续我们的布局。这节课我们主要完成楼层区域的布局。楼层这里是有两个最基本的需求的,第一个是前三图是不规则形状,后边的是规则并且能根据数量自动增长的。

不规则的布局


第一步:先获取楼层1的数据

在data里注册一个floor1的数组变量floor1:[],在axios里得到数据。

看到上面这段代码,我想有小伙伴一定会吐槽,但是没有办法,如果直接在模版中使用floor1[0].image取值会报错,这可能也是vue框架的一个限制,所以只能这样完成数据绑定了。

第二步编写HTML代码

在编写HTML的时候需要注意层次结构,原则就是先统一规划大体,然后再调整局部。

第三步编写CSS样式

主要使用了flex布局和box-sizing

布局到这里,可以进行预览了。

规则部分的布局


所谓规则部分,就是由左右两列组成,用v-for可以进行循环。

第一步布局我们的html

第二步编写CSS样式

楼层标题的布局


做到这里我们的主要代码就算完成了,但是还没有楼层标题,这个部分就留个小伙伴们自己发挥了,你可以作一个自己喜欢的标题样式。

第13节:楼层组件的封装和watch使用

花点小钱看视频

首页楼层布局基本完成,但是真实项目中有很多楼层,为了代码复用和少写一些代码,我们把楼层这部分封装成一个传递参数的组件,并使用watch来监听参数的变化,达到正确渲染的目的。

编写组件

src/components/下新建一个component的文件夹,进入文件夹,新建floorComponent.vue文件,用来编写我们的楼层组件。
在编写的时候,我们先从页面中把相对应的html模版和CSS代码拷贝过来,然后再进行改造。全部组件代码如下:

由于组件中的数据是从远程拿到的,所以刚开始数据是为空的,所以组件渲染不出来。我们需要加入watch属性来监听传递过来值的变化,当变化时,我们给1,2,3副图片进行赋值操作。
最后根据赋值来改造我们template的html结构。

引入组件

ShoppingMall.vue中引入组件,首先使用import进行引入

components属性里注册组件

作完上面两部直接在template里标签的形式的使用就可以了。

使用绑定属性的形式传入需要的值,按照这种方法,就可以直接引入其他3个楼层了。

删除页面中的无用代码。

有了组件后,页面中的很多代码都变的无用了,我们需要作一下处理,这部分很简单,我就在视频中演示了。

总结: 组件的封装是Vue的一个最主要的优点,在工作中我们要学会使用组件封装,这样才能让代码结构清晰简单,可复用,大大节省了后期重构的成本。这节课的watch用法大家也要掌握好,在需要等待数据时,非常好用。

第14节:楼层组件的完善

花点小钱看视频

这节先完善一下楼层组件,加入一个标题区域。原来想把这部分留给小伙伴自己制作,发现自己制作的过程中还是有一些问题的,小伙伴加入静态的头部都没有什么问题,可是动态数据还是不知道方法。

楼层组件标题区域制作

首先在floorComponent.vue组件的template区域加入HTML代码。

然后编写一下简单的CSS样式,我相信小伙伴们作出这些东非常简单。

其次加入props属性的编写

这样我们就完成了楼层组件区域的制作,并可以在使用的时候传递过来一个标题了。

给头部区域传值

先在ShoppingMall.vue的Data里声明一个叫floorName的值。然后在axios里进行赋值。

最后修改一下在template里的写法就可以使用了。

完成其他两个楼层的代码编写

1.现在data里进行声明

2.在axios里获得数据

3.在模版template里使用组件

现在可以预览一下效果了,我们的楼层组件也算完成了,希望小伙伴们可以在课程中学到东西,用来改造自己的实际项目。

第15节:Filter在实战中的使用

花点小钱看视频

作电商项目对钱的格式是有一定要求的,而JavaScript恰恰在小数部分有一些瑕疵,就需要我们对钱的格式有一个处理。有些小伙伴会认为在vue的JavaScript部分里处理就好,其实我认为这类处理写一个过滤器就很方便了。下面我们就以钱的格式为例,写一个过滤器,然后以后只要涉及到钱的部分,我们都是用这个过滤器。

编写过滤器通用方法

因为过滤器都是需要在很多组建中进行使用的,所以要编写一个比较通用的方法。先在src文件夹下建立一个filter文件夹,然后在filter文件夹下建立一个moneyFilter.js文件。
这时候有可以编写格式化钱的方法,其实很简单,我们这里用了toFixed()方法。

上边的方法写的并不优雅,所以我们后边会进行修改,让他变的优雅些,这里只是做一个错误的示范而已。因为很多小伙伴问我如何优化代码,让代码变的优雅。我觉的这个很难讲清楚,所以在这里举个例子。

引入Filter

注意这里的@代表的是src目录的意思,这个是webpack的配置,我们可以在/build/webpack.base.conf.js里找到这个配置项。

编写vue里的filter属性

vue是支持fitler属性的,之前只是方法,现在要在vue文件里编写属性。

这里需要注意的是你fitler的名字可以随便起,但是你用的toMoney方法,要和你上边引入的一样。

在template中使用filter

直接在使用价格的地方使用{{item.price | moneyFilter}}就可以了。

优化我们的filter通用方法

上边的通用方法写的实在是太难看了,所以我们需要进行优化一下。

总结: Filter在实际工作中是并用的一个技能,虽然很简单,但是你要反复琢磨你写的代码是否可以优化或者是否可以精简。

第16节:首页热卖模块的Van-list组件使用

花点小钱看视频

这节课作一下首页商品的热卖部分制作,也是对组件封装的一个再次联系吧。这节课完事我会集中讲解一下Axios的使用,因为从留言和微信提问来看,小伙伴对这部分的知识还是比较模糊的。

html+CSS部分的编写

从这节课开始,我会加快HTML+CSS的讲解,甚至省略CSS部分的编写,而把更多的精力放到我们Vue代码和组件封装上来,但是在文字版还是会完整的贴出这些代码。目的是为了小伙伴能无痛 的做出这个项目。

Html代码,这些代码是卸载ShoppingMall.vue文件中的.

CSS代码部分,在视频中我们就不在讲解了,而是采用复制的方式

Vant列表(List)组件的使用

因为我们希望作一个下拉加载更多的功能,你当然可以完全自己手写一个这样的组件,工作中由于任务会比较紧张,所以这部分基本不会给你太多时间来写,也不要重复造轮子。可以直接使用Vant的List组件。

1.引入List组件:在/src/App.vue文件中引入List组件

2.构造数据:现在data里声明hotGoods

3.在axios里获得数据

4.加入List组件,并使用van-row布局

商品显示组件的编写

因为这个商品列表组件会在首页用到,会在列表页用到,会在搜索页用到。所以封装成一个通用的组件是很好的选择,封装后会大大降低开发难度。

新建/src/component/goodsInfoComponent.vue文件,用来制作商品组件。

编写完组件,直接在ShoppingMall.vue里引入就可以了,还又在components里声明一下。

在模版中使用组件

第17节:编写后台服务接口配置文件

花点小钱看视频

在开发中我们现在直接把数据接口文件写到了axios中,这样写如果地址改变或者接口改变,我们需要进入业务逻辑代码进行修改,维护起来会非常的麻烦。那这节课我们就把项目中用到的接口都单独拿出来,作一个接口配置文件serviceAPI.config.js

编写接口配置文件

项目src目录下建立serviceAPI.config.js,然后打开编写如下代码。

编写好后,我们可以直接在要使用的文件中用import的形式引入。

引入后就可以直接使用了。

总结:这节课的内容虽然很短,但是这是作配置文件的一种方法,在项目中你想作任何配置文件完全可以使用这节所学的内容。希望小伙伴们可以把这种最基本的方法学会,并应用在工作中。

第18节:安装Koa2到项目中来

花点小钱看视频
前端部分已经学的差不多了,现在需要作一些后端服务来支撑前端的数据了,也就是Koa2和MongoDB要登场了。为了演示方便,我们就不单独起个项目了,而是在这个项目中新建一个Service文件夹。

安装Koa和MongoDB到项目中

1.首先在项目根目录下建立文件夹service,然后进入文件。

2.使用npm init -y 生成并初始化package.json 文件。

3.在终端中使用npm来安装koa

编写一个Hello World 测试一下安装是否成功

安装好后,写个Hello World 测试,也帮助小伙伴们回忆一下Koa最基本的语法(如果看到这里,你还没有学习Koa2的基础课程),那你需要停下来转到Koa2去学习一下基础,然后回来再进行学习。

编写好以后,使用node index.js来启动服务,然后在浏览器中输入http://loacalhost:3000,如果正常显示hell koa2 说明我们的koa2已经安装成功。

总结:这节课就是把Koa2安装好,然后测试一下可以使用就可以了。下节课我们安装我们的MongoDB数据库。

第19节:安装MongoDB数据库

花点小钱看视频
今天我们更新两集视频,因为这两集都比较简单,以前也讲过,但是为了课程的完整性,我们还是需要再讲一下,以免小伙伴在操作时出现断档,导致向下做不出来。

安装步骤

  1. 去官网下载MongoDB,https://www.mongodb.com/ ,在网站中找到Download按钮。下载会有点忙, 国外的服务器,你懂的。
  2. 下载后进行安装,安装没什么难度,但是对于新手建议选择默认安装,而不选择自己配置。等我们完全熟悉后再定制式配置。
  3. 安装时如果有安全软件,会报一些拦截,一律允许就好,不允许会安装失败的。
  4. 安装完成后,需要配置“环境变量”,目的是再命令行中直接使用,而不需要输入很长的路径了。(此步骤观看视频)

运行MongoDB服务端


安装好MongoDB数据库后,我们需要启用服务端才能使用。启用服务的命令是:Mongod。

  1. 打开命令行:先打开运行(快捷键win+R),然后输入cmd后回车,就可以打开命令行工具。
  2. 执行mongod:在命令中直接输入mongod,但是你会发现服务并没有启动,报了一个exception,服务停止了。
  3. 新建文件夹:出现上边的错误,是因为我们没有简历Mongodb需要的文件夹,一般是安装盘的根目录,建立data/db,这两个文件夹。
  4. 运行mongod:这时候服务就可以开启了,链接默认端口是27017。

下载Robo3


由于我们是作项目,所以图形界面比较直观,我们上边并没有安装图形界面,这里我们使用Robo3来弥补一下。

下载地址:https://robomongo.org/download

然后就是下一步下一步安装了。

总结:这节课就是把MongoDB安装好,Koa2和MongoDB都安装好了,我们就可以愉快的编程了。

第20节: Koa用Mongoose连接数据库(1)

花点小钱看视频
在作软件的时候,我们经常会遇到MVC这个词(Model View Controller),那在Model和Controller这一层经常需要一些工具来进行对接。Mongoose就是Koa和MongoDB的粘合材料(其实也相当于一个驱动),帮助我们完成数据库的操作和通讯。要实现通讯第一步就是实现粘合,软件里叫做连接数据库。这就是这节课我们需要讲的内容。

Mongoose概念

Mongoose是一个开源的封装好的实现Node和MongoDB数据通讯的数据建模库。

Mongoose的安装

还是使用npm来进行安装。

连接数据库

我们在项目的service文件夹下建立一个database文件夹,用来存放和数据库操作有关的文件。在database文件夹下,建立一个init.js文件,用来作数据库的连接和一些初始化的事情。

/service/database/init.js

然后在/service/index.js里加入立即执行函数,在使用前记得用require进行引入 connect

然后我们在中终端里使用node index.js执行一下,可以看到数据库已经连接成功了。

总结:这节课的内容只是简单的连接,还有一些错误或者是连接中断的业务代码没有编写,我们留到下一节进行编写。作程序都是这样的,先要实现主要功能,然后考试考虑意外情况,减少代码错误。

第21节: Koa用Mongoose连接数据库(2)

花点小钱看视频
上节课已经作了基本的数据库连接,并且已经连接成功。但是如果数据没有开启,或网络出现问题,我们并没有作这些意外处理,在写程序时,当主要功能完成时,我们要作意外处理和逻辑处理,让程序增加健壮性。

增加Promise的支持

我们在作这个init.js文件时,必须确保先连接数据库后,再作其他事情,所以我们需要在所有代码的外层增加一个Promise

连接失败自动重连

一般数据库连接失败,我们会重新连接,但这个重连也是需要有一个次数的,比如连接3次失败,我们在服务端抛出异常。
首先声明一个最大连接数maxConnectTimes.

当连接断开时,我们进行重连的代码如下:

当连接断开时,我们需要把连接次数加1,并重新连接数据库。当重连次数超过3次后,我们抛出了异常,并用reject()通知了promise。

同样当连接出错时,我们也要进行重连操作。

全部文件

第22节: Mongoose的Schema建模介绍

花点小钱看视频

数据库已经可以连接成功了,这节课学习一下如何建模,也就是定义Schema,他相当于MongoDB数据库的一个映射。Schema是一种以文件形式存储的数据库模型骨架,无法直接通往数据库端,也就是说它不具备对数据库的操作能力。Schema是以key-value形式Json格式的数据。

Schema中的数据类型

  • String :字符串类型
  • Number :数字类型
  • Date : 日期类型
  • Boolean: 布尔类型
  • Buffer : NodeJS buffer 类型
  • ObjectID : 主键,一种特殊而且非常重要的类型
  • Mixed :混合类型
  • Array :集合类型

Mongoose中的三个概念

  • schema :用来定义表的模版,实现和MongoDB数据库的映射。用来实现每个字段的类型,长度,映射的字段,不具备表的操作能力。
  • model :具备某张表操作能力的一个集合,是mongoose的核心能力。我们说的模型就是这个Mondel。
  • entity :类似记录,由Model创建的实体,也具有影响数据库的操作能力。

初学定义一个用户Schema

这节我们先以用户表为例,定义一个基本数据模型,当然这并不完善,我们会在后边的几节课把这个模型完善,并加入一些安全的机制进群。
/servcie/database/文件夹下新建一个schema文件夹,然后新建一个User.js文件.

第23节: 载入Schema和插入查出数据

花点小钱看视频

Schema建立好以后,需要我们载入这些数据库,当然最好的方法就是在后台服务已启动的时候就把载入做好,所以我们在service/init.js里作这件事,然后在index.js里直接执行。

载入所有Schema

直接在service\init.js 先引入一个glob和一个resolve

首先安装glob

  • glob:node的glob模块允许你使用 * 等符号,来写一个glob规则,像在shell里一样,获取匹配对应规则文件。
  • resolve: 将一系列路径或路径段解析为绝对路径。

了解两个引入的模块用法后,我们就可以一次性引入所有的Schema文件了。

使用了glob.sync同步引入所有的schema文件,然后用forEach的方法require(引入)进来。这比你一条条引入要优雅的多。

插入一条数据

作了这么久的Mongoose学习,还没有真正操控数据库,比如插入和读出数据库中的内容,现在我们就开始这个操作。

记得在操作数据库前先引入我们的Mongoose和我们刚写好的initSchemas:

引入好后,我们直接在service/index.js的立即执行函数里插入一天User数据

读出已经插入进去的数据

这里我们只读出了一条,小伙伴们可以试着读出多条。

完整的index.js代码如下:

第24节: 打造安全的用户密码加密机制

花点小钱看视频

通过学习,虽然可以对数据库的可以进行插入操作了,但是现在使用的都是普通的明文密码,这在实际工作中是肯定不允许,需要对密码进行加密和加盐的处理。

加密处理

密码的加密有很多种加密算法,比如我们使用的MD5加密或者hash256加密算法,其实他们都是hash的算法。就是把你的密码进行一次不可逆的编译,这样就算别人得到了这个密码值,也不能进行直接登录操作。
我们可以通过(http://www.atool.org/hash.php) 网站,直观的看一下加密的算法。

加盐处理

有了加密的处理,我们的密码就安全多了,但是有用户的密码设置的太过简单,很好进行暴力破解或者用彩虹表破解,这时候感觉我们的密码又不堪一击了。这时候我们要使用加盐技术,其实就是把原来的密码里,加入一些其他的字符串,并且我们可以自己设置加入字符串的强度。

把加盐的数据库密码进行hash处理后,再存入数据库就比较安全了。

当然还有很多更严谨更可靠的加密机制,小伙伴可以自行探索一下,这个项目我们就是用加盐加密的方法处理用户的密码。

bcrypt的使用

简介: bcrypt是一种跨平台的文件加密工具。bcrypt 使用的是布鲁斯·施内尔在1993年发布的 Blowfish 加密算法。由它加密的文件可在所有支持的操作系统和处理器上进行转移。它的口令必须是8至56个字符,并将在内部被转化为448位的密钥。

首先是用npm 进行安装

这里注意如果你安装失败了,试着是用淘宝源来进行安装,因为bcrypt里边的二进制包的下载可能是被墙掉了。

安装完成后就是引入bcrypt

然后是用pre每次进行保存时都进行加盐加密的操作。(具体代码解释,视频中进行讲解)

第25节: 编写注册页面前端视图

花点小钱看视频
不好意思,这一周都在出差,今天到家马上给大家编写教材。我们已经学会了用户表Schema的建立,并进行了安全机制的处理。这节开始我们就把用户注册登录这一部分进行完善。当你把这部分学完,你一定会对Koa+vue的前后台全栈开发有更深的理解。(这节课主要讲页面的编写,基础好的同学可以跳过本节,自己作更漂亮的注册页面)

注册页面的vue模板编写

1.新建页面

我们先来新建一个vue的模版页面,src/components/pages/Register.vue

2.编写vue的路由配置文件 router/index.js

3.引入vant的两个插件FieldNavBar

4.编写模版文件,由于我们已经对vue的模板编写很熟悉了,这里就不作过多介绍了。(直接上代码,视频中详细讲解)

第26节: Koa2的用户操作的路由模块化

花点小钱看视频

在学习基础知识的时候,我们已经讲过·koa-router这个插件,但是所有的路由都写在service/idnex.js里显然不是正确的选择,这会导致我们的index.js页面越来越臃肿,最后变的没办法维护。我们需要把Koa程序模块化,我们也叫做路由模块化。

安装koa-router

我们使用npm来安装koa-router,需要注意的是在终端中我们要进入到service文件夹下,然后再输入如下命令:

我现在使用的版本是7.4.0,大家一定要注意一下自己的版本,如果版本不同,可能学习的时候稍有区别。

新建一个User.js的文件

新建一个appApi的文件夹,然后在进入文件夹,新建User.js的文件。有关User.js的操作,我们以后都会放到这个文件下,就是要编写的供前台使用的接口程序了。

编写我们User.js文件:(视频中会详细讲解)

让路由模块化

接下来,我们需要把这个文件和koa-router加入到service/idnex.js下面,实现可以访问。
1.首先在index.js的文件顶部,引入koa-router

2.引入我们的user.js模块

3.装载所有子路由

  1. 加载路由中间件

这四步作完了,我们就可以在浏览器中实验一下我们的模块化路由是否起作用了。在浏览器中输入,http://localhost:3000/user,已经可以出现我们设定好的页面了。

总结:通过这种简单的模块化路由机制,我们就实现了文件的分离,当然这并不是最完美的方案,如果对要求比较高的小伙伴,可以看一下egg.js的路由写法或者直接使用egg.js来进行开发。当然现在的这种做法完全可以应付小型项目的开发了。

第27节:打通注册用户的前后端通讯

花点小钱看视频

这节我们要把前后端进行打通,使用API接口的形式可以互相同通讯和传递数据。看起来比较简单,但是这节课的内容还是比较多的,希望小伙伴能认真对待这节内容,然后课下练习。

安装koa-bodyparser中间件

首先我们要接到前端发过来的请求,这时候需要安装koa-bodyparser中间件,我们使用npm来进行安装。
记得先进入到service目录下,在使用npm进行安装。

这里使用的版本是4.2.1

安装好后,在service/index.js文件中注册和引入中间件。

前台的axios请求处理

1.在register.vue头部引入axios

2.修改serviceAPI.config.js接口配置文件
需要对接口配置文件作一些设置,加入我们的注册接口地址。

这里主要加入了LOCALURL常量的声明,用于存储本地请求路径,和在URL里增加了registerUser接口的地址配置。

3.引入接口配置文件

4.编写aixos用户注册方法
进入到src/components/pages/Register.vue文件下,在methods属性里,写入如下方法

5.把注册按钮绑定axiosRegisterUser方法

让koa2支持跨域请求

跨域对于新手小伙伴来说是个非常头疼的问题,在微信或者QQ群里很多小伙伴问我跨域的问题,当然跨域也有多种解决方案,但是个人认为最完美的解决方案是在后台设置支持跨域。对于这个项目后台就是我们的Koa2服务。

安装koa2-cors中间件

在koa2里解决跨域的中间件叫koa2-cors,我们先进入service文件夹,然后直接使用npm来进行安装。

安装完成后,记得要在service/index.js文件中引入和注册(使用)一下中间件:

编写koa2接收前台数据的方法

这时候我们已经万事俱备了,打通了前台和后台数据互通的基本环节。现在主要开心的写一个后台的数据接口方法,就可以实现接收数据,并回传数据了。

进入service/appApi/user.js文件,修改resgister路由接口下的代码,记得把get方法换成post方法。

到此步我们已经完成了前后台数据的互通,可以打开服务接口,开启浏览器,测试一波了。小伙伴们是否传递了数据,并在前台接收到了返回。

第28节:用户注册数据库操作

花点小钱看视频

这节课我们主要用户注册时,如何插入到数据库中,实现真正的Vue、Koa2、Mongodb全面互通。相信学完这节课,小伙伴们都可以开始自己向下作项目,并且使用一些小项目练手了。掌握了这节,你已经算是一个准全栈工程师了。有了编写前端+后端的能力。更多的就是练习和积累相关知识了。

Koa2的User.js 接口的完善

1.首先在service/appApi/user.js下引入mongose,这样就可以操作我们的Schema了。

2.编写 register接口的程序,代码的注释已经很详细,小伙伴们可以直接看注释。

前端Vue的业务处理

上节课我们只是用axios发送了一个请求,对返回的结果只是简单的console.log()了一下,现在我们把这些代码进行补全,根据koa端返回的code进行不同的提示。

提示我们可以使用vant的轻提示插件Toast,先引入我们的Toast组件,这个直接在Register.vue下引入就可以了。

具体业务逻辑代码如下:

然后我们可以测试一波了,看看是否可以插入数据库,并给用户非常友好的提示。

总结: 学了将近30节,小伙伴终于可以实现全栈的操作了,你现在可以想想自己学完后作一些什么小项目,我们可以按照自己的想法,用程序构建理想的世界了,这是无比美好的事情。

第29节:注册的防重复提交

花点小钱看视频

其实我原本想这样就结束用户注册的讲解,但是出于一个正直、善良的程序员是不忍心这样坑害一起进步的小伙伴的,所以我又加了这节课。把注册中需要注册的细节给大家讲明白,防止工作中被项目组长骂。防重复提交一般是在前端来处理的,为什么会产生重复提交的现象那?比如用户的手机网速很慢,用户在1秒钟内还没得到结果,他认为可能是没点击到,就又点击了,这时候后台就被请求了两次。如果我们作的是千万级的程序,没多一次请求,都会给服务器带来压力,在老板眼里这都是钱。

1.在按钮上绑定loading属性

我们先打开src/components/pages/Register.vue文件,找到我们的注册按钮,然后在按钮上绑定loadding属性。

然后在下面的的javascript(脚本)部分的data中声明openLoading属性

2.改写我们的注册方法

花点小钱看视频

防重复提交需要在我们进入注册业务逻辑的时候就开始实行,也就是点击注册按钮这一步时。所以我们要改造现在已经写好的axiosRegisterUser()方法,加入一些防重复提交的逻辑。

在一开始进入注册方法的时候,作的第一件事就是把注册按钮变成loading状态。然后在注册失败的时候取消loading状态,注册成功就跳转到个人中心页面(由于还没制作,先跳转到商城首页)。这样在前台就防止了重复提交。

解决一个网友的小问题

有细心的网友会发现我们的Mongodb数据库中的表,在程序中定义的是user而真实数据库中变成了users,这对于处女作是不能忍受的,作IT的就要有完全的掌控感。其实只要在Schema里配置一下就可以解决这个问题,打开servcie/database/schema/User.js修改new的时候的代码。加入{collection:'user'}.

第30节:注册时的前端验证

花点小钱看视频

现在的注册是可以提交null值的,比如用户名为空或者密码为空都是可以提交到Koa服务端进行处理的,在工作中这是绝对不允许的,所以必须从前端就可以作表单验证,然后后端也需要作数据验证。这节课我们就学一下前端如何作表单验证。

1.首先为Field绑定error-message属性

vant框架提供的field属性提供了错误提示的机制,就是error-message属性。现在script的data里注册两个属性,usernameErrorMsgpasswordErrorMsg当值不符时,作用户提示使用。

开始这两个值都为空,不给用户作任何提示操作,只有按下注册按钮时才进行检测提示。

2.编写验证方法checkFrom

在methods里增加一个checkForm()方法,用来专门验证表单信息,详细代码如下:

上面的代码,先验证了用户名不能少于5位,然后验证了密码不能少于6位,如果一个条件不满足方法都会返回false,只有都满足的情况下,才会返回true。

3.重新编写注册方法

这时我们把一个注册分为了两个业务逻辑,第一步是检验表单数据,第二步是向端口发送数据等待结果。如果直接在以前的axisoRegisterUser()方法上改造显得很不优雅,代码会很长,维护起来会增加额外的成本。新建一个registerAction()方法。

上面的代码是当检测表单返回true时,也就是通过时才进行条用axios方法。当然这个用if来表示显得非常的臃肿,我们可以用&&来实现。

4.重新绑定注册按钮事件

原来的按钮事件直接调用了axisoRegisterUser()方法,这时候我们要更换为新的registerAction()方法。

通过四步的修改,现在可以打开浏览器,来看一下我们的成果了。下节课我们开始学习登录模块的制作。

第31节:Vue的登录界面制作和路由配置

花点小钱看视频

这节开始作登录部分的一些操作,登录部分我们尽量讲的细致一些,因为有很多小伙伴都在问登录部分的问题。登录也是任何一个项目必须使用的一个模块。好准备好,开始学习吧。

1.复制Register.vue文件并进行修改

因为登录和注册的页面很像,这里我们就直接复制注册的页面。复制Register.vue,然后粘贴一个,重新命名为Login.vue。然后进行方法名和基本的方法修改。