# mt-app

**Repository Path**: BruceLluo/mt-app

## Basic Information

- **Project Name**: mt-app
- **Description**: 使用Vue全家桶+SSR+Koa2全栈开发美团网
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2019-07-07
- **Last Updated**: 2021-06-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mt-app

#### 介绍
使用Vue全家桶+SSR+Koa2全栈开发美团网

#### 软件架构
软件架构说明


#### 安装教程

1. xxxx
2. xxxx
3. xxxx

#### 使用说明

1. xxxx
2. xxxx
3. xxxx

#### 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request


#### 码云特技

1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5. 码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

1.首先是做网页的header,把他分为了几个模块，这些模块单独拉出来编写

3.搜索框的逻辑处理，首先在搜索框上双向绑定search值，以及获取它的焦点，使用v-if来进行是否热区的判断，如果search为空则显示热区，否则就是展示用户想要搜索的信息内容的提示，这里也要绑定一个焦点监控函数，以及失去焦点监控函数

5.菜单的详细内容的逻辑处理，菜单的详细部分要使用模板循环，根据数据的变化来进行改变模板里的内容，在进入菜单时设置mouseleave和mouseenter两种监听事件，进入时获取鼠标hover下的标签里classname，把他赋值给一个变量kind用来与数组中的属性type进行比较相同的时候显示详细内容，后面为详细内容也设置enter和leave监听事件，enter时去除掉菜单中的延迟函数，leave时清空变量kind里的值让详细内容消失，这里也通过计算属性curddetail来进行不同类别时的不同数据的展示

6.右侧的生活部分，采用了一行三列，一行四列的布局

7.注册页面的设计,使用了el-form默认表单对里面的内容进行修改后得到自己的想要的界面,然后使用v-model为每个表单绑定数据有name,email,code.pwd,cpwd等，后面为这些数据绑定一个rule，rule里面有对name,email等的约束规则

8.登陆注册的接口设计，在server文件夹中创建dbs和interface文件夹，dbs里面放的是数据库的一些配置，interface是存放各种接口文件,然后再dbs中的config.js配置服务器的基本配置，smtp服务的配置，
然后是users.js里的用户数据模型的约束设置（需要安装mongoose）,然后要在interface中实现user.js的接口

9.user.js中实现的内容，第一步验证码，第二步验证用户名，第三部验证密码

10.在index.js中更新需要用到的包，mongoose,koa-bodyparser,koa-generic-session,koa-redis,koa-json,config,passport,users，
配置session,bodyparser,连接数据库，mongoose.connect,然后是路由的使用

11.register页面实现发送验证码方法，和注册方法
获取ruleForm的对象来去验证用户
验证完用户后验证邮箱
判断用户名和邮箱是否成功通过验证，有值是验证失败
都成功就请求验证码 这里可以直接使用axios是因为在nuxt.config.js中引入了他的module

12.当用户名，邮箱，验证码都验证成功后发起register注册请求
crypto-js各种与加密相关的库

13.登陆与注销用户：在user组件中使用mounted函数发送getUser接口请求获取用户名和邮箱并将登陆用户名显示在页面上'，成功后重定位到主界面并显示用户名信息
注销：在exit.vue中使用中间件发送注销请求

14.首页城市定位服务接口与首页搜索功能接口的设计，接着是数据库表的导入，areas,cities等

15.配置geo里的vuex配置文件,在store中創建modules,在這裏面創建geo.js寫好vuex中的state,mutation,action,然後導出，接著就在store中的index.js中配置router

16.配置home.js裏的vuex配置，跟上面基本一樣

17.創建一個模型province寫下約束，並將它導入到geo.js接口