rabbitmq 官方文档有详细的指导，但是没有提供 docker-compose 的安装，这里就给出一个简单的安装方法，比较简单，但是不够完整。

docker-compose.yml:

    
    
    
    
    
      记录一下 Electron 踩坑
空项目 SSL 握手异常
[6104:0223/170435.000:ERROR:ssl_client_socket_impl.cc(983)] handshake failed; returned -1, SSL error code 1, net_error -101
原因是 Electron 默认开启 DoH，使用的是https://chrome.cloudflare-dns.com/。然而这东西在国内当然是会随时抽风的。Electron 文档内提到可以配置app.configureHostResolver，但是一旦配置就会起不来，只能等 Electron 更新了。app.configureHostResolver必须在 ready 事件出发后设置，否则会报错。
单实例
正常情况下 Electron 是可以多实例启动的，现在需要保证单实例启动。在主进程里进行如下配置
import { app, protocol, BrowserWindow } from 'electron'import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'const isDevelopment = process.env.NODE_ENV !== 'production'// Scheme must be registered before the app is readyprotocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }])// 此方法的返回值表示你的应用程序实例是否成功取得了锁。 如果它取得锁失败，你可以假设另一个应用实例已经取得了锁并且仍旧在运行，并立即退出。const gotTheLock = app.requestSingleInstanceLock()let mainWindow: BrowserWindow// 如果我的应用已经存在，那么就退出当前的进程if (!gotTheLock) {  app.quit()} else {  app.on('second-instance', () => {    // 当运行第二个实例时,将会聚焦到 mainWindow 这个窗口    if (mainWindow) {      // 先从托盘呼出      mainWindow.show()      // 然后放大      if (mainWindow.isMinimized()) mainWindow.restore()      // 最后聚焦      mainWindow.focus()    }  })  // Quit when all windows are closed.  app.on('window-all-closed', () => {    // On macOS it is common for applications and their menu bar    // to stay active until the user quits explicitly with Cmd + Q    if (process.platform !== 'darwin') {      app.quit()    }  })  app.on('activate', () => {    // On macOS it's common to re-create a window in the app when the    // dock icon is clicked and there are no other windows open.    if (BrowserWindow.getAllWindows().length === 0) createMainWindow()  })  // This method will be called when Electron has finished  // initialization and is ready to create browser windows.  // Some APIs can only be used after this event occurs.  app.on('ready', async () => {    // 正常启动  })}
NSIS 安装、卸载程序执行时关闭正在运行的应用
NSIS 默认情况下不会在执行时关闭正在运行的应用，并且不会报错。。。好在 electron-builder 提供了自行修改 nsh 的功能，可以自行编写以下脚本，通过 electron-builder 的 include 配置注入。
; http://bcoder.com/others/kill-process-when-install-or-uninstall-programs-by-the-package-made-by-nsis; https://www.electron.build/configuration/nsis#custom-nsis-script; This callback will be called when the installer is nearly finished initializing. If the '.onInit' function calls Abort, the installer will quit instantly!macro customInit  ; File /oname=$PLUGINSDIR\KillProcDLL.dll "${BUILD_RESOURCES_DIR}\KillProcDLL.dll"  ${nsProcess::KillProcess} "${PRODUCT_FILENAME}.exe" $R0!macroend; This callback will be called when the uninstaller is nearly finished initializing. If the 'un.onInit' function calls Abort, the uninstaller will quit instantly. Note that this function can verify and/or modify $INSTDIR if necessary.!macro customUnInit  ; File /oname=$PLUGINSDIR\KillProcDLL.dll "${BUILD_RESOURCES_DIR}\KillProcDLL.dll"  MessageBox MB_ICONQUESTION|MB_YESNO|MB_DEFBUTTON2 "是否确认卸载 ${SHORTCUT_NAME} 及其所有组件?" IDYES NoAbort IDYES +2  Abort  NoAbort:    ${nsProcess::KillProcess} "${PRODUCT_FILENAME}.exe" $R0!macroend
启动时最大化窗口
需要创建窗口时设置show: false，然后捕获ready-to-show事件，进行最大化和显示的处理。直接最大化会出现窗口不在最上面的问题，因此需要在最大化之前设置窗口在顶部，最后再取消该设置。
mainWindow = new BrowserWindow({  show: false,  // ...})// 初始最大化mainWindow.once('ready-to-show', () => {  const win = mainWindow as BrowserWindow  win.setAlwaysOnTop(true)  win.maximize()  win.show()  win.setAlwaysOnTop(false)})
关闭窗口时二次确认
为避免用户误操作关闭窗口丢失数据，需要在关闭窗口时二次确认。这是调用 electron 默认 dialog 的方式，如果需要结合渲染层，需要另外进行 IPC 调用。
mainWindow.on('close', async e => {  // 阻止默认行为，一定要有  e.preventDefault()  const { response } = await dialog.showMessageBox({    type: 'info',    title: '关闭确认',    defaultId: 0,    message: '确定要关闭应用吗？',    buttons: ['确定', '取消'],  })  if (response === 0) {    mainWindow = null    // 不要用quit() 会弹两次    // exit()直接关闭客户端，不会执行quit();    app.exit()  }})
自定义主进程与渲染进程文件位置
默认情况下，vue-cli-plugin-electron-builder 在初始化时会将主进程和渲染进程的文件都放在 src 目录下，分别为 background.ts 和 main.ts 但是如果需要自定义主进程和渲染进程的文件位置，可以通过在 vue.config.js 中配置。
// @ts-check/** @type {import('@vue/cli-service/types/ProjectOptions').ProjectOptions} */module.exports = {  pages: {    index: {      entry: 'src/renderer/main.ts',      template: 'public/index.html',    },  },  pluginOptions: {    /** @type {import('vue-cli-plugin-electron-builder').PluginOptions} */    electronBuilder: {      mainProcessFile: 'src/main/background.ts',      mainProcessWatch: ['src/main'],      preload: 'src/main/preload/index.ts',      // 不要用这个配置项，会导致渲染进程没有被挂载到html上      // rendererProcessFile: 'src/renderer/main.ts',    }  }}
]]>
    
    https://blog.gadfly.vip/2022/02/electron-vue3-pits/
    
    2022-02-23T09:01:49.000Z
    

      记录一下 Electron 踩坑
]]>
    
    
    2022-03-09T09:04:18.000Z
  
  
    
      猪蹄宝宝
    
    
      问卷模块是我的毕业设计的一部分。毕设论文里要求代码不能超过三页，导致我写的时候很难受，在这里写上完整的设计实现思路。
