用js实现购物车(用js实现放大镜效果)
用vue和node写的简易购物车实现
更新时间:2017年04月25日 11:12:54 作者:milk
这篇文章主要介绍了用vue和node写的简易购物车实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
项目介绍
这是用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请求,加快页面加载速度。
评论