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


Posted in Javascript onApril 25, 2017

项目介绍

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

搭建本地环境

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

1.配置.babelrc文件

{
 "presets": [
  "es2015",
  "stage-2"
 ],
 "plugins": ["transform-runtime"]
}

2.配置package.json文件

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

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

文件目录

-dist
  -index
-lib
  -index.js
  -my_server.js
-src
  -component
    -list.vue
  -public
    -view
      -index.pug
    -index.js
    -my_server.js
-.babelrc
-package.json
-webpack.config.js

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

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

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

购物车实例

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

1、连接数据库

var conn = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'root',
  database:'test',
  port: 3306
});
conn.connect();

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

index.pug首页模板

doctype html

  html(lang="en")
    head
      title= 'index'
    body
      div(id='app')
        app
    script.
     init_data= !{init_data};
    script(src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js')
    script(src='http://localhost:4444/index.js')

list.vue

<template>
  <div class="content_wrap">
    <div class="content_left">
      <h3>商品列表</h3>
      <div class="item" v-for="list in mess" @click="add_to_cart" data-id="{{list.f_id}}">
        <div class="img_wrap">
          <img :src='list.f_avatar' >
        </div>
        <span>{{list.f_name}}</span>
      </div>
    </div>
    <div class="content_right" id="content_right" @click="delete_item">
      <h3>购物车</h3>
      <div class="item" v-for="list in cart_mess" data-id="{{list.f_id}}">
        <div class="img_wrap">
          <img :src='list.f_avatar'>
        </div>
        <span>{{list.f_name}}</span>
        <div class="delete_layer">
          <p class="delete">删除</p>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
  export default {
    
    },
    data(){
      return {
        mess:init_data,
        cart_mess:[]
      }
    },
    methods:{
     
    },
    init:function(){
      let self = this;
      //初始化购物车
      this.$http.post('/search_cart',{user_id:2333}).then(response => {
        if(response.data.errcode===0){
          let data = response.data;
          self.cart_mess = data.data;
        }
      }, response => {
        // error callback
      });
    }
  }
</script>

my_server.js

//初始化查询商品列表
  app.get('/',function(req,res){
  var selectSQL = 'select * from t_list limit 4';
  conn.query(selectSQL, function (err2, rows) {
    if (err2) console.log(err2);
    var seach_result = JSON.stringify(rows);
    res.render('index',{//pug(jade)是express默认模板
      init_data:seach_result,
    });
  });
});

初始化查询购物车列表

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

用promise写异步逻辑

app.post('/search_cart', function (req, res) {
  return new Promise(function(resolve){
    let return_data = {
      req :req
    };
    resolve(return_data);
  })
  .then(function(return_data){
    let user_id=return_data.req.body.user_id;
    let query = 'SELECT * FROM t_item_user WHERE f_uid = ?';
    let query_param = user_id;
    return new Promise(function(resolve){
      conn.query(query,query_param, function (err2, rows) {
        resolve(rows);
      });
    });
  }).then(function(rows){
    if(rows.length>0){

      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], function (err2, 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,
        errmsg:'',
        data:''
      };
      res.end(JSON.stringify($return));//返回
    }
  });

});

3.加入购物车

list.vue页面的请求

add_to_cart:function (e) {
    let item_id = parseInt(e.currentTarget.getAttribute('data-id'));//vue获取当前dom对象
    let data = {id:2333,item_id:item_id};
    $.ajax({
      type: "post",
      url: "/add_to_cart",
      dataType: "json",
      data: JSON.stringify(data),
      contentType: 'application/json',
      success: function (response) {
        if(response.errcode ===1 ){
          console.log('加入购物车成功');
          let div = document.createElement('div');
          div.setAttribute('class','item');
          div.setAttribute('data-id',item_id);
          let img_src;
          if(e.target.nodeName==='IMG'){
            img_src = e.target.getAttribute('src');
          }else if(e.target.nodeName==='SPAN'){
            img_src = e.target.previousSbiling.getAttribute('src');
          }
          let str = '<div class="img_wrap"> '+'<img src="'+ img_src +'">'
              + '</div><span>test1</span>'+'<div class="delete_layer">'
            +'<p class="delete">删除</p>'+ '</div>';
          div.innerHTML = str;
          document.getElementById('content_right').appendChild(div);
        }else if(response.errcode ===2){
          alert('已经添加过了哦');
        }
      },
      error: function (request) {
      }
    });
  }

my_server.js接收请求 

app.post('/add_to_cart', function (req, res) {
  let request = req.body;
  let query = 'SELECT f_uid,f_item_id FROM t_item_user WHERE f_item_id = ?';
  let query_param = request.item_id;
  conn.query(query,query_param, function (err2, rows) {
    if (err2) console.log(err2);
    if(rows.length===0){
      //insert
      let sql = 'insert into t_item_user(f_uid,f_item_id) values(?,?)';
      let param = [req.body.id,req.body.item_id];
      conn.query(sql,param, function (err1, res1) {
        if(res1.affectedRows==1){
          let $return={
            errcode:1,
            errmsg:'插入成功',
          };
          res.end(JSON.stringify($return));
        }else{
          console.log('what');
        }
      })
    }else{
      let $return={
        errcode:2,
        errmsg:'该商品已经存在',
      };
      res.end(JSON.stringify($return));//返回
    }
  })
});

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

完整代码下载:simple_shopping_cart_3water.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 操作select下拉列表框的一点小经验
Mar 20 Javascript
js以对象为索引的关联数组
Jul 04 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
JavaScrip数组去重操作实例小结
Jun 20 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
ES6数组的扩展详解
Apr 25 #Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 #Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 #Javascript
Javascript中click与blur事件的顺序详析
Apr 25 #Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
Apr 25 #Javascript
ES6中Math对象新增的方法实例详解
Apr 25 #Javascript
jquery.form.js异步提交表单详解
Apr 25 #jQuery
You might like
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
Python的条件语句与运算符优先级详解
2015/10/13 Python
Python 控制终端输出文字的实例
2019/07/12 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
python使用列表的最佳方案
2020/08/12 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
自我推荐书
2013/12/04 职场文书
园林资料员岗位职责
2013/12/30 职场文书
宿舍打麻将检讨书
2014/01/24 职场文书
企业投资意向书
2015/05/09 职场文书
党支部考察鉴定意见
2015/06/02 职场文书