5 天开发接口系统技术小结

在确定了接口系统的详细规划和整体功能以后，花费时间更多的其实是对技术细节的打磨。本主题借鉴我开发个人网站魚立说的经验，整理了在开发接口系统过程可能会遇到的各种技术要点。

涉及到的代码已经整理到 https://github.com/yulis-say/web-full-stack 中的 api-skills 目录，若觉得有用，请分享并 star 。

接口开发小结

下面对接口系统的开发技术要点依次进行概括，包括必要的说明和资源引导。

Laravel & Dingo API 使用技巧

搭建接口系统，为了省时省力，本站使用了 PHP 语言写的 Laravel & Dingo API 框架，接下来就相关使用经验进行了整理。

管理 Laravel 项目的有用命令：

生成一个随机字符串：php artisan key:generate
启动一个开发服务器，之后通过 http://localhost:8000 地址访问：php artisan serve
优化配置加载：php artisan config:cache
优化路由加载：php artisan route:cache
优化视图加载：php artisan view:cache
启用维护模式：php artisan down
禁用维护模式：php artisan up

一些有用的 Laravel 扩展包：

Laravel-Debugbar：便捷查看应用所有信息，以方便调试。
Laravel-Permission：实现 RBAC 权限管理功能。
Laravel-activitylog：自动记录Model的修改，记录用户行为扩展包。
Laravel-CORS：解决前后端分离应用跨域请求利器。
Laravel Excel：集成 Excel 表格，实现 Excel/CSV 等格式文件的导入导出。
Laravel-Pay：支付宝和微信支付 SDK。

JWT（JSON Web Token）规范为基于 API 的用户认证提供了最佳解决方案，允许我们在用户和服务器之间传递安全可靠的信息。一个 JWT 实际上就是一个字符串，它由三部分组成：头部、载荷与签名。
使用 QQ 邮箱发送邮件，需要开放 QQ 邮箱的 SMTP 功能。在 QQ 邮箱中做开启 POP3 和 SMTP 服务，如图：

图：开放 QQ 邮箱的 SMTP 功能

API 与 JavaScript 实现交互

整个网站框架的底层其实就是：前端页面 + 后端支持。前端页面由 HTML/JavaScript/CSS 等技术实现。后端支持由 API 实现，并与数据库、文件系统等实现交互。因此，API 与 JavaScript 的交互，成为将前后端衔接起来的桥梁。

如果通过 fetch() 请求 API 数据，我们可以对 fetch() 进行封装，从而方便后续的调用操作。比如这样进行封装：

function myfetch(url, options = {}) {
    !options.method ? (options.method = 'GET') : null;

    options.mode = 'cors';
    options.headers = {
      'Content-Type': 'application/x-www-form-urlencoded'
    };

    return fetch(url, options).then(response => {
      return response.json();
    });
}

图：对 fetch() 进行封装

通过 HTTP 向 API 发送需要认证通过的请求时，需要将 token 信息包含到 URL 中，或者设置 Authorization 授权头：
1
Authorization: Bearer+空格+token

JavaScript 读取前端 Laravel 设置的 Cookie 始终为空？因为安全的原因考虑，Laravel 框架默认会对 Cookie 进行加密存储。如果想要 Laravel 跟 JavaScript 实现 Cookie 的交互，也就是让 JavaScript 直接读取到明文，那么需要做如下配置：

将 Cookie 名添加到 App\Http\Middleware\EncryptCookies 的排除名单中：
protected $except = [
    'cookie_name', 
];

设置 Cookie 时，去除 HttpOnly 属性：
\Cookie::queue('cookie_name', 'test', $minutes = 360, $path = null, $domain = null,
    $secure = false, $httpOnly = false);

使用 Laravel Mix 编译资源，对 CSS 和 JavaScript 实现 Webpack 压缩打包。在运行 Laravel Mix 之前，需要具备 Node.js 和 NPM 运行环境。例如执行命令npm run prod，对 app.js 和 app.scss 文件进行编译：
1
2
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');