1. Python技术站首页
  2. node js

Vue+Node实现商品列表的分页、排序、筛选，添加购物车功能详解

• node js
yizhihongxing

Vue+Node实现商品列表的分页、排序、筛选，添加购物车功能详解

项目需求与背景

本项目是一个电商网站，需要实现商品列表的分页、排序、筛选和添加购物车功能。其中，商品列表由后端Node.js服务器提供接口，前端Vue框架进行页面渲染和交互。

技术栈与工具

  • 前端框架：Vue.js
  • 后端服务器：Node.js
  • 数据库：MySQL
  • 开发工具：Visual Studio Code
  • 前端插件：Element

环境搭建

  1. 搭建Node.js环境
  2. 安装Vue.js脚手架：npm install -g vue-cli
  3. 创建Vue.js项目：vue init webpack my-project

功能实现

商品列表分页

后端接口开发

使用Node.js编写后端接口，通过MySQL数据库查询商品列表并返回给前端。具体代码如下：

// 分页查询商品列表
app.post('/api/getGoodsList', (req, res) => {
  let sql = `SELECT * FROM goods`;
  let pageSize = parseInt(req.body.pageSize);
  let pageStart = (parseInt(req.body.pageNo) - 1) * pageSize;
  // 获取总数
  conn.query(sql, (err, result) => {
    if (err) {
      console.log(err);
      res.json({
        code: 1,
        msg: '查询失败'
      });
      return;
    }
    let totalCount = result.length;
    sql += ` ORDER BY ${req.body.sortProp} ${req.body.sortOrder}`;
    sql += ` LIMIT ${pageStart}, ${pageSize}`;
    conn.query(sql, (err, result) => {
      if (err) {
        console.log(err);
        res.json({
          code: 1,
          msg: '查询失败'
        });
        return;
      }
      res.json({
        code: 0,
        data: {
          list: result,
          pageNo: parseInt(req.body.pageNo),
          pageSize,
          totalCount
        }
      });
    });
  });
});

其中，/api/getGoodsList为接口路径，req.body为前端传递的数据，包括每页商品数、页数、排序属性和排序方式，后端通过解析这些参数实现分页查询。

前端页面开发

使用Vue.js编写前端页面，并调用后端接口获取商品列表数据并渲染到页面上。使用Element插件提供的el-pagination组件实现分页效果。具体代码如下：

<template>
  <div>
    <el-pagination
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
      layout="prev, pager, next, jumper">
    </el-pagination>
    <el-table
      :data="tableData"
      :border="false"
      :stripe="true"
      :header-cell-style="{background:'#f0f4f9', color:'#909399', borderRight:'1px solid #c8ced3'}">
      <el-table-column
        label="商品名称"
        prop="name"
        width="180">
      </el-table-column>
      <el-table-column
        label="商品价格"
        prop="price"
        width="180">
      </el-table-column>
      <el-table-column
        label="库存数量"
        prop="stock"
        width="180">
      </el-table-column>
      <el-table-column
        label="操作"
        width="120">
        <template slot-scope="scope">
          <el-button type="success" size="small" @click="addToCart(scope.row)">加入购物车</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      sortProp: '',
      sortOrder: ''
    }
  },
  methods: {
    getGoodsList: function() {
      axios.post('/api/getGoodsList', {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        sortProp: this.sortProp,
        sortOrder: this.sortOrder
      })
      .then((response) => {
        let { data } = response;
        if (data.code === 0) {
          this.tableData = data.data.list;
          this.total = data.data.totalCount;
        }
      })
      .catch((error) => {
        console.log(error);
      });
    },
    handleCurrentChange: function(pageNo) {
      this.currentPage = pageNo;
      this.getGoodsList();
    },
    addToCart: function(goods) {
      // TODO
    }
  },
  mounted: function() {
    this.getGoodsList();
  }
}
</script>

其中，el-pagination组件的total、page-size和current-page属性对应分页相关参数，@current-change属性对应页码改变的事件。数据渲染使用el-table和el-table-column组件完成，每页显示的数据由后端接口返回决定。

商品列表排序

后端接口开发

在商品列表查询接口中，增加ORDER BY语句，根据前端传递的排序属性和排序方式进行排序。具体代码如下：

// 根据属性和排序方式排序
sql += ` ORDER BY ${req.body.sortProp} ${req.body.sortOrder}`;

前端页面开发

在页面上增加排序按钮和对应的事件处理函数，根据用户点击的排序按钮的不同，动态改变sortProp和sortOrder参数，然后调用后端接口获取商品列表数据。具体代码如下：

