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

本文来源:魚立说。本文链接: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 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 授权头:

    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');
    

更多有用的网站

参考链接

Laravel Documentation

Dingo API 2.0.0 中文文档

tymondesigns/jwt-auth Wiki

使用 Fetch - Web API 接口参考 | MDN

编译资源(Laravel Mix) | 前端开发