用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动态调整iframe高度的方法
Mar 06 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
js弹出对话框方式小结
Nov 17 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
Angularjs实现多图片上传预览功能
Jul 18 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 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中动态修改ini配置
2014/10/14 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
农历与西历对照
2006/09/06 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
最丑的时钟效果!js canvas时钟制作方法
2016/08/15 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
pandas重新生成索引的方法
2018/11/06 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
python Xpath语法的使用
2020/11/26 Python
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
adidas泰国官网:adidas TH
2020/07/11 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
网络宣传方案
2014/03/15 职场文书
公司任命书模板
2014/06/06 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
高中生第一学年自我鉴定2015
2014/09/28 职场文书
mysql 获取时间方式
2022/03/20 MySQL
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android