Coder Social home page Coder Social logo

heyushuo / mpvue-shop Goto Github PK

View Code? Open in Web Editor NEW
1.4K 40.0 356.0 1.1 MB

基于mpvue的网易严选商城。前端:mpvue;后端:Node、koa2、mysql、knex.js 操作数据库。后台代码已上线腾讯云

JavaScript 19.09% HTML 0.12% Vue 46.95% CSS 33.84%

mpvue-shop's Introduction

mpvue 仿网易严选

如何开启项目?

git clone https://github.com/heyushuo/mpvue-shop.git

npm install //推荐使用cnpm进行安装,百度淘宝镜像
//开启项目
npm run dev

//最后通过微信开发者工具打开项目,就可以运行项目了

2019年10月18日:建议本地自己搭建后台非常简单(搭建后台进行了简化),方便自己调试, 小程序后端 点击进入小程序服务端源码地址

2019年8月26日:由于域名和证书到期了,以前下载项目的接口请求不到了,需要把请求的域名换成ip加端口

//在utils文件下的index.js里,把host换成ip加端口

const host = "https://www.heyuhsuo.xyz";
// 换成下边的
const host = "http://118.25.222.68:5757/heyushuo";

2019 年 2 月 15 日:最近有人下载项目安装依赖后无法运行代码,因为 mpvue 跟新导致的,需要进行版本锁定,如下修改 package.json 文件.删除node_modules,重新安装依赖

"mpvue": "1.0.18",
"mpvue-template-compiler": "1.0.18",

2018 年 10 月 26 日 : 在 src 目录下新增了minxins 文件夹,这里主要为了解决跳转同一个页面数据数据没有初始化问题,全局添加混合组件,不需要再每个页面 onload 的时候进行初始化数据了 //在 main.js 里引入此混合组件 //全局处理重复页面跳转详情初始化,和详情跳详情返回的 bug import MyPlugin from './minxins' Vue.use(MyPlugin)

2018 年 9 月 13 日 : 新增了VUEX的引入,在 store 问价夹里并且在首页的城市获取,和自己选择城市的页面中使用了 VUEX,大家可以参考 mpvue 中如何引入和使用 vuex 的

2018 年 9 月 6 日 : 在首页顶部新增搜索以及引入高德地图 api

1.用户同意获取授权和用户不同意获取授权两种情况

2018 年 9 月 5 日 : 在商品详情页面新增商品转发功能(分享功能)

Image text

2018 年 8 月 30 日 : 好多人反映登录无法登录,因为这个需要自己配置后台才可以,为了可以让大家体验登录后的一些操作,在这里我添加了默认用户,大家可以体验其他功能! 这里可能会遇到问题:大家都是使用的这一个账号,添加购物车,收藏还有一些收货地址之类的可能会显示很多人添加的,我会定期删除线上默认用户的这些信息, 抓紧 clone 最新的代码体验

大家也可以自己默认账户信息

大家也可以在App.vue设置自己的默认账户信息(这样就不会和大家冲突了)
openId修改为一个唯一的值就行

var userInfo = {"openId":"oQmbb4sNZdxaUQZ0sfYgvtOP2S7c","nickName":"何玉硕","gender":1,"language":"zh_CN","city":"Changping","province":"Beijing","country":"China","avatarUrl":"https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIbWFEIJj8IpGeHM7dGic1aTFZALjWcMm9ltWfFiaQfVRYticWBfgGfzXWMt2EkJWiaicPtftHAlWxUibxQ/132","watermark":{"timestamp":1535513485,"appid":"wx601ce71bde7b9add"}};
  var openId = userInfo.openId;
  wx.setStorageSync("userInfo", userInfo);
  wx.setStorageSync("openId", openId);

前言

一直打算自己写接口,写一个上线的小程序,数据方面总是无从下手,无意中发现一个网友爬取的网易严选商城的一些数据大概一共有 20 张左右的表,算是相当详细了(对其中部分表的字段和部分数据进行了修改,)平时写项目大部分用的 vue,所以直接选择了 mpvue 开发,后端一开始打算用 php 但是学了半个月感觉需要学的东西太多,短时间里写不出这个线上小程序,最后决定用 node 来开发提供接口。

