基于vue2.0购物商城的开发

这是一个基于vue全家桶+node.js+express+mysql实现的商城网站

项目github地址:vueMall

查看demo:地址

如果觉得对您有帮助,您可以在左下角给我个喜欢支持一下,谢谢!

项目结构

如下图所示:

项目结构

:该项目是真实的请求后台api。server为后端数据接口项目结构,运行时可以单独拿出来放在wamp/www下或者xammp/htdocs 这两是集成包(apache+php+mysql...)没用过的小伙伴可以百度学习学习很容易的。当然你也可以自己单独配置Mysql环境,这个看个人习惯。连接Mysql代码在server/conf/conf.js大家只要将配置信息改成自己的就行。表创建sql语句在server/malldata.sql文件内大家可以直接复制插入就ok。我的数据库名是malldata,大家不一样的记得改,不懂的用数据库的小伙伴们去百度百度很容易的,基本的增删改查会就够了。

项目运行

# 克隆到本地:
https://github.com/wzz5304/vueMall.git

# 安装依赖:
vue:
....
cd vueMall-master(进入项目文件下)
npm install (安装依赖)

express:(进入项目文件下)
cd server
npm install(安装依赖)

# 本地开发,开启服务器,浏览器访问http://localhost:8081,express监听的是3001端口http://localhost:3001(我改了监听端口)
vue:
npm run dev

express:
node bin\www

# 构建生产
npm run build

注:第一次使用vue和express的小伙伴记得全局安装下vue-cli和express

  • vue-cli

    键入命令:npm install -g vue-cli

  • express

    键入命令:cnpm i -g express-generator

不懂的改后台监听端口的可以打开查看,对你有帮助记得给个爱心哦,谢谢!

项目说明

  • 用到的技术栈

    vue-cli2 + vue2.0 + vue-router + vuex + axios + stylus + scss + node.js + es6 + express + mysql

  • 实现功能

    - 登录注册
    - 商品详情
    - 购物车管理
    - 地址管理
    - 模拟支付(由于调用不了支付接口)
    - 订单管理
    
  • 功能说明
    - 基于vue2.0
    - 使用vue-cli脚手架搭建项目
    - 使用vue-router实现路由切换
    - 使用vuex进行状态管理
    - 使用axios进行数据请求
    - stylus和scss编写样式
    - 联动滚动借助了vue-infinite-scroll插件和图片懒加载vue-lazyload插件
    - Express编写后台api
    - Mysql实现数据存储

学习参考

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Weex使用mustache的语法({{...}})来对<template>中的模板和 里的数据进行绑定. 一旦数...
    阿凡提说AI阅读 5,118评论 0 0
  • 一年到此,几乎已可以看到尽头。今年这里的秋天难得的温暖,实在令我喜出望外。如许多金红的树叶像是蓝天之下燃烧的火焰,...
    夜游者言阅读 1,643评论 2 3
  • 我追寻着时间的足迹再一次踏上旅途 不知道未来是怎样的方向 所以迎着太阳落下的晚霞走去 远方有诗还有数不尽的思绪 此...
    秋文清阅读 1,522评论 0 0
  • 【成为更好的自己】2016年记录(day7) 原先我觉得会最好写的一篇总结,此刻变得最难下结论。遇见村小两年,走近...
    阿果MePlus阅读 2,047评论 0 0
  • ​ 1、安装pipeline插件 2、新建pipeline类型的项目 3、配置脚本 node('master'):...
    许你一枝花阅读 3,034评论 0 0

友情链接更多精彩内容