艾特提到我的

@提到我的

实现功能:有人@我之后,会在首页/个人主页右侧给出@总数,点击进入@我的消息页,展示所有@我的内容

数据模型

回顾数据模型设计

回顾数据模型设计

创建数据模型:AtRelation&同步到数据库

  1. 新建AtRelation.js,db-model-AtRelation.js下:
    db-model-AtRelation.js
  2. 创建外键关系、统一输出,方便同步,db-model-index.js中:
    db-model-index.jsAtRelation中blogId是Blog中id的外键
  3. 同步到数据库node src/db/sync.js
  4. 查看数据库:
    查看数据库查看数据库注意:sequelize中我们使用boolean保存的isRead到数据库中是tinyint,用很小的数字表示boolean,不影响功能使用

@关系【重点理解Promise.all()发送多个请求】

  1. 收集分析@的用户
  2. 建立AtRelation关系
  3. 获取@的数量显示在页面

收集分析@的用户&建立AtRelation关系

  1. 【controller层】在创建微博之后,调用service层createAtRelation函数创建 @ 关系:在输入框中创建微博是通过controller下blog-home.js中的create方法完成的,所以我们需要在调用service层createBlog函数之前先收集分析@的用户
    controller下blog-home.js
    • 我们让 替换不生效:REG_FOR_AT_WHO匹配的就是matchStr,返回matchStr则替换不生效。我们只是通过replace获取所有被@用户的userName列表
    • Promise.all()获取多个Promise实例的参数,用于发送多个请求
  2. 【service层】创建createAtRelation函数: service下新建atRelation.js,创建一个“创建微博 @ 用户的关系”的createAtRelation函数:
    service下atRelation.js
  3. 测试:成功添加进数据库:
    测试1测试2

获取@的数量显示在页面

前端代码

  1. user-info.ejs,通过从后端获取atCount来显示**@的数量**:
    user-info.ejs
  2. 调用user-info.ejs的ejs模板需要获取并传递atCount,比如index.ejs:
    index.ejs个人主页也是一样的

开发步骤

  1. 【controller层】创建getAtMeCount函数=》调用service层getAtRelationCount函数=》获取 @ 我的微博数量: controller下新建blog-at.js
    blog-at.js
  2. 【service层】创建getAtRelationCount函数=》连表查询 获取 @ 用户的微博数量(未读的): service下at-relation.js中:
    service下at-relation.js
  3. 【路由层】调用controller层getAtMeCount函数获取 @ 我的微博数量=》返回atCount给前端: routes-view-blog.js 首页路由中:
    routes-view-blog.js
  4. 测试首页:
    测试
  5. 搞定个人主页:也是一样的,在routes-view-blog.js 个人主页路由中:
    routes-view-blog.jsroutes-view-blog.js
  6. 测试个人主页:
    测试个人主页

开发页面和路由

实现功能:点击”提到我的”以后要跳转页面
原型图

开发页面路由(三表查询 获取第一页列表)

  1. views下新建atMe.ejs
  2. 【路由层】创建页面路由,调用controller层getAtMeBlogList函数=》获取第一页列表 和 列表总行数=》返回给前端: routes-view-blog.js中:
    view-blog.js
  3. 【controller层】创建getAtMeBlogList函数=》调用service层getAtUserBlogList函数=》获取 @我的微博列表第一页数据 和 列表总行数: controller下blog-at.js中:
    controller下blog-at.js
  4. 【service层】创建getAtUserBlogList函数=》三表查询 获取第一页列表 和 列表总行数: service下at-relation.js中:
    service下at-relation.js
  5. 测试:
    点击以后

开发接口路由(加载更多)

  1. 【路由层】创建路由,返回数据给前端: routes-api下新建blog-at.js,逻辑基本和个人主页的加载更多一样,除了 路由地址 以及 调用的controller层的函数获取的微博列表 不同
    blog-at.js*
  2. app.js注册路由:
    app.js
  3. 测试:进入@我的消息页,下滑出现“加载更多”,点击后加载下一页
    测试

标记为已读

  1. 【前端】读完at-me页后,首页右侧需显示“提到我的(0)”: user-info.js中,前端需要获取atCount来显示当前提到我的总数,如果读完就要使其显示回0:
    user-info.js
  2. 【路由层】渲染页面后=》调用controller层的markAsRead函数=》将atRelations表中所有和当前userId(被@用户)相关的isRead都改为false: ,routes-view-blog.js的 atMe 路由 中:
    blog.js
  3. 【controller层】调用service层updateAtRelation函数=》将isRead改为false: controller下blog-at.js,不需要返回SuccessModel 或者 ErrorModel是因为 markAsRead是在渲染页面后调用的,SuccessModel 或者 ErrorModel是为了把数据返回给前端才使用的,而已读与否是不需要返回给前端的:
    blog-at.js
  4. 【service层】创建updateAtRelation函数=》更新 AtRelation表中isRead: service下at-relation.js:
    at-relation.js
  5. 测试:一开始进入是13条未读,退出@页面后显示0条未读:
    测试
  6. 注意: sequelize中isRead使用的true和false在数据库中实际是使用0和1来表示的(1是false),可看atRelations表:
    atRelations表
,