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

用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请求的数据，后续会优XqYIUKQvF化成数据直出到页面，减少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

{{list.f_name}}

{{list.f_name}}

删除

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

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

http:// }else if(e.target.nodeName==='SPAN'){

img_src = e.target.previousSbiling.getAttribute('src');

}

let str = '

'+''

+ '

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

http:// }else if(e.target.nodeName==='SPAN'){

img_src = e.target.previousSbiling.getAttribute('src');

}

let str = '

+ '

+'

删除

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:'插入成功',

};

http:// 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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。