首页 > 其他分享 >【开源】基于Vue.js的衣物搭配系统的设计和实现

【开源】基于Vue.js的衣物搭配系统的设计和实现

时间:2023-11-15 19:32:36浏览次数:32  
标签:衣物 Vue 搭配 用户 js 开源 模块 currUser clothingMatching


【开源】基于Vue.js的衣物搭配系统的设计和实现_系统


一、摘要

1.1 项目介绍

基于Vue+SpringBoot+MySQL的衣物搭配系统,包含衣物档案模块、衣物搭配模块、衣物收藏模块,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块,衣物搭配管理系统基于角色的访问控制,给普通用户、衣物管理员使用,可将权限精确到按钮级别,您可以自定义角色并分配权限,系统适合设计精确的权限约束需求。

1.2 项目详细录屏

https://www.bilibili.com/video/BV1BF411k79V


二、研究内容

【开源】基于Vue.js的衣物搭配系统的设计和实现_系统_02

2.1 衣物档案模块

衣物档案模块是一个网站模块,可以记录和管理个人服装信息,这些信息在时尚、电子商务和社交等网站上非常有用,通过了解用户的喜好和服装习惯,衣物档案模块可以提供更多个性化的服装推荐,以满足用户的独特需求,通过创建和维护服装档案,用户可以轻松管理自己的服装,避免重新购买和处理服装等不必要的操作,通过衣物档案模块,网站基于服装材质、颜色、设计等信息,提供智能清洁建议,让用户更好地保护自己的服装。服装档案模块与社交功能相结合,用户可以分享自己服装的照片和知识,与其他用户交流和沟通,并收集和分析用户的服装文件数据,从而提高网站的用户体验,通过了解用户的消费习惯和时尚趋势,可以做出更好的商业决策。

2.2 衣物搭配模块

衣物搭配模块是电子商务平台和服装网站上提供的一项功能,允许用户根据自己的需求和偏好选择合适的服装协调计划,通过衣物搭配模块,消费者可以更直观地了解服装的组合效果,促进购买欲望,增加销量,用户可以快速找到协调选项,改善购物体验,在竞争激烈的市场中,拥有衣物搭配模块可以增强企业对消费者的品牌形象,提高企业的竞争力,可以了解消费者的喜好和流行趋势,为企业的营销策略和产品设计提供参考,衣物搭配模块可以帮助用户在企业网站上花费更多时间,让用户享受衣物搭配模块,可以提高与服装系统的互动度,提高用户忠诚度。

2.3 衣物收藏模块

衣物收藏模块是一种功能模块,允许用户将他们喜欢的服装添加到电子商务服务、购物网站或个人信息管理系统中,用户可以将他们喜欢的产品添加到他们的收藏夹中,并随时查看和比较它们,从而改善他们的衣物搭配体验,允许用户从收藏夹中快速浏览他们喜欢的商品,并保存整个网站,它允许用户分析信息,如他们存储的产品类型和颜色偏好,而无需重新搜索或浏览,衣物收藏模块可以向用户推荐更合适的产品,从而提高用户满意度,用户可以通过收藏夹管理自己喜欢的衣物,从而避免重复和不必要的购买,帮助简化自己的衣橱,允许用户通过发放优惠券和在喜欢时提供增值服务来促进衣物的方案推荐。


三、系统设计

3.1 用例设计

【开源】基于Vue.js的衣物搭配系统的设计和实现_java_03

3.2 E-R图设计

【开源】基于Vue.js的衣物搭配系统的设计和实现_vue.js_04

3.3 数据库设计

3.3.1 衣物档案表

【开源】基于Vue.js的衣物搭配系统的设计和实现_系统_05

3.3.2 衣物搭配表

【开源】基于Vue.js的衣物搭配系统的设计和实现_系统_06

3.3.3 衣物收藏表

【开源】基于Vue.js的衣物搭配系统的设计和实现_java_07


四、系统实现

4.1 登录页

【开源】基于Vue.js的衣物搭配系统的设计和实现_spring boot_08

4.2 衣物档案模块

【开源】基于Vue.js的衣物搭配系统的设计和实现_衣物搭配_09

4.3 衣物搭配模块

【开源】基于Vue.js的衣物搭配系统的设计和实现_衣物搭配_10

4.4 衣物收藏模块

【开源】基于Vue.js的衣物搭配系统的设计和实现_java_11

4.5 衣物档案详情页

【开源】基于Vue.js的衣物搭配系统的设计和实现_spring boot_12

4.6 衣物搭配详情页

【开源】基于Vue.js的衣物搭配系统的设计和实现_系统_13

4.7 衣物收藏详情页

【开源】基于Vue.js的衣物搭配系统的设计和实现_vue.js_14


五、核心代码

