Vue.js+Koa2电商实战笔记

1.项目初始化

 

npm -v  //确认安装node基本环境

npm i vue-cli -g //-g 全局安装vue-cli

vue init webpack //使用webpack模板安装

 

不安装eslint,eslint用于多人开发，按照谷歌和facebook的代码标准开发。

unit --no //大公司有专门测试人员

ese  --no

 

 

package-lock.json  别人不会因为版本不同而运行不了。

README.md 如何运行 关键点  项目注意事项 API接口 都写在里面。

 

1. 优雅引入Vant样式组件库

 

Vant简介

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

安装：

npm i vant -S  //S 用于生产环境

npm install vant --save --registry=https://registry.npm.taobao.org//可以提升速度

 

全局引入：main.js

import Vant from 'vant'

import 'vant/lib/vant-css/index.css'

Vue.use(Vant)

 

不建议全局引入整个文件，把整个组件库引入会导致打开好慢，应按需引入。

优雅的引入Vant：打包文件会减少很多，速度会加快。

npm i babel-plugin-import -D

完整：

npm install babel-plugin-import --save-dev

 

在.babelrc中配置plugins（插件）

"plugins": [

    "transform-vue-jsx",

    "transform-runtime",

    ["import",{"libraryName":"vant","style":true}]

  ]

在src/main.js里加入下面的代码：

import { Button } from 'vant'

Vue.use(Button)

 

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

 主要按钮

 

3.移动端屏幕适配基础

 

rem单位介绍

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

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

//得到手机屏幕的宽度

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

//得到html的Dom元素

let htmlDom = document.getElementsByTagName('html')[0];

//大屏设备会比较难看

if(htmlWidth>750){

htmlWidth=750

}

//设置根元素字体大小

htmlDom.style.fontSize= htmlWidth/20 + 'px'; //以ip5 宽320PX 字体16PX为基准

 

 

1. 首页布局

三个基础知识：
1. 首页路由的配置：

routes: [

{path:"/",name:'ShoppingMall',component:ShoppingMall},

]

2. 建立首页组件（components）：先把首页组件建立起来。插件：vue VSCode Snippets

   vba生成基本框架代码

   vda 生成data

3. 讲解Vant的布局方法：24格布局法

   按需引入组件 mai.js

import {Button,Row,Col} from 'vant'

Vue.use(Button).use(Row).use(Col)

     --vue --

 class="vanrow">

 span="8">span8

 span="8">span8

 span="8">span8

 

 

5.首页搜索布局

在vue-cli使用less

npm install less less-loader --save-dev

 scoped lang="less">

引入方法：

