前言

上篇搭建了一言API,便想用此接口开发一个网页。


本人对前端美化这方面真的是毫无天赋,就到网络上找了一个能看的单页显示文字的模板。
此项目基于html5up.net上的示列样板开发。

过程

不聪明的开端

实际在引用接口时,发现返回js代码并不是一个很好的选择。
通过外链引用返回的函数名都是hitokoto(),要使用不同的接口就会很麻烦。
当然也是有解决方案的

  • 通过js来控制引用地址,但会刷新网页,影响网页体验。

    document.write("<script language = javascript src = 'https://api.anyfan.top/hitokoto/?encode=js'></script>");
    
  • 新建htlm文件,通过链接跳转,但网页地址会改变,并且有大量的重复代码。不愉快的编写体验。
所以本人放弃了js返回值,本想简化开发过程,却适得其反。

最终方案

直接返回文本似乎是一个不错的选择。因为样板上已经引用了jQ,干脆就用jQ方法吧。

$.get(url, function (data, status) {
    if (status != 'success') {
        $('#sentence').text('获取出错!');
    } 
    else {
        $('#sentence').text(data);
    }
});

然而,封装过后并没有正常输出。打开控制台,发现存在跨域的问题。
解决nginx的跨域问题也很简单
宝塔的话,打开网站设置,在配置文件里增加这两行代码。

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Credentials' 'true';

然后,当然就解决了

项目预览

https://hitokoto.anyfan.top
Github
https://github.com/anyfan/hitokoto

最后修改:2020 年 05 月 28 日 09 : 37 AM
赏口饭吃,行行好吧,客官!