5.1 查询衣物档案

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查询衣物")
public Result<IPage<Clothing>> getByPage(@ModelAttribute Clothing clothing ,@ModelAttribute PageVo page){
    QueryWrapper<Clothing> qw = new QueryWrapper<>();
    if(!ZwzNullUtils.isNull(clothing.getTitle())) {
        qw.like("title",clothing.getTitle());
    }
    if(!ZwzNullUtils.isNull(clothing.getBrand())) {
        qw.like("brand",clothing.getBrand());
    }
    if(!ZwzNullUtils.isNull(clothing.getType())) {
        qw.eq("type",clothing.getType());
    }
    IPage<Clothing> data = iClothingService.page(PageUtil.initMpPage(page),qw);
    return new ResultUtil<IPage<Clothing>>().setData(data);
}

5.2 新增衣物搭配

@RequestMapping(value = "/insert", method = RequestMethod.POST)
@ApiOperation(value = "新增衣物搭配")
public Result<ClothingMatching> insert(ClothingMatching clothingMatching){
    Clothing c1 = iClothingService.getById(clothingMatching.getId1());
    if(c1 == null) {
        return ResultUtil.error("上衣不存在");
    }
    clothingMatching.setValue1(c1.getTitle() + "," + c1.getBrand());
    clothingMatching.setImage1(c1.getImage());
    Clothing c2 = iClothingService.getById(clothingMatching.getId2());
    if(c2 == null) {
        return ResultUtil.error("裤子不存在");
    }
    clothingMatching.setValue2(c2.getTitle() + "," + c2.getBrand());
    clothingMatching.setImage2(c2.getImage());
    Clothing c3 = iClothingService.getById(clothingMatching.getId3());
    if(c3 == null) {
        return ResultUtil.error("鞋子不存在");
    }
    clothingMatching.setValue3(c3.getTitle() + "," + c3.getBrand());
    clothingMatching.setImage3(c3.getImage());
    User currUser = securityUtil.getCurrUser();
    clothingMatching.setUserId(currUser.getId());
    clothingMatching.setUserName(currUser.getNickname());
    iClothingMatchingService.saveOrUpdate(clothingMatching);
    return new ResultUtil<ClothingMatching>().setData(clothingMatching);
}

5.3 查询衣物搭配

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查询衣物搭配")
public Result<IPage<ClothingMatching>> getByPage(@ModelAttribute ClothingMatching clothingMatching ,@ModelAttribute PageVo page){
    QueryWrapper<ClothingMatching> qw = new QueryWrapper<>();
    User currUser = securityUtil.getCurrUser();
    if(!ZwzNullUtils.isNull(clothingMatching.getUserName())) {
        qw.like("user_name",clothingMatching.getUserName());
    }
    IPage<ClothingMatching> data = iClothingMatchingService.page(PageUtil.initMpPage(page),qw);
    for (ClothingMatching vo : data.getRecords()) {
        if(Objects.equals(currUser.getId(),vo.getUserId())) {
            vo.setMyFlag(true);
        }
        QueryWrapper<ClothingCollect> ccQw = new QueryWrapper<>();
        ccQw.eq("clothing_id",vo.getId());
        ccQw.eq("collect_id",currUser.getId());
        vo.setCollectFlag(iClothingCollectService.count(ccQw));
    }
    return new ResultUtil<IPage<ClothingMatching>>().setData(data);
}

5.4 新增搭配收藏

@RequestMapping(value = "/addOne", method = RequestMethod.GET)
@ApiOperation(value = "新增收藏")
public Result<Object> addOne(@RequestParam String id){
    ClothingMatching cm = iClothingMatchingService.getById(id);
    if(cm == null) {
        return ResultUtil.error("搭配方案不存在");
    }
    User currUser = securityUtil.getCurrUser();
    ClothingCollect cc = new ClothingCollect();
    cc.setClothingId(cm.getId());
    cc.setUserName(cm.getUserName());
    cc.setContent(cm.getValue1() + " | " + cm.getValue2() + " | " + cm.getValue3());
    cc.setImage1(cm.getImage1());
    cc.setImage2(cm.getImage2());
    cc.setImage3(cm.getImage3());
    cc.setCollectId(currUser.getId());
    cc.setCollectUser(currUser.getNickname());
    cc.setCollectTime(DateUtil.now());
    iClothingCollectService.saveOrUpdate(cc);
    return ResultUtil.success();
}

5.5 取消搭配收藏

@RequestMapping(value = "/cancelOne", method = RequestMethod.GET)
@ApiOperation(value = "取消收藏")
public Result<Object> cancelOne(@RequestParam String id){
    User currUser = securityUtil.getCurrUser();
    QueryWrapper<ClothingCollect> ccQw = new QueryWrapper<>();
    ccQw.eq("clothing_id",currUser.getId());
    ccQw.eq("clothing_id",id);
    iClothingCollectService.remove(ccQw);
    return ResultUtil.success();
}

