用vue和node写的简易购物车实现

项目介绍

这是用vue写前端，用node来接收前端发来的请求，然后进行相应的数据操作，例如数据的存取和删除等。这是个人的练习项目，目前功能做的比较简单，主要是展示商品列表，把商品加入购物车，从购物车删除商品三个小功能。

搭建本地环境

因为是用vue，需要用babel把es6语法转为es5语法。

1.配置.babelrc文件

2.配置package.json文件

3.配置webpack.config.js文件。因为babel后的代码是遵循commonjs规范的代码，不能直接在浏览器上运行，需要用webpack打包成可直接运行的代码。

配置完成后运行 npm run build 和 webpack 命令。运行后会生成lib和dist文件夹。

文件目录

数据库使用MysqL，仅有两张表，一张表存储的是商品id,商品名，商品图。另一张表存储的是用户id和商品id。

my_server.js 使用node的expres,MysqL,path,pug模块，为了能解析http请求数据，还需要引入body-parser。

lib文件夹下的文件是babel生成的，src文件夹下的文件这是webpack打包后的文件。

购物车实例

今天优化了下，购物车首屏加载使用pug模板将数据直出到页面，提高加载速度。

1、连接数据库

MysqL.createConnection({ host: 'localhost',user: 'root',password: 'root',database:'test',port: 3306 }); conn.connect();

2.初始化查询商品列表和购物车。商品列表数据是直出的，而购物车列表是用post请求的数据，后续会优化成数据直出到页面，减少http请求，加快页面加载速度。

index.pug首页模板

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

商品列表

购物车

删除

</div>

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],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,data:'' }; res.end(JSON.stringify($return));//返回 }

用vue和node写的简易购物车实现

项目介绍

搭建本地环境

购物车实例

初始化查询购物车列表

3.加入购物车

猜你在找的Vue相关文章