说实在的，读完的时候，并没有觉得写得多好，甚至觉得平平无奇。

故事很简单，说的是一家三口，生来便带有遗传病的儿子时生穿越时间的隧道，回到了当年父亲拓实的年少时代，彼时的拓实二十三岁，还是个愣头青，不愿脚踏实地工作，浑浑噩噩，终日无所事事，还时不时跟在酒吧上班的女票千鹤要钱，时生跟父亲拓实成为了朋友，在经历过一次次失望后，千鹤给拓实留下分手的纸条，与爱慕她的工薪族冈部一起去了大阪，并卷入了一场受贿案件中，而两股势力团伙也随后找上了拓实，拓实带着时生踏上了寻找千鹤的道路，历经种种阻拦，最终救出了千鹤，而在这趟拯救千鹤的旅途中，拓实也解开了自己的身世之谜，原谅了当年不得已将自己交由他人抚养的母亲，与其说是拯救千鹤，不如说是一个愣头青开始一步步成长起来，不再选择逃避，而是学着面对，学着担当。

看到时生穿越到拓实的年代，想起港片《新难兄难弟》里面的情节，穿越这个梗真的是用不烂。

我看豆瓣上的内容简介部分是这么介绍这本书的：

《时生》为东野圭吾迄今风格最独特的一部，以惊天动地的想象和鬼斧神工的解谜，将幻想、悬疑、穿越、推理、亲情熔为一炉，东野圭吾更称其为迄今“集大成之作”，在东野粉丝站上长期高踞“读者票选5佳”，超人气日剧《给父亲的口信》原著作品。其感人肺腑、泪中带笑的故事令人无不唏嘘动容……

也许是为了宣传，才这么夸张的介绍吧。

以前都是听说东野圭吾，从来没有读过他的作品，这是我读的的第一本，我想也是最后一本，文化水平有限，大师的水准真心欣赏不来。

很久没看到这样好看的武侠片了，刷完意犹未尽，全程无尿点，刷完看了下，竟是2010年的作品，如果放在现在，定然大卖。

忍不住要剧透了。

故事发生在明朝，800年前，天竺人罗摩渡海来中原弘法，净身入梁武帝宫中说法，后渡江，在九华山面壁十九年，练就绝世武功，死后数年，遗体被盗，并被分成上下两部，江湖传闻，谁拿到遗体，就能练就绝世武功，称霸武林，一时江湖风云骤起。当时，其一半的遗体为当朝首辅张海端所有，著名的暗杀组织黑石，对遗体蠢蠢欲动，其首领转轮王，带领手下三名高手细雨，雷彬，彩戏师连绳，血洗了太师府，混乱中，细雨夺走了遗体，不知所踪，随后转轮王悬赏重金买细雨人头，细雨一路遭众江湖人士追杀，全身而退后，她找到了名医李鬼手， 易容化名为曾静，隐居市井，过上了普通百姓的生活。在这里，她遇到了以跑腿为生的江阿生【类似现在送快递的小哥】，两人互生情愫，结为夫妻。而与此同时，转轮王也找到了一位细雨的替代品：叶绽青。

这里要提一下，在易容前，细雨向李鬼手讲述了夺走遗体那晚发生的事情：在她过桥出城的时候，遇到了一身重伤的张人凤，张海端的儿子，两人交手时，细雨些许迟疑，张人凤被刺伤，落桥。也是在这里，细雨遇到了陆竹，而这个带发修行的高手，用佛法和剑道，外搭自己一条命，点化了细雨。【这段讲述极为重要，为后面的诸多地方埋下了伏笔】

贼喜欢陆竹教细雨四招的那段，行云流水，拍的真TM好看。

婚后半年，一次两人去钱庄取钱，遇上危险，细雨为救阿生，不得已出手，暴露了行踪，转轮王随后集结了手下雷彬，彩戏师和叶绽青，来与细雨谈判，为了救自己的丈夫，细雨答应了转轮王的要求，交出自己拿到的那部分遗体，同时和雷彬，彩戏师合作，帮助他拿到遗体的另一部分。在他们合力抢夺另一份遗体时，黑石内乱，彩戏师连绳想要拿到遗体，内乱中，细雨被转轮王重伤，连绳被杀。

重伤逃出的细雨回到家中，叮嘱阿生离开京城，阿生将重伤晕倒的细雨放在床上，此时，雷彬和叶绽青赶来，阿生不慌不忙取出藏在地板下面的剑，原来他就是当年那个落桥的张人凤，他没有死，醒来后被救起，并在李鬼手那里换了张脸。阿生杀死了雷彬，偷走了遗体，并与转轮王相约城外决战。而逃走的叶绽青最终被转轮王活埋。至于转轮王得到遗体的目的，其实挺狗血的。弄到头，竟然是为了这个，我擦嘞。