<template>
  <div>
    <el-button-group>
      <el-button type="primary" @click="sortGoods('price')">价格排序</el-button>
      <el-button type="primary" @click="sortGoods('stock')">库存排序</el-button>
    </el-button-group>
    <el-pagination ...></el-pagination>
    <el-table ...></el-table>
  </div>
</template>

<script>
export default {
  methods: {
    sortGoods: function(prop) {
      if (this.sortProp === prop) {
        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
      } else {
        this.sortProp = prop;
        this.sortOrder = 'desc';
      }
      this.currentPage = 1;
      this.getGoodsList();
    }
  }
}
</script>

商品列表筛选

后端接口开发

在商品列表查询接口中，增加根据关键字查询的功能。具体代码如下：

// 根据关键字查询分页商品列表
app.post('/api/searchGoodsList', (req, res) => {
  let sql = `SELECT * FROM goods WHERE name LIKE '%${req.body.keyword}%'`;
  let pageSize = parseInt(req.body.pageSize);
  let pageStart = (parseInt(req.body.pageNo) - 1) * pageSize;
  // 获取总数
  conn.query(sql, (err, result) => {
    if (err) {
      console.log(err);
      res.json({
        code: 1,
        msg: '查询失败'
      });
      return;
    }
    let totalCount = result.length;
    sql += ` ORDER BY ${req.body.sortProp} ${req.body.sortOrder}`;
    sql += ` LIMIT ${pageStart}, ${pageSize}`;
    conn.query(sql, (err, result) => {
      if (err) {
        console.log(err);
        res.json({
          code: 1,
          msg: '查询失败'
        });
        return;
      }
      res.json({
        code: 0,
        data: {
          list: result,
          pageNo: parseInt(req.body.pageNo),
          pageSize,
          totalCount
        }
      });
    });
  });
});

其中，/api/searchGoodsList为接口路径，req.body.keyword为前端传递的关键字字符串，后端通过解析关键字实现根据商品名称的模糊匹配查询。

前端页面开发

增加搜索框和对应的事件处理函数，根据用户输入的关键字调用后端接口获取商品列表数据。具体代码如下：

<template>
  <div>
    <el-input placeholder="请输入关键字" v-model="keyword" @keyup.enter="searchGoods"></el-input>
    <el-pagination ...></el-pagination>
    <el-table ...></el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    searchGoods: function() {
      if (this.keyword === '') {
        this.getGoodsList();
      } else {
        axios.post('/api/searchGoodsList', {
          pageNo: this.currentPage,
          pageSize: this.pageSize,
          keyword: this.keyword,
          sortProp: this.sortProp,
          sortOrder: this.sortOrder
        })
        .then((response) => {
          let { data } = response;
          if (data.code === 0) {
            this.tableData = data.data.list;
            this.total = data.data.totalCount;
          }
        })
        .catch((error) => {
          console.log(error);
        });
      }
    }
  }
}
</script>

商品列表添加购物车

后端接口开发

增加添加购物车的接口，将商品信息存储在服务器端Session中。具体代码如下：

// 添加购物车
app.post('/api/addToCart', (req, res) => {
  let goods = req.body.goods;
  if (!req.session.cartList) {
    req.session.cartList = [];
  }
  let existGoods = req.session.cartList.find((item) => item.id === goods.id);
  if (existGoods) {
    existGoods.num += goods.num;
  } else {
    req.session.cartList.push(goods);
  }
  res.json({
    code: 0,
    msg: '添加成功'
  });
});

其中，/api/addToCart为接口路径，req.body.goods为前端传递的商品信息，后端将商品信息存储在Session中，并增量更新购物车列表。

前端页面开发

增加addToCart()方法，调用后端接口实现添加购物车功能。具体代码如下：

<template>
  <div>
    <el-button type="success" size="small" @click="addToCart(scope.row)">加入购物车</el-button>
    <el-pagination ...></el-pagination>
    <el-table ...></el-table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    addToCart: function(goods) {
      axios.post('/api/addToCart', { goods })
      .then((response) => {
        let { data } = response;
        if (data.code === 0) {
          this.$message.success('添加成功');
        }
      })
      .catch((error) => {
        console.log(error);
      });
    }
  }
}
</script>

示例说明

示例一：商品列表分页

在Vue.js项目中增加商品列表页面，在页面中实现分页效果。使用后端Node.js提供的接口查询商品列表数据，并渲染到页面上。

示例二：商品列表排序

在商品列表页面上增加排序按钮和对应的事件处理函数，根据用户点击的排序按钮的不同，动态改变sortProp和sortOrder参数，然后调用后端接口获取商品列表数据，实现排序功能。

