双十一刚过去的你是不是又要开始准备双十二了呢?🤔谈到购物就离不开购物车,那购物车功能如何实现呢?就小米商城购物车,我们来谈一谈
效果图如下(基本是我们见过的购物车的效果):
动手前思考
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 userServi