vuex mysql_vuex + koa + mysql实现购物车功能（一）

双十一刚过去的你是不是又要开始准备双十二了呢?🤔谈到购物就离不开购物车,那购物车功能如何实现呢?就小米商城购物车,我们来谈一谈

效果图如下(基本是我们见过的购物车的效果):

动手前思考

1.数据库需要建两个表: 所有商品表(cart), 购物车商品表(cartselected)

2.cart表: id(主键,自增),img,title,price,recommend

cartselected表:id(与cart表id关联),img,title,price,recommend,num,checked(是否选中状态,只有0和1两个值)

3.axios请求在actions中进行,请求回来的数据放入state中,相关计算在getters中进行

4.axios需要多次用到,可以进行封装

5.商品栏展示cart表数据,购物车栏展示cartselected表数据

准备工具

vscode

navicat

mysql

数据库表结构如下:

接下来让我们一个一个功能分别实现吧！😀

实现功能

1.搭建后台服务、连接mysql

// 配置数据库连接

const config = {

database: {

DATEBASE: 'xiaomi',

USERNAME: 'root',

PASSWORD: '******',

PORT: '3306',

HOST: 'localhost'

}

}

// 创建连接池

var pool = mysql.createPool({

host: config.database.HOST,

user: config.database.USERNAME,

password: config.database.PASSWORD,

database: config.database.DATEBASE,

port: config.database.PORT

})

// 统一连接数据库的方法

let allServies = {

query: function (sql, values) {

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

pool.getConnection(function (err, connection) {

if (err) {

reject(err)

} else {

connection.query(sql, values, (err, rows) => {

if (err) {

reject(err)

} else {

resolve(rows)

}

connection.release() // 释放连接池

})

}

})

})

}

}

复制代码

连接成功后可以用postman，或者直接浏览器测试一下(这里就不测试啦)

2.细讲每一个功能实现(按照sql语句 -> 后端接口 -> vuex -> 具体component方式)

随机查询

场景：当购物车为空时，页面显示20件商品，当购物车有商品时，则显示10件商品

let findallgoods = function (num) { // 随机查询num数量的商品信息

let _sql = `select * from cart order by rand() limit ${num} ;`

return allServies.query(_sql)

}

复制代码

后端路由：

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

let _num = ctx.request.body.num

await userSe