All Projects → Geolage → Vue Shop

Geolage / Vue Shop

Licence: mit
An online-shop designed and developed by VueJS and NodeJS, along with their related tech stacks.

Projects that are alternatives of or similar to Vue Shop

Vuejs Argon Design System
Vuejs Argon Design - Built with Automation Tools | AppSeed App Generator
Stars: ✭ 35 (-66.67%)
Mutual labels:  full-stack
Kotlin Fullstack Sample
Kotlin Full-stack Application Example
Stars: ✭ 1,197 (+1040%)
Mutual labels:  full-stack
Angular Full Stack
Angular Full Stack project built using Angular, Express, Mongoose and Node. Whole stack in TypeScript.
Stars: ✭ 1,261 (+1100.95%)
Mutual labels:  full-stack
Deep Microservices Todomvc
Todo Microservice is built on top of DEEP Framework using Microservices Architecture
Stars: ✭ 44 (-58.1%)
Mutual labels:  full-stack
Nekobin
Elegant and open-source pastebin service
Stars: ✭ 61 (-41.9%)
Mutual labels:  full-stack
Bancha
Bancha is an open-source CMS made by Nicholas Valbusa written in PHP5.3.
Stars: ✭ 76 (-27.62%)
Mutual labels:  full-stack
Reactjs Portfolio Mern Website
My Portfolio | Full Stack MERN Application
Stars: ✭ 25 (-76.19%)
Mutual labels:  full-stack
Rocky
React Over Crystal Kemal and Yarn
Stars: ✭ 94 (-10.48%)
Mutual labels:  full-stack
Vue Book
A simple full stack project about book~
Stars: ✭ 68 (-35.24%)
Mutual labels:  full-stack
Bug Tracker Pern Ts
Bug Tracking app with project members support. Made with PERN stack + TypeScript.
Stars: ✭ 79 (-24.76%)
Mutual labels:  full-stack
Fulcro
A library for development of single-page full-stack web applications in clj/cljs
Stars: ✭ 1,022 (+873.33%)
Mutual labels:  full-stack
Cuba
CUBA Platform is a high level framework for enterprise applications development
Stars: ✭ 1,114 (+960.95%)
Mutual labels:  full-stack
Deploy Spring Boot Aws Eb
Deploying Spring Boot Apps to AWS using Elastic Beanstalk
Stars: ✭ 79 (-24.76%)
Mutual labels:  full-stack
Angular7 Crud Example
Angular 7 CRUD Example (A Full Stack App)
Stars: ✭ 35 (-66.67%)
Mutual labels:  full-stack
Dev
The only truly universal productive development platform with Docker on macOS, Linux and Windows! http://blog.teracy.com/2016/12/20/teracy-dev-the-only-truly-universal-productive-development-platform-with-docker-on-macos-linux-and-windows/ http://slides.teracy.net/hoatle/productive-dev-workflow-with-teracy-dev/latest/
Stars: ✭ 84 (-20%)
Mutual labels:  full-stack
Crnn Pytorch
✍️ Convolutional Recurrent Neural Network in Pytorch | Text Recognition
Stars: ✭ 31 (-70.48%)
Mutual labels:  full-stack
Genie.jl
The highly productive Julia web framework
Stars: ✭ 1,198 (+1040.95%)
Mutual labels:  full-stack
Mern Mediastream
A MERN stack based media streaming application [Full-Stack React Projects]
Stars: ✭ 98 (-6.67%)
Mutual labels:  full-stack
Viewi
Powerful tool for building full-stack and completely reactive user interfaces using PHP
Stars: ✭ 93 (-11.43%)
Mutual labels:  full-stack
Data Driven Web Apps With Pyramid And Sqlalchemy
Demos and handouts for Talk Python's Data-Driven Web Apps with Pyramid and SQLAlchemy course
Stars: ✭ 79 (-24.76%)
Mutual labels:  full-stack

Vue-Shop

An online-shop designed and developed by VueJS and NodeJS, along with their related tech stacks.

vue-shop,一个采用VueJS和NodeJS及其相关技术栈设计和开发的网上商店。

技术栈

Vue2 + VueRouter + Vuex + ElementUI + Webpack + ES6 + Axios + SCSS + NodeJS + MongoDB + ...

关于接口数据

由于项目开发比较紧促,为了节省时间,此次先暂时使用github上的另一位开发者提供的接口,通过爬虫脚本将所获得的数据写进database作为缓存,以方便今后的使用。

注:商品数据通过爬虫抓取写入数据库 (eventproxy + superagent),因为数据结构十分复杂,所以在首页热门部分通过转发包装简化了数据,如果你发现部分商品不见了,可能是原有的数据结构已经发生了改变

