关注和取消关注

创建数据模型:用户关系

回顾数据模型设计

通过用户关系表存储用户之间的关系
回顾数据模型设计

回顾:关系型数据库的三大范式

  • 属性的原子性:每一列都不可再拆解(比如userName和password)
  • 记录的唯一性:有唯一标识(主键),其他属性都依赖于主键(比如userId)
  • 字段的冗余性:避免数据冗余传递依赖(也就是使用外键=》做到 数据引用 而不是 重复数据)

开发数据模型&同步到数据库

  1. 【创建模型(表)】: db-model下新建USerRelation.jsUSerRelation.js
  2. 【创建外键关系、统一输出模型(表)】方便后面同步到数据库: db-model-index.js,特别注意两个外键的关系创建(可结合设计表理解)db-model-index.js
  3. **同步到数据库:**执行node src/db/sync.js,查看数据库:数据库windows下mysql表名是大小写不敏感的,所以sequalize建的表也是大小写不敏感的

开发 粉丝列表

回顾技术方案设计

回顾技术方案设计

查看模板代码(个人主页模本中)

  1. views-profile.ejs中,在个人信息下方:views-profile.ejs
  2. views-widgets下新建fans.js组件fans.js
  3. 给个假数据查看效果(注意ejs中的注释符号):假数据查看效果

开发路由:粉丝列表(个人主页路由中)

  1. 【路由层】调用controller层函数获取并返回前端所需数据: src-routes-view-blog.js中,到个人主页的/profile路由中src-routes-view-blog.js(1)src-routes-view-blog.js(2)
  2. 【controller层】创建getFans函数=》根据 userid 调用service层函数 =》获取粉丝列表: controller下新建user-relation.jscontroller层
  3. 【service层】创建getUsersByFollower函数 连表查询数据库: service下新建user-relation.js(service层的文件基本和数据表是一一对应的):service层
  4. 测试:查看效果

开发 关注接口-判断关注状态

回顾架构设计

回顾架构设计

查看前端代码

  • widgets下user-info.js:
    • 关注&取消关注 按钮user-info.js
    • 通过amIFollowed 判断显示哪个按钮user-info.js
    • user-info.js是在profile.js中使用的,amIFollowed也由profile.js传入profile.jsprofile.js中的数据是由routes-view-blog.js中个人主页的路由返回的

开发路由(关注&取消关注)

页面路由

  1. 【路由层】返回前端amIFollowed: user-info.js中需要的数据是由routes-view-blog.js中个人主页的路由返回给profile.js再传给user-info.js的。通过判断当前用户的粉丝列表中是否有我即可知道我是否关注该用户(即amIFollowed):routes-view-blog.js '/profile/:userName'路由
  2. 测试:测试说明登录状态的判断生效,接下来需要实现:点击关注后改变关系且按钮变为“取消关注”

关注接口路由(关注)

  1. 前端user-info.ejs中处理按钮的显示/隐藏,关注的api是’/api/profile/follow’,取消关注的api是’/api/profile/unFollow’:user-info.ejs前端将当前用户的id传递给路由层
  2. 【路由层】传递 当前用户的id、我的id 并调用controller层follow函数:在routes-api-blog-profile.js中,routes-api-blog-profile.js
  3. 【controller层】创建follow函数,调用service层addFollower函数添加关注关系:在controller下user-relation.js中,user-relation.js
  4. 【service层】创建addFollower函数,往数据库添加关注关系:在service下user-relation.js中,service下user-relation.js
  5. 测试:点击关注后按钮变化数据库中增添数据点击关注后此时刷新页面,zhangsan将出现在lisi的粉丝列表中刷新

关注接口路由(取消关注)

  1. 【路由层】传递 当前用户的id、我的id 并调用controller层unfollow函数:在routes-api-blog-profile.js中,routes-api-blog-profile.js
  2. 【controller层】创建follow函数,调用service层deleteFollower函数添加关注关系:在controller下user-relation.js中,controller下user-relation.js这里和关注的区别就是删除可通过返回结果直接判断成功与否
  3. 【service层】创建deleteFollower函数,在数据库中删除关注关系:在service下user-relation.js中,service下user-relation.js
  4. 测试:点击“取消关注”后,按钮变化,且刷新页面后粉丝列表清空

开发 关注人列表

查看前端代码

  1. views-profile.ejs中,出现在右侧粉丝列表下方:关注人列表
  2. widgets中新建follower.ejsfollower.ejs获取关注总数对用户列表遍历渲染

开发路由

  1. 【路由层】调用controller层getFollowers函数,返回数据给前端: routes下view-blog.js中个人主页的路由routes下view-blog.js前端需要的数据
  2. 【controller层】创建getFollowers函数,调用service层getFollowersByUser函数 获取关注人列表: controller下user-relation.js:controller下user-relation.js
  3. 【service层】创建getFollowersByUser函数,: service下user-relation.js:service下user-relation.js
  4. 测试:使用zhangsan的账号关注lisi后:测试进入lisi页面后可取消关注# 关注和取消关注

标签(空格分隔): Node.js



