項目介紹
這是用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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