@import url(../../**.less)   不要用  @import  "../../**.less"

 

引入阿里字体：

把字体下载到src/assets/iconfont目录

main.js

import './assets/iconfont/iconfont.css'

 class="iconfont icon-iconfontzhizuobiaozhun16">

 

插入图片方式：保证build

<van-col span="3"><img :src="locationIcon" width="100%" />van-col>

data() {

        return {

            locationIcon: require('../../assets/images/location.png')

        }

    }

 

 

1. 首页轮播图制作

 

Swipe 轮播

https://youzan.github.io/vant/#/zh-CN/swipe

 

Lazyload 图片懒加载

https://youzan.github.io/vant/#/zh-CN/lazyload

 

 

1. easyMock和axios的使用

 

Easy-mock 创建接口数据

https://www.easy-mock.com/

 

 

安装axios

npm i -D axios

 

在shoppingMall.vue 引入axios

import axios form ‘axios’

 

created(){

axios({

url:"https://www.easy-mock.com/mock/5b6eaead121e7e30aea261d2/smile/index",

method:"get"

}).then(response=>{

console.log(response)

}).catch(error=>{

console.log(error)

})

}

 

 

8.mock数据使用和flex布局

 

div.type-bar>div>img+span

 

.type-bar{

background-color: #fff;

margin:0 .3rem .3rem .3rem;

border-radius: .3rem;

font-size:14px;

display:flex;

flex-direction:row; //横向布局

flex-wrap:nowrap;//不换行

  div{

padding:.3rem;

font-size:12px;

text-align: center;

flex:1;

}

}

 

换行实例

ul {

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    li {

      flex: 1;

      width: 25%;

      min-width: 25%;

      max-width: 25%;

｝

 

获取数据并渲染

if(response.status == 200){

this.category = response.data.data.category

this.adBanner = response.data.data.advertesPicture.PICTURE_ADDRESS

this.bannerPicArray = response.data.data.slides

}

 

1. vue-awesome-swipe 

 

npm install vue-awesome-swiper --save

 

全局引入：（不推荐，有些页面不需要使用）

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

 

组件形式引入：

import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {

  components: {

    swiper,

    swiperSlide

  }

}

 

 

 :options="swiperOption">

 v-for="(item,index) in recommendGoods " :key="index" >

 class="recommend-item">

 :src="item.image" width="80%">

{{item.goodsName}}

￥{{item.price}}(￥{{item.mallPrice}})

 

 

 

data() {

return {

swiperOption:{

          slidesPerView:3  //一屏显示数量 3

}

}

},

 

1. vue-awesome-swiper详讲

 

添加分页器

swiperOption:{

        loop:true,//无限循环

    pagination:{

        el:'.swiper-pagination'，

                clickable:true，// 点击分页器可以切换

    }

}

在swiper-slide外层

<div class="swiper-pagination" slot="pagination">div>

<template>

  <div >

      <swiper :options="swiperOption">

        <swiper-slide class="swiper-slide" v-for="(item, index) in slide" :key="index">

           Slide {{item}} 

        swiper-slide>

        <div class="swiper-pagination" slot="pagination">div>

      swiper>

  div>

template>

竖屏切换效果

swiperOption:{

    direction:'vertical',

    pagination:{

        el:'.swiper-pagination'

    }

}

区域滚动效果

<template>

  <div >

      <swiper class="swiper" :options="swiperOption">

        <swiper-slide class="text">

            <div class="centent">

               一大堆文章.........

            div>

        swiper-slide>

      swiper>

  div>

template>

 

11任务13：首页楼层效果制作

Img 外套一个 div ,把div背景色设置与图片颜色相同，然后再设置div边框，div设置为怪异盒模型。

box-sizing: border-box;

 

12楼层组件封装和watch使用技巧

 

使用组件三部曲：

 

导入

import floorComponent from '../component/floorComponent'

注册

components:{

floorComponent

}

使用：

 :floorData="floor1">//传递数据

 

封装组件：

 

接收数据

props:['floorData']

设置好数据：

data() {

return {

floorData0:{},

floorData1:{},

floorData2:{}

}

}

 

获取数据，因为是异步请求，必须监控数据，因为不会马上接收到数据

watch:{

floorData:function(val){

this.floorData0 = this.floorData[0]

this.floorData1 = this.floorData[1]

this.floorData2 = this.floorData[2]

}

}

 

 使用方法：

 watch:{
example0(curVal,oldVal){
console.log(curVal,oldVal);
}

}

13.Filter使用和代码优化

使用

￥{{item.price|moneyFilter}}(￥{{item.mallPrice|moneyFilter}})

 

引入

import {toMoney} from '@/filter/moneyFilter.js'

 

调用：

filters:{

moneyFilter(money){

return toMoney(money)

}

}

 

--moneyFilter.js--

 

export function toMoney(money){

let newMoney = money

if(newMoney){

newMoney = newMoney.toFixed(2)

}else{

newMoney = 0;

newMoney = newMoney.toFixed(2)

}

return newMoney

}

=====优化后======>

export function toMoney(money=0){

return money.toFixed(2)

}

 

 

14.首页热卖模块的Van-list组件使用

 class="hot-area">

 class="hot-title">热卖商品

 class="hot-goods">

 //van-list 可以下拉刷新

 gutter="20">

      span="12" v-for="(item,index) in hotGoods" :key="index">

     //对单个商品抽出来做组件

 :goodsId="item.goodsId" :goodsImage="item.image" :goodsName="item.name" :goodsPrice="item.price">

import hotgoodComponent from '../component/hotgoodComponent'

components:{

goodsInfo:hotgoodComponent

},

---hotgoodComponent.vue---

 

 

 

15.服务接口API配置文件制作

把要请求的接口提出来做成一个文件serviceAPI.config.js

const BASEURL = "https://www.easy-mock.com/mock/5ae2eeb23fbbf24d8cd7f0b6/SmileVue/"

const LOCALURL = "http://localhost:3000/"

const URL ={

getShopingMallInfo : BASEURL+'index', //商城首页所有信息

getGoodsInfo : BASEURL+'getGoodsInfo',

registerUser : LOCALURL+'user/register', //用户注册接口

login : LOCALURL+'user/login', //用户登录接口

getDetailGoodsInfo : LOCALURL+'goods/getDetailGoodsInfo', //获取商品详情

getCateGoryList : LOCALURL+'goods/getCateGoryList', //得到大类信息

getCateGorySubList : LOCALURL+'goods/getCategorySubList', //得到小类信息

getGoodsListByCategorySubID : LOCALURL+'goods/getGoodsListByCategorySubID', //得到小类商品信息

}

module.exports = URL //暴露url对象出去

 

调用：

import url from '@/serviceAPI.config.js'

 

axios({

url:url.getShopingMallInfo,

method:"get"

}).then(...)

 

 

1. koa2  mongodb  Robo 3T

 

Koa2 前端服务器

新建service目录，启动一个最基本的服务

const Koa = require("koa")

const app = new Koa();

app.use(async(ctx)=>{

ctx.body = "hello,world"

})

app.listen(3000);

console.log("app is start")

 

 

Mongodb

1.安装 3.4 版本

2.设置环境变量

C:\Program Files\MongoDB\Server\3.4\bin

1. 建立目录 c:\data\db
2. 运行：mongod

 

Robo 3T

建立连接

 

 

 

 

1. Koa用Mongoose连接数据库

 

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

Mongoose的安装

npm install mongoose --save

 

==service/database/init.js==

const mongoose = require('mongoose')

const db = "mongodb://localhost/smile-db" //创建一个smile-db的数据库

exports.connect = ()=>{

//连接数据库

mongoose.connect(db)

let maxConnectTimes = 0 

return new Promise((resolve,reject)=>{

//把所有连接放到这里//增加数据库监听事件

mongoose.connection.on('disconnected',()=>{

console.log('***********数据库断开***********')

if(maxConnectTimes<3){ //当失败，尝试3次连接

maxConnectTimes++

mongoose.connect(db)

}else{

     reject()

     throw new Error('数据库出现问题，程序无法搞定，请人为修理......')

}

})

mongoose.connection.on('error',err=>{

console.log('***********数据库错误***********')

if(maxConnectTimes<3){

maxConnectTimes++

mongoose.connect(db)

}else{

reject(err)

throw new Error('数据库出现问题，程序无法搞定，请人为修理......')

}

})

//链接打开的时

mongoose.connection.once('open',()=>{

console.log('MongoDB connected successfully')

resolve()

})

})

}

 

===========service/index.js

const { connect } = require('./database/init.js')

 

;(async () =>{

await connect()

})()

 

18.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创建的实体，也具有影响数据库的操作能力。

在/servcie/database/文件夹下新建一个schema文件夹，然后新建一个User.js文件

 

const mongoose = require('mongoose')    //引入Mongoose

const Schema = mongoose.Schema          //声明Schema

let ObjectId = Schema.Types.ObjectId    //声明Object类型

//创建我们的用户Schema

const userSchema = new Schema({

    UserId:ObjectId,

    userName:{unique:true,type:String},

    password:String,

    createAt:{type:Date,default:Date.now()},

    lastLoginAt:{type:Date,default:Date.now()}

})

//发布模型

mongoose.model('User',userSchema)

 

19.载入Schema和插入查出数据

 

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

载入所有Schema

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

首先安装glob

npm install glob --save

 

const glob = require('glob')

const {resolve} = require('path')

 

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

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

exports.initSchemas = () =>{

    glob.sync(resolve(__dirname,'./schema/','**/*.js')).forEach(require)

}

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

 

