用vue和node寫的簡(jiǎn)易購物車實(shí)現(xiàn)
項(xiàng)目介紹
這是用vue寫前端，用node來接收前端發(fā)來的請(qǐng)求，然后進(jìn)行相應(yīng)的數(shù)據(jù)操作，例如數(shù)據(jù)的存取和刪除等。這是個(gè)人的練習(xí)項(xiàng)目，目前功能做的比較簡(jiǎn)單，主要是展示商品列表，把商品加入購物車，從購物車刪除商品三個(gè)小功能。
搭建本地環(huán)境
因?yàn)槭怯胿ue，需要用babel把es6語法轉(zhuǎn)為es5語法。
1.配置.babelrc文件
{
"presets": [
"es2015",
"stage-2"
],
"plugins": ["transform-runtime"]
}
2.配置package.json文件
3.配置webpack.config.js文件。因?yàn)閎abel后的代碼是遵循commonjs規(guī)范的代碼，不能直接在瀏覽器上運(yùn)行，需要用webpack打包成可直接運(yùn)行的代碼。
配置完成后運(yùn)行 npm run build 和 webpack 命令。運(yùn)行后會(huì)生成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
數(shù)據(jù)庫使用mysql，僅有兩張表，一張表存儲(chǔ)的是商品id,商品名，商品圖。另一張表存儲(chǔ)的是用戶id和商品id。
my_server.js 使用node的expres,mysql,path,pug模塊，為了能解析http請(qǐng)求數(shù)據(jù)，還需要引入body-parser。
lib文件夾下的文件是babel生成的，src文件夾下的文件這是webpack打包后的文件。
購物車實(shí)例
今天優(yōu)化了下，購物車首屏加載使用pug模板將數(shù)據(jù)直出到頁面，提高加載速度。
1、連接數(shù)據(jù)庫
var conn = mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'root',
database:'test',
port: 3306
});
conn.connect();
2.初始化查詢商品列表和購物車。商品列表數(shù)據(jù)是直出的，而購物車列表是用post請(qǐng)求的數(shù)據(jù)，后續(xù)會(huì)優(yōu)化成數(shù)據(jù)直出到頁面，減少http請(qǐng)求，加快頁面加載速度。
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默認(rèn)模板
init_data:seach_result,
});
});
});
初始化查詢購物車列表
這里邏輯是根據(jù)用戶id查出商品id,再根據(jù)商品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頁面的請(qǐng)求
add_to_cart:function (e) {
let item_id = parseInt(e.currentTarget.getAttribute('data-id'));//vue獲取當(dāng)前dom對(duì)象
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('已經(jīng)添加過了哦');
}
},
error: function (request) {
}
});
}
my_server.js接收請(qǐng)求
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:'該商品已經(jīng)存在',
};
res.end(JSON.stringify($return));//返回
}
})
});
github：https://github.com/yunhongyao/simple_shopping_cart
完整代碼下載：simple_shopping_cart_jb51.rar
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue表單綁定的實(shí)例代碼（單選按鈕,選擇框（單選時(shí),多選時(shí),用 v-for 渲染的動(dòng)態(tài)選項(xiàng)）
本文通過實(shí)例代碼給大家介紹了Vue表單綁定（單選按鈕，選擇框（單選時(shí)，多選時(shí),用 v-for 渲染的動(dòng)態(tài)選項(xiàng)）的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
Vue中使用計(jì)算屬性的知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家整理了一篇關(guān)于Vue中使用計(jì)算屬性的知識(shí)點(diǎn)總結(jié)內(nèi)容，對(duì)此有興趣的朋友們可以跟著學(xué)習(xí)參考下。2021-12-12
淺析vue cli3 封裝Svgicon組件正確姿勢(shì)(推薦)
這篇文章主要介紹了vue cli3 封裝Svgicon組件正確姿勢(shì),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
Vue項(xiàng)目中封裝組件的簡(jiǎn)單步驟記錄
眾所周知組件(component)是vue.js最強(qiáng)大的功能之一,它可以實(shí)現(xiàn)功能的復(fù)用,以及對(duì)其他邏輯的解耦,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中封裝組件的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue單行文本溢出會(huì)出現(xiàn)title提示自定義指令
這篇文章主要為大家介紹了vue單行文本溢出會(huì)出現(xiàn)title提示自定義指令，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表的添加點(diǎn)擊，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家分享了vue多級(jí)多選菜單組件開發(fā)案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
在Vue3中進(jìn)行單元測(cè)試和集成測(cè)試的操作方法
隨著越來越多的企業(yè)和開發(fā)者選擇使用 Vue.js 構(gòu)建他們的前端應(yīng)用程序,確保代碼質(zhì)量和可靠性變得尤為重要,在本博客中,我們將深入探討如何在 Vue 3 中進(jìn)行單元測(cè)試和集成測(cè)試,并提供示例代碼來幫助您上手,需要的朋友可以參考下2025-01-01
詳解使用element-ui table組件的篩選功能的一個(gè)小坑
在element ui 框架中，對(duì)于table框架，有一個(gè)篩選功能，這篇文章主要介紹了詳解使用element-ui table組件的篩選功能的一個(gè)小坑，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-11-11
vue中g(shù)et請(qǐng)求如何傳遞數(shù)組參數(shù)的方法示例
這篇文章主要介紹了vue中g(shù)et請(qǐng)求如何傳遞數(shù)組參數(shù)的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11