此项目仅供学习参考

技术站

前端:小程序、mpvue、async、await

后端:Node、koa2、mysql、knex.js 操作数据库,可视化工具使用的 Navicat

运行方法

npm install 下载依赖
npm run dev  运行项目
这里部分项目的接口都可以访问了,但是登录接口不可以,只有本地搭建一套才可以使用登录接口
因为你用的自己的Appi打开微信开发者工具,无法调用我这边的登录,我后台默认是自己的Appid

目前上线状态

由于域名备案小程序暂时无法上线,但是小程序的服务端已经上线,接口都是访问的线上接口,你只需要把源码克隆到本地,直接在微信开发者工具中,就能请求到数据,看到效果 ,备案通过后会把二维码添加进来

喜欢的希望大家点个 star 鼓励一下,谢谢大家的支持!!!!

商城主要实现的功能

  • 首页、专题、分类、购物车、我的
  • 小程序授权登陆获取用户信息
  • 首页包含品牌制造页、品牌制造详情页面、新品首发页面、人气推荐页面、各分类列表
  • 商品详情页面,包含常见问题、大家都在看商品列表、加入购物车、收藏商品、立即购买、下订单、选择收货地址
  • 搜索功能,包含历史记录、热门搜索、搜索后列表展示、模糊搜索提示
  • 商品列表部分包含综合、价格高低进行排序
  • 专题功能,包含专题详情、专题推荐列表
  • 分类,包含左边大分类和右边详细分类
  • 购物车,包含商品单选全选、左滑删除商品、下订单等功能
  • 地址管理,包含新建地址和导入微信地址,地址编辑、左滑删除、设置默认地址
  • 我的页,包含我的收藏、地址管理、意见反馈

部分效果展示

1.首页展示和专题页效果

2、分类页面,分类子页面以及搜索功能、搜索列表、历史记录、模糊搜索提示

3、购物车功能添加购物车,单选多选,删除和商品收藏功能

4、地址管理

项目总结和遇到的一些问题 # 点击进入博客查看详情

最后

  • 喜欢的记得点个 star,鼓励一下谢谢哈!!
  • 微信号 hys838723
  • qq 群号 647099996

mpvue-shop's People

Contributors

heyushuo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mpvue-shop's Issues

项目启动之后报错?

/mpvue-shop/node_modules/mpvue-template-compiler/build.js:5785
switch(fileExt.platform) {
^

TypeError: Cannot read property 'platform' of undefined

从商品详情进入购物车会报错

thirdScriptError Cannot read property '__wxWebviewId__' of null;at "pages/categorylist/main" page lifeCycleMethod onUnload function TypeError: Cannot read property '__wxWebviewId__' of 'null' at Vue$3.pageId [as $pageId] (http://127.0.0.1:25720/appservice/static/js/app.js:207:47) at Vue$3.onUnload (http://127.0.0.1:25720/appservice/static/js/app.js:231:35) at callHook$1 (http://127.0.0.1:25720/appservice/static/js/vendor.js:4713:33) at r.onUnload (http://127.0.0.1:25720/appservice/static/js/vendor.js:5030:15) at r.<anonymous> (http://127.0.0.1:25720/appservice/__dev__/WAService.js:18:24831) at R (http://127.0.0.1:25720/appservice/__dev__/WAService.js:18:1550) at U (http://127.0.0.1:25720/appservice/__dev__/WAService.js:18:2516) at K (http://127.0.0.1:25720/appservice/__dev__/WAService.js:18:3414) at Function.<anonymous> (http://127.0.0.1:25720/appservice/__dev__/WAService.js:18:6274) at http://127.0.0.1:25720/appservice/__dev__/WAService.js:18:12486

从商品详情进入购物车会报这个错误
从tabBar进入购物车不会报错

找到一个警告问题

src/pages/goods/main.js
config配置里面写tabBar小程序会警告无效的 pageJSON(pages/goods/main)["tabBar"]
删掉或者设置标题

H5

请教下如何转成H5

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.