项目地址：
前端：https://github.com/gadfly3173/chakki-vue/
后端：https://github.com/gadfly3173/chakki-spring/
要开发一个问卷模块，首先我们需要将问卷进行抽象，来理解一个问卷系统需要哪些数据。一个问卷中可能包含多个题目，他们可能是简答题或选择题等。一个选择题可能包含多个选项，问题可以限制选项被选择的数量。如果是矩阵选择题，那么选项将分为横轴与纵轴两种，两种选项可以两两组合变成一个唯一的选项。同时，所有的选项与问题都可以被排序。将这些条件抽象成树状的数据模型就可以是下图的形式。按照图示就可以很清晰地设计出数据库的表结构了。
下面是数据库表结构：
列名
数据类型
字段类型
是否为空
默认值
备注
id
int(10) unsigned
int
NO
title
varchar(60)
varchar
NO
问卷标题
info
varchar(255)
varchar
YES
问卷简介
class_id
int(10) unsigned
int
NO
对应班级
end_time
datetime(3)
datetime
YES
create_time
datetime(3)
datetime
NO
CURRENT_TIMESTAMP(3)
update_time
datetime(3)
datetime
NO
CURRENT_TIMESTAMP(3)
delete_time
datetime(3)
datetime
YES
questionnaire 表是问卷信息表，记录了问卷的标题、简介、所属的班级 id、问卷的结束时间等信息。
列名
数据类型
字段类型
是否为空
默认值
备注
id
int(10) unsigned
int
NO
title
varchar(60)
varchar
NO
问题标题
questionnaire_id
int(10) unsigned
int
NO
对应问卷
order
tinyint(2)  unsigned
tinyint
NO
顺序编号
type
tinyint(2)  unsigned
tinyint
NO
问题类型：1-简答 2-选择
limit_max
tinyint(2)  unsigned
tinyint
YES
多选限制数量
create_time
datetime(3)
datetime
NO
CURRENT_TIMESTAMP(3)
update_time
datetime(3)
datetime
NO
CURRENT_TIMESTAMP(3)
delete_time
datetime(3)
datetime
YES
questionnaire_question 表是问题信息表，记录了问题的标题、对应的问卷 id、排序、问题类型、上限等信息。
列名
数据类型
字段类型
是否为空
默认值
备注
id
int(10) unsigned
int
NO
title
varchar(60)
varchar
NO
选项内容
question_id
int(10) unsigned
int
NO
对应问卷
order
tinyint(2)  unsigned
tinyint
NO
顺序编号
create_time
datetime(3)
datetime
NO
CURRENT_TIMESTAMP(3)
update_time
datetime(3)
datetime
NO
CURRENT_TIMESTAMP(3)
delete_time
datetime(3)
datetime
YES
questionnaire_question_option 表是问卷的选择题的选项表，记录了选项名、对应的问题 id、选项的排序等信息
列名
数据类型
字段类型
是否为空
默认值
备注
id
int(10) unsigned
int
NO
user_id
int(10) unsigned
int
NO
学生 id
questionnaire_id
int(10) unsigned
int
NO
问卷 id
ip
varchar(39)
varchar
YES
create_time
datetime(3)
datetime
NO
CURRENT_TIMESTAMP(3)
update_time
datetime(3)
datetime
NO
CURRENT_TIMESTAMP(3)
delete_time
datetime(3)
datetime
YES
student_questionnaire 表是学生与问卷的关系表，即学生的问卷提交记录，记录了用户 id、问卷 id、IP 地址等信息。
列名
数据类型
字段类型
是否为空
默认值
备注
id
int(10) unsigned
int
NO
student_questionnaire_id
int(10)
int
NO
对应的学生提交信息 id
question_id
int(10) unsigned
int
NO
问题 id
answer
varchar(255)
varchar
YES
option_id
int(10) unsigned
int
YES
create_time
datetime(3)
datetime
NO
CURRENT_TIMESTAMP(3)
update_time
datetime(3)
datetime
NO
CURRENT_TIMESTAMP(3)
delete_time
datetime(3)
datetime
YES
student_questionnaire_question_answer 表是学生提交的每个问题的具体回答的记录表，记录了对应 student_questionnaire 的 id、对应的问题 id、简答题的回答内容、选择题的选项等信息。
sql 建表语句如下：
-- ------------------------------ 问卷表-- ----------------------------DROP TABLE IF EXISTS `questionnaire`;CREATE TABLE `questionnaire`(    `id`          int(10) UNSIGNED                                              NOT NULL AUTO_INCREMENT,    `title`       varchar(60) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci  NOT NULL COMMENT '问卷标题',    `info`        varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL     DEFAULT NULL COMMENT '问卷简介',    `class_id`    int(10) UNSIGNED                                              NOT NULL COMMENT '对应班级',    `end_time`    datetime(3)                                                   NULL     DEFAULT NULL,    `create_time` datetime(3)                                                   NOT NULL DEFAULT CURRENT_TIMESTAMP(3),    `update_time` datetime(3)                                                   NOT NULL DEFAULT CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3),    `delete_time` datetime(3)                                                   NULL     DEFAULT NULL,    PRIMARY KEY (`id`) USING BTREE,    INDEX `title_del` (`title`, `delete_time`) USING BTREE) ENGINE = InnoDB  CHARACTER SET = utf8mb4  COLLATE = utf8mb4_general_ci  ROW_FORMAT = Dynamic;-- ------------------------------ 问题表-- ----------------------------DROP TABLE IF EXISTS `questionnaire_question`;CREATE TABLE `questionnaire_question`(    `id`               int(10) UNSIGNED                                             NOT NULL AUTO_INCREMENT,    `title`            varchar(60) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '问题标题',    `questionnaire_id` int(10) UNSIGNED                                             NOT NULL COMMENT '对应问卷',    `order`            tinyint(2) UNSIGNED                                          NOT NULL COMMENT '顺序编号',    `type`             tinyint(2) UNSIGNED                                          NOT NULL COMMENT '问题类型：1-简答 2-选择',    `limit_max`        tinyint(2) UNSIGNED                                          NULL     DEFAULT NULL COMMENT '多选限制数量',    `create_time`      datetime(3)                                                  NOT NULL DEFAULT CURRENT_TIMESTAMP(3),    `update_time`      datetime(3)                                                  NOT NULL DEFAULT CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3),    `delete_time`      datetime(3)                                                  NULL     DEFAULT NULL,    PRIMARY KEY (`id`) USING BTREE) ENGINE = InnoDB  CHARACTER SET = utf8mb4  COLLATE = utf8mb4_general_ci  ROW_FORMAT = Dynamic;-- ------------------------------ 选项表-- ----------------------------DROP TABLE IF EXISTS `questionnaire_question_option`;CREATE TABLE `questionnaire_question_option`(    `id`          int(10) UNSIGNED                                             NOT NULL AUTO_INCREMENT,    `title`       varchar(60) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '选项内容',    `question_id` int(10) UNSIGNED                                             NOT NULL COMMENT '对应问卷',    `order`       tinyint(2) UNSIGNED                                          NOT NULL COMMENT '顺序编号',    `update_time` datetime(3)                                                  NOT NULL DEFAULT CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3),    `delete_time` datetime(3)                                                  NULL     DEFAULT NULL,    PRIMARY KEY (`id`) USING BTREE) ENGINE = InnoDB  CHARACTER SET = utf8mb4  COLLATE = utf8mb4_general_ci  ROW_FORMAT = Dynamic;-- ------------------------------ 学生-问卷 关系表-- ----------------------------DROP TABLE IF EXISTS `student_questionnaire`;CREATE TABLE `student_questionnaire`(    `id`               int(10) UNSIGNED                                             NOT NULL AUTO_INCREMENT,    `user_id`          int(10) UNSIGNED                                             NOT NULL COMMENT '学生id',    `questionnaire_id` int(10) UNSIGNED                                             NOT NULL COMMENT '问卷id',    `ip`               varchar(39) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL     DEFAULT NULL,    `create_time`      datetime(3)                                                  NOT NULL DEFAULT CURRENT_TIMESTAMP(3),    `update_time`      datetime(3)                                                  NOT NULL DEFAULT CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3),    `delete_time`      datetime(3)                                                  NULL     DEFAULT NULL,    PRIMARY KEY (`id`) USING BTREE) ENGINE = InnoDB  CHARACTER SET = utf8mb4  COLLATE = utf8mb4_general_ci  ROW_FORMAT = Dynamic;-- ------------------------------ 问题-回答 关系表-- ----------------------------DROP TABLE IF EXISTS `student_questionnaire_question_answer`;CREATE TABLE `student_questionnaire_question_answer`(    `id`                       int(10) UNSIGNED                                              NOT NULL AUTO_INCREMENT,    `student_questionnaire_id` int(10) UNSIGNED                                              NOT NULL COMMENT '对应的学生提交信息id',    `question_id`              int(10) UNSIGNED                                              NOT NULL COMMENT '问题id',    `answer`                   varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL     DEFAULT NULL,    `option_id`                int(10) UNSIGNED                                              NULL     DEFAULT NULL,    `create_time`              datetime(3)                                                   NOT NULL DEFAULT CURRENT_TIMESTAMP(3),    `update_time`              datetime(3)                                                   NOT NULL DEFAULT CURRENT_TIMESTAMP(3) ON UPDATE CURRENT_TIMESTAMP(3),    `delete_time`              datetime(3)                                                   NULL     DEFAULT NULL,    PRIMARY KEY (`id`) USING BTREE) ENGINE = InnoDB  CHARACTER SET = utf8mb4  COLLATE = utf8mb4_general_ci  ROW_FORMAT = Dynamic;
数据模型中我并没有写上序号一项，因为前端提交时是一个数组的形式，本身就带有数据索引，后端接收到数据后，只要将这个索引作为序号填入数据库即可。对于排序的工作，由前端实现即可。因此，我们可以给出发布问卷使用的 json 示例：
{  "class_id": 0,  "end_time": "",  "info": "",  "questions": [    {      "limit_max": 0,      "options": [        {          "title": ""        }      ],      "title": "",      "type": 0    }  ],  "title": ""}
对应的实体类便是：
/** * NewQuestionnaireDTO */@Setter@Getter@NoArgsConstructor@ApiModel(value = "新建问卷DTO", description = "问卷")public class NewQuestionnaireDTO {    @ApiModelProperty(value = "标题", required = true)    @Length(min = 1, max = 60, message = "{lesson.questionnaire.title.not-null}")    private String title;    @ApiModelProperty(value = "简介")    @Length(max = 255, message = "{lesson.questionnaire.info.length}")    private String info;    @ApiModelProperty(value = "班级id", name = "class_id", required = true)    @NotNull(message = "{class.id.not-null}")    @Min(value = 1, message = "{class.id.not-null}")    private Integer classId;    @ApiModelProperty(value = "问题列表", required = true)    @Valid    @NotNull(message = "{lesson.questionnaire.length}")    @Size(min = 1, max = 99, message = "{lesson.questionnaire.length}")    private List<NewQuestionDTO> questions;    @ApiModelProperty(value = "结束时间", name = "end_time")    private Date endTime;}/** * NewQuestionDTO */@Setter@Getter@NoArgsConstructor@ApiModel(value = "新建问题DTO", description = "问题")public class NewQuestionDTO {    @ApiModelProperty(value = "标题", required = true)    @Length(min = 1, max = 60, message = "{lesson.questionnaire.question.title.not-null}")    private String title;    @ApiModelProperty(value = "类型", allowableValues = "1,2", required = true)    @NotNull(message = "{lesson.questionnaire.question.type.not-null}")    @Min(value = QuestionTypeConstant.TEXT, message = "{lesson.questionnaire.question.type.not-null}")    @Max(value = QuestionTypeConstant.SELECT, message = "{lesson.questionnaire.question.type.not-null}")    private Integer type;    @ApiModelProperty(value = "上限，目前用于选择题", name = "limit_max", allowableValues = "range[1,10]")    @Min(value = 1, message = "{lesson.questionnaire.question.limit.not-null}")    @Max(value = 10, message = "{lesson.questionnaire.question.limit.not-null}")    private Integer limitMax;    @ApiModelProperty(value = "选项列表")    @Valid    @Size(max = 10, message = "{lesson.questionnaire.question.option.limit}")    private List<NewOptionDTO> options;}/** * NewOptionDTO */@Setter@Getter@NoArgsConstructor@ApiModel(value = "新建选项DTO", description = "选项")public class NewOptionDTO {    @ApiModelProperty(value = "标题")    @Length(min = 1, max = 60, message = "{lesson.questionnaire.question.option.title.not-null}")    private String title;}
接下来给出 service 类的实现，controller 就省略了。由于数据库表结构上文也已经给出，对应的 model 类 DO 也不再给出。
/** * 问题类型常量 */public class QuestionTypeConstant {    /**     * 简答     */    public static final int TEXT = 1;    /**     * 选择     */    public static final int SELECT = 2;}---------------------------------------------------------------    @Transactional(rollbackFor = Exception.class)    @Override    public void createQuestionnaire(NewQuestionnaireDTO dto) {        // 插入问卷获取id        QuestionnaireDO questionnaireDO = QuestionnaireDO.builder()                .title(dto.getTitle())                .info(dto.getInfo())                .classId(dto.getClassId())                .endTime(dto.getEndTime())                .build();        questionnaireMapper.insert(questionnaireDO);        // 插入题目        for (int i = 0; i < dto.getQuestions().size(); i++) {            NewQuestionDTO questionDTO = dto.getQuestions().get(i);            QuestionnaireQuestionDO questionnaireQuestionDO = QuestionnaireQuestionDO.builder()                    .questionnaireId(questionnaireDO.getId())                    .title(questionDTO.getTitle())                    .order(i)                    .type(questionDTO.getType())                    .limitMax(questionDTO.getLimitMax())                    .build();            questionnaireQuestionMapper.insert(questionnaireQuestionDO);            // 如果是选择题，且选项列表不为空则插入选项            if (questionDTO.getType() == QuestionTypeConstant.SELECT                    && questionDTO.getOptions() != null                    && !questionDTO.getOptions().isEmpty()) {                for (int k = 0; k < questionDTO.getOptions().size(); k++) {                    NewOptionDTO optionDTO = questionDTO.getOptions().get(k);                    QuestionnaireQuestionOptionDO questionnaireQuestionOptionDO =                         QuestionnaireQuestionOptionDO.builder()                            .questionId(questionnaireQuestionDO.getId())                            .title(optionDTO.getTitle())                            .order(k)                            .build();                    questionnaireQuestionOptionMapper.insert(questionnaireQuestionOptionDO);                }            }        }    }
可以看到代码逻辑很简单，直接循环 DTO 中接收到的所有参数，一一对应插入数据库即可。因为 DTO 中没有给到排序编号，因此使用的是普通 fori 循环来得到数组每项的下标作为编号。
然后来看看前端部分，新建问卷页面关键代码如下：
<template>  <div class="container" v-loading="loading">    <div class="header">      <div class="title">{{ $route.params.id === '0' ? '新建' : '编辑' }}问卷</div>      <div class="deploy-button"><el-button type="primary" @click.stop="deploy">发布</el-button></div>    </div>    <div class="wrapper">      <div class="title-input">        <label>问卷标题：</label>        <el-input size="medium" clearable v-model="title" :maxlength="60" show-word-limit></el-input>      </div>      <div class="info-input">        <label>问卷简介：</label>        <el-input          size="medium"          type="textarea"          :autosize="{ minRows: 2 }"          clearable          v-model="info"          :maxlength="255"          show-word-limit        ></el-input>      </div>      <div class="questions">        <el-row>          <el-col :span="6" class="toolbar">            <div class="add-button">              <el-button type="text" class="button" icon="el-icon-circle-plus-outline" @click="addTextQuestion"                >新建简答题</el-button              >            </div>            <div class="add-button">              <el-button type="text" class="button" icon="el-icon-circle-plus-outline" @click="addSelectQuestion"                >新建选择题</el-button              >            </div>          </el-col>          <el-col :span="18" class="right-col">            <el-scrollbar key="scrollbar" class="scrollbar">              <div class="mask top-mask"></div>              <div class="end-time-input">                结束时间：                <el-date-picker                  v-model="endTime"                  type="datetime"                  placeholder="选择日期时间"                  align="right"                  :editable="false"                  :picker-options="pickerOptions"                >                </el-date-picker>              </div>              <div v-if="!list || list.length === 0" class="hint-box">                点击左侧按钮新建题目              </div>              <draggable                v-else                class="list-group"                tag="ul"                v-model="list"                v-bind="dragOptions"                handle=".handle"                @start="drag = true"                @end="drag = false"              >                <transition-group type="transition" name="flip-list">                  <li class="list-group-item" v-for="(element, index) in list" :key="`question-${index}`">                    <i class="anticon icon-bars handle"                      ><span class="order">{{ index + 1 }}.</span></i                    >                    <div class="question">                      <span class="question-title">                        <div class="label">                          问题：                        </div>                        <el-input                          class="title-input"                          placeholder="请输入标题"                          size="medium"                          v-model="element.title"                          :maxlength="60"                          clearable                          show-word-limit                        >                        </el-input>                      </span>                      <div class="question-type">                        类型：{{ element.type | questionTypeFilter }}                        <span v-if="element.type === 2" class="limit">                          选项可选数量上限：                          <el-input-number                            class="limit-max-input"                            v-model="element.limit_max"                            size="mini"                            controls-position="right"                            :step-strictly="true"                            :min="1"                            :max="10"                          ></el-input-number>                        </span>                      </div>                      <!-- 选择题选项 -->                      <div class="question-options" v-if="element.type === 2">                        <i class="iconfont icon-jia plus" v-if="!element.options.length" @click="addOption(index)"></i>                        <el-row class="option-row" v-for="(item, key) in element.options" :key="key">                          <div class="option-hint">选项{{ key + 1 }}</div>                          <el-input                            v-model="item.title"                            :maxlength="60"                            show-word-limit                            clearable                            placeholder="请输入选项"                            size="medium"                            class="option-input"                          ></el-input>                          <div class="function">                            <i class="iconfont icon-jian1 minus" @click="removeOption(index, key)"></i>                            <i                              class="iconfont icon-jia plus"                              v-if="key === element.options.length - 1 && element.options.length < 10"                              @click="addOption(index)"                            ></i>                          </div>                        </el-row>                      </div>                    </div>                    <i class="el-icon-close" @click="removeQuestion(index)"></i>                  </li>                </transition-group>              </draggable>              <div class="mask bottom-mask"></div>            </el-scrollbar>          </el-col>        </el-row>      </div>    </div>  </div></template><script>import Class from '@/model/class'import draggable from 'vuedraggable'export default {  data() {    return {      title: '',      info: '',      endTime: null,      loading: false,      drag: false,      dragOptions: {        animation: 200,        group: 'description',        disabled: false,        ghostClass: 'ghost',      },      pickerOptions: {        shortcuts: [          {            text: '五分钟后',            onClick(picker) {              const date = new Date()              date.setTime(date.getTime() + 5 * 60 * 1000)              picker.$emit('pick', date)            },          },          // 其他的自行撰写        ],        disabledDate(date) {          return date.getTime() <= new Date().getTime() - 3600 * 1000 * 24        },      },      list: [],    }  },  components: {    draggable,  },  computed: {    currentClassId() {      return this.$store.state.currentClassId    },  },  methods: {    addTextQuestion() {      this.list.push({        title: '',        type: 1,      })    },    addSelectQuestion() {      this.list.push({        title: '',        type: 2,        limit_max: 1,        options: [],      })    },    addOption(index) {      this.list[index].options.push({        title: '',      })    },    removeOption(index, key) {      this.list[index].options.splice(key, 1)    },    removeQuestion(index) {      this.list.splice(index, 1)    },    async getQuestionnaireVO() {      // TODO 编辑问卷      const res = await Class.getQuestionnaireVO(this.$route.params.id)      this.title = res.title    },    async deploy() {      try {        this.loading = true        if (this.$route.params.id === '0') {          // 发布问卷          const res = await Class.createQuestionnaire(            this.title,            this.info,            this.currentClassId,            this.end_time,            this.list,          )          if (res.code < window.MAX_SUCCESS_CODE) {            this.loading = false            this.$message.success('问卷发布成功')          }        } else {          // 更新问卷          const res = await Class.updateQuestionnaire(this.$route.params.id, this.title, this.content)          if (res.code < window.MAX_SUCCESS_CODE) {            this.loading = false            this.$message.success('问卷修改成功')          } else {            this.$message.error(res.message)          }        }        this.loading = false      } catch (e) {        this.loading = false      }    },  },  created() {    if (this.$route.params.id !== '0') {      this.getQuestionnaireVO()    }  },}</script><style lang="scss" scoped>.flip-list-move {  transition: transform 0.5s;}.flip-list-enter-active {  transition: opacity 0.5s;}.flip-list-enter {  opacity: 0;}.no-move {  transition: transform 0s;}.ghost {  opacity: 0.5;  background: #c8ebfb;}.container {  padding: 0 30px;  color: #596c8e;  height: 100%;  .header {    display: flex;    justify-content: space-between;    align-items: center;    border-bottom: 1px solid #dae1ec;    height: 59px;    .title {      height: 59px;      line-height: 59px;      color: $parent-title-color;      font-size: 16px;      font-weight: 500;      text-indent: 40px;    }    .deploy-button {      margin: 0 40px;    }  }  .wrapper {    height: calc(100% - 80px);    .title-input {      display: flex;      padding: 20px 20px 0;      label {        width: 120px;        line-height: 36px;      }    }    .info-input {      display: flex;      padding: 20px;      border-bottom: 1px dashed #dae1ec;      label {        width: 120px;        line-height: 36px;      }    }    .questions {      height: calc(100% - 150px);      /deep/ .el-row {        height: 100%;      }      .toolbar {        border-right: 1px solid #dae1ec;        height: 100%;        text-align: right;        display: flex;        align-items: flex-end;        flex-direction: column;        justify-content: center;        .add-button {          margin: 10px 20px;          .button {            font-size: 20px;          }        }      }      .scrollbar {        height: 100%;        /deep/ .el-scrollbar__wrap {          overflow-x: hidden;        }      }      .right-col {        height: 100%;      }      .end-time-input {        display: flex;        justify-content: center;        align-items: center;        margin-top: 20px;        padding-bottom: 20px;        border-bottom: 1px solid #dae1ec;        /deep/ .el-input__inner {          cursor: pointer;        }      }      .hint-box {        text-align: center;        padding: 20vh 0;        color: #dcdfe6;      }      .mask {        position: absolute;        z-index: 100;        width: 100%;        height: 50px;        pointer-events: none;        &.top-mask {          top: 0;          background: linear-gradient(rgb(249, 250, 251), rgba(249, 250, 251, 0));        }        &.bottom-mask {          bottom: 0;          background: linear-gradient(rgba(249, 250, 251, 0), rgb(249, 250, 251));        }      }      .list-group {        min-height: 20px;        width: 90%;        padding: 0 20px;        margin: 0 auto;        .list-group-item {          display: flex;          justify-content: space-between;          align-items: center;          margin: 15px 0;          padding-bottom: 10px;          border-bottom: 1px dashed #d5eae6;          .handle {            font-size: 20px;            font-weight: 700;            cursor: move;            padding: 20px 0;            &:hover {              transform: scale(1.2);            }          }          .order {            margin: 0 10px;          }          .el-icon-close {            font-weight: 700;            cursor: pointer;            padding: 5px;            color: #c7485b;            font-size: 20px;            &:hover {              transform: scale(1.2);            }          }          .question-title {            display: flex;            align-items: center;            margin: 10px 0;            .label {              width: 50px;            }            .title-input {              width: 350px;              padding: 0;            }          }          .question-type {            font-size: 14px;            margin: 10px 0;            .limit {              padding-left: 30px;              .limit-max-input {                width: 80px;              }            }          }          .question-options {            padding-top: 10px;            .iconfont {              cursor: pointer;              font-size: 20px;              font-weight: 700;              &.plus {                color: #3765b6;              }              &.minus {                font-size: 22px;                color: #c7485b;              }            }            .option-row {              display: flex;              align-items: center;              justify-content: space-between;              width: 400px;              margin-bottom: 10px;              .option-hint {                width: 60px;              }              .option-input {                width: 300px;                margin-right: 5px;              }              .function {                display: flex;                justify-content: space-between;                width: 60px;                height: 36px;                line-height: 36px;              }            }          }        }      }    }  }}</style>
拖拽排序使用的是 vuedraggable，使用方法请自行查阅官方文档。
学生提交问卷时，则需要上传问卷 id、自己的回答列表即可。回答本身可能有简答与选择的选项两种情况，由于两者类型不同，因此使用两个不同的字段 answer 和 option_id 存储。对于学生提交问卷回答部分就不再展示代码，
教师查询学生的提交记录时则是下载一个包含所有提交记录的 Excel 文件。Excel 的写入可以使用 Apache POI 来完成。Apache POI 对 Excel 类型的文件有三种创建方式，HSSF、XSSF、SXSSF。
HSSF 是用于生成 Office 97-2003 的旧版本 xls 文件，XSSF 用于生成新版本的 xlsx 文件，而 SXSSF 则是在 XSSF 的基础上进行扩展，可以避免过大的数据导致内存溢出。
由于问卷是针对班级为单位发布的，数据量不会超过 100 行，因此使用 XSSF 形式进行生成即可。POI 对 Excel 的操作是以行为单位的，每行每列都是从 0 开始。因此需要通过 createRow 方法先创建标题行，然后遍历学生提交的答案来填充数据，最后写入临时文件并返回。
@Overridepublic FileExportBO getQuestionnaireReportFile(Integer id) throws IOException {    // 查询问卷本体    QuestionnaireVO questionnaireVO = questionnaireMapper.getQuestionnaireVO(id);    // 查询学生提交记录    List<StudentQuestionnaireAnswerVO> answerVOList = studentQuestionnaireMapper.selectStudentQuestionnaireAnswerVO(id);    // Apache POI 创建 Excel    XSSFWorkbook wb = new XSSFWorkbook();    XSSFSheet sheet = wb.createSheet("Sheet 1");    // 设置时间格式    XSSFCreationHelper creationHelper = wb.getCreationHelper();    CellStyle cellStyle = wb.createCellStyle();    cellStyle.setDataFormat(creationHelper.createDataFormat().getFormat("yyyy-MM-dd HH:mm:ss.SSS"));    // 标题行    XSSFRow titleRow = sheet.createRow(0);    titleRow.createCell(0).setCellValue("学号");    titleRow.createCell(1).setCellValue("姓名");    // 问题题目作为标题    for (int i = 0; i < questionnaireVO.getQuestions().size(); i++) {        titleRow.createCell(i + 2).setCellValue(String.format("第%d题：%s",                i + 1,                questionnaireVO.getQuestions().get(i).getTitle()));    }    titleRow.createCell(questionnaireVO.getQuestions().size() + 2).setCellValue("提交时间");    // 学生回答内容写入    for (int i = 0; i < answerVOList.size(); i++) {        XSSFRow row = sheet.createRow(i + 1);        row.createCell(0).setCellValue(answerVOList.get(i).getUsername());        row.createCell(1).setCellValue(answerVOList.get(i).getNickname());        // 遍历问题        for (int j = 0; j < questionnaireVO.getQuestions().size(); j++) {            // 简答题写入answer            if (questionnaireVO.getQuestions().get(j).getType().equals(QuestionTypeConstant.TEXT)) {                row.createCell(j + 2).setCellValue(answerVOList.get(i).getAnswers().get(j).getAnswer());                continue;            }            // 选择题查询选项原文写入            if (questionnaireVO.getQuestions().get(j).getType().equals(QuestionTypeConstant.SELECT)) {                // 初始化StringJoiner用来存放原文                StringJoiner optionTitles = new StringJoiner(",");                for (Integer optionId : answerVOList.get(i).getAnswers().get(j).getOptionId()) {                    for (OptionVO optionVO : questionnaireVO.getQuestions().get(j).getOptions()) {                        // 如果id相同就加一条                        if (optionVO.getId().equals(optionId)) {                            optionTitles.add(optionVO.getTitle());                        }                    }                }                row.createCell(j + 2).setCellValue(optionTitles.toString());            }        }        // 写入创建时间        XSSFCell datetimeCell = row.createCell(questionnaireVO.getQuestions().size() + 2);        datetimeCell.setCellValue(answerVOList.get(i).getCreateTime());        datetimeCell.setCellStyle(cellStyle);    }    // 写入临时文件    File excelFile = File.createTempFile(String.valueOf(System.currentTimeMillis()), ".xlsx");    FileOutputStream outputStream = new FileOutputStream(excelFile);    wb.write(outputStream);    outputStream.close();    // 格式化文件名    String filename = String.format("问卷调查结果_%s.xlsx", questionnaireVO.getTitle());    return FileExportBO.builder()            .file(excelFile)            .filename(filename)            .build();}
]]>
    
    https://blog.gadfly.vip/2021/04/make-a-questionnaire-module-step-by-step/
    
    2021-04-28T10:10:36.000Z
    

      问卷模块是我的毕业设计的一部分。毕设论文里要求代码不能超过三页，导致我写的时候很难受，在这里写上完整的设计实现思路。
]]>
    
    
    2022-03-03T02:24:06.000Z
  
  
    
      猪蹄宝宝
    
    
    
    
    
    
    
    
    
    
      前文提到过，Axios 的核心是 XMLHttpRequest。XMLHttpRequest 对象在默认情况下并不会发送 Cookies，需要设置 withCredentials: true才行。
但是只有前端设置也是没有用的，涉及跨域的情况下，还需要后端配合。我用的是 Spring，就用 Spring 的配置类演示了。
// ajax 封装插件, 使用 axiosimport Vue from 'vue'import axios from 'axios'import Config from '@/config'const config = {  baseURL: Config.baseURL || process.env.apiUrl || '',  timeout: 5 * 1000, // 请求超时时间设置  crossDomain: true,  withCredentials: true, // Check cross-site Access-Control  // 定义可获得的http响应状态码  // return true、设置为null或者undefined，promise将resolved,否则将rejected  validateStatus(status) {    return status >= 200 && status < 510  },}// 创建请求实例const _axios = axios.create(config)// 其他代码// ...
@Configuration(proxyBeanMethods = false)public class WebConfiguration implements WebMvcConfigurer {    @Override    public void addCorsMappings(CorsRegistry registry) {        registry.addMapping("/**")                // 跨域域名绝对不能配置为通配符，必须指定具体的域名，且http和https是算两个域名的，如果两个都要支持就都要写                .allowedOriginPatterns("http://localhost:18080", "你的域名")                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")                .allowCredentials(true)                .maxAge(3600)                .allowedHeaders("*")                // 允许跨域接受Cookie                .allowCredentials(true)                .exposedHeaders(HttpHeaders.CONTENT_DISPOSITION);    }}
参考：You Don't Know Axios
]]>
    
    https://blog.gadfly.vip/2021/02/axios-xhr-with-cookie/
    
    2021-02-26T09:58:13.000Z
    

      前文提到过，Axios 的核心是 XMLHttpRequest。XMLHttpRequest 对象在默认情况下并不会发送 Cookies，需要设置 withCredentials: t]]>
    

    
    2022-03-03T02:24:06.000Z
  
  
    
      猪蹄宝宝
    
    
    
    
    
    
    
      现在有一个接口提供下载服务，在发生异常时，这个接口会返回 JSON 数据，来告诉前端是什么样的异常。默认情况下，Axios 只能处理 JSON 数据，如何让二者兼容是本文讨论的核心。
Axios 的核心是 XMLHttpRequest。可以设置 XMLHttpRequest 对象的 responseType 属性以改变从服务器端获取的预期响应。可接受的值为空字符串（默认）、arraybuffer、blob、json、text、document。
而 Axios 默认配置为 json，如果将其配置为 blob，虽然可以处理下载文件了，但是接口返回的 JSON 数据很难同步转换为 JSON 进行处理（因为 Blob 转 JSON 需要使用 FileReader().readAsText()，这是一个异步的操作）。
因此我们可以设置 responseType 为 arraybuffer，ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区。它是一个字节数组，通常在其他语言中称为“byte array”，ArrayBuffer可以简单的转换为 JSON 或 Blob。
// ajax 封装插件, 使用 axiosimport Vue from 'vue'import axios from 'axios'import Config from '@/config'const config = {  baseURL: Config.baseURL || process.env.apiUrl || '',  timeout: 5 * 1000, // 请求超时时间设置  crossDomain: true,  withCredentials: true, // Check cross-site Access-Control  // 定义可获得的http响应状态码  // return true、设置为null或者undefined，promise将resolved,否则将rejected  validateStatus(status) {    return status >= 200 && status < 510  },}// 创建请求实例const _axios = axios.create(config)_axios.interceptors.request.use(  originConfig => {    const reqConfig = { ...originConfig }    // step1: 容错处理    if (!reqConfig.url) {      /* eslint-disable-next-line */      console.error('request need url')      throw new Error({        source: 'axiosInterceptors',        message: 'request need url',      })    }    if (!reqConfig.method) {      // 默认使用 get 请求      reqConfig.method = 'get'    }    // 大小写容错    reqConfig.method = reqConfig.method.toLowerCase()    // 参数容错    if (reqConfig.method === 'get') {      if (!reqConfig.params) {        // 防止字段用错        reqConfig.params = reqConfig.data || {}      }    } else if (reqConfig.method === 'post') {      if (!reqConfig.data) {        // 防止字段用错        reqConfig.data = reqConfig.params || {}      }      // 检测是否包含文件类型, 若包含则进行 formData 封装      let hasFile = false      Object.keys(reqConfig.data).forEach(key => {        if (typeof reqConfig.data[key] === 'object') {          const item = reqConfig.data[key]          if (item instanceof FileList || item instanceof File || item instanceof Blob) {            hasFile = true          }        }      })      // 检测到存在文件使用 FormData 提交数据      if (hasFile) {        const formData = new FormData()        Object.keys(reqConfig.data).forEach(key => {          formData.append(key, reqConfig.data[key])        })        reqConfig.data = formData      }    } else {      // TODO: 其他类型请求数据格式处理      /* eslint-disable-next-line */      console.warn(`其他请求类型: ${reqConfig.method}, 暂无自动处理`)    }    // 你自己的请求头处理，比如Authorization之类的    // ...    return reqConfig  },  error => {    Promise.reject(error)  },)// Add a response interceptor_axios.interceptors.response.use(  async res => {    // 返回的内容是文件    if (res.headers['content-type'].toLowerCase().includes('application/octet-stream')) {      return res    }    // 返回的数据是 arraybuffer，内容是 json    if (res.request.responseType === 'arraybuffer' && res.data.toString() === '[object ArrayBuffer]') {      const text = Buffer.from(res.data).toString('utf8')      res.data = JSON.parse(text)    }    if (res.status.toString().charAt(0) === '2') {      return res.data    }    let { code, message } = res.data // eslint-disable-line    return new Promise(async (resolve, reject) => {      // 你自己的异常处理      // ...      Vue.prototype.$message({        message,        type: 'error',      })      reject()    })  },  error => {    if (!error.response) {      Vue.prototype.$notify({        title: 'Network Error',        dangerouslyUseHTMLString: true,        message: '<strong class="my-notify">请检查 API 是否异常</strong>',      })      console.log('error', error)    }    // 判断请求超时    if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {      Vue.prototype.$message({        type: 'warning',        message: '请求超时',      })    }    return Promise.reject(error)  },)// eslint-disable-next-linePlugin.install = function(Vue, options) {  // eslint-disable-next-line  Vue.axios = _axios  window.axios = _axios  Object.defineProperties(Vue.prototype, {    axios: {      get() {        return _axios      },    },    $axios: {      get() {        return _axios      },    },  })}if (!Vue.axios) {  Vue.use(Plugin)}// 导出常用函数/** * @param {string} url * @param {object} data * @param {object} params */export function post(url, data = {}, params = {}) {  return _axios({    method: 'post',    url,    data,    params,  })}/** * @param {string} url * @param {object} params */export function get(url, params = {}) {  return _axios({    method: 'get',    url,    params,  })}/** * 下载用的实例配置 * @param {string} url * @param {object} params */export function download(url, params = {}) {  return _axios({    method: 'get',    url,    params,    // 指定无超时、接收对象为arraybuffer    timeout: 0,    responseType: 'arraybuffer',  })}/** * @param {string} url * @param {object} data * @param {object} params */export function put(url, data = {}, params = {}) {  return _axios({    method: 'put',    url,    params,    data,  })}/** * @param {string} url * @param {object} params */export function _delete(url, params = {}) {  return _axios({    method: 'delete',    url,    params,  })}export default _axio
参考：Axios 同时支持下载和 JSON 数据格式
]]>
    
    https://blog.gadfly.vip/2021/02/axios-download-file/
    
    2021-02-26T09:21:15.000Z
    

      现在有一个接口提供下载服务，在发生异常时，这个接口会返回 JSON 数据，来告诉前端是什么样的异常。默认情况下，Axios 只能处理 JSON 数据，如何让二者兼容是本文讨论的核心。

