国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用vue和node寫的簡易購物車

QiShare / 2780人閱讀

摘要:配置完成后運行和命令。另一張表存儲的是用戶和商品。連接數據庫初始化查詢商品列表和購物車。商品列表和購物車數據是直出,減少頁面請求。

【新增vue中使用pug模板】

在webpack.config.js引入pug的loader,就可以在vue中使用pug模板。

module: {
        loaders: [
            {
                test: /.vue$/,
                loader: "vue-loader"
            },
            {
                test: /.pug$/,
                loader: "pug"
            }
        ]
    },
    vue: {
        loaders: {
            html: "pug",
            css: "style!css!stylus",
        },
    }

我的list.vue中的模板代碼如下:

項目介紹

這是用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打包成可直接運行的代碼。
之前有寫過babel相關的筆記,可以點擊這里查看。
配置完成后運行 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.初始化查詢商品列表和購物車。商品列表和購物車數據是直出,減少頁面http請求。
index.pug首頁模板

doctype html
html(lang="en")
    head
        title= "index"
    body
        div(id="app")
            app
    script.
      list_data= !{init_list_data};
      cart_data= !{init_cart_data};
    script(src="/index.js")

my_server.js

 //初始化查詢商品列表和購物車
app.get("/",function(req,res){//有index默認進index頁,我把index名字改了才進入這個頁面的
let list_query_sql = "select f_id,f_name,f_avatar from t_list limit 10",
    list_search_result,
    cart_search_result;

return new Promise(function(resolve){
    conn.query(list_query_sql, function (err2, rows) {
        if (err2) console.log(err2);
        list_search_result = JSON.stringify(rows);
        resolve(list_search_result);
    })
})
    .then(function(list_search_result){
        let cart_query_sql = "SELECT t_list.f_id,t_list.f_name,t_list.f_avatar FROM t_list INNER JOIN t_item_user ON t_list.f_id= t_item_user.f_item_id WHERE t_item_user.f_uid=2333";
        conn.query(cart_query_sql, function (err2, rows) {
            if (err2) console.log(err2);
            cart_search_result = JSON.stringify(rows);
            res.render("index",{//pug(jade)是express默認模板
                init_list_data:list_search_result,
                init_cart_data:cart_search_result,
            });
        });
    });

});

2.加入購物車
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};//傳入用戶id和商品id
            this.$http.post("/add_to_cart",{id:2333,item_id:item_id}).then(response => {
                if(response.data.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.data.errcode ===2){ alert("已經添加過了哦"); } }, response => { // error callback }); }

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;

return new Promise(function(resolve){
    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];
            resolve(param);
        }

    })
})
    .then(function(param){
        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");
            }
        })
})
    .catch(function(){
        let $return={
            errcode:2,
            errmsg:"該商品已經存在",
        };
        res.end(JSON.stringify($return));//返回
    })

});

具體代碼我的github上有,隨手給個star也是極好的-.-。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111928.html

相關文章

  • vuenode寫的簡易物車

    摘要:配置完成后運行和命令。另一張表存儲的是用戶和商品。連接數據庫初始化查詢商品列表和購物車。商品列表和購物車數據是直出,減少頁面請求。 【新增vue中使用pug模板】 在webpack.config.js引入pug的loader,就可以在vue中使用pug模板。 module: { loaders: [ { test:...

    Binguner 評論0 收藏0
  • vuenode寫的簡易物車

    摘要:配置完成后運行和命令。另一張表存儲的是用戶和商品。連接數據庫初始化查詢商品列表和購物車。商品列表和購物車數據是直出,減少頁面請求。 【新增vue中使用pug模板】 在webpack.config.js引入pug的loader,就可以在vue中使用pug模板。 module: { loaders: [ { test:...

    Honwhy 評論0 收藏0
  • express+mongoose 實現簡易后臺數據接口

    摘要:之前剛入門并做好了一個簡而全的純全家桶的項目,數據都是本地模擬請求的詳情請移步這里為了真正做到數據庫的真實存取,于是又開始入門了并以此來為之前的頁面寫后臺數據接口。 之前剛入門vue并做好了一個簡而全的純vue2全家桶的項目,數據都是本地 json 模擬請求的;詳情請移步這里:vue-proj-demo 為了真正做到數據庫的真實存取,于是又開始入門了 node+express+mong...

    dreambei 評論0 收藏0
  • 一些基于React、VueNode.js、MongoDB技術棧的實踐項目

    摘要:利用中間件實現異步請求,實現兩個用戶角色實時通信。目前還未深入了解的一些概念。往后會寫更多的前后臺聯通的項目。刪除分組會連同組內的所有圖片一起刪除。算是對自己上次用寫后臺的一個強化,項目文章在這里。后來一直沒動,前些日子才把后續的完善。 歡迎訪問我的個人網站:http://www.neroht.com/? 剛學vue和react時,利用業余時間寫的關于這兩個框架的訓練,都相對簡單,有的...

    tangr206 評論0 收藏0
  • 基于 Vue2+Node+mongoDB 的前后端分離全棧練手小項目

    摘要:本文源碼簡介之前剛入門并做好了一個簡而全的純全家桶的項目,數據都是本地模擬請求的詳情請移步這里為了真正做到數據庫的真實存取,于是又開始入門了并以此來為之前的頁面寫后臺數據接口。 本文源碼:Github 簡介: 之前剛入門vue并做好了一個簡而全的純vue2全家桶的項目,數據都是本地 json 模擬請求的;詳情請移步這里:vue-proj-demo 為了真正做到數據庫的真實存取,于是又...

    jay_tian 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<