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

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

本文来源:魚立说。本文链接: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) | 前端开发

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值