01 硅谷外卖项目day01

README.md

项目介绍

  • gshop-client 硅谷外卖前台
  • gshop-server 硅谷外卖后台
  • gshop-client_pages 硅谷外卖切图

技术参考

前台

  • axios
  • better-scroll
  • date-fns
  • mint-ui
  • mockjs
  • moment
  • node-static
  • swiper
  • vant
  • vue2.5
  • vue-lazyload
  • vue-router
  • vuex

后台

  • node
  • mongoose
  • express
  • js-base64
  • svg-captcha

项目运行

  1. 前后台安装相应依赖
npm install
  1. 安装mongoDB数据库并成功启动
MONGO_HOME = C:\Program Files\MongoDB\Server\3.4\bin
Path = %MONGO_HOME%
  • 推荐使用可视化工具管理数据库,清晰明了,我现找了一个,全是英文看不懂,但也能凑活用了,如果有更好的希望推荐下。教程网址Robo 3T,mongoDB可视化工具
  1. 启动后台项目
  • 启动前查看本地MongoDB地址并进行更改
//  --db/models.js
mongoose.connect('mongodb://localhost:27017/guigu_zhipin')
  • 修改发送短信验证SID 短信验证官网:容联云通讯
  • 注册登录以后,控制台首页有开发者主账号,复制四条秘钥进行修改
// --util/sms_util.js
var ACCOUNT_SID = '填入你的SID';
var AUTH_TOKEN = '填入你的TOKEN';
var Rest_URL = 'https://app.cloopen.com:8883';
var AppID = '8aaf0708697b6beb016985281c8103f4';
  • 启动
PS M:\个人做过的项目\学习项目\vue项目\硅谷外卖\gshop\gshop-server> npm start

> gshop_server@0.0.0 start M:\个人做过的项目\学习项目\vue项目\硅谷外卖\gshop\gshop-server
> nodemon ./bin/www

[nodemon] 1.17.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node ./bin/www`
server running on port 3000
数据库连接成功!

数据库连接成功,启动成功,端口号3000

修改默认端口号在bin/www文件

// --bin/www
var port = normalizePort(process.env.PORT || '3000');
  1. 启动前台项目
npm start

前台登录注册功能是一起的,也就是登录时后台判断是否有此账号,没有进行注册再登录,返回登录成功信息

项目源码rar+百度云盘视频链接 项目描述: 01_vue项目_项目功能演示.avi 02_Vue项目_项目开发准备.avi 03_Vue项目_创建项目并运行.avi 04_Vue项目_资源准备.avi 05_Vue项目_项目源码目录设计.avi 06_Vue项目_stylus使用.avi 07_Vue项目_组件化编码.avi 08_Vue项目_引入vue-router.avi 09_Vue项目_FooterGuide组件.avi 10_Vue项目_各导航路由组件(静态).avi 11_Vue项目_HeaderTop组件.avi 12_Vue项目_使用swiper实现商品分类列表轮播.avi 13_Vue项目_ShopList组件(静态).avi 14_Vue项目_Login组件(静态).avi 15_Vue项目_启动后台应用并测试接口.avi 16_Vue项目_封装ajax请求函数.avi 17_Vue项目_封装接口请求函数.avi 18_Vue项目_使用git对项目进行版本控制.avi 19_Vue项目_复习.avi 20_Vue项目_配置代理实现跨域ajax请求.avi 21_Vue项目_创建vuex的整体结构.avi 22_Vue项目_使用vuex管理首页数据.avi 23_Vue项目_异步显示当前地地址.avi 24_Vue项目_异步显示食品分类轮播列表.avi 25_Vue项目_使用watch和$nextTick解决轮播的bug.avi 26_Vue项目_异步显示商家列表.avi 27_Vue项目_使用svg显示加载中提示界面.avi 28_Vue项目_Star组件.avi 29_Vue项目_注册登陆功能演示说明.avi 30_Vue项目_登陆界面效果1_切换登陆方式.avi 31_Vue项目_登陆界面效果2_手机号检查.avi 32_Vue项目_登陆界面效果3_倒计时效果.avi 33_Vue项目_登陆界面效果4_切换密码的显示和隐藏.avi 34_Vue项目_登陆界面效果5_前台表达验证.avi 35_Vue项目_复习.avi 36_Vue项目_动态一次性图形验证码.avi 37_Vue项目_定义接口请求函数.avi 38_Vue项目_登陆_发送短信验证码.avi 39_Vue项目_登陆_完成登陆请求.avi 40_Vue项目_登陆_保存用户信息到vuex.avi 41_Vue项目_登陆后更新个人中心界面.avi 42_Vue项目_登陆更新跳转路由.avi 43_Vue项目_自动登陆.avi 44_Vue项目_退出登陆.avi 45_Vue项目_搭建商家整体界面.avi 46_Vue项目_json的理解.avi 47_Vue项目_设计json数据.avi 48_Vue项目_使用mockjs模拟接口数据.avi 49_Vue项目_ajax请求mockjs模拟的接口.avi 50_Vue项目_ShopHeader组件.avi 51_Vue项目_复习.avi 52_Vue项目_异步显示goods数据.avi 53_Vue项目_滑动效果分析.avi 54_Vue项目_使用better-scroll实现回弹滑动.avi 55_Vue项目_收集scrollY.avi 56_Vue项目_收集tops.avi 57_Vue项目_滑动右侧列表更新当前分类.avi 58_Vue项目_解决惯性滑动不更新当前分类的bug.avi 59_Vue项目_点击分类项滑动右侧列表.avi 60_Vue项目_CartControl组件1.avi 61_Vue项目_CartControl组件2.avi 62_Vue项目_Food组件1.avi 63_Vue项目_Food组件2.avi 64_Vue项目_ShopCart组件1.avi 65_Vue项目_ShopCart组件2.avi 66_Vue项目_显示购物项列表.avi 67_Vue项目_解决列表显示的3个bug.avi 68_Vue项目_复习.avi 69_Vue项目_购物车动画.avi 70_Vue项目_购物车列表的滑动.avi 71_Vue项目_清空购物车.avi 72_Vue项目_ShopRatings组件1.avi 73_Vue项目_ShopRatings组件2.avi 74_Vue项目_ShopInfo组件1.avi 75_Vue项目_ShopInfo组件2.avi 76_Vue项目_ShopInfo组件3.avi 77_Vue项目_Search组件.avi 78_Vue项目_缓存路由组件对象.avi 79_Vue项目_路由组件懒加载.avi 80_Vue项目_图片懒加载vue-lazyload.avi 81_Vue项目_使用moment实现日期过滤器.avi 82_Vu
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值