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

项目介绍

这是用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_jb51.rar

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

您可能感兴趣的文章:

• 使用node+vue.js实现SPA应用
• 利用Vue.js+Node.js+MongoDB实现一个博客系统（附源码）
• 详解使用nodeJs安装Vue-cli
• 详解在vue-cli项目中安装node-sass
• vue+node+webpack环境搭建教程
• node vue项目开发之前后端分离实战记录