决战前，细雨醒来，知道了阿生的真实身份，原来她是害他家破人亡之人，两人交手，细雨施计让阿生假死，独自一人赴约，在城外与转轮王决战，最终细雨身受重伤，转轮王中剑而亡，阿生醒来，两人和好。

片中有几处挺让人感动的。

易容后的细雨，找到了见痴师父，问师父陆竹的那句“愿化身石桥，受五百年风吹，五百年日晒，五百年雨打“是何意，师父说了阿难的典故，然后转头说了句：“他对你很好啊”。

每次落雨时，阿生都会快步跑到细雨的摊位，说：“正好路过，我来帮你收拾。”

阿生坐在桌前啃着细雨给他买的那份豆皮。

雷彬拖着重伤，奄奄一息回到自己家中，看着熟睡中的妻儿，吃那一口面的满足。

细雨满身血迹，看着倒地的阿生，吐出那句：“我愿化身石桥，受五百年风吹，日晒，雨打。”

阿生抱起受伤的细雨：

“走吧，我们回家吧”

“回家后，你写一封休书给我吧”

“说什么傻话，以后的日子还长着呢”

裂墙推荐。

问题描述：

参考Vue js 2.x - Select All Checkbox, 完成了全选的功能。

先上效果图：

Vue js 2.x - Select All Checkbox的原代码:

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
  <h4>User</h4>
    <div>
      <table>
        <tr>
          <th>Name</th>
          <th>Select All<input type="checkbox" @click="selectAll" v-model="allSelected" 		  </th>
        </tr>
        <tr v-for="user in users">
          <td>{{ user.name }}</td>
          <td><input type="checkbox" v-model="userIds" @click="select" :value="user.id">    		  </td>
        </tr>
      </table>
    </div>
  <span>Selected Ids: {{ userIds }}</span>
</div>

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// taken from https://jsfiddle.net/okv0rgrk/3747/

new Vue({
    el: '#app',
    data: {
        users: [
            { "id": "Shad", "name": "Shad" },
            { "id": "Duane", "name": "Duane" },
            { "id": "Myah", "name": "Myah" },
            { "id": "Kamron", "name": "Kamron" },
            { "id": "Brendon", "name": "Brendon" }
        ],
        selected: [],
        allSelected: false,
        userIds: []
    },
    methods: {
        selectAll: function() {
            this.userIds = [];

            if (this.allSelected) {
                for (user in this.users) {
                    this.userIds.push(this.users[user].id.toString());
                }
            }
        },
        select: function() {
            this.allSelected = false;
        }
    }
})

参考的这份代码里面，有个小小的bug，就是当选中所有的子选项时，全选没有被选中。

解决方法：

点击子选项的时候，调用的是select函数，初步的想法是修改select函数，当选中的选项userIds等于users中的所有的ids即可。

1
2
3
4
5
6
7
8

// 修改select
select: function() {
    if (this.userIds.length == this.users.length) {
        this.allSelected = true;
    } else {
        this.allSelected = false;
    }
}

发现修改后，没有任何效果，此处有个坑:

1

<input type="checkbox" v-model="userIds" @click="select" :value="user.id">

这里v-model的userIds，其实对应的是checked之后的值，也就是点击完最后一个子选项时，调用select函数，此时this.userIds.length = this.users.length - 1， 解决方法也很简单，修改click事件为change事件即可。这样调用select时，userIds已经更新。

改进后的代码：

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
  <h4>User</h4>
    <div>
      <table>
        <tr>
          <th>Name</th>
          <th>Select All<input type="checkbox" @click="selectAll" v-model="allSelected" 		  </th>
        </tr>
        <tr v-for="user in users">
          <td>{{ user.name }}</td>
          <td><input type="checkbox" v-model="userIds" @change="select" :value="user.id">    		  </td>
        </tr>
      </table>
    </div>
  <span>Selected Ids: {{ userIds }}</span>
</div>

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// taken from https://jsfiddle.net/okv0rgrk/3747/

