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

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

• node js

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日

相关文章

  • 详解使用nodeJs安装Vue-cli

    请跟我一起来详解使用Node.js安装Vue-cli的完整攻略。 1. 安装Node.js Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，可以用于服务器端JavaScript环境的搭建。因为Vue-cli是基于Node.js开发的，所以安装Node.js是使用Vue-cli的前提。Node.js支持多操作系统安装，例如Win…

    node js 2023年6月8日
    00

  • 详解Node.JS模块 process

    详解Node.JS模块 process Node.JS提供了一个全局模块process，它提供了与当前进程的交互能力。在本文中，我们会详细介绍process模块的各种用法。 获取启动NodeJS应用程序的命令行参数 process模块的argv属性返回一个数组，该数组包含了NodeJS应用程序启动时传递给程序的命令行参数。 // demo1.js conso…

    node js 2023年6月8日
    00

  • 微信js-sdk界面操作接口用法示例

    我来为您详细讲解一下“微信js-sdk界面操作接口用法示例”的教程。 一、前置条件 使用微信JS-SDK前，需要先通过微信公众平台开发者中心对该公众账号进行开发授权。具体操作可参照微信官方文档《微信公众平台开发者中心-创建公众账号》进行操作。 二、JS-SDK核心方法 在使用JS-SDK的接口前，需要引入JS-SDK的核心库文件http://res.wx.q…

    node js 2023年6月8日
    00

  • JavaScript内存泄漏的处理方式

    请您先了解JavaScript内存泄漏的概念： JavaScript是一种自动内存管理语言，这意味着开发人员不需要手动分配和释放内存。相反，JavaScript解释器在运行时会自动跟踪和管理内存。然而，JavaScript程序员仍然需要避免内存泄漏。 内存泄漏指的是不再有用的内存一直保留在内存中，不能被垃圾回收机制回收，最终会导致内存耗尽。一旦内存耗尽，应用…

    node js 2023年6月8日
    00

  • node.js域名解析实现方法详解

    Node.js域名解析实现方法详解 什么是域名解析 域名解析是将域名解析成IP地址的过程，它是Internet世界中最基本的服务之一。在网络互联世界中，我们经常使用域名来访问网站，但是计算机语言只能认识IP地址，因此我们需要用域名解析成IP地址才能访问网站。 Node.js域名解析 在Node.js中，我们可以使用内置的dns模块来实现域名解析功能。该模块提…

    node js 2023年6月8日
    00

  • Linux 安装nodejs环境及路径配置详细步骤

    下面是详细讲解“Linux 安装nodejs环境及路径配置详细步骤”的完整攻略。 安装nodejs环境 在Linux系统中，我们可以通过以下步骤来安装nodejs环境。 下载nodejs安装包 访问nodejs官网，找到适合你系统的版本，下载压缩包。 解压安装包 在终端运行以下命令，解压nodejs安装包： tar -xzvf node-vxx.xx.xx-…

    node js 2023年6月8日
    00

  • 如何在node.js中使用​JsonWebToken模块进行token加密

    下面是如何在node.js中使用JsonWebToken模块进行token加密的完整攻略。 安装JsonWebToken模块 在使用JsonWebToken模块前，需要先在node.js环境下安装这个模块。 打开终端，进入项目所在的目录，运行以下命令： npm install jsonwebtoken 引入JsonWebToken模块 在需要使用JsonWe…

    node js 2023年6月8日
    00

  • Vue实现virtual-dom的原理简析

    Vue实现virtual-dom的原理简析 virtual-dom 是什么 virtual-dom 是将 dom 树以 js 对象的方式进行表示，实际上是对真实 dom 树的一种抽象。它可以将 js 对象（virtual-dom）在浏览器中渲染成真实的 dom。 Vue 中的 virtual-dom 在 Vue 中，当我们的数据做出改变时，Vue 会对比修改…

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