【新增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中的模板代码以下：

<template lang="pug">
    div.content_wrap
        div.content_left
            h3 商品列表
            div.item(v-for='list in mess',@click='add_to_cart',data-id='{{list.f_id}}')
                div.img_wrap
                    img(:src='list.f_avatar')
                span {{list.f_name}}

        div#content_right.content_right(@click="delete_item")
            h3 购物车
            div.item(v-for='list in cart_mess',data-id='{{list.f_id}}')
                div.img_wrap
                    img(:src='list.f_avatar')
                span {{list.f_name}}
                div.delete_layer
                p.delete 删除
</template>

项目引见

这是用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 = '<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.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也是极好的-.-。