总结

本项目使用Vue.js和Node.js实现商品列表的分页、排序、筛选和添加购物车功能。其中，使用Element插件提供的分页组件实现分页效果，使用ORDER BY语句实现排序功能，使用模糊匹配查询实现筛选功能，使用Session存储购物车列表实现添加购物车功能。通过完整示例的讲解，读者可深入学习Vue.js和Node.js的应用，掌握实际项目开发的相关技术和方法。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue+Node实现商品列表的分页、排序、筛选，添加购物车功能详解 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月8日
下一篇 2023年6月8日

相关文章

  • 详解关于Angular4 ng-zorro使用过程中遇到的问题

    关于Angular4 ng-zorro使用过程中遇到的问题的详解攻略 近年来，Angular已成为前端开发中备受欢迎的框架之一，并且随着ng-zorro组件库的出现，它变得更加容易实现样式统一。然而，ng-zorro也存在一些问题需要解决，本攻略将介绍如何应对Angular4 ng-zorro使用过程中遇到的问题。 问题1：ng-bootstrap组件无法正…

    node js 2023年6月8日
    00

  • node.js回调函数之阻塞调用与非阻塞调用

    当我们在node.js中执行一个耗时操作时，例如读取文件、请求网络数据等，会出现执行时间较长的情况，这会导致整个程序阻塞，影响程序的性能。为了解决这个问题，Node.js采用了回调函数的机制来实现非阻塞调用。 阻塞调用 阻塞调用是指应用程序在执行一个函数时，必须等待该函数执行完成，才能继续执行后面的代码。当我们在node.js中进行文件读取时，如果使用阻塞调…

    node js 2023年6月8日
    00

  • JavaScript使用正则表达式获取全部分组内容的方法示例

    首先，我们需要先了解什么是正则表达式，正则表达式是一种用来匹配字符串文本的特殊模式，利用这种模式，我们可以通过匹配和搜索来进行字符串处理。 下面是使用正则表达式获取全部分组内容的方法示例，具体步骤如下： 1. 创建正则表达式对象 首先，我们需要创建一个正则表达式对象，用于匹配和搜索字符串。 let reg = /正则表达式/; 上述代码中的正则表达式可以根据…

    node js 2023年6月8日
    00

  • 实例详解AngularJS实现无限级联动菜单

    实现无限级联动菜单的步骤 第一步：引入AngularJS 在HTML文件中引入AngularJS库，可以使用CDN或者下载本地文件。例如： <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script&gt…

    node js 2023年6月8日
    00

  • js宝典学习笔记（上）

    JS宝典学习笔记（上）攻略 1. 了解JS基础语法 要学习JS，首先要掌握其基础语法。包括： 变量、常量的定义和使用； 数据类型、运算符等基本概念； 流程控制、函数、循环等基本语句的使用。 建议通过《JavaScript高级程序设计》等经典教材，辅以实战演练和练习，掌握JS基础语法。 2. 掌握DOM操作 DOM（文档对象模型）是JS的重要组成部分。掌握DO…

    node js 2023年6月8日
    00

  • Node.js查询MySQL并返回结果集给客户端的全过程

    下面提供一个完整的“Node.js查询MySQL并返回结果集给客户端的全过程”。 步骤一：安装和配置 首先，在本地安装Node.js和MySQL服务。然后，使用npm安装mysql模块，它是连接到MySQL的标准Node.js库。可以在终端中运行以下命令进行安装： npm install mysql 接下来，在项目中引入mysql模块，以便使用它的API： …

    node js 2023年6月8日
    00

  • 详解redis在nodejs中的应用

    详解Redis在Node.js中的应用 简介 Redis是一个开源的、基于内存的key-value存储系统，数据存在内存中，因此读写速度快。Redis具有持久化和多种数据结构的支持，同时也是分布式系统下的良好选择。Node.js是一个充分利用事件驱动、非阻塞I/O的JavaScript运行时。结合Redis和Node.js，能够发挥它们的协同作用。 本文将着…

    node js 2023年6月8日
    00

  • 浅谈Webpack自动化构建实践指南

    概述 Webpack是一个现代化的静态模块打包器，可用于在项目中处理JavaScript，CSS及其它文件。在开发过程中，Webpack可以帮助我们自动化构建并优化代码。 本文旨在提供一个基础的Webpack自动化构建实践指南，帮助读者更好地理解Webpack的基本用法及其相关配置。 安装 在使用Webpack进行自动化构建之前，需要先安装Webpack和W…

    node js 2023年6月8日
    00
合作推广
合作推广
分享本页
返回顶部