jangocheng / vue-shopping Goto Github PK

View Code? Open in Web Editor NEW

This project forked from bobqiu/vue-shopping

0.0 1.0 0.0 9.99 MB

vue电商基于Vue2.5+Koa2+Mongodb+Vant的移动电商webapp

Home Page: http://101.132.188.203:8090

JavaScript 54.42% HTML 0.87% Vue 40.82% CSS 3.89%

vue-shopping's Introduction

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数据库并且打开连接

2：进入 egg 目录，在此目录下打开cmd窗口运行 cnpm i 安装依赖,然后 npm run dev 启动本地服务,打开http://127.0.0.1:3000 会自动把数据导入数据库,第一次运行项目需要导入打开默认导入一次（会自动把json数据导入数据库，看到控制台打印成功才能运行）

3：进入 vue 目录，在此目录下打开cmd窗口运行 cnpm i 安装依赖,然后 npm run dev 启动项目

4：浏览器打开 http://localhost:8090

5：项目所用到的接口在vue文件夹下src目录的Api.js里面

页面

实现功能

项目截图

关于前端请求接口跨域问题，

> 在前端目录vue下的vue.config.js文件下面的里加上这样一段代码，既可跨域,只适用于开发环境，3000是端口号。

devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:3000',
            ws: true,
            changeOrigin: true,  //是否跨域
            pathRewrite: {
                '^/api': ''
            }
        }
    }
    },
> 请求接口时这样写
newDetails(id) {
     axios.get(`/api/details`)
	 ....
}

Recommend Projects