new Vue({
    el: '#app',
    data: {
        users: [
            { "id": "Shad", "name": "Shad" },
            { "id": "Duane", "name": "Duane" },
            { "id": "Myah", "name": "Myah" },
            { "id": "Kamron", "name": "Kamron" },
            { "id": "Brendon", "name": "Brendon" }
        ],
        selected: [],
        allSelected: false,
        userIds: []
    },
    methods: {
        selectAll() {
            this.userIds = [];

            if (this.allSelected) {
                for (user in this.users) {
                    this.userIds.push(this.users[user].id.toString());
                }
            }
        },
        select() {
          if (this.userIds.length == this.users.length) {
            this.allSelected = true
          } else {
            this.allSelected = false;
          }
        }
    }
})

Google时，看到有使用自定义组件的方式来实现全选功能的：用Vue实现一个全选指令，照着在nuxt下实作了下，发现坑有些多，作罢，后续解决了再补上。

参考：

Vue js 2.x - Select All Checkbox

写在前面

之前在nuxt里面引入fontawesome的时候，用的是别人封装好的组件nuxt-fontawesome，还写了在Nuxt项目中引入fontawesome记录下来操作方法，后面引入Echarts的时候，也是引用封装好的组件v-charts， 结果老大review代码的时候，全部否定，改用引入原生的fontawesome 和echarts，修改后，代码看着清晰简单，记录下。

引入fontawesome

参考官网上的setup，先安装。

npm:

1

npm install --save-dev @fortawesome/fontawesome-free

Yarn:

1

yarn add --dev @fortawesome/fontawesome-free

安装后，在assets/stylesheets目录下，新增文件fontawesome.scss：

1

@import '@fortawesome/fontawesome-free/css/all.css';

最后配置下nuxt.config.js。

在nuxt.config.js的css 部分，添加如下代码：

1
2
3
4

 css: [
......
   '~assets/stylesheets/fontawesome.scss'
 ],

修改配置后，重启。

大功告成，直接在页面使用即可，比如添加一个音乐的icon：

1

<i class="fas fa-music"></i>

引入echarts

安装：

npm:

1

npm install echarts --save

Yarn:

1

yarn add echarts

安装后，在需要使用Echarts的组件中，引入echarts，设置好配置项即可。

以index.vue为例，组件中使用了柱状图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

## pages/xxx/index.vue
<template>
  <div id="echart" />
</template>

