用vue和node写的简易购物车实现

项目介绍

这是用vue写前端，用node来接收前端发来的请求，然后进行相应的数据操作，例如数据的存取和删除等。这是个人的练习项目，目前功能做的比较简单，主要是展示商品列表，把商品加入购物车，从购物车删除商品三个小功能。

搭建本地环境

因为是用vue，需要用babel把es6语法转为es5语法。

1.配置.babelrc文件

2.配置package.json文件

3.配置webpack.config.js文件。因为babel后的代码是遵循commonjs规范的代码，不能直接在浏览器上运行，需要用webpack打包成可直接运行的代码。

配置完成后运行 npm run build 和 webpack 命令。运行后会生成lib和dist文件夹。

文件目录

数据库使用mysql，仅有两张表，一张表存储的是商品id,商品名，商品图。另一张表存储的是用户id和商品id。

my_server.js 使用node的expres,mysql,path,pug模块，为了能解析http请求数据，还需要引入body-parser。

lib文件夹下的文件是babel生成的，src文件夹下的文件这是webpack打包后的文件。

购物车实例

今天优化了下，购物车首屏加载使用pug模板将数据直出到页面，提高加载速度。

1、连接数据库

2.初始化查询商品列表和购物车。商品列表数据是直出的，而购物车列表是用post请求的数据，后续会优化成数据直出到页面，减少http请求，加快页面加载速度。

index.pug首页模板

list.vue

</div>

my_server.js

初始化查询购物车列表

这里逻辑是根据用户id查出商品id,再根据商品id查出商品信息添加到页面上

用promise写异步逻辑

  let query_item = 'SELECT * FROM t_list WHERE f_id in (?)';
  let whereIn = [];
  for(let i=0,len=rows.length;i<len;i++){
    whereIn.push(rows[i].f_item_id);
  }
  conn.query(query_item,[whereIn],rowss) {//异步分两次查。。。。
    if (err2){
      console.log(err2);
    }
    let $return={
      errcode:0,errmsg:'',data:rowss,};
    res.end(JSON.stringify($return));//返回
  });
}else if(rows.length==0){
  let $return={
    errcode:0,data:''
  };
  res.end(JSON.stringify($return));//返回
}

3.加入购物车

list.vue页面的请求

my_server.js接收请求

github：https://github.com/yunhongyao/simple_shopping_cart

完整代码下载：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!