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

前端之家收集整理的这篇文章主要介绍了用vue和node写的简易购物车实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

项目介绍

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

搭建本地环境

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

1.配置.babelrc文件

2.配置package.json文件

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

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

文件目录

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

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

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

购物车实例

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

1、连接数据库

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

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

index.pug首页模板

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

商品列表
{{list.f_name}}
购物车
{{list.f_name}}
删除

</div>

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写异步逻辑

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

});

});

3.加入购物车

list.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 = '
test1'+'
删除

'+ '
'; div.innerHTML = str; document.getElementById('content_right').appendChild(div); }else if(response.errcode ===2){ alert('已经添加过了哦'); } },error: function (request) { } }); }

my_server.js接收请求

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

完整代码下载:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章