这是用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> <div> <h3>商品列表</h3> <div v-for="list in mess" @click="add_to_cart" data-id="{{list.f_id}}"> <div> <img :src='list.f_avatar' > </div> <span>{{list.f_name}}</span> </div> </div> <div @click="delete_item"> <h3>购物车</h3> <div v-for="list in cart_mess" data-id="{{list.f_id}}"> <div> <img :src='list.f_avatar'> </div> <span>{{list.f_name}}</span> <div> <p>删除</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('https://www.jb51.net/',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页面的请求