Vue2全家桶搭建简单的桌面和移动端分离的购物商城
发布日期:2022-03-03 10:44:10 浏览次数:1 分类:技术文章

本文共 2940 字,大约阅读时间需要 9 分钟。

在线预览地址

桌面端:

移动端:

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

最近由于疫情防控需求在家隔离,趁此机会复习一遍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 userCommentModel.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://blog.csdn.net/yangjiegang8/article/details/104873543 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:oracle设置字母大小写不敏感对impdp无效
下一篇:俄罗斯方块小游戏的H5和Android版

发表评论

最新留言

路过,博主的博客真漂亮。。
[***.36.148.139]2022年07月27日 02时08分03秒