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日

相关文章

  • JavaScript利用crypto模块实现加解密

    JavaScript利用crypto模块实现加解密的完整攻略，包含以下步骤： 1. 引入crypto模块 在Node.js中，使用crypto模块来实现加解密操作。可以使用以下代码引入crypto模块： const crypto = require(‘crypto’); 2. 生成密钥 在加解密过程中，需要使用密钥来实现加密和解密操作。可以使用crypto模…

    node js 2023年6月8日
    00

  • 使用ngrok+express解决本地环境中微信接口调试问题

    下面是使用ngrok+express解决本地环境中微信接口调试问题的完整攻略： 1. 什么是ngrok ngrok是一款基于Go语言开发的反向代理应用程序，可以将本地服务映射到公网访问地址，支持http、https、tcp等多种协议。即使是在家里或者公司网络环境下，使用ngrok也可以让外部计算机通过Internet访问本地的应用程序。 2. 安装和配置ng…

    node js 2023年6月8日
    00

  • nodejs微信开发之授权登录+获取用户信息

    那么让我们来详细讲解一下“Node.js微信开发之授权登录+获取用户信息”的完整攻略。 准备工作 在开始正式的开发之前，我们需要准备以下几项： 1. 注册开发者账号 首先我们需要注册一个微信开发者账号，这个账号可以在微信公众平台申请。注册完成之后，我们需要在后台创建一个新的公众号应用，在创建应用的过程中，我们需要在基本配置选项卡中设置好服务器的回调地址。 2…

    node js 2023年6月8日
    00

  • React中classnames库使用示例

    下面是关于「React中classnames 库使用示例」的完整攻略： 什么是classnames库 classnames 是一个轻量级JavaScript库，用于帮助我们在 JavaScript 中动态管理 CSS 类名。它可以接受不同类型的参数并返回一个可以用于渲染 DOM 元素的字符串。 安装classnames库 在使用 classnames 库之前…

    node js 2023年6月8日
    00

  • JSON基本语法及与JavaScript的异同实例分析

    JSON基本语法及与JavaScript的异同实例分析 什么是JSON JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，由Douglas Crockford在2001年提出。它基于JavaScript语法，但是是一种独立于语言的数据格式，可以被多种编程语言使用和解析。 JSON数据格式也易于人阅读和编写，这使得它成…

    node js 2023年6月8日
    00

  • 利用NodeJS的子进程(child_process)调用系统命令的方法分享

    当我们需要在NodeJS中执行一些系统命令时，可以使用NodeJS提供的子进程模块(child_process)。下面，我将演示如何使用这个模块来调用系统命令的方法。 调用系统命令的方法 使用child_process模块调用系统命令分为三种方法：spawn/exec/execFile。 spawn方法 spawn方法是一种处理较大数据量命令的方法，它启动一…

    node js 2023年6月8日
    00

  • 用nodejs搭建websocket服务器

    使用Node.js可以很方便地搭建Websocket服务器，下面就来详细讲解一下具体的步骤。 步骤1：安装依赖 安装websocket和ws模块，这两个模块都可以用于搭建websocket服务器，我们在下面的示例中将演示这两个模块的使用方法。可以使用npm命令进行安装： npm install websocket npm install ws 步骤2：创建W…

    node js 2023年6月8日
    00

  • Vue路由History模式分析

    Vue路由History模式分析 Vue Router 是 Vue 的官方路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。Vue Router 可以让我们通过前端路由来实现页面之间的切换和跳转，它的 History 模式一般用于生产环境并且需要后端支持。 History 模式 Vue Router 根据浏览器的不同，支持两种路由…

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