用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 相关文章推荐
纯JS实现动态时间显示代码
Feb 08 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
简单实现js拖拽效果
Jul 25 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
微信小程序身份证验证方法实现详解
Jun 28 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
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 eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
Jquery实现自定义窗口随意的拖拽
2014/03/12 Javascript
Javascript Objects详解
2014/09/04 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
Windows下PyMongo下载及安装教程
2015/04/27 Python
Python计算一个文件里字数的方法
2015/06/15 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
详解Numpy中的数组拼接、合并操作(concatenate, append, stack, hstack, vstack, r_, c_等)
2019/05/27 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
.net软件工程师面试题
2015/03/31 面试题
公司部门司机岗位职责
2014/01/03 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
工会主席事迹材料
2014/06/03 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
优秀党员推荐材料
2014/12/18 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
Python sklearn分类决策树方法详解
2022/09/23 Python