<script>
import echarts from 'echarts'

    export default {
        mounted() {
			const barChartElement = this.$el.querySelector("#echart")
    		const barChart = echarts.init(barChartElement)
            const options = {
                title: {
                    text: '柱形图示例'
                },
                tooltip: {},
                legend: {
                    data:['含糖量']
                },
                xAxis: {
                    data: ["苹果","橙子","西瓜","菠萝","雪梨","柿子"]
                },
                yAxis: {},
                series: [{
                    name: '含糖量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }]
            }
			barChart.setOption(options)
        }
    }  
</script>

各个图表的详细配置可以参考Echarts文档。

参考

Font Awesome

Echarts

需求：

前端调用接口，需要后端返回指定页面的数据。由于之前的接口没有涉及到分页，需要做微调，前端调用接口时，传参数page。

比如：api/v2/users?page=2， 返回第二页的用户列表信息。

返回的分页信息要求放在header而不是body中。

解决方法：

google到的解决思路是：

先在服务器端设置Access-Control-Expose-Headers，让前端调用接口时，可以拿到header信息。【如果不设置，前端通过response.header拿到的就只有cache-control, content-type.】

然后再将需要传递的分页信息，比如pageCount, perPage塞进response的header中即可。

一步步来。

后台Rails项目中，已经安装了gem：rack-cors 和 kaminari, 将借用这两个gem来完成这项工作。

Step1:

查看rack-cors文档，找到用于设置Access-Control-Expose-Headers的options expose。

参考文档，修改Rack的配置，假定我们需要塞进header中的是：X-Pagination-Current-Page, X-Pagination-Page-Count, X-Pagination-Per-Page, X-Pagination-Total-Count。

1
2
3
4
5
6
7
8
9

use Rack::Cors do
  allow do
    origins '*'
    resource '/public/*',
      headers: :any,
      methods: :any
      expose: ['X-Pagination-Current-Page', 'X-Pagination-Page-Count', 'X-Pagination-Per-Page', 'X-Pagination-Total-Count']
  end
end

重启服务器。

Step2:

kaminari的文档中，列出了current_page, total_pages等多个可以获取分页信息的方法。

以User的index 接口为例，修改users_controller.rb文件，在index部分的最后，添加如下代码：

1
2
3
4
5
6
7
8
9
10

def index
    .....
    if params[:page]
        @users = @users.page(params[:page])
        response.headers['X-Pagination-Current-Page'] = @users.current_page
        response.headers['X-Pagination-Page-Count'] = @users.total_pages
        response.headers['X-Pagination-Per-Page'] = @users.limit_value
        response.headers['X-Pagination-Total-Count'] = @users.total_count
    end
end

【鉴于其他接口也难免会涉及到分页，可以将这部分代码封装成一个方法，放在API的BaseController中，让所有继承该类的controllers可直接调用该方法。】

OK，搞定。

这时前端调接口，可以看到获取的header中含有pagination相关信息：

看的是第二版，全书共12章，除前面几章涉及历史及语法外，剩下的8章都是通过实例来学习，非常喜欢这种实战型的学习方式。

距离第二版出版（出版于2011年）已经过去了将近8年了，原书中给到的代码参考网站friendsofed 已经无法访问，示例代码中有些地方还是有坑的，比如chapter11中的视频部分，我照着书中的示例代码，重敲了一遍，详见DOM Scripting，所有的功能都可以正常运行，图片视频等素材简单在Google上找了下，如果你也在学它，也许可以做个参考。

书比较薄，而且主要的篇幅集中在示例上，就简单梳理下书中的要点以备忘。

文档其实是一堆nodes的集合，基本操作：新增，修改，查找，或者删除node。

node的三个基本类型：

元素节点，文本节点，属性节点。

DOM提供的使用最为频繁的方法：

getElementById

getElementsByTagName

getElementsByClassName

getAttribute

setAttribute

最佳实践需要记住：

平稳退化：让访问者可以在浏览器不支持Javascript的情况下，仍能顺利浏览网站。

渐进增强：用一些额外的信息去包裹原始数据，其目的是分离Javascript，让结构和行为分离。

要记住的知识点并不多，个人感觉主要的收获来源实践，跟着书中内容敲一遍，不花多少时间，但是感觉非常好，“用餐”很愉快，五星推荐。

12月底，公司TB，去了海南，30号回上海后，匆匆赶回老家，回来后觉得还是有必要整理下，偷个懒， 少字多图，记录下沿途风景。

玉带滩：

随处可见的小菠萝，水分足，推荐。

海水是咸的。

分界洲岛：

弹琴的小姐姐。

阳光从云缝中洒下来。

天涯海角：

日出：

正午：

亚龙湾：

over。

引入 moment

• 安装

  yarn:

  1	yarn add moment

  npm:

  1	npm i moment

• 配置

  在plugins目录下，新建文件：moment.js，放入以下内容：

  1 2 3 4 5 6 7

  import Vue from 'vue' import moment from 'moment' Vue.filter('moment', function(value, pattern = 'YYYY-MM-DD HH:mm:ss') { if (!value) { return null } return moment(value).format(pattern) })

  这里设置了默认的时间样式是YYYY-MM-DD HH:mm:ss。

  最后，在nuxt.config.js文件的plugins中添加：

  1 2 3 4 5

  plugins: [ 'xxxx', // 引入我们刚刚新增的文件moment.js '~/plugins/moment' ]

OK ,重启后就可以开始用了。

全局设置多种格式

比如需要配置两种格式，日期型和时间型。

修改plugins/moment.js:

1
2
3
4
5
6
7
8
9
10
11
12
13

import Vue from 'vue'
import moment from 'moment'

const formats = {
  "date": "YYYY-MM-DD",
  "datetime": "YYYY-MM-DD hh:mm:ss"
}

Vue.filter('moment', function(value, format='date') {
  if (!value) { return null }
  const pattern = formats[format]
  return moment(value).format(pattern)
})

这里，设置默认为日期格式。

页面使用

比如需要显示商品创建时间：

1
2
3
4
5

{{ product.created_at | moment('datetime') }}

// 或者仅仅显示日期
{{ product.created_at | moment('date') }}
{{ product.created_at | moment }}

因为设置了参数format默认是date, 当moment内不传参数时，则采用日期样式。

参考

how to format date for display

写在前面

之前老大就教过如何在chrome的开发者模式下，设置断点，调试JS，第一次知道chrome还有这功能，觉得新鲜神奇。可惜后面偷懒没有及时记录下来，这次又遇到JS调试，脑子里一堆问号：上次是咋整的？Google了下，找到了一篇文章JS断点调试心得，文章写得很详细，这里我就简单粗暴记录下操作要点，随时备忘。

快速设置断点

以bootstrap的button页面为例：

打开chrome的开发者模式：【右键，点击inspect】

选择 sources， 找到你要设置断点的文件，在你需要debug的地方，点击设置断点。

这里有一个小技巧，对于压缩后的JS文件，点击下面的一个{} 按钮：

会将代码格式化，非常有用。

逐句调试

有两个频繁使用的调试按钮，如图所示，一个点击去往下一个断点，另一个点击会前往下一条语句。

巧用console

使用快捷键ESC，打开console，可以在console中输入变量，比如e，可以看到变量的具体内容。或者直接把光标放在需要查看的变量上，也可以看到变量的具体内容。

注意这里的console与source旁边那个console不同。在source旁边的console中输入变量，会发现什么也不会发生。

条件断点

可以给断点添加条件，添加条件后的断点，颜色会变成橙色。

比如在下面这个循环体中，需要debug 某一次循环，就可以设置条件断点 n==2，设置后，刷新页面，在console中输入n，会车，就会发现此时 n 为2，然后就可以在n = 2 时，开始你的debug之旅。

取消断点

临时禁用按钮：

如果要取消或者移除所有断点：

注意，需要在面板的Breakpoints下点击右键，才会弹出上图所示的功能列表。

参考

推荐：JS断点调试心得

如果想要详细了解面板知识，推荐这篇：用Chrome调试你的Javascript

在nuxt中引入fontawesome的方法跟引入其他外部库基本一样，因为初次接触nuxt，所以引入fontawesome时，参考网上的各种vue fontaswesome的文章，一直无法显示，踩坑不少，最后才意识到我是要在nuxt里面引入啊。

记录下最后的解决方法，没准能给同我一般的nuxt小白节省点时间。

安装

Yarn:

1
2
3
4
5
6
7

// 套件
yarn add nuxt-fontawesome

// package，不收费
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/free-regular-svg-icons
yarn add @fortawesome/free-brands-svg-icons

Npm:

1
2
3
4
5
6
7

// 套件
npm i nuxt-fontawesome

// package，不收费
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/free-regular-svg-icons
npm i @fortawesome/free-brands-svg-icons

备：Nuxt Font Awesome 中使用了官方提供的 vue-fontawesome。

配置

• 新建plugin

  在plugins目录下，新建文件：font-awesome.js，放入以下内容：

  1 2 3 4 5

  import Vue from 'vue' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.config.productionTip = false

  这里，引入了FontAwesomeIcon，同时通过Vue.component，生成可供使用的组件，组件的标签为font-awesome-icon。Vue.config.productionTip设置为false，表示关闭生产模式下给出的提示。

• 配置nuxt.config.js

  在nuxt.config.js文件中，在plugins，module部分分别添加如下代码：

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

  plugins: [ 'xxxx', // 引入我们刚刚新增的文件font-awesome.js '~/plugins/font-awesome' ] ..... modules: [ 'xxxxx', // 引入我们新增的套件nuxt-fontawesome 'nuxt-fontawesome' ] .... /* ** FontAwesome module configuration 配置FontAwesome */ fontawesome: { // See https://github.com/vaso2/nuxt-fontawesome // 这里设置了组建的标签为fa // 如果不设置，则默认为在font-awesome.js中，生成的：font-awesome-icon component: 'fa', imports: [ { set: '@fortawesome/free-solid-svg-icons', icons: ['fas'] }, { set: '@fortawesome/free-regular-svg-icons', icons: ['far'] }, { set: '@fortawesome/free-brands-svg-icons', icons: ['fab'] } ] }, .......

  这里，把三个免费的package都添加进来了。如果需要添加收费的pro版本，则是这样：

  1 2 3 4 5 6 7 8 9 10 11 12 13

  /* ** FontAwesome module configuration */ fontawesome: { // See https://github.com/vaso2/nuxt-fontawesome component: 'fa', imports: [ { set: '@fortawesome/pro-regular-svg-icons', icons: ['faAdjust'] } ] }

  [当然，这里set的库，都是之前通过npm / yarn 已经安装过的 ，具体参考：Nuxt Font Awesome]

使用

设定完成，就可以使用了，以一个简单的fontawesome icon 为例：

1

<i class="fas fa-music"></i>

在vue页面中引用上述music的icon时，这样写：

1
2
3
4
5

### 如果设置中，额外设置了component: 'fa':
<fa :icon="['fas', 'music']" />

### 如果没有设置component
<font-awesome-icon :icon="['fas', 'music']" />

OK！

更多使用参考Nuxt Font Awesome。

参考

推荐： 【Nuxt教學】實作引用 Fontawesome 5 到Nuxt專案

Nuxt Font Awesome