本项目基于Nuxtjs、Nodejs、Koa、ElementUI、mongodb、redis
高仿美团全栈项目Nuxtjs+NodeJs+mongodb+redis
正版地址:https://coding.imooc.com/class/280.html
本项目所有接口都来自于本地数据库,只有一个获取本地地址的是用的一个天气接口嘿嘿
- Nuxt.js
- koa
- SMTP(邮箱验证码)
- 组件化开发
- 语义化DOM结构
- 网站主题基本架构
- 某些库的使用(passport...)
- 数据库的少量操作
- 路由设计
- 项目目录结构设计
- 登录
- 注册
- 地图服务
- 搜索
- 分类
- 购物车
- 订单
- 支付
- 图片懒加载
- 某些页面的点击跳转
- 获取本地位置信息
- 功能细节
启动前请确保已经开启mongodb
和redis
# 安装依赖
$ yarn install
# 本地启动
$ yarn dev
# 打包上线
$ yarn build
$ yarn start
# 生成静态项目
$ yarn generate
mongodb:新版的mongodb没有导入,需要下载工具包解压后导入安装mongobd路径下lib
文件中
Nuxtjs:新版的Nuxtjs没有server
目录需要自己手动安装koa koa-router
等相关依赖包
mongodbCollection:使用mongoose默认会把集合变成复数,所以如果集合名是单数时导出模型时指定第三个参数-集合名
SMTP:好像过一段时间授权码就会自动失效,重新获取下就好
新版Nuxtjs
配置koa
方法
1: nuxtjsconfig.js
加上dev: process.env.NODE_ENV !== "production",
2 : 安装nodemon
3 : 报错无法使用ES6格式书写:安装babel
和babel-preset-env
,
4 : 修改package.json
中 scripts
的dev
为 "NODE_ENV=development nodemon server/index.js --exec babel-node"
Collection的导入与导出
导出:mongoexport -h dbhost -d dbname -c collectionName -o outputPath
导入:mongoimport -h dbhost -d dbname -c collectionname
├─store //VueX
| ├─index.js
| ├─modules
| | ├─geo.js
| | └home.js
├─static
| └favicon.ico
├─server
| ├─index.js //启动文件夹
| ├─interface //接口
| | ├─cart.js
| | ├─category.js
| | ├─geo.js
| | ├─order.js
| | ├─search.js
| | ├─users.js
| | ├─utils
| | | ├─axios.js
| | | └passport.js
| ├─dbs_copy //相关Collection
| | ├─areas.dat
| | ├─category.dat
| | ├─cities.dat
| | ├─maps.dat
| | ├─menus.dat
| | ├─pois.dat
| | ├─provinces.dat
| | ├─regions.dat
| | ├─styles.dat
| | └topsearches.dat
| ├─dbs //数据库配置
| | ├─config.js
| | ├─models
| | | ├─carts.js
| | | ├─category.js
| | | ├─cities.js
| | | ├─menus.js
| | | ├─orders.js
| | | ├─pois.js
| | | ├─provinces.js
| | | ├─styles.js
| | | └users.js
├─plugins
| └element-ui.js
├─pages //路由页面
| ├─cart.vue
| ├─changeCity.vue
| ├─detail.vue
| ├─exit.vue
| ├─index.vue
| ├─login.vue
| ├─order.vue
| ├─products.vue
| └register.vue
├─middleware
├─layouts
| ├─blank.vue
| └default.vue
├─components //组件
| ├─Logo.vue
| ├─public
| | ├─map.vue
| | ├─header
| | | ├─geo.vue
| | | ├─index.vue
| | | ├─nav.vue
| | | ├─searchBar.vue
| | | ├─topBar.vue
| | | └user.vue
| | ├─footer
| | | └index.vue
| ├─products
| | ├─category.vue
| | ├─crumbs.vue
| | ├─iselect.vue
| | ├─list.vue
| | └product.vue
| ├─order
| | └list.vue
| ├─index
| | ├─artistic.vue
| | ├─life.vue
| | ├─menu.vue
| | └slider.vue
| ├─detail
| | ├─crumbs.vue
| | ├─item.vue
| | ├─list.vue
| | └summary.vue
| ├─chanegCity
| | ├─categroy.vue
| | ├─hot.vue
| | └iselect.vue
| ├─cart
| | └list.vue