Axios 的核心是 XMLHttpRequest]]>
    
    
    2022-03-03T02:24:06.000Z
  
  
    
      猪蹄宝宝
    
    
    
    
    
    
      介绍
Github Actions 可以很方便实现 CI/CD 工作流，类似 Travis 的用法，来帮我们完成一些工作，比如实现自动化测试、打包、部署等操作。当我们运行Jobs时，它会创建一个容器 (runner)，容器支持：Ubuntu、Windows和MacOS等系统，在容器中我们可以安装软件，利用安装的软件帮我们处理一些数据，然后把处理好的数据推送到某个地方。
本文将介绍利用 Github Actions 实现自动部署hexo到 Github Pages，在之前我们需要写完文章执行hexo d -g来部署，当你文章比较多的时候，可能还需要等待很久，而且还可能会遇到本地安装的Node.js版本与Hexo不兼容的问题。
目前我就是因为电脑的Node.js版本升到v14版本导致与Hexo不兼容部署不了，才来捣腾 Github Actions 功能的。利用 Github Actions 你将会没有这些烦恼。
前提
生成部署密钥
一路按回车直到生成成功
ssh-keygen -f github-deploy-key
当前目录下会有github-deploy-key和github-deploy-key.pub两个文件。
配置部署密钥
复制github-deploy-key文件内容，在博客源码仓库的 Settings -> Secrets -> Add a new secret 页面上添加。
在Name输入框填写HEXO_DEPLOY_PRI。
在Value输入框填写github-deploy-key文件内容。
复制github-deploy-key.pub文件内容，在your.github.io仓库 Settings -> Deploy keys -> Add deploy key 页面上添加。
在Title输入框填写HEXO_DEPLOY_PUB。
在Key输入框填写github-deploy-key.pub文件内容。
勾选Allow write access选项。
编写 Github Actions
Workflow 模版
在博客源码仓库下创建.github/workflows/deploy.yml文件，我这里是博客仓库的source分支，目录结构如下。
blog (repository)└── .github    └── workflows        └── deploy.yml
在 deploy.yml 文件中粘贴以下内容。
name: Hexo CIon:  push:    branches:      - sourceenv:  GIT_USER: Gadfly  GIT_EMAIL: gadfly@gadfly.vip  DEPLOY_REPO: gadfly3173/gadfly3173.github.io  DEPLOY_BRANCH: master  TZ: Asia/Shanghaijobs:  build:    name: Build on node ${{ matrix.node_version }} and ${{ matrix.os }}    runs-on: ubuntu-latest    strategy:      matrix:        os: [ubuntu-latest]        node-version: [10.x]    steps:      - name: Checkout        uses: actions/checkout@v2      - name: Checkout deploy repo        uses: actions/checkout@v2        with:          repository: ${{ env.DEPLOY_REPO }}          ref: ${{ env.DEPLOY_BRANCH }}          path: .deploy_git      - name: Use Node.js ${{ matrix.node-version }}        uses: actions/setup-node@v1        with:          node-version: ${{ matrix.node-version }}      - name: Configuration environment        env:          HEXO_DEPLOY_PRI: ${{secrets.HEXO_DEPLOY_PRI}}        run: |          mkdir -p ~/.ssh/          echo "$HEXO_DEPLOY_PRI" > ~/.ssh/id_rsa          chmod 600 ~/.ssh/id_rsa          ssh-keyscan github.com >> ~/.ssh/known_hosts          git config --global user.name $GIT_USER          git config --global user.email $GIT_EMAIL      - name: Install dependencies        run: |          yarn      - name: Deploy hexo        run: |          yarn release
]]>
    
    https://blog.gadfly.vip/2021/02/github-actions-hexo-ci/
    
    2021-02-23T11:39:07.000Z
    

      介绍