六、免责说明

  • 本项目仅供个人学习使用,商用授权请联系博主,否则后果自负。
  • 博主拥有本软件构建后的应用系统全部内容所有权及独立的知识产权,拥有最终解释权。
  • 如有问题,欢迎在仓库 Issue 留言,看到后会第一时间回复,相关意见会酌情考虑,但没有一定被采纳的承诺或保证。

下载本系统代码或使用本系统的用户,必须同意以下内容,否则请勿下载!

  1. 出于自愿而使用/开发本软件,了解使用本软件的风险,且同意自己承担使用本软件的风险。
  2. 利用本软件构建的网站的任何信息内容以及导致的任何版权纠纷和法律争议及后果和博主无关,博主对此不承担任何责任。
  3. 在任何情况下,对于因使用或无法使用本软件而导致的任何难以合理预估的损失(包括但不仅限于商业利润损失、业务中断与业务信息丢失),博主概不承担任何责任。
  4. 必须了解使用本软件的风险,博主不承诺提供一对一的技术支持、使用担保,也不承担任何因本软件而产生的难以预料的问题的相关责任。

【开源】基于Vue.js的衣物搭配系统的设计和实现_系统_15

标签:衣物,Vue,搭配,用户,js,开源,模块,currUser,clothingMatching
From: https://blog.51cto.com/u_16322671/8400889

相关文章

  • 使用js判断颜色是否相等,然后投票
    首先做出来的效果图是这样的代码如下<divclass="hua_zdm_15"id="toupiao"><divclass="hua_zd_00_z"onclick="zd_change(0)">涨</div><divclass="hua_zd_00_dm_20"onclick="zd_change(1)">跌&......
  • 开源埋点分析系统:洞察用户行为的新视角
    在数字化浪潮中,了解用户行为和优化用户体验成为企业竞争力的关键。对于希望深入了解客户和推动业务增长的公司来说,埋点分析系统是不可或缺的工具。今天,我们要介绍的不仅是一个ClkLog埋点分析系统,而是一种全新的、开源的洞察方案,它能够帮助您捕捉每一个关键数据点,确保您的决策基于......
  • 【Vue】组件传值的六种方法
    Vue组件之间的通信大概归类为:父子组件通信:props;ref;$attrs/$listeners;$parent/$children兄弟组件通信:eventBus;vuex跨级通信:eventBus;Vuex;$attrs/$listeners一、props/$emit1.父组件向子组件传值通过props传值。父组件的代码:<template><divclass="secti......
  • vue 实现文件切片上传
    在实际开发项目过程中有时候需要上传比较大的文件,然后呢,上传的时候相对来说就会慢一些,so,后台可能会要求前端进行文件切片上传,很简单哈,就是把比如说1个G的文件流切割成若干个小的文件流,然后分别请求接口传递这个小的文件流。流程简说实现文件切片导入,首先我们使用elementUI也好,......
  • vcpkg install polyclipping:x64-windows Could not locate a manifest (vcpkg.json)
    错误信息表明vcpkg在当前工作目录及其父目录中找不到vcpkg.json文件,因此无法确定要安装的库。这可能是因为你执行vcpkginstall命令的位置不在包含vcpkg.json文件的项目目录中。以下是解决方法:确保在包含vcpkg.json的项目目录中运行命令:打开一个命令行终端。切......
  • cJSON简介
    CJSON简介官网下载cJSONdownload|SourceForge.netgithubclone地址:https://github.com/yegeli/cJSON.gitgiteeclone地址:https://gitee.com/yegeli/cJSON.git核心内容cJSON旨在成为一个可以应用在工作中的低门槛json解析器。该项目包含一个.c文件,和一个.h文件。对JSO......
  • 【开源】基于Vue.js的高校实验室管理系统
    一、摘要1.1项目介绍开放实验室管理系统包含实验室类型模块、实验室档案模块、实验模块、实验设备模块、实验订单模块,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块,开放实验室管理系统基于角色的访问控制,给学生......
  • vscode编写js canvas无代码提示的解决方法
    解决方法:如果是2d上下文,则在获取上下文的前一句加上/**@type{CanvasRenderingContext2D}*/如果是3d上下文,则加上/**@type{WebGLRenderingContext}*/letdrawing=document.querySelector("#canvas")if(drawing.getContext){/**@type......
  • JS中的作用域Scope、范围链Scope Chain以及范围链和调用栈的区别
    作用域Scope范围链ScopeChain 范围链和调用栈的区别关键点:范围链与调用顺序无关始终从定义分析:只含本范围与父范围所能访问的变量 ......
  • vue3 父组件传值给子组件 子组件修改后回传给父组件
    父组件<jdy-goods-attrv-model:goods_sn="goods.goods_sn"></jdy-goods-attr>//尤总在vue3的时候给我们提供了一个新的思路:v-model来实现父传子,并且子也可以修改父组件传递过来的数据。子组件constprops=defineProps({goods_sn:{type:String,default:'......