个人主页

页面和模板

回顾模板技术方案

微博列表的第1页 和 个人信息 是 后端渲染数据SSR ，即直接通过后端渲染的数据（非AJAX请求）。加载更多则是通过AJAX请求获取。

前端模板代码

1. 【个人主页】： views下新建profie.ejs
2. 【个人信息 组件】： widgets下新建user-info.ejs
3. 【微博列表 组件】： widgets下新建blog-list.ejs
4. 【加载更多 组件】： widgets下新建load-more.ejs

开发路由（后端渲染数据SSR）

处理 微博列表、加载更多（前端左侧）

1. 【路由层】创建路由，调用controller层函数，获取微博第一页数据： routes-view-blog.js下新建/profile/:userName的路由：参数1：渲染profile页，参数2：传递前端需要的数据
2. 【controller层】新建blog-profile.js，调用service层getBlogListByUser函数 获取个人主页微博列表：
3. 【service层】创建getBlogListByUser函数： service-blog.js中，（可复习连表查询）

处理 用户数据（前端右侧）

1. 【路由层】前端右侧需要userData（userInfo、isMe），判断并调用controller层isExist函数，返回前端所需用户数据：

格式化时间

1. 【时间相关的工具函数】：utils-dt.js，安装使用date-fns工具：
2. 【service层】格式化时间、内容后，创建 格式化微博信息 的函数：_format.js：
3. 【service层】调用函数格式化微博信息：service-blog.js：

加载更多（ajax）

3. 【前端load-more.ejs】获取的微博列表需要是 html字符串 而不是js对象的数据：前端拿到以后直接转为jquery对象后遍历渲染到页面上
4. 【路由层】创建路由，调用controller层getProfileBlogList函数获取 微博列表 ，将其转换为 html字符串 后返回给前端： routes-api下新建blog-profile.js，调用getBlogListStr函数将json格式的微博列表转换为html字符串：
5. 【app.js注册路由】
6. 【转换为html字符串的思路】：
7. 【使用EJS工具】根据 blogList 渲染出 html 字符串： utils下新建blog.js：

EJS工具

• EJS库可使js数据渲染为html代码（字符串格式的），这样后端返回的数据在前端就可直接渲染在页面上。
• 安装：npm i ejs --save
• 使用方法：

  const ejs = require('ejs')
  
  // str：字符串格式的前端ejs模板
  // data：需要传给前端ejs模板的数据，多个数据使用对象传递
  // options：可省略
  ejs.render(str, data, options);
  // => Rendered HTML string
  // 返回值就是将数据渲染在html中的代码（字符串格式的）