Vue2全家桶搭建简单的桌面和移动端分离的购物商城

在线预览地址

桌面端：http://hystrix.club/stall/

移动端：http://hystrix.club/store/

子曰：不想写前端的后端不是好测试，作为一个后端开发感到亚历山大。

最近由于疫情防控需求在家隔离，趁此机会复习一遍Vue知识，顺便做个小项目练练手。

本项目技术栈

移动端基于 Vue2 + Vuex + Axois + MintUI 开发

桌面端基于 Vue2 + Vuex + Axois + ElementUI 开发

后端基于 Mysql + Node + Koa2 + Sequelize5 开发

//引入db配置
const db = require('../config/sqz_db')
//引入sequelize对象
const Sequelize = db.sequelize
//引入数据表模型
const CommentModel = Sequelize.import('../model/comment_model')
const ReplyModel = Sequelize.import('../model/reply_model')
const UserModel = Sequelize.import('../model/user_model')
// comment表与reply表根据cId关联查询
ReplyModel.belongsTo(CommentModel, {
    as: 'replies',
    foreignKey: 'comment_id',
    targetKey: 'id'
});
CommentModel.hasMany(ReplyModel, {
    foreignKey: 'comment_id',
    sourceKey: 'id',
    as: "replies"
});
// comment and user
CommentModel.hasOne(UserModel, {
    foreignKey: 'id',
    as: 'user', 
    targetKey: 'from_id'
});


//数据库操作类
class CommentService {
    static async create(data) {
        return await CommentModel.create(data);
    }

    static async findList(params) {
        // 前台可能会传来nickname、account来模糊查询，以及分页参数
        const id = params.id;
        const product_id = params.product_id;
        const user_id = params.user_id;
        const start = params.start || 0;
        const page_size = params.page_size || 10;
        // where条件接受一个对象传入，先定义一个对象，用{}符号
        let criteria = {};
        // 检查前台传来的参数是否为空，从而构造各种查询条件
        if (id) {
            criteria['id'] = id;
        }
        if (product_id) {
            // 这里后面赋值的是like操作符，代表模糊查询，后面account用``反引号字符串替换模板将account代入进去
            criteria['product_id'] = product_id;
        }
        if (user_id) {
            // 这里后面赋值的是like操作符，代表模糊查询，后面account用``反引号字符串替换模板将account代入进去
            criteria['user_id'] = user_id;
        }
        return await CommentModel.findAndCountAll({
            where: criteria, // 这里传入的是一个查询对象，因为我的查询条件是动态的，所以前面构建好后才传入，而不是写死
            offset: start, // 前端分页组件传来的起始偏移量
            limit: Number(page_size), // 前端分页组件传来的一页显示多少条
            include: [{ // include关键字表示关联查询
                model: ReplyModel, // 指定关联的model
                as: 'replies', // 由于前面建立映射关系时为class表起了别名，那么这里也要与前面保持一致，否则会报错
                // attributes: ['from_id', 'to_id'], // 这里的attributes属性表示查询class表的name和rank字段，其中对name字段起了别名className
            },
            { // include关键字表示关联查询
                model: UserModel, // 指定关联的model
                as: 'user', // 由于前面建立映射关系时为class表起了别名，那么这里也要与前面保持一致，否则会报错
                // attributes: ['username', 'password'], // 这里的attributes属性表示查询class表的name和rank字段，其中对name字段起了别名className
            }],
            raw: true // 这个属性表示开启原生查询，原生查询支持的功能更多，自定义更强
        });
    }
}

module.exports = CommentService;

参考项目

https://github.com/Leonardo-zyh/Vue-youzanStore

https://github.com/icarusion/vue-book/tree/master/shopping

未完待续...