这只是权宜之计,日后将会利用空余时间,独立设计和搭建一个完整的小型数据库服务器。

运行

git clone https://github.com/Geolage/vue-shop.git

cd vue-shop

npm install    // 如果网速慢,建议使用cnpm安装

npm run dev

// 如果运行出现代理错误,请检查 config 文件目录下的 index.js 文件里的 proxyTable 配置是否正确!!

// 通过运行node-api请求本地api代理应为
http://127.0.0.1:6666     // 即 localhost:6666

账户

注:为了更好地体验整个商店服务流程,请用户自己注册一个账号登录使用

默认账号如下:

 账号: admin  密码: admin

功能

  • [x] 登录、登出功能
  • [x] 注册
  • [x] 加入、删除、修改购物
  • [x] 新增、修改、删除收货地址
  • [x] 下单功能
  • [x] 支付功能 -- 由于没权限申请到蚂蚁金服支付宝开发接口,因此只是模拟支付
  • [x] 商品详情
  • [x] 个人中心
  • [x] 订单列表
  • [x] 更换头像 -- 头像暂时上传到七牛云

待续

更多功能正在开发当中,后期将会陆续补上 细节和bugs也将会不断完善和修复 如果您有更好的idea或者任何疑问,欢迎Issues,我将永远保持积极学习的态度,谢谢!

项目结构

  ... vue-shop
  │
  ├── client                                          // client目录
  │   ├── build                                       // webpack配置文件
  │   ├── config                                      // 项目打包路径
  │   ├── dist                                        // 打包文件
  │   ├── src                                         // 源码目录
  │   │   ├── api                                     // 请求接口
  │   │   ├── common                                  // 公共组件
  │   │   ├── components                              // 组件
  │   │   ├── page                                    // 页面
  │   │   │   └── Cart                                // 购物车
  │   │   │   └── Checkout                            // 提交订单
  │   │   │   └── Goods                               // 商品
  │   │   │       ├── goods                           // 商品列表
  │   │   │       ├── goodsDetails                    // 商品详情
  │   │   │   └── Home                                // 主页
  │   │   │   └── Login                               // 登录
  │   │   │   └── Order                               // 订单
  │   │   │       ├── order                           // 商品列表
  │   │   │       ├── payment                         // 提交订单
  │   │   │       ├── paysuccess                      // 提交成功
  │   │   │   └── User                                // 个人中心
  │   │   │       ├── children
  │   │   │       │   ├── addressList                 // 地址列表
  │   │   │       │   ├── information                 // 个人信息
  │   │   │       │   └── order                       // 订单列表
  │   │   │   └── index.vue                           // 主页
  │   │   ├── store                                   // vuex的状态管理
  │   │   │   ├── action.js                           // 配置actions
  │   │   │   ├── index.js                            // 引用vuex,创建store
  │   │   │   ├── modules                             // store模块
  │   │   │   ├── mutation-types.js                   // 定义常量muations名
  │   │   │   └── mutations.js                        // 配置mutations
  │   │   ├── App.vue                                 // 页面入口文件
  │   │   ├── main.js                                 // 程序入口文件,加载各种公共组件
  │   ├── favicon.ico                                 // 图标
  │   ├── index.html                                  // 入口html文件
  │
  ├── server                                          // server目录
  │   ├── bin                                         // server执行文件目录
  │   │    └── www                                    // 服务器执行配置
  │   ├── image                                       // 图片存放目录
  │   ├── init                                        // server初始化配置
  │   │     └── admin.js                              // 初始化连接数据库用户
  │   │     └── getGoods.js                           // 抓取商品数据
  │   │     └── initData.js                           // 初始化数据
  │   ├── models                                      // data模型配置
  │   │     └── goods.js                              // 商品模型
  │   │     └── user.js                               // 用户模型
  │   ├── public                                      // 公共文件目录
  │   │     ├── stylesheets                           // 样式目录
  │   ├── routes                                      // server路由配置
  │   │     └── goods.js                              // 商品相关
  │   │     └── index.js                              // 首页相关
  │   │     └── users.js                              // 用户相关
  │   ├── util                                        // 工具库
  │   │     └── dateFormat.js                         // 日期格式化模块
  │   ├── views                                       // server视图(尚未完成)
  │   │     └── error                                 // 404页面
  │   │     └── index                                 // 首页
  │   │     └── layout                                // 布局
  │   ├── app.js                                      // server入口文件
  │   

更多内容正在完善之中 ...

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].