插入一条数据

====index.js=======

const mongoose = require('mongoose')

const {connect , initSchemas} = require('./database/init.js')

我们直接在service/index.js的立即执行函数里插入一条User数据

;(async () =>{

    await connect()

    initSchemas()

    const User = mongoose.model('User')

    let oneUser = new User({userName:'jspang',password:'123456'})

    oneUser.save().then(()=>{

        console.log('插入成功')

    })

 

})()

 读出已经插入进去的数据

let  users = await User.findOne({}).exec()

console.log('------------------')

console.log(users)

console.log('------------------')

 

 

exec() 方法用于检索字符串中的正则表达式的匹配。

RegExpObject.exec(string)

 

19.打造安全的用户密码加密机制

加密处理

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

加盐处理

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

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

bcrypt的使用

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

首先是用npm 进行安装

npm instal --save bcrypt

引入bcrypt

const bcrypt = require('bcrypt')

然后是用pre每次进行保存时都进行加盐加密的操作。

const SALT_WORK_FACTOR = 10//加密强度

 

/每次存储数据时都要执行

userSchema.pre('save', function(next){

    //let user = this

    console.log(this)

    bcrypt.genSalt( SALT_WORK_FACTOR,(err,salt)=>{

        if(err) return next(err)

        bcrypt.hash(this.password,salt, (err,hash)=>{

            if(err) return next(err)

            this.password = hash

            next()

        }) 

 

    })

})

