yzbgyq / Vue Shopping
vue电商 基于Vue2.5+Koa2+Mongodb+Vant的移动电商webapp
Stars: ✭ 148
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Shopping
Doracms
DoraCMS是基于Nodejs+eggjs+mongodb编写的一套内容管理系统,结构简单,较目前一些开源的cms,doracms易于拓展,特别适合前端开发工程师做二次开发。
Stars: ✭ 3,180 (+2048.65%)
Mutual labels: mongodb, eggjs
Antvueblogfront
🔥使用Vue全家桶 + Egg + Mongodb 写的个人网站博客。使用docker compose 一键部署。(最近比较忙,部署还有点问题,后期补上)
Stars: ✭ 36 (-75.68%)
Mutual labels: mongodb, eggjs
Egg Mongo Native
MongoDB egg.js plugin using native driver.
Stars: ✭ 69 (-53.38%)
Mutual labels: mongodb, eggjs
Api Query Params
Convert URL query parameters to MongoDB queries
Stars: ✭ 141 (-4.73%)
Mutual labels: mongodb
My Moments
Instagram Clone - Cloning Instagram for learning purpose
Stars: ✭ 140 (-5.41%)
Mutual labels: mongodb
Nest User Auth
A starter build for a back end which implements managing users with MongoDB, Mongoose, NestJS, Passport-JWT, and GraphQL.
Stars: ✭ 145 (-2.03%)
Mutual labels: mongodb
Supersafebank
Sample Event Sourcing implementation with .NET Core
Stars: ✭ 142 (-4.05%)
Mutual labels: mongodb
Meanshop
🛒 Building an e-commerce application with the MEAN stack
Stars: ✭ 140 (-5.41%)
Mutual labels: mongodb
Node Mongo Seeds
A tool to quickly populate your mongo db from a set of .json files
Stars: ✭ 145 (-2.03%)
Mutual labels: mongodb
Cezerin2
Cezerin2 is React and Node.js based eCommerce platform. React Shopping Cart. "All In One" App: Cezerin API + Cezerin Storefront + Cezerin Dashboard.
Stars: ✭ 144 (-2.7%)
Mutual labels: mongodb
Gindex V4
A Vue Js Based G Index with Improved Dark Mode, Search and Video Player
Stars: ✭ 143 (-3.38%)
Mutual labels: mongodb
Sofa Bolt Node
The Node.js implementation of the SOFABolt protocol
Stars: ✭ 142 (-4.05%)
Mutual labels: eggjs
Lapidus
Stream your PostgreSQL, MySQL or MongoDB databases anywhere, fast.
Stars: ✭ 145 (-2.03%)
Mutual labels: mongodb
Reaction
Mailchimp Open Commerce is an API-first, headless commerce platform built using Node.js, React, GraphQL. Deployed via Docker and Kubernetes.
Stars: ✭ 11,588 (+7729.73%)
Mutual labels: mongodb
Keyhole
Survey Your Mongo Land - MongoDB Performance Analytics
Stars: ✭ 142 (-4.05%)
Mutual labels: mongodb
Vue Shoppingcart
ShoppingCart (Ecommerce) 🛒 Application using Vuejs, + Node.js + Express + MongoDB 🚀🤘
Stars: ✭ 141 (-4.73%)
Mutual labels: mongodb
Webchat
🔈 Websocket project based on vue(基于vue2.0的实时聊天项目)
Stars: ✭ 1,856 (+1154.05%)
Mutual labels: mongodb
shoppingMall-VUE
一个基于 vue2.5 + egg.js + mongodb + vant 的电商webapp网站,访问开发环境 http://101.132.188.203:8090
同版React项目地址 https://github.com/yzbgyq/React-shopping
nuxt实现的ssr在线阅读器 https://github.com/yzbgyq/vue-book
声明
目前代码项目还在不断完善中,本项目所用到的ui组件是有赞,前后端完全分离,后端只提供接口,后端代码写的比较简单,适合新手学习,这差不多是一个完整的电商网站流程,只是比较简单,非常适合新手学习研究,后续代码会慢慢更新,欢迎交流,欢迎Issues。 注:部分商品可能没有图片,使用了网络图片代替。
技术栈
vue2.5+vuex+vue-router+axios+better-scroll+stylus+localStorage+egg+mongoose+vant
项目说明
本项目采用前后端完全分离模式,后端提供接口,前端渲染数据,主目录下的 vue 目录是前端目录,egg 是后端目录 关于数据库问题,项目采用 mongodb 数据库,mongoose 建模,数据库版本是**Mongodb4.0**
运行项目步骤:
1:请确保node版本在8以上,本地安装好mongodb数据库并且打开连接
http://127.0.0.1:3000 会自动把数据导入数据库,第一次运行项目需要导入打开默认导入一次(会自动把json数据导入数据库,看到控制台打印成功才能运行)
2:进入 egg 目录,在此目录下打开cmd窗口运行 cnpm i 安装依赖,然后 npm run dev 启动本地服务,打开3:进入 vue 目录,在此目录下打开cmd窗口运行 cnpm i 安装依赖,然后 npm run dev 启动项目
http://localhost:8090
4:浏览器打开5:项目所用到的接口在vue文件夹下src目录的Api.js里面
页面
- [x] 商城首页
- [x] 商品分类页
- [x] 个人中心
- [x] 商品详情
- [x] 登录 / 注册
- [x] 地址管理
- [x] 最近浏览
- [x] 我的商品收藏
- [x] 购物车
- [x] 支付页面
- [x] 全部订单
实现功能
- [x] 商城首页板块的查询与展示
- [x] 商品各种分类数据查询与展示
- [x] 商品详情展示
- [x] 注册 / 登录
- [x] 商品收藏和取消收藏,写入数据库
- [x] 个人地址增加修改和删除,设置默认地址等,写入数据库
- [x] 最近浏览,最多30条,本地缓存
- [x] 加入购物车
- [x] 购物车选择商品结算,数量增加、修改、删除
- [x] 订单的支付与查询
- [x] 城市选择 / 城市搜索
- [x] 商品搜索功能
- [x] 用户资料修改
- [x] egg.js重写后端
- [x] 商品评论,加图片评论
- [x] 用户头像裁剪上传更改,手机端待优化
- [x] 手机接收验证码, 手机号注册
- [ ] 后台管理
项目截图
关于前端请求接口跨域问题,
> 在前端目录vue下的vue.config.js文件下面的里加上这样一段代码,既可跨域,只适用于开发环境,3000是端口号。
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
ws: true,
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': ''
}
}
}
},
> 请求接口时这样写
newDetails(id) {
axios.get(`/api/details`)
....
}
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].