Github Actions 可以很方便实现 CI/CD 工作流，类似 Travis 的用法，来帮我们完成一些工作，比如实现自动化测试、打包、部署等操作。当我们运行Jobs时，它会创建一个容器 (runner]]>
    
    
    2022-03-03T02:24:06.000Z
  
  
    
      猪蹄宝宝
    
    
    
    
    
    
    
      关于 HTTP Header，网上找到的大部分教程，设置 header 都是非常简单粗暴的 new 一个HttpHeaders()，然后直接 add 的形式（甚至连 StackOverflow 上也有很多回答是这么做的），如：
public ResponseEntity<FileSystemResource> export(File file) {    if (file == null) {        return null;    }    HttpHeaders headers = new HttpHeaders();    headers.add("Cache-Control", "no-cache, no-store, must-revalidate");    headers.add("Content-Disposition", "attachment; filename=" + System.currentTimeMillis() + ".xls");    headers.add("Pragma", "no-cache");    headers.add("Expires", "0");    headers.add("Last-Modified", new Date().toString());    headers.add("ETag", String.valueOf(System.currentTimeMillis()));    return ResponseEntity            .ok()            .headers(headers)            .contentLength(file.length())            .contentType(MediaType.parseMediaType("application/octet-stream"))            .body(new FileSystemResource(file));}
但是这样代码里会有很多魔法值，而对于Content-Disposition这样的 header 中，filename 如果直接把中文填进去还会导致乱码，对它进行转码就又要多写几行。其实 Spring 本身对于 header 就提供了很多简单的设置方法，可以有效提高代码的可读性。
将上面的代码用 Spring 中提供了方法改写的话，可以写成：
private ResponseEntity<FileSystemResource> export(File file) {    if (file == null) {        return null;    }    HttpHeaders headers = new HttpHeaders();    headers.setCacheControl(CacheControl.noStore().mustRevalidate());    headers.setContentDisposition(ContentDisposition.attachment().filename(file.getName(), StandardCharsets.UTF_8).build());    headers.setPragma("no-cache");    headers.setExpires(0L);    headers.setLastModified(System.currentTimeMillis());    headers.setETag(String.valueOf(System.currentTimeMillis()));    return ResponseEntity            .ok()            .headers(headers)            .contentLength(file.length())            .contentType(MediaType.APPLICATION_OCTET_STREAM)            .body(new FileSystemResource(file));}
这样编码的转换也不需要自己写了，也可以很简单设置 header，不会有打错字的困扰（雾
]]>
    
    https://blog.gadfly.vip/2021/02/sth-about-http-header/
    
    2021-02-20T19:15:35.000Z
    

      关于 HTTP Header，网上找到的大部分教程，设置 header 都是非常简单粗暴的 new 一个HttpHeaders()，然后直接 add 的形式（甚至连 StackOverflow 上也有很多回答是这么做的），如：

    
    
    2022-03-03T02:24:06.000Z
  
  
    
      猪蹄宝宝
    
    
    
    
    
    
      Spring Boot 中对方法开启事务管理非常轻松，只需要 @Transactional 注解就可以让方法开启事务，然而不了解其机制时使用可能会导致其失效。
