Geolage / Vue Shop
Licence: mit
An online-shop designed and developed by VueJS and NodeJS, along with their related tech stacks.
Stars: ✭ 105
Labels
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
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
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].