5 天开发接口系统技术小结 - HelloWorld开发者社区

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

本文来源：魚立说。本文链接：https://www.yulisay.com/d/cdmqv.html，支持微信浏览器打开。

更多精彩文章，请移步魚立说个人网站翻看。欢迎欣赏，吐槽不足之处。

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

接口开发小结

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

Laravel & Dingo API 使用技巧

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

管理 Laravel 项目的有用命令：

  生成一个随机字符串：[php](https://www.oschina.net/p/php "php") artisan key:generate
  启动一个开发服务器，之后通过 http://localhost:8000 地址访问：[php](https://www.oschina.net/p/php "php") artisan serve
  优化配置加载：[php](https://www.oschina.net/p/php "php") artisan config:cache
  优化路由加载：[php](https://www.oschina.net/p/php "php") artisan route:cache
  优化视图加载：[php](https://www.oschina.net/p/php "php") artisan view:cache
  启用维护模式：[php](https://www.oschina.net/p/php "php") artisan down
  禁用维护模式：[php](https://www.oschina.net/p/php "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 服务，如图：

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

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();
      });
  }

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

通过 HTTP 向 API 发送需要认证通过的请求时，需要将 token 信息包含到 URL 中，或者设置 Authorization 授权头：
```
  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 文件进行编译：
```
  mix.js('resources/assets/js/app.js', 'public/js')
      .sass('resources/assets/sass/app.scss', 'public/css');
```