@Transactional 本质是一个 AOP 动态代理，不需要开发者干预。下面来一个代码例子：
@Servicepublic class UserService { @Autowired private UserMapper userMapper; @Transactional(propagation=Propagation.REQUIRED,isolation=Isolation.DEFAULT,readOnly=false) public void insert01(User u){  this.userMapper.insert(u);  throw new RuntimeException("测试插入事务"); } public void insert02(User u){  this.insert01(u);  throw new RuntimeException("测试插入事务"); }
在这个例子中，调用 insert01 时，事务的执行不会有任何问题，但是调用 insert02 时，异常被正常抛出，但是数据依然被插入了数据库，说明事务没有被正常执行。
在外部调用 insert01 时，调用的就是被动态代理的 insert01，但是如果在一个类里自调用时，这样是无法调用到代理对象的，所以 insert02 中调用的不是代理对象 insert01，而是原本的方法。当然，原本的对象中是没有切片做事务增强的，自然也不能进行事务回滚。
一般的事务代理机制：
自调用时，通过 this 只能取到原本的方法：
那么如何解决自调用失效的问题呢？
最佳实践自然是不要产生自调用。
如果无法避免的话，那么可以只在 insert02 上注解事务。（如果两个方法都要被外部调用，那就两个都写上）
insert01 开启事务，并且在 insert02 中不使用 this 调用，而是获取代理
public void insert02(User u){    getService().insert01(u);  }  private UserService getService(){    // 采取这种方式的话    // @EnableAspectJAutoProxy(exposeProxy=true,proxyTargetClass=true)    // 必须设置为true    return AopContext.currentProxy() != null ? (UserService)AopContext.currentProxy() : this;  }
从 beanFactory 中获取对象。Controller 中的 UserService 是代理对象，它是从 beanFactory 中得来的，那么 Service 类内调用其他方法时，也先从 beanFacotry 中拿出来就 OK 了。
public void insert02(User u){  getService().insert01(u);}private UserService getService(){  return SpringContextUtil.getBean(this.getClass());}
有关 AOP 和代理的问题可以看 从代理机制到 Spring AOP 和 Spring AOP 就是这么简单啦。这两篇文章讲得很清楚了。
除了代理导致的自调用失效，还有一个问题是方法抛出异常时，事务也没有回滚。这个则是因为 @Transactional 中捕获的异常只有 RuntimeException。
DefaultTransactionAttribute.java 源码中写的是：
@Overridepublic boolean rollbackOn(Throwable ex) {  return (ex instanceof RuntimeException || ex instanceof Error);}
所以需要捕获其他异常时，必须把注解写成
@Transactional( rollbackFor = Exception.class )
更详细的使用要点可以看来自 IBM Developer 的 透彻的掌握 Spring 中@transactional 的使用
]]>
    
    https://blog.gadfly.vip/2020/04/spring-boot-transactional/
    
    2020-04-12T07:08:19.000Z
    

      Spring Boot 中对方法开启事务管理非常轻松，只需要 @Transactional 注解就可以让方法开启事务，然而不了解其机制时使用可能会导致其失效。
]]>
    
    
    2022-03-03T02:24:06.000Z
  
  
    
      猪蹄宝宝
    
    
    
    
    
    
      Spring Boot 开发笔记系列第二弹，这次来聊聊 JWT 和登录鉴权系统的设计。
