从0到1搭建个人博客（后端篇）

后端 - server 篇

记不清这个为什么记录的很少，我这个时候前端似乎直接用的 mock 数据，应该是这个原因

一、解决的问题

1. 文章详情页

我设想的是，路由为 /post 时显示文章列表，点击某文章链接后，路由为 /post/:id，此时显示对应 id 的文章。

问题在于，我一开始对于 router 的理解有误：让 :id 作为 /post 的子路由来实现设想。当 :id 作为子路由，文章列表不会消失，而且还需要在 /post 内加上 <router-view>/ ，子路由内容才会显示。

最终让它们处于同级，加了一个 index.vue （只有 <router-view/> ）。虽然多了一个文件，但语义好了不少，设想也实现了：

{
  path: '/post',
  props: true, // Pass route.params to props
  meta: {
    title: '文章'
  },
  children: [
    {
      path: '',
      component: () => import('./views/Post/ThePostList.vue')
    },
    {
      path: ':id',
      component: () => import('./views/Post/ThePostDetail.vue')
    }
  ],
  // /* webpackChunkName: 'post' */ 
  component: () => import('./views/Post/ThePost.vue'),
}

2. $attrs

通过 props 向文章详情页传递 id ，而不是通过解析 url 来获得 id ，这样便于将组件与路由进行解耦。

在上一小节的路由基础上， /post 内点击文章链接后，/post/:id 并不能通过 props 拿到 id。

<router-link :to="{ path: post.id, params: { id: post.id }}" append>{{post.title}}</router-link>

通过 Vue-DevTools 发现 index 组件有一个$attrs，其中的值正是我们需要传递的 id。

<router-view v-bind="$attrs"/>
<router-link :to="{ path: post.id }" append>{{post.title}}</router-link>

需要注意的是， $attrs.id 并不是我们 path: post.id 的 id 的属性名称，如果将 post.id 改为 post.title 或其他，$attr 依旧是 id 属性，但属性值变为 post.title 的值。

经过测试，这个 index 的 $attrs 是根据路由拿到 $attrs.id 的值的，是 path 的值（注意有 append ）。

3. puppetter

剧集、电影、纪录片、书籍等，通过豆瓣豆列来获得数据。

npm install puppeteer --ignore-scripts

const puppeteer = require('puppeteer')
;(async () => {
  const browser = await puppeteer.launch({
    executablePath: "C:\\...\\chrome.exe"
  })
  const page = await browser.newPage()
  await page.goto('https://evgo2017.com')
  await page.screenshot({path: 'evgo2017.png'})
  browser.close()
})()

NodeList 转换为数组遍历

// http://tieba.baidu.com/p/5733546171
1.使用for循环
2 通过 [ ].slice.call把类数组转化为数组
3.通过Array.from转为数组
4.通过...nodelist转为数组

4. 初始化数据 created mounted

vue 生命周期

4. 配置阿里云 OSS

挺不错的

5. 多个请求合并

发现每张图片的时间，大都花在TTFB了，下载只有一点点

扩展鼠标移动