用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 相关文章推荐
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
分析JS中this引发的bug
Dec 12 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
简单介绍Python中的decode()方法的使用
2015/05/18 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
python接入支付宝的实例操作
2020/07/20 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
Html5定位终极解决方案
2020/02/05 HTML / CSS
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
迟到检讨书500字
2014/02/05 职场文书
网络优化专员求职信
2014/05/04 职场文书
企业委托书范本
2014/09/13 职场文书
民用住房租房协议书
2014/10/29 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
大学生求职信怎么写
2015/03/19 职场文书
2015驻村干部工作总结
2015/04/07 职场文书