zoukankan      html  css  js  c++  java
  • Vue nodejs商城项目-商品列表价格过滤和加入购物车功能

    一、价格过滤功能

    GoodsList.vue

    1. >>点击价格区间时发送请求
    2. methods:{
    3.     getGoodsList(flag){
    4.         var param = {
    5.             // 请求时传点击的价格区间数据给后台
    6.             priceLevel:this.priceChecked // 点击的价格区间
    7.         }
    8.         ......
    9.     },
    10.     setPriceFilter(index){ // 点击价格
    11.         this.priceChecked = index;
    12.         this.closePop();
    13.         this.getGoodsList(); // 发送请求
    14.     },
    15. }

    server/routes/goods.js 
    获取传过来的参数,对价格参数进行处理,查询价格区间内的数据库数据

    1. // 二级路由
    2. /* GET goods page. */
    3. router.get('/', function(req, res, next) {
    4.    // express获取请求参数
    5.    let priceLevel = req.param("priceLevel"); // 传过来的价格区间
    6.    var priceGt = '',priceLte = '';
    7.    let params = {};
    8.    if(priceLevel != 'all'){ // 价格区间过滤功能
    9.       switch (priceLevel){
    10.          case '0':priceGt=0;priceLte =100;break;
    11.          case '1':priceGt=100;priceLte =500;break;
    12.          case '2':priceGt=500;priceLte =1000;break;
    13.          case '3':priceGt=1000;priceLte =5000;break;
    14.       }
    15.       params = {
    16.          salePrice:{
    17.             $gt:priceGt,
    18.             $lte:priceLte
    19.          }
    20.       }
    21.    }
    22.    ......
    23. });

     

    往下滚动分页加载图标效果

    1. <!-- 加载中... -->
    2. <img v-show="loading" src="/static/loading-svg/loading-spinning-bubbles.svg" alt="">
    3.  
    4. export default {
    5.     data(){
    6.         return {
    7.             loading:false // 往下滚动"加载图标"的出现效果:默认不出现
    8.         }
    9.     },
    10.     methods:{
    11.         getGoodsList(flag){
    12.             this.loading = true; // 请求前出现
    13.             axios.get("/goods",{
    14.               params:param // 传参
    15.             }).then((res)=>{
    16.                 var res = res.data;
    17.                 this.loading = false; // 请求到数据图标消失
    18.                 if(res.status == "0"){
    19.                     ......
    20.                 }
    21.             })
    22.         }
    23.     }
    24. }

     

    二、加入购物车功能

    dumall数据库建立users集合导入resource文件夹的dumall-users 

    与商品列表接口一样,先建立用户数据的模型 
    server/models/users.js

    1. // 对应数据库用户数据在resource文件夹的dumall-users
    2. var mongoose = require('mongoose');
    3. var Schema = mongoose.Schema;
    4.  
    5. // 定义一个Schema
    6. var userSchema = new Schema({
    7.    'userId':String, // 或者 'userId':{type:String}
    8.    'userName':String,
    9.    'userPwd':String,
    10.    'orderList':Array,
    11.     'cartList':[ // 购物车列表
    12.         {
    13.             "productId":String,
    14.             "productName":String,
    15.             "salePrice":Number,
    16.             "productImage":String,
    17.             "checked":String, // 是否选中
    18.             "productNum":String // 商品数量
    19.         }
    20.     ],
    21.     "addressList":Array
    22. })
    23.  
    24. // 输出(导出)
    25. module.exports = mongoose.model('user',userSchema); // 定义一个user模型,可以根据这个模型调用其API方法。
    26. // 这个模型定义的是数据库dumall的users集合数据,所以这个model取名user是对应这个集合,连接数据库之后,这个模型会根据名字的复数形式"users"来查找数据集合。
    27. // module.exports = mongoose.model('user',userSchema,'users'); 也可以后面注明链接的是数据库的goods集合

    数据库链接(之前商品列表页已连接),查询操作用户数据,建立接口,实现加入购物车功能 server/routes/goods.js

    1. // 加入到购物车
    2. // 是二级路由,一级路由在app.js
    3. router.post("/addCart",function(req, res, next){
    4.   var userId = '100000077',
    5.     productId = req.body.productId; // post请求拿到res参数:req.body
    6.   var User = require('../models/users.js'); // 引入user模型
    7.  
    8.   // 查询第一条:拿到用户信息
    9.   User.findOne({
    10.     userId:userId // 查询条件
    11.   },function(err,userDoc){
    12.     if(err){
    13.       res.json({
    14.         status:"1",
    15.         msg:err.message
    16.       })
    17.     }else{
    18.       console.log("userDoc"+userDoc); // 用户数据
    19.       if(userDoc){
    20.         let goodsItem = '';
    21.         userDoc.cartList.forEach(function(item){ // 遍历用户购物车,判断加入购物车的商品是否已经存在
    22.           if(item.productId == productId){
    23.             goodsItem = item;
    24.             item.productNum++; // 购物车这件商品数量+1
    25.           }
    26.         })
    27.         if(goodsItem){ // 若购物车商品已存在
    28.           userDoc.save(function (err2,doc2) {
    29.             if(err2){
    30.                 res.json({
    31.                     status:"1",
    32.                     msg:err2.message
    33.                 })
    34.             }else{
    35.                 res.json({
    36.                     status:'0',
    37.                     msg:'',
    38.                     result:'suc'
    39.                 })
    40.             }
    41.           })
    42.         }else{ // 若购物车商品不存在,就添加进去
    43.           Goods.findOne({productId:productId},function(err1,doc){ // 从商品列表页Goods查询点击加入购物车的那件商品信息
    44.             if(err1){
    45.               res.json({
    46.                 status:"1",
    47.                 msg:err1.message
    48.               })
    49.             }else{
    50.               if(doc){
    51.                 doc.productNum = 1;
    52.                 doc.checked = 1;
    53.                 userDoc.cartList.push(doc); // 添加信息到用户购物车列表中
    54.                 userDoc.save(function(err2,doc2){ // 保存数据库
    55.                   if(err2){
    56.                     res.json({
    57.                       status:"1",
    58.                       msg:err2.message
    59.                     })
    60.                   }else{
    61.                     res.json({
    62.                       status:"0",
    63.                       msg:'',
    64.                       result:'suc'
    65.                     })
    66.                   }
    67.                 })
    68.               }
    69.             }
    70.           })
    71.         }
    72.       }
    73.     }
    74.   })
    75. })

     

    页面实现加入购物车请求实现 GoodsList.vue

    1. <!--传入商品id参数-->
    2. <a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入购物车</a>
    3.  
    4. methods:{
    5.     addCart(productId){ // 点击加入购物车
    6.         axios.post("/goods/addCart",{ // 接口设置在server/routes/goods.js
    7.             productId:productId
    8.         }).then((res)=>{
    9.             var res = res.data;
    10.             if(res.status==0){
    11.                 alert("加入成功")
    12.             }else{
    13.                 alert("msg:"+res.msg)
    14.             }
    15.         })
    16.     }
    17. }

     

    运行项目,点击购物车,请求成功,数据库购物车列表变化

    • © 2018 GitHub, Inc.
  • 相关阅读:
    zbb20181207 springboot @ConfigurationProperties使用
    zbb20181206 logback,lombok 默认日志logback配置解析
    Spring Boot (8) 全局异常处理
    Spring Boot (7) JdbcTemplate访问数据库
    Spring Boot (6) Spring Data JPA
    Spring Boot (4) 静态页面和Thymeleaf模板
    Spring Boot (3) 热部署devtools
    Spring Boot (2) Restful风格接口
    Spring Boot (1) 构建第一个Spring Boot工程
    idea使用maven搭建ssm框架实现登陆商品增删改查
  • 原文地址:https://www.cnblogs.com/wangyawei/p/9236793.html
Copyright © 2011-2022 走看看