20.注册页面

 

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

 

import Register from '@/components/pages/Register'

export default new Router({

  routes: [

    {path: '/',name: 'ShoppingMall',component: ShoppingMall},

    {path: '/register',name: 'Register',component: Register},

  ]

})

--Register.vue--

<template>

    <div>

       <van-nav-bar

        title="用户注册"

        left-text="返回"

        left-arrow

        @click-left="goBack"

        />

 

        <div class="register-panel">

        <van-field

            v-model="username"

            label="用户名"

            icon="clear"

            placeholder="请输入用户名"

            required

            @click-icon="username = ''"

        />

 

        <van-field

            v-model="password"

            type="password"

            label="密码"

            placeholder="请输入密码"

            required

        />

        <div class="register-button">

            <van-button type="primary" size="large">马上注册van-button>

        div>

       div>

 

    div>

template>

 

 

21.Koa2的用户操作的路由模块化

 

安装路由中间件

npm install koa-router --save

 

新建一个appApi的文件夹

 

--service/appApi/User.js--

const Router = require ('koa-router')

let router = new Router()

router.get('/',async(ctx)=>{

    ctx.body="这是用户操作首页"

})

router.get('/register',async(ctx)=>{

    ctx.body="用户注册接口"

})

module.exports=router;

 

--service/idnex.js--

const Router = require('koa-router')

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

let user = require('./appApi/user.js')

//装载所有子路由

let router = new Router();

router.use('/user',user.routes())

//加载路由中间件

 

app.use(router.routes())

app.use(router.allowedMethods())

 

22.打通注册用户的前后端通讯

Post 请求中间件：

npm install --save koa-bodyparser 

---service/index.js---

const bodyParser = require('koa-bodyparser')

app.use(bodyParser());

 

前端的axios请求处理

---register.vue---

<van-button type="primary" @click="axiosRegisterUser" size="large">马上注册van-button>

 

import axios from 'axios'

在methods属性里，写入如下方法

axiosRegisterUser(){

        axios({

        url: url.registerUser,

        method: 'post',

        data:{

            username:this.username,

            password:this.password 

        }

    })

    .then(response => {

        console.log(response)

    })

    .catch((error) => {

        console.log(error)

    })

}

koa2支持跨域请求

安装koa2-cors中间件

npm install --save koa2-cors

const cors = require('koa2-cors')

app.use(cors())

 

---service/appApi/user.js----

router.post('/register',async(ctx)=>{

    console.log(ctx.request.body)

    ctx.body= ctx.request.body

})

 

 

23.用户注册数据库操作

 

-----service/appApi/user.js-----

const mongoose = require('mongoose')

 

router.post('/register',async(ctx)=>{

const User = mongoose.model('User')

let newUser = new User(ctx.request.body)

await newUser.save().then(()=>{

ctx.body={

code:200,

message:'注册成功'

}

}).catch(error=>{

ctx.body={

code:500,

message:error

}

})

})

前端Vue的业务处理---Register.vue----

import { Toast } from 'vant'

axiosRegisterUser(){

        axios({

        url: url.registerUser,

        method: 'post',

        data:{

            userName:this.username,

            password:this.password 

        }

    })

    .then(response => {

        console.log(response)

        //如果返回code为200，代表注册成功，我们给用户作Toast提示

        if(response.data.code == 200){

            Toast.success('注册成功')

        }else{

            console.log(response.data.message)

            Toast.fail('注册失败')

        }

            console.log(response.data.code)

    })

    .catch((error) => {  

        Toast.fail('注册失败')  

    })         

}

 

24.注册的防重复提交

 

方法：设置vant-button 的loading属性

 

 class="register-button">

 class="van-button" size="large" @click="axiosRegisterUser" :loading="openLoading" >注册