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

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

-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

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

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')

<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>

 //初始化查询商品列表  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,    });  });});

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));//返回    }  });});

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) {      }    });  }

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));//返回    }  })});