/easymeeting-vue

Fore-end development of EasyMeeting

Primary LanguageJavaScript

easymeeting-vue

The fore-end project of EasyMeeting

现况

根据关于vue项目多页面的配置实行了webpack的魔改以实现多页面。现在各个页面放在src/pages下，webpack会自动检测各js并生成目录。

注意：

  • pages/下同一文件夹的vue和js文件名不建议相同
  • pages/下的组件样式不建议用scoped属性

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

头像自动生成

使用了blueimp-md5和identicon.js两个库完成。封装在thumbnail组件中，使用时只需传入用户的id/小组的id即可。

<thumbnail seed="userid" width="128" height="128" alt="avatar" radius="10em"></thumbnail>

URL配置管理

为了方便调试和修改，将所有的 API url 放入到/src/assets/url.conf.js中进行统一管理。用法如下：

// 首先import，不用管相对路径，直接填写assets开头即可，系统找得到的
import urlconf from 'assets/url.conf'

// 然后随意调用，注意无论是否带参，都是函数
this.$http.get(urlconf.exist(token)).then(resp=>{
    // success
}, resp=>{
    // error
})

this.$http.post(urlconf.signup(),data).then(resp=>{
    // success
}, resp=>{
    // error
})

这样当更换后端服务器地址和api时只需更改一个文件即可。

登录机制

参考了淘宝的思路

本地保存的信息有三个级别：

存储位置 特性
vue对象中的data 各页面内部存取，用于数据绑定
SessionStorage 会话存储，跨页面，伴随会话失效
LocalStorage 本地存储，长期

用户初次次登录时，获取到的用户登录信息后，依次将信息存储到这三级中去：

存储位置 信息
vue对象中的data user里的所有信息
SessionStorage user内的所有信息
LocalStorage 仅存储user.token和user.username

当用户新打开一个网页时，按以下顺序检查和恢复数据：

  1. 检查SessionStorage，若存在user则将其存到内存
  2. 若无，则检查LocalStorage是否有user
    1. 无：首页则header显示登录按钮；个人页则跳转到登录页
    2. 有：将LocalStorage存储到内存；
      若是个人页，则通过/api/user提交token，获取完整信息并存到SessionStorage和内存；如果token已失效，则清除信息并跳转到登录页。

调试与开发事项

  • 对于header，无需登录就能看见用户名，即仅需要localStorage的user信息就可以显示。但进入个人中心则需要登录
    注销时应依次清除这三级保存的信息。
  • SessionStorage和LocalStorage中值不能存储对象，需要配合JSON.stringify()和JSON.parse()方法使用

接口

userExist 用户邮箱查重

/api/user/exists?email=xxxxxxxxxxxxxxxx
  • type: GET
  • return code:
    • 200 该邮箱已注册
    • 404 邮箱未注册

signup 用户注册

/api/user
  • type: POST
  • data:
    • email: 登录邮箱
    • username: 用户昵称
    • password: 密码
    • gender: 1为男性, 0为女性
    • description: 自我介绍
  • return:
code: 201,
body: {
   "user": {
      "username": "王大锤",
      "email": "fewjiofa@rrjgeor.cn",
      "gender": true,
      "avatar": "dfaeiwofe.png",
      "description": "dfwahefneklmd",
      "token": "faweirhoiewnkdksl"
   }
}
  • code
    • 201：注册成功
    • 401：邮箱已注册（后端数据检查）
    • 400：某项必填信息缺失

login 用户登录

/api/session
  • type: POST
  • data:
    • email: 登录邮箱
    • password 登录密码
  • return:
code: 200,
body: {
  "user": {
    "username": "王大锤",
    "email": "fewjiofa@rrjgeor.cn",
    "gender": 1,
    "avatar": "dfaeiwofe.png",
    "description": "dfwahefneklmd",
    "token": "faweirhoiewnkdksl"
 }
}
  • code
    • 200: 登录成功，并返回user信息
    • 401：密码错误
    • 404: 账号不存在
  • user
    • username：用户昵称
    • email：用户邮箱
    • gender：用户性别（1为男，0为女）
    • avatar：头像图片地址
    • description：用户自我介绍
    • token：登录状态密钥，浏览器本地保存

userinfo 获取用户信息

  /api/user?token=xxxxxxxxxxxxxxxxxxxxxxx
  • type: GET
  • return:
code: 200,
body: {
  "user": {
      "username": "王大锤",
      "email": "fewjiofa@rrjgeor.cn",
      "gender": true,
      "avatar": "dfaeiwofe.png",
      "description": "dfwahefneklmd",
      "token": "faweirhoiewnkdksl"
   }
}
  • code
    • 200：token有效，返回用户信息
    • 404：不存在token对应用户

setting 修改用户信息

/api/xxxxxxxxx
  • type: POST
  • data:
    • email: 登录邮箱
    • username: 用户昵称
    • password: 密码（如果值为空说明密码未改变）
    • gender: 1为男性, 0为女性
    • description: 自我介绍
    • user_id: 用户ID
    • token: 用户token
  • return:
code: 201,
body: {
   "user": {
      "username": "王大锤",
      "email": "fewjiofa@rrjgeor.cn",
      "gender": 0,
      "description": "dfwahefneklmd",
      "token": "faweirhoiewnkdksl"    
   }
}
  • code
    • 200：修改信息成功，返回用户信息
    • 404：不存在token对应用户

group 获取小组信息

  /api/group?token=xxxxxxxxxxxxxxxxxxxxxxx
  • type: GET
  • return:
code: 200,
body: {
  "groups": [
    {
      "id": 12321,
      "name": "滚滚长江东逝水",
      "description": "xxxxxxxxxxxxxxx",
      "isLeader": true,
      "status": "开会中"
    },
    {
      "id": 121,
      "name": "浪花淘尽英雄",
      "description": "xxxxxxxxxxxxxxx",
      "isLeader": false,
      "status": "59min"
    }
  ]
}
  • code
    • 200：token有效，返回用户的项目组信息
    • 404：token无效
  • groups：用户所有小组的信息
    • id：项目组键值
    • name：项目组名称
    • description：项目组描述
    • isLeader：用户是否改项目组组长
    • status：项目组状态
      • false 啥会都没有
      • "开会中" 开会中
      • "59min" 距离下一次会议的时间