阮一峰的 JSON Web Token 入门教程 里把 JWT 的概念都讲得很清楚了。既然它被称为 Token，那么自然是作为令牌，用来验证身份的存在。传统的 Session, Cookie 等都承担着类似的功能。JWT 的独特之处在于它可以承载一定的信息，是一种无状态的令牌。验证其是否有效的工作可以不需要经过数据库或者缓存等，如果加密 JWT 的密钥在后端是固定的或者通过其承载的信息可以算出来的，那么验证与下发都可以极大的减少服务器压力。而它本身可以承载的信息中可以加上不敏感的内容，比如用户 id 或者用户名等等，在不经过数据库操作的时候就能判断用户的合法性，完成一定的操作。
当然这样的设计也有局限性，比如我的项目中需要保证用户不会在多处同时登录，但是 JWT 验证 Token 只根据它其中包含的过期时间信息，后端不能在用户使用第二台设备登录时作废第一台设备的登录信息，这可能导致一定的安全隐患。因此我在项目中引入了 Redis 缓存，每次下发 Token 时生成随机密钥，这个密钥与用户信息绑定，与 Token 拥有相同的过期时间并存在 Redis 中。Redis 的原理使得这样的操作不会增加太多的开销，又能让 JWT 依然承担传递信息的任务。
JWT 相关的设计
首先来一个 JWT 的工具类：
@Componentpublic class JWTUtil {    private final RedisUtils nonStaticRedisUtils;    private static RedisUtils redisUtils;    public JWTUtil(RedisUtils nonStaticRedisUtils) {        this.nonStaticRedisUtils = nonStaticRedisUtils;    }    @PostConstruct    public void init() {        redisUtils = nonStaticRedisUtils;    }    // 过期时间7天    private static final long EXPIRE_TIME = 7 * 24 * 60 * 60 * 1000;    /**     * 生成签名,7days后过期     *     * @param openid qq_openid     * @return 加密的token     */    public static String sign(String openid, String access_level) {        Date date = new Date(System.currentTimeMillis() + EXPIRE_TIME);        if (redisUtils.hasKey(openid)) {            redisUtils.del(openid);        }        String secret = UUID.randomUUID().toString();        Algorithm algorithm = Algorithm.HMAC256(secret);        redisUtils.set(openid, secret, EXPIRE_TIME);        logger.info(openid + "&" + secret);        // 附带openid信息        return JWT.create()                .withClaim("openid", openid)                .withClaim("access_level", access_level)                .withExpiresAt(date)                .sign(algorithm);    }    /**     * 校验token是否正确     *     * @param token  密钥     * @return 是否正确     */    public static boolean verify(String token, String openid, String access_level) {        try {            String secret = redisUtils.get(openid);            Algorithm algorithm = Algorithm.HMAC256(secret);            JWTVerifier verifier = JWT.require(algorithm)                    .withClaim("openid", openid)                    .withClaim("access_level", access_level)                    .build();            DecodedJWT jwt = verifier.verify(token);        } catch (JWTVerificationException exception) {            return false;        }        return true;    }    /**     * 获得token中的信息无需secret解密也能获得     *     * @return token中包含的openid     */    public static String getOpenid(String token) {        DecodedJWT jwt = JWT.decode(token);        return jwt.getClaim("openid").asString();    }    public static String getAccessLevel(String token) {        DecodedJWT jwt = JWT.decode(token);        return jwt.getClaim("access_level").asString();    }}
这里我使用的是 com.auth0.java-jwt，换成 io.jsonwebtoken.jjwt 也不会有太大的区别，都是对 JWT 标准的实现，只是接口上不太相同。我在 JWT 的载荷中存放了用户的 open id 和权限级别，
这样在不查询数据库的情况下就可以判断用户是否有权操作部分敏感接口。签名部分的加密方式选择了默认的 SHA-256，换成其他的也可以。至于上面那一串非静态方法注入，
则是因为我在 Redis 的工具类中做成了非静态方法，这个 JWT 工具类又做成了静态方法，而把这个静态方法都换成非静态方法又遇到了一堆问题，于是我就直接把非静态方法注入这个类，再去用静态对象调用这个非静态方法。。。
下面贴一下 Redis 的工具类：
@Componentpublic class RedisUtils {    private final StringRedisTemplate redisTemplate;    public RedisUtils(StringRedisTemplate redisTemplate) {        this.redisTemplate = redisTemplate;    }    public static RedisUtils redisUtils;    /**     * 实现命令：DEL key，删除一个key     *     * @param key     */    public void del(String key) {        redisTemplate.delete(key);    }    /**     * 实现命令：HAS key，返回bool     *     * @param key     */    public boolean hasKey(String key) {        return redisTemplate.hasKey(key);    }    /**     * 实现命令：SET key value EX seconds，设置key-value和超时时间（秒）     *     * @param key     * @param value     * @param timeout     *            （以ms为单位）     */    public void set(String key, String value, long timeout) {        redisTemplate.opsForValue().set(key, value, timeout, TimeUnit.MILLISECONDS);    }    /**     * 实现命令：GET key，返回 key所关联的字符串值。     *     * @param key     * @return value     */    public String get(String key) {        return redisTemplate.opsForValue().get(key);    }}
本身写的时候还有很多其他方法，这里就只展示用到的了。总的来说比较简单，Redis 也是属于 non-SQL 数据库，只有键值对，操作很方便。需要注意的是 redisTemplate 设置过期时间时，默认是以秒为单位，有需要的话就在后面加上 TimeUnit。
鉴权系统的设计
显然鉴权处理不应该在每个 Controller 里分别判断，而应该作为一个全局方法，在请求到达 Controller 之前就处理完成。Spring Boot 自带 HandlerInterceptor 接口，因此我们只需要将其实现。
public class LoginInterceptor implements HandlerInterceptor {    @Override    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {        String token = request.getHeader("X-token");        if ("".equals(token) || token == null || !JWTUtil.verify(token, JWTUtil.getOpenid(token), JWTUtil.getAccessLevel(token)))  {            returnJson(response, GlobalJSONResult.errorTokenMsg("登录信息无效，请重新登录！"));            return false;        }        return true;    }    private void returnJson(HttpServletResponse response, Object json) throws Exception{        ObjectMapper mapper = new ObjectMapper();        String strJson = mapper.writeValueAsString(json);        PrintWriter writer = null;        response.setCharacterEncoding("UTF-8");        response.setContentType("application/json; charset=utf-8");        try {            writer = response.getWriter();            writer.write(strJson);        } catch (IOException e) {        } finally {            if (writer != null)                writer.close();        }    }    @Override    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {    }    @Override    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {    }}
由于我按照 Restful API 的思路来构建的后端，因此登录处理失败时的返回也应该为 JSON。然而正常情况下在这里只能返回文字流。于是我在这里做了一个 returnJson 的方法，将我需要返回的 JSON 转为 String，
再在返回的 Header 上加上 ContentType，使得客户端浏览器将其转为 JSON。鉴权则很简单，客户端发起请求时把 Token 放在请求头里，这里从 HttpServletRequest 中获得请求头中的字段进行认证即可。
现在完成了登录的鉴权处理，但是后端接收的请求并不会自己跑过来，需要配置一个全局拦截器。Spring Boot 有着 WebMvcConfigurer 的接口，将其实现即可完成我们的想法。
@Configuration@EnableWebMvcpublic class CustomWebConfigurer implements WebMvcConfigurer {    @Override    public void addInterceptors(InterceptorRegistry registry) {        registry.addInterceptor(new LoginInterceptor()).addPathPatterns("/**").excludePathPatterns("/login/**");    }}
把它注册为一个配置类，在其中注册刚才的登录拦截器，添加 /** 路径，把所有请求都转到拦截器中，当然，登录之类的接口不能走拦截器，因此还要添加例外。
这样，一个基本的未登录用户的拦截功能就做完了。由于我的项目中权限只有两级，敏感权限也没几个，所以只是另外写了个工具类判断是否有高级权限，并没有做进拦截器里。
]]>
    
    https://blog.gadfly.vip/2020/04/spring-boot-jwt-login/
    
    2020-04-09T04:49:04.000Z
    

      Spring Boot 开发笔记系列第二弹，这次来聊聊 JWT 和登录鉴权系统的设计。
]]>
    
    
    2022-03-03T02:24:06.000Z
  
  
    
      猪蹄宝宝
    
    
    
    
    
    
      写这个主要是为了整理开发思路与记录，顺便表示 QQ 的接口真的写的很奇怪。。。
整个项目是一个课程作业，我选择了后端使用 Spring Boot，前端使用 Vue.js 作为项目的技术栈。首先说一下 Auth 2.0。这个在 QQ 的文档里倒也写的很清楚
OAuth2.0 简介 — QQ 互联 WIKI。它采用第三方应用在客户端根据自己的 AppId 和 Redirect URI（回调地址）来请求 QQ 的授权页面，
用户授权后将 Authentication Code 作为 params 跳转到回调地址，回调地址将这个 Code 传给后端，由后端根据 AppId 和 Secret 再向 QQ 申请用户登录的 Access Token，
根据这个 Token 后端才能去获取用户授权的相关信息。第三方应用中每个用户都有一个唯一的 OpenId 用于对应唯一的用户，但是不同第三方应用对相同的用户拿到的 OpenId 则是不同的。
开发中参考了 使用 java 后端的 springboot 环境下实现网站接入 QQ 第三方登录，因此避免了很多坑。
获取 Access Token
QQ 官方文档在这里 传送门。这份文档对于没有开发经验的人来说坑实在是太多，不过相比其他平台还是比较友好的。
参考文章中是使用了读取配置的方式，我则是写了一个返回 secret 等内容的工具类来获取 QQ 相关配置。
基本代码如下：
@PostMapping(value = "/login/callback", consumes= { MediaType.APPLICATION_JSON_VALUE})public GlobalJSONResult handleCallbackCode(@RequestBody LoginCode reqParams) throws JsonProcessingException {    String authorization_code = reqParams.getCode();    if (StringUtils.isBlank(authorization_code)) {        return GlobalJSONResult.errorMsg("code无效，请重新授权！");    }    //client端的状态值。用于第三方应用防止CSRF攻击。    String state = reqParams.getState();    if (!state.equals("login")) {        return GlobalJSONResult.errorMsg("state无效，请确认是否为本人操作！");    }    String access_token = getAccessToken(authorization_code);    if (StringUtils.isBlank(access_token)) {        return GlobalJSONResult.errorMsg("access_token获取失败，请重新授权！");    }    // 下略}private String getAccessToken(String authorization_code) {    String urlForAccessToken = getUrlForAccessToken(authorization_code);    String firstCallbackInfo = restTemplate.getForObject(urlForAccessToken, String.class);    String[] params = firstCallbackInfo.split("&");    String access_token = null;    for (String param : params) {        String[] keyvalue = param.split("=");        if (keyvalue[0].equals("access_token")) {            access_token = keyvalue[1];            break;        }    }    return access_token;}private static String getUrlForAccessToken(String authorization_code) {    String grant_type = "authorization_code";    String client_id = QQLoginUtil.getQQLoginClientId();    String client_secret = QQLoginUtil.getQQLoginClientSecret();    String redirect_uri = QQLoginUtil.getQQLoginRedirectUri();    String url = String.format("https://graph.qq.com/oauth2.0/token" +                    "?grant_type=%s&client_id=%s&client_secret=%s&code=%s&redirect_uri=%s",            grant_type, client_id, client_secret, authorization_code, redirect_uri);    return url;}
其中 GlobalJSONResult 是我编写的全局 JSON 返回类，有空会在其他文章中说明。QQ 在文档中要求生成 CSRF Token 一类的东西作为 state 参数上传，以避免 CSRF 攻击。
不过由于我的登录系统是只有授权 QQ 登录之后才会生成账户，因此基本没有这方面的风险，就把 state 写死了。接收的 reqParams 则是直接前端将路由中的参数返回，Vue.js 中使用 this.$route.query 就可以将参数以 JSON 形式获取。
解析接口返回的数据
之后就是跳转这个 URL 去获取 access_token，这里就是第一个坑了，按照官方文档，搞得好像这次我们跳转到这个获取 access_token 的 URL 后，腾讯那边会跳转我们设定的回调地址并带上我们需要的参数，就像之前获取 authorization code 一样。
但完全不是这样的！！！你按照要求向这个获取 access_token 的 URL 发送请求后，对方并不会再跳转，而是直接返回你一个数据，希望你获得这个数据然后处理。这有点像前端 JS 的异步请求后后回调函数处理 data。
所以这里使用了 restTemplate 来发起请求。虽然很多教程里都会说使用 @Autowired 来注入实例，但是你会发现 IDEA 中会提示这种写法不被推荐，使用构造函数注入是更好的选择。
//注入实例private final UserInfoRepository userInfoRepository;private final RestTemplate restTemplate;public LoginController(UserInfoRepository userInfoRepository, RestTemplate restTemplate) {    this.userInfoRepository = userInfoRepository;    this.restTemplate = restTemplate;}
restTemplate 可以接收所有的返回参数，然而 QQ 这里采用了一个非常神奇的接口返回形式：access_token=FE04**CCE2&expires_in=7776000&refresh_token=88E4**BE14。
请不要认为这是在回调地址后面加上的参数，这个就是 token 接口返回的一个字符串。这接口真是绝了，写的人不觉得别扭吗？？？拿到这个字符串之后只能根据 & 和 = 拆分来获取数据了。
我这边使用前端将参数上传而不是直接把回调地址设为后端地址的原因主要是考虑到拿到 Code 之后，后端处理需要一定的时间，如果不能在前端展示动画之类的内容，容易让用户不明所以，因此前端拿到参数再提交给后端，同时前端展示等待动画是更好的选择。
获取 Open Id
拿到这个 token 之后就可以去获取用户的 openid 了。
// 上略  String url = String.format("https://graph.qq.com/oauth2.0/me?access_token=%s", access_token);  //第二次模拟客户端发出请求后得到的是带openid的返回数据,格式如下  //callback( {"client_id":"YOUR_APPID","openid":"YOUR_OPENID"} );  String secondCallbackInfo = restTemplate.getForObject(url, String.class);  //正则表达式处理  String regex = "\\{.*\\}";  Pattern pattern = Pattern.compile(regex);  Matcher matcher = pattern.matcher(secondCallbackInfo);  if (!matcher.find()) {      logger.error("异常的回调值: " + secondCallbackInfo);      return GlobalJSONResult.errorMsg("异常的回调值: " + secondCallbackInfo);  }  //调用jackson  ObjectMapper objectMapper = new ObjectMapper();  HashMap<String, String> hashMap = objectMapper.readValue(matcher.group(0), HashMap.class);  String openid = hashMap.get("openid");// 下略
这里 QQ 又返回了什么呢，返回了一个 JSONP 。。。形如：callback( {"client_id":"YOUR_APPID","openid":"YOUR_OPENID"} )不是，腾讯你们这玩意是分了几个人写啊，怎么每个接口返回格式都这么奇怪啊喂！！！
处理这个则是使用正则，先把 callback 里的对象取出来，用 Spring Boot 自带的 Jackson 解析为 Map。
这里有两点值得一说
其一，为什么 String regex = "\\{.*\\}";，正则表达式中有\\这东西呢？这时因为正则表达式中{和}都是有意义的，非字符的，我们希望正则表达式把它们理解成字符，就需要对它们进行转义，所以这里需要一个转义符\，但\自身在 java 字符串中并不是字符，所以我们还要转义\自身，所以会出现\\。
其二，matcher 如果不经历 matcher.find()，则就算有合适的匹配内容，也仍然不会有任何匹配能得到。所以 matcher.find()是必须的，同时 matcher.find()一次后再来一次，那完了，返回 false。
获取用户信息与登录 Token 下发
教程到这里结束了，而我还需要完成获取用户信息等操作才能完成整个登录接口。
  // 上略    // 获取QQ用户信息    String user_info_url = getUserInfoUrl(access_token, openid);    String user_result = restTemplate.getForObject(user_info_url, String.class);    Map<String, Object> user_info_qq = objectMapper.readValue(user_result, Map.class);    if ((int) user_info_qq.get("ret") != 0) {        return GlobalJSONResult.errorMsg("用户信息获取失败，请重试");    }    String token = getToken(openid, user_info_qq);    user_info_qq.put("token", token);    return GlobalJSONResult.ok(user_info_qq);  // 下略private static String getUserInfoUrl(String access_token, String openid) {    String client_id = QQLoginUtil.getQQLoginClientId();    String url = String.format("https://graph.qq.com/user/get_user_info" +            "?access_token=%s&oauth_consumer_key=%s&openid=%s", access_token, client_id, openid);    return url;}private String getToken(String openid, Map<String, Object> user_info_qq) {    String uid = UUID.nameUUIDFromBytes(openid.getBytes()).toString();    String access_level;    if (userInfoRepository.existsById(uid)) {        UserInfo userInfo = userInfoRepository.findById(uid).get();        userInfo.setNickname(user_info_qq.get("nickname").toString());        userInfo.setAvatarUrl(user_info_qq.get("figureurl_2").toString());        userInfoRepository.save(userInfo);        access_level = userInfo.getAccessLevel();    } else {        UserInfo userInfo = new UserInfo(uid, openid, user_info_qq.get("nickname").toString(),                user_info_qq.get("figureurl_2").toString(), System.currentTimeMillis());        userInfoRepository.save(userInfo);        access_level = userInfo.getAccessLevel();    }    return JWTUtil.sign(openid, access_level);}
获取用户信息的接口正常多了，返回的是 JSON。主要可以聊聊的是 JWT，不过这个也放到下次再讲吧。
]]>
    
    https://blog.gadfly.vip/2020/04/springboot-auth2-with-QQ/
    
    2020-04-08T09:29:38.000Z
    

      写这个主要是为了整理开发思路与记录，顺便表示 QQ 的接口真的写的很奇怪。。。
]]>
    
    
    2024-07-02T16:57:50.000Z
  
  
    
      猪蹄宝宝
    
    
    
    
    
    
      本文中提到的卡片，若非特别注明，均为非接触式卡片，不再另外声明。
概述
首先分析 NFC 和我们身边的 IC 卡之前，我们需要先介绍一些基本的概念：
近场通信技术（Near-field communication，NFC）由非接触式射频识别（RFID）演变而来，由飞利浦半导体（现恩智浦半导体）、诺基亚和索尼共同于 2004 年研制开发，其基础是 RFID 及互连技术。近场通信是一种短距高频的无线电技术，在 13.56MHz 频率运行于 20 厘米距离内。其传输速度有 106 Kbit/秒、212 Kbit/秒或者 424 Kbit/秒三种。当前近场通信已通过成为 ISO/IEC IS 18092 国际标准、EMCA-340 标准与 ETSI TS 102 190 标准。NFC 采用主动和被动两种读取模式。
每一个完整的 NFC 设备可以用三种模式工作：
卡模拟模式（Card emulation mode）：这个模式其实就是相当于一张采用 RFID 技术的 IC 卡。可以替代现在大量的 IC 卡（包括信用卡）场合商场刷卡、IPASS、门禁管制、车票、门票等等。此种方式下，有一个极大的优点，那就是卡片通过非接触读卡器的 RF 域来供电，即便是寄主设备（如手机）没电也可以工作。NFC 设备若要进行卡片模拟（Card Emulation）相关应用，则必须内置安全组件（Security Element, SE）之 NFC 芯片或通过软件实现主机卡模拟(Host Card Emulation，HCE)。
读卡器模式（Reader/Writer mode）：作为非接触读卡器使用，比如从海报或者展览信息电子标签上读取相关信息。
点对点模式（P2P mode）：这个模式和红外线差不多，可用于数据交换，只是传输距离较短，传输创建速度较快，传输速度也快些，功耗低（蓝牙也类似）。将两个具备 NFC 功能的设备链接，能实现数据点对点传输，如下载音乐、交换图片或者同步设备地址薄。因此通过 NFC，多个设备如数字相机、PDA、计算机和手机之间都可以交换资料或者服务。
摘自：zh.wikipedia.org/wiki/近場通訊
这么大一段话概括一下的话，大致意思是：NFC 是一种使得数据可以在几厘米的范围内进行传输的技术，我们身边常见的大陆二代身份证、电子护照、公交卡等都属于这种技术的具体应用。
NFC 在我们身边的具体应用场景有很多，有时我们会将其错误地认为是其他技术的实现。比如大家常说银行卡、公交卡等“消磁了”，但事实上现在这些卡片已经不再是使用磁条等传统的磁性物质记录数据，而是支持非接触式射频识别（RFID）的电子芯片。他们出现失效的情况一般也不是因为某些磁性物质损坏了，而是其中的线圈或者芯片遭受了物理损伤，比如卡片被弯折等，或者是其他使用类似技术的读写卡器等破坏了其中存储的数据导致无法正常读取。
传统的 RFID 技术我这里就不多做解释，将其理解为某种特殊的无线电通信技术即可。NFC 只是限于 13.56MHz 的频段，而 RFID 的频段有低频（125KHz 到 135KHz），高频（13.56MHz）和超高频（860MHz 到 960MHz）之间。NFC 工作有效距离小于 10cm，所以具有很高的安全性，RFID 工作有效距离从几米到几十米都有。RFID 标准较多，统一较为复杂（估计是没可能统一的了），只能在特殊行业有特殊需求下，采用相应的技术标准。
传统 RFID 最常见的应用是图书馆的书籍，不是特别寒酸的图书馆的藏书上都会贴有特殊的标签，这种标签可以在一个比较大的范围内被读取，这样就可以实现简便的自助化的图书借阅管理，读者将书放在特定的区域就可以被读取到借阅了哪些书，而不像以前的图书馆需要管理员将扉页上的藏书条形码进行人工扫描，大大提升了效率。许多物流运输也通过类似的方法来管理运输箱，通过机器就可以远程分拣，也方便管理。NFC 就是在这样的技术上发展而来，更适合一般日常生活的使用。
生活中的各种可以刷的卡都是 NFC 么
答案显然是否定的。要看一张卡是不是支持 NFC 技术的卡有以下几种方法：
用一张支持 NFC 的安卓手机刷一下
虽然手机厂商在宣传 NFC 时有很多会说什么“全功能 NFC”之类的，但是那只是针对之前 wikipedia 上提到的“卡模拟模式”说的，在读取 NFC 卡片这件事情上，除了 iPhone 以外，大家都没有特别大的区别。这边推荐一个名为“MIFARE 经典工具”的 app，在 GitHub 和 Google Play 上都可以下载：
Play： de.syss.MifareClassicTool
GitHub： ikarus23/MifareClassicTool
F-Droid：de.syss.MifareClassicTool
可用的国内镜像我之后再补充
使用这个 app 可以读取到 NFC 卡片中的部分信息，不过这个 app 并非支持所有的 NFC 卡片，只支持 MIFARE 系列及相似技术的模拟卡（这个问题稍后再说）。首先这个 app 能识别的肯定是 NFC 卡片，如果 app 没有反应，但是手机中的其他应用，比如 QQ、微信、金融类 app 等对其有反应，那么这张卡片也是 NFC 卡片的一种。
如果卡片本身不是特别厚，并且是一般的长方形卡片，则可以用手电筒等能在较小的范围内聚集大量光源的设备照亮这张卡。如果发现里面的小芯片在卡片的某一边，外面有一圈贴近卡片边缘的线圈，形如下图，那么这一般也是 NFC 技术的卡片。
如果卡片上没有 10+8 位的数字，也没有 8-10 位的数字，并且没有标注 HID 之类的字样，那么这张卡一般也是一种 NFC 卡片。
那么如果我们平时使用的非接触式卡片不是 NFC 的卡片的话，那么又是什么卡片呢？最常见的就是 ID 卡了。
ID 卡全称为身份识别卡（Identification Card），是一种不可写入的感应卡，含固定的编号。ID 卡与磁卡一样，都仅仅使用了“卡的号码”而已，卡内除了卡号外，无任何加密存储功能，其“卡号”是公开、裸露的。ISO 标准 ID 卡的规格为：85.5x54x0.80±0.04mm（高/宽/厚），市场上也存在一些厚、薄卡或异型卡。
最常见的异型卡就是下图右边这种，统称为钥匙扣：


而 NFC 卡片则一般统称为 IC 卡：
智能卡（英语：Smart card 或 IC Card），又称智慧卡、聪明卡、集成电路卡及 IC 卡。是指粘贴或嵌有集成电路芯片的一种便携式卡片塑胶。卡片包含了微处理器、I/O 接口及存储器，提供了数据的运算、访问控制及存储功能，卡片的大小、接点定义当前是由 ISO 规范统一，主要规范在 ISO7810 中。常见的有电话 IC 卡、身份 IC 卡，以及一些交通票证和存储卡。
摘自：zh.wikipedia.org/wiki/智慧卡
不过 IC 卡不是只有非接触式的，手机使用的 sim 卡、银行卡上那个裸露的金属芯片也是 IC 卡，但是是接触式的。本文中则只讨论非接触式 IC 卡。
非接触式 IC 卡
既然技术已经存在，那么就需要一定的标准来将其统一、规范化。
非接触式 IC 卡一般有三种国际规范：ISO/IEC 14443 Type A、ISO/IEC 14443 Type B、ISO/IEC 15693。三个规范都规定了工作在 13.56Mhz 下智能标签和读写器的空气接口及数据通信规范，但是类型不同。我们生活中更常见的是 ISO/IEC 14443 Type A 和 ISO/IEC 14443 Type B 规范的设备，15693 则与公众关系不太密切，因此本文作为科普暂不讨论。
14443-A
14443-A 最为常见，其中最为知名的是前文提到的 MIFARE 系列，国内的复旦卡等早期均是模仿 MIFARE 系列开发的，MIFARE 的解决方案最为流行，也是大家都兼容的方案。
MIFARE 是恩智浦半导体公司（NXP Semiconductors）拥有的一系列非接触式智能卡和近傍型卡技术的注册商标。
MIFARE 包括一系列依循 ISO/IEC 14443-A 规格，利用无线射频识别（频率为 13.56MHz）的多种非接触式智能卡专有解决方案。这项技术是最早是 1994 年由米克朗集团（Mikron Group）开发，在 1998 年转售给飞利浦电子公司（2006 年更名为恩智浦半导体公司）。近年来 MIFARE 已经普遍在日常生活当中使用，如大众运输系统付费、商店小额消费、门禁安全系统、借书证等。
摘自：zh.wikipedia.org/wiki/MIFARE

上图为 MIFARE 卡片的架构，
UID：唯一标识符（Unique Identifier）， RID：安全随机标识符（Random Security Identifier）
卡片架构：卡片上面有一组唯一标识符、通信接口（包含天线及调制解调器）以及一个 ASIC 里面包含了通信逻辑电路、加密控制逻辑电路与数据存储区（ EEPROM），可以作为电子钱包或其它门禁、差勤考核、借书证等用途。
数据存储区块：可分 16 个区段（sector 0-15）， 每个区段由 4 个区块（block 0-3）组成，而每个区块都是独立的单元，每 1 个区块的容量有 16Byte。而每个区段的最后一个区块则用来存放 2 组密钥（KeyA、KeyB），以及密钥对应各自的访问权限（Access bit）。
每张卡片第一区段的第一区块（sector 0，block 0）只能读取无法写入数据，称为制造商代码（Manufacturer Code）, 第 1－4byte 为 UID。第 5byte 为比特计数检查码（bit count check)，其余的存放卡片制造商的数据。所以每张卡片实际能使用的只有 15 个区段，即便如此也可用于 15 个不同的应用。
读写卡机架构：读卡器包含 CPU、电源模块、读（写）模块、记忆模块、控制模块等，有些还有显示模块、定时模块等其他模块。
工作流程：当卡片接近读写卡机进入通信天线的感应范围（约 2.5 公分至 10 公分）之后，读写卡机便会提供微量电力（约达 2 伏特之后）驱动卡片上的电路。此时卡、机各以曼彻斯特编码（MANCHESTER Encoding）及米勒编码（Miller encoding）加密通信内容后再以振幅偏移调制（Amplitude Shift Keying，ASK）透过调制解调器收发无线电波信号互相验证是否为正确卡片，如果验证结果正确读写卡机就会确认要访问的数据存储区块，并对该区块进行密码校验，在卡、 机三重认证无误之后，就可以透过加密进行实际工作通信。这个过程大约只需要 0.1 秒就可以完成。如果同时有多张卡片进入读写卡机感应范围，读写卡机会将卡 片编号并选定 1 张卡片进行验证直到完成所有卡片验证（称为防碰撞机制）或是离开感应范围为止。
卡 机三重认证步骤：1.卡片产生一个随机数 RB 发送到读卡器。2.读卡器会将接收到的随机数 RB 依公式加密编码后的 TokenAB 数值并发送回卡片。3.卡片接 收到 TokenAB 后，会把加密部分解译出来然后比对参数 B、随机数 RB。同时并依据收到的随机数 RA，引用公式编码后产生 TokenBA 发送回读卡器。4. 读卡器接收到 TokenBA 后，又把加密过的部分解译，比较随机数 RB，RA 与 TokenBA 中解出之 RB、RA 是否相符，正确的就可以完成指令（扣款、打 开门锁或是登记其他事项）。
摘自：zh.wikipedia.org/wiki/MIFARE
MIFARE 系列最常用的就是各种 1K 卡，也就是存储容量为 1Kbytes 的卡。简单来说，1K 卡将整张卡片的数据区域分割为 16 个扇区，4 个区块，每个区块长度为 32 位，每一位都是 0-F 的 16 进制数，每 2 位为 1Byte，所以每一块为 16Bytes，总容量16 * 4 * 16 = 1024Bytes = 1K。每个扇区各自独立，正常情况下，0 扇区 0 块：第 1－4byte 为 UID，第 5byte 为比特计数检查码（bit count check)，其余的存放卡片制造商的数据，包括卡片类型等。整个 0 扇区一般无法被更改。剩下 15 个扇区中每个扇区只有三个块可用，每个扇区的最后一个块的结构为：12 位 KeyA+8 位控制字+12 位 KeyB。控制字负责控制整个扇区的读写状态，KeyA 和 B 用于开发者自行根据需要来控制使用不同 Key 的权限。一定程度上算是安全的，但是每个密钥均为固定，所以通过一定的暴力破解和逆向手段，也有可能获得卡片的全部密钥，安全性不足。（下图为数据区块示意图）（没看懂也没事，下文会详细分析的）
14443-B
14443-B 则用于安全性更高的产品，如二代身份证、电子护照等。事实上，针对 14443-B 的破解手段也非常罕见，因此我也难以展开细讲。
MIFARE 卡片的破解
刚介绍了一些原理什么的，我们就开始对其进行破解，是不是哪里不太对？其实这边介绍破解的技术和思路可以更容易地理解 MIFARE 卡片的原理。之前讲的都是理论概念，这里开始实际操作。
首先，针对 MIFARE 卡片的研究，我们可以使用由 Jonathan Westhues 在做硕士论文中研究 Mifare Classic 时设计、开发的一款开源硬件Proxmark3，可以用于 RFID 中嗅探、读取以及克隆等相关操作。（其他的还有 PN532、ACR122U 等，这里不展开细说）这个名为 Proxmark3 的设备在某宝即可获得，售价几百元不等，一般学习的话选择最便宜的即可。一般卖家会给你提供这样的一个软件以便操作。

具体的操作参考卖家给出的教程即可，这里主要对技术问题进行分析。
默认密码和 PRNG
教程中一般会提到：使用默认密码扫描无法被破解的卡片可以用 PRNG 破解功能来进行下一步操作。那么默认密码是什么？
由于 MIFARE 的机制，导致卡片中每一个扇区都必须存在密码才能使用，因此需要存在约定俗称的几个普通密码，使用这些常见的密码可以方便在未激活时修改数据，必要时将其更改为更可靠的密码即可。默认密码中一般有：
FFFFFFFFFFFF
A0A1A2A3A4A5
000000000000
(...)
其他还有很多，不同的地方定义不同，但是共同点都是非常简单，很容易猜测。如果卡片中存在这样的密码可以被扫描到，那么这张卡的安全性非常薄弱，克隆甚至修改都不成问题。
如果不存在默认密码，那么难道只能穷尽所有的可能，逐一尝试密码吗？事实上 MIFARE 卡片本身的机制也存在一定的问题，这个问题导致了 darkside 攻击的存在：PRNG 破解。
卡片密钥破解的关键是让卡片发送加密数据，再通过算法解出密钥，所以需要欺骗卡片发出加密数据。我们考虑首先要把卡片中的密钥相关的数据骗出来，也就是让卡片发送出来一段加密的数据，我们通过这段加密的数据才能把密钥破解出来，如果卡片不发送加密的数据给我们，那就没法破解了。而第一次验证的时候卡片会发送明文的随机数给读卡器，然后验证读卡器发送加密数据给卡片，卡片验证失败就停止，不会发送任何数据了，不过，经过研究人员大量的测试后发现卡片算法中存在漏洞，当读卡器发出的密文中某 8bit 数据正确时，读卡器就会回复一个 4bit 的密文，而这个密文就包含了密钥的信息，再通过解密算法即可解出密钥。Linux 下的 mfcuk（MiFare Classic Universal toolKit）就是这样一个基于 darkside 原理攻击全加密卡的程序。GitHub：nfc-tools/mfcuk。因此，通过这个原理，就可以使用读卡器进行 darkside 攻击，也就是一般所说的 PRNG 破解。
关于 PRNG 的详细内容可以看以下资料：
伪随机数生成器（pseudo random number generator，PRNG），又被称为确定性随机比特生成器（deterministic random bit generator，DRBG），是一个生成数字序列的算法，其特性近似于随机数序列的特性。PRNG 生成的序列并不是真随机，因此它完全由一个初始值决定，这个初始值被称为 PRNG 的随机种子（seed，但这个种子可能包含真随机数）。尽管接近于真随机的序列可以通过硬件随机数生成器生成，但伪随机数生成器因为其生成速度和可再现的优势，在实践中也很重要。
PRNG 是模拟（例如，蒙特卡洛方法）、电子游戏（例如过程生成）以及密码学等应用的核心。加密应用程序要求不能从以前的输出中预测输出，而且更复杂的、不具有简单 PRNGs 线性特性的算法是必要的。
良好的统计特性，是 PRNG 的核心。通常，需要严格的数学分析来证明 PRNG 生成的序列足够接近真随机以满足预期用途。John von Neumann（约翰·冯·诺伊曼）警告不要把 PRNG 错误地解释为真随机数生成器。
PRNG 通过设定随机种子可以从任意初始值开始生成。同样的初始值总是生成同样的序列。PRNG 的周期定义为：所有初始值的最大长度的无重复前缀序列。周期受状态数的限制，通常用比特位数表示。然而，每增加一个比特位，周期长度就可能增加一倍，所以构建周期足够长的 PRNG 对于许多实际应用程序来说是很容易的。
如果 PRNG 的内部状态包含 n 位，那么它的周期不会超过 2n，甚至可能非常短。对于大多数 PRNG，周期长度的计算并不需要遍历整个周期。线性反馈移位寄存器（LFSR）的周期通常正好是 2n−1。线性同余方法的周期可以通过因式分解进行计算。 尽管 PRNG 在达到周期之后会出现重复的结果，但重复序列的出现并不意味着到达了一个周期，因为它的内部状态可能比输出要大很多。对于输出为 1 位的 PRNGs，这一点尤其明显。
摘自：zh.wikipedia.org/wiki/伪随机数生成器
nested authentication 攻击（大家常说的验证漏洞攻击）
首先我们需要了解卡片本身的验证逻辑：
第一次验证时，读卡器首先验证 0 扇区的密码，卡片给读卡器发送一个随机数 n1（明文），然后读卡器通过跟密码相关的加密算法加密 n1，同时自己产生一个密文随机数 n2，发送给卡片。卡片用自己的密码解密之后，如果解密出来的就是自己之前发送的 n1，则认为正确，然后通过自己的密码相关的算法加密读卡器的随机数 n2 成为密文 n3，发送给读卡器。读卡器解密之后，如果跟自己之前发送的随机数 n2 相同，则认为验证通过，之后所有的数据都通过此算法加密传输。

首先记住这里面只有第一次的 n1 是明文，之后都是密文，而且 n1 是卡片发送的，也就是验证过程中，卡片是主动先发随机数的。我们破解的时候，读卡器中肯定没有密码（如果有就不用破解了），那么卡片发送一个 n1 给读卡器之后，读卡器用错误的密码加密之后发送给卡片，卡片肯定解密错误，然后验证中断，这个过程中，我们只看到卡片发送的明文随机数，卡片根本没有把自己保存的密码相关的信息发送出来，那怎么破解呢？
所以，要已知一个扇区的密码，第一次验证的时候，使用这个扇区验证成功之后，后面所有的数据交互都是密文，读其他扇区数据的时候，也需要验证，也是卡片首先发送随机数 n1，但是这里的 n1 是加密的数据。既然每个扇区的密码是独立的，那么现在的加密实际上就是通过卡片被读取的，相对于第一个读取的扇区的“其他扇区”的密码相关的算法加密的 n1，这个数据中就包含了这个扇区的密码信息，所以我们才能够通过算法漏洞继续分析出扇区的密码是什么。
这也是为什么 nested authentication 攻击必须要知道某一个扇区的密码，然后才能破解其他扇区的密码。
嗅探
以上两个破解方式组合就可以解决大部分的 M1 卡片了，但是可能出现例外，所以我们还有一种方法是嗅探攻击。由于卡片和读卡器之间的通信是在几厘米之内的无线通信，所以使用 Proxmark3 也可以对其进行监控分析。

如上图，刷一次卡后，拿开等待几秒，电脑会返回嗅探到的数据。注意寻找 60 或者 61 开头的数据，60 含义是使用 A 密码访问，61 是使用 B 密码。开头是 RDR 的是读卡机发出的指令，TAG 则是卡片发出的指令。红圈中表示读卡机访问了第 21 个块。21 是十六进制，转换成十进制是 33 块第一个方框“b2a6de1d”是卡片 UID，第二个方框“f80eee3c”是 tag challenge(卡片挑战数)，第三个方框“4ec88403”是 reader challenge(读卡器挑战数)，第四个方框“d2dd5180”是 reader respones(读卡器响应数)，第五个方框“2bb17b5e”是 tag respones(卡片回应数)，依次填入“crapto1gui.exe”这个软件中。

点击 crak key 即可计算出密匙，结论是：读卡机使用 KeyA 访问了第 33 块，使用的密码是 FFFFFFFFFFFF。
由于 M1 卡在读卡机和卡片交互数据和密码时，使用了 crypto1 算法。即便同一张卡，同样的密码，嗅探得到交互数据也是随机的，但是他存在破解算法 crapto1。只要获得前面提到的四组随机数组，以及 UID，就可以反解出密匙。通过 crapto1 之类的计算工具就可以计算出需要的数据。
白卡
通过以上的破解分析，我们了解了 M1 卡的运行原理和安全漏洞。根据这些安全漏洞，万能的华强北制作出了许多仿制 M1 的白卡，又被国外称之为 Chinese Magic Card。同时也存在后门指令，被称为 chinese magic backdoor command。
UID 卡
所有区块可被重复读写
卡片 UID 可改且使用后门指令更改 UID
UID 可被重复修改
响应后门指令(意味着可被使用后门指令检测是否为克隆卡的机器发现)
CUID 卡
所有区块可被重复读写
卡片 UID 可改且使用普通写指令更改 UID
不响应后门指令(意味着不容易被反克隆系统发现)
FUID 卡
0 扇区可写且仅可写入一次
写入后 0 扇区不可更改
不响应后门指令
这些卡某宝售价大约 0.2-1 元一张，非常便宜，异形卡则稍微贵一点。UID 卡只要通过读卡器验证是否存在后门指令即可识别，因此反克隆技术非常成熟（然而我们学校并没有 ORZ）。
CPU 卡
那么手机中的 NFC 模块有公交卡、银行卡闪付，甚至还有模拟门禁卡的功能，这是使用的以上几种白卡的技术完成的吗？事实上并不是。手机中的 NFC 模块目前多为全功能的 NFC 模组，可以实现 NFC 技术的大部分读写功能，也可以自行模拟为 CPU 卡。CPU 卡是 MIFARE 之后发展出的全新卡种，卡内的集成电路中带有微处理器 CPU、存储单元（包括随机存储器 RAM、程序存储器 ROM（FLASH）、用户数据存储器 EEPROM）以及芯片操作系统 COS。装有 COS 的 CPU 卡相当于一台微型计算机，不仅具有数据存储功能，同时具有命令处理和数据安全保护等功能。一般内部运行一个 Java 虚拟机，可以写入简单的程序，接受与 MIFARE 不同的指令，安全性取决于本身程序的安全程度，更难以被破解。目前最常用的就是 JCOP 系列。
Java Card OpenPlatform (JCOP) is a smart card operating system for the Java Card platform developed by IBM Zürich Research Laboratory. On 31 January 2006 the development and support responsibilities transferred to the IBM Smart Card Technology team in Böblingen, Germany. Since July 2007 support and development activities for the JCOP operating system on NXP / Philips silicon are serviced by NXP Semiconductors.
The title originates from the standards it complies with:
Java Card specifications
GlobalPlatform (formerly known as Visa Inc OpenPlatform) specifications
A Java Card JCOP has a Java Card Virtual Machine (JCVM) which allows it to run applications written in Java programming language.
摘自：zh.wikipedia.org/wiki/Java_Card_OpenPlatform
手机 NFC 则一般基于这样的技术开发，CPU 卡本身与 MIFARE 不兼容，为了保证推广，许多厂商在制作时会利用 JCOP 本身的特性去模拟 M1 卡，国内手机中的模拟门禁卡就是这样的技术产生的。由于这种技术属于灰色地带，海外手机出厂一般不自带，国内前两年可以模拟的范围还比较广，现在则大大限制，只能模拟一般密钥为 FFFFFFFFFFFF 的普通卡。
手机 NFC 中的闪付、公交卡等也不是直接模拟实体卡，而是由发卡方下发密钥，为手机本身发放新卡，因此卡号等也与实体卡不同，公交卡也需要另交押金。由于这样的网络下发的卡属于异形卡，传统上公交卡公司并不愿意提供注销服务（谁愿意把收到手里的押金退掉呢？滑稽( ﹁ ﹁ ) ~→）。不过强如 Apple 倒是有资本和公交卡公司谈，于是 iPhone 用户就可以享受到可退卡的服务了。你问为啥华为小米这样的公司谈不下来？这可就是未解之谜了呢┑(￣Д ￣)┍，技术上是不存在障碍的，那么障碍在哪里呢？
收尾
好了，本篇关于 NFC 技术的科普就告一段落了。不得不说国内这方面的资料少的可怜，许多知识都是我从论坛或者大佬那里学来的，在这里也非常感谢 UCLA 的 BH4EXD 大佬在我研究这些技术时为我提供的帮助，希望这篇文章能帮助到对于射频技术感兴趣，却没有就读相关专业的你，少走一些弯路。
最后，引用一句罗老师的名言吧（绝对不是广告）：
生命不息，折腾不止。————罗永浩



参考资料：
RFID 破解三两事 - FreeBuf 互联网安全新媒体平台
详谈 Mifare Classic 1K 卡 - 知乎
维基百科
]]>
    
    https://blog.gadfly.vip/2019/09/about-ic-cards/
    
    2019-09-29T14:37:35.000Z
    

      本文中提到的卡片，若非特别注明，均为非接触式卡片，不再另外声明。

概述
首先分析 NFC 和我们身边的 IC 卡之前，我们需要先介绍一些基本的概念：
    
    
    2024-07-02T16:57:50.000Z