【新增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_wrapdiv.content_lefth3 商品列表div.item(v-for='list in mess',@click='add_to_cart',data-id='{{list.f_id}}')div.img_wrapimg(: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_wrapimg(:src='list.f_avatar')span {{list.f_name}}div.delete_layerp.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")headtitle= 'index'bodydiv(id='app')appscript.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和商品idthis.$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) {//insertlet 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也是极好的-.-。