title: 关注和取消关注
date: 2020-03-23 21:27:41
tags:
- Node.js
categories:
- [Node.js学习]
- [微博项目]

创建数据模型:用户关系

回顾数据模型设计

通过用户关系表存储用户之间的关系
回顾数据模型设计

回顾:关系型数据库的三大范式

  • 属性的原子性:每一列都不可再拆解(比如userName和password)
  • 记录的唯一性:有唯一标识(主键),其他属性都依赖于主键(比如userId)
  • 字段的冗余性:避免数据冗余传递依赖(也就是使用外键=》做到 数据引用 而不是 重复数据)

开发数据模型&同步到数据库

  1. 【创建模型(表)】: db-model下新建USerRelation.jsUSerRelation.js
  2. 【创建外键关系、统一输出模型(表)】方便后面同步到数据库: db-model-index.js,特别注意两个外键的关系创建(可结合设计表理解)db-model-index.js
  3. **同步到数据库:**执行node src/db/sync.js,查看数据库:数据库windows下mysql表名是大小写不敏感的,所以sequalize建的表也是大小写不敏感的

开发 粉丝列表

回顾技术方案设计

回顾技术方案设计

查看模板代码(个人主页模本中)

  1. views-profile.ejs中,在个人信息下方:views-profile.ejs
  2. views-widgets下新建fans.js组件fans.js
  3. 给个假数据查看效果(注意ejs中的注释符号):假数据查看效果

开发路由:粉丝列表(个人主页路由中)

  1. 【路由层】调用controller层函数获取并返回前端所需数据: src-routes-view-blog.js中,到个人主页的/profile路由中src-routes-view-blog.js(1)src-routes-view-blog.js(2)
  2. 【controller层】创建getFans函数=》根据 userid 调用service层函数 =》获取粉丝列表: controller下新建user-relation.jscontroller层
  3. 【service层】创建getUsersByFollower函数 连表查询数据库: service下新建user-relation.js(service层的文件基本和数据表是一一对应的):service层
  4. 测试:查看效果

开发 关注接口-判断关注状态

回顾架构设计

回顾架构设计

查看前端代码

  • widgets下user-info.js:
    • 关注&取消关注 按钮user-info.js
    • 通过amIFollowed 判断显示哪个按钮user-info.js
    • user-info.js是在profile.js中使用的,amIFollowed也由profile.js传入profile.jsprofile.js中的数据是由routes-view-blog.js中个人主页的路由返回的

开发路由(关注&取消关注)

页面路由

  1. 【路由层】返回前端amIFollowed: user-info.js中需要的数据是由routes-view-blog.js中个人主页的路由返回给profile.js再传给user-info.js的。通过判断当前用户的粉丝列表中是否有我即可知道我是否关注该用户(即amIFollowed):routes-view-blog.js '/profile/:userName'路由
  2. 测试:测试说明登录状态的判断生效,接下来需要实现:点击关注后改变关系且按钮变为“取消关注”

关注接口路由(关注)

  1. 前端user-info.ejs中处理按钮的显示/隐藏,关注的api是’/api/profile/follow’,取消关注的api是’/api/profile/unFollow’:user-info.ejs前端将当前用户的id传递给路由层
  2. 【路由层】传递 当前用户的id、我的id 并调用controller层follow函数:在routes-api-blog-profile.js中,routes-api-blog-profile.js
  3. 【controller层】创建follow函数,调用service层addFollower函数添加关注关系:在controller下user-relation.js中,user-relation.js
  4. 【service层】创建addFollower函数,往数据库添加关注关系:在service下user-relation.js中,service下user-relation.js
  5. 测试:点击关注后按钮变化数据库中增添数据点击关注后此时刷新页面,zhangsan将出现在lisi的粉丝列表中刷新

关注接口路由(取消关注)

  1. 【路由层】传递 当前用户的id、我的id 并调用controller层unfollow函数:在routes-api-blog-profile.js中,routes-api-blog-profile.js
  2. 【controller层】创建follow函数,调用service层deleteFollower函数添加关注关系:在controller下user-relation.js中,controller下user-relation.js这里和关注的区别就是删除可通过返回结果直接判断成功与否
  3. 【service层】创建deleteFollower函数,在数据库中删除关注关系: 在service下user-relation.js中,service下user-relation.js
  4. 测试:点击“取消关注”后,按钮变化,且刷新页面后粉丝列表清空

开发 关注人列表

查看前端代码

  1. views-profile.ejs中,出现在右侧粉丝列表下方:关注人列表
  2. widgets中新建follower.ejsfollower.ejs获取关注总数对用户列表遍历渲染

开发路由

  1. 【路由层】调用controller层getFollowers函数,返回数据给前端: routes下view-blog.js中个人主页的路由routes下view-blog.js前端需要的数据
  2. 【controller层】创建getFollowers函数,调用service层getFollowersByUser函数 获取关注人列表: controller下user-relation.js:controller下user-relation.js
  3. 【service层】创建getFollowersByUser函数,: service下user-relation.js:service下user-relation.js
  4. 测试:使用zhangsan的账号关注lisi后:测试进入lisi页面后可取消关注
,