shoppingMall-VUE

一个基于 vue2.5 + koa2 + mongodb + vant 的电商webapp网站

声明

本项目所用到的ui组件是有赞，前后端完全分离，后端只提供接口，后端代码写的比较简单，适合新手学习，这差不多是一个完整的电商网站流程，只是比较简单，非常适合新手学习研究，后续代码会慢慢更新，欢迎交流，欢迎Issues。 注：部分商品可能没有图片，使用了网络图片代替。

技术栈

vue2.5+vuex+vue-router+axios+better-scroll+stylus+localStorage+koa2+mongoose+vant

页面

• 商城首页
• 商品分类页
• 个人中心
• 商品详情
• 登录 / 注册
• 地址管理
• 最近浏览
• 我的商品收藏
• 购物车
• 支付页面
• 全部订单

实现功能

• 商城首页板块的查询与展示
• 商品各种分类数据查询与展示
• 商品详情展示
• 注册 / 登录
• 商品收藏和取消收藏，写入数据库
• 个人地址增加修改和删除，写入数据库
• 最近浏览，最多30条，本地缓存
• 加入购物车
• 购物车选择商品结算，数量增加、修改、删除
• 订单的支付与查询
• 城市选择 / 城市搜索
• 商品搜索功能
• 商品评论

截图

项目说明

本项目采用前后端完全分离模式，后端提供接口，前端渲染数据,主目录下的 mall 目录是前端目录，server 是后端目录，进入这两目录先 npm i 下载依赖，然后 npm start，浏览器打开 http://localhost:8090 既可。

关于数据库问题，项目采用 mongodb 数据库，mongoose 建模，运行项目前先要导入往数据库导入数据，数据库版本是**Mongodb4.0，首先安装Mongodb，安装就不说了，安装好后进入项目 server 目录，在此目录下打开cmd** 窗口（请确保你的 node 版本的7.6以上）分别运行 index1.js 和 index2.js 往数据库导入数据，提示导入成功后,导入成功后才能运行项目

前端请求接口跨域问题，

> 在前端目录mall下的config/index.js文件下面的proxyTable里加上这样一段代码，既可跨域,只适用于开发环境。
proxyTable: {
  '/':{
    target:'http://localhost:3000',
    changeOrigin: true,  //是否跨域
    pathRewrite:{
      '^/api':''
    }
  }
},
> 请求接口时这样写
newDetails(id) {
     axios.get(`/api/details`)
	 ....
}