报价宝 › 综合 ›

校园电子告示板（三）

报价宝来源：baojiabao.com 发布时间：2018-07-27 16:31:00 10月26日更新

报价宝综合消息校园电子告示板（三）

到了最后的一步，就是编写网页，以显示储存在 Google 试算表的资料。在这个网页中主要是以 HTML 及 JavaScript 来编写，在技术上并不复杂，整个网页是基于 Google 官方网站的样本网页改写。

登入 Google API 网页取得样本，在网页运行的时候，记得进行下列几个步骤，简述如下：
1. 首先确认用家身份，获得权限进入 Google 试算表（系统的数据库）拿取资料；
2. 检查那些讯息需要于今天显示，将有关的讯息及老师名字，储存于 message 阵列和 teacher 阵列中；
3. 循环地将讯息和老师名字逐一显示出来。

Google API 网页：https://developers.google.com/sheets/api/quickstart/js

将下列的文字储存为 enotice.html ，并将它放在树莓派中 Apache 网页服务器的位置（ /var/www/html/ ），于树莓派中开启浏览器，在网址中输入 http://localhost/enotice.html ，电子告示板就会运作起来。

未进行登入前。

用户成功登入后。

有关超文件标示语言 enotice.html 的注释，解构如下：

行数 2 ：这是网页显示语言的设定，如讯息中包含中文，必需加上这行“ en-HK ”。
行数 3 ：设定网页每隔三分钟（ 180 秒）会重新整理，电子告示板的讯息可以不断更新。
行数 6-10 ：在网页显示学校名称，及使用较早前在 www.timeanddate.com 产生出的标示语言，显示当天的日期。
行数 14-15：加入按钮“ Authorize ”及“ Sign Out ”，方便用家进行身份确定，以拿取相关 google 试算表的资料。
行数 17 ： JavaScript 的开始标签，结束标签在行数 100 。
行数 18-19 ：将在较早前开启 Google 试算表 API 的时候，所产生的 CLIENT ID 及 API key 复制在给。
行数 44 ：“ Sign Out ”按钮的 style.display 设定为“ none ”，在进行身份确定后，便不会显示该按钮。

行数 59 ：将在较早前开启 Google 试算表的 Spreadsheets ID 复制中。
行数 60 ：指示出储存资料的工作表名称 message ，及储存格的位置 A2 至到 E 栏，网页会在这个范围的储存格中找寻资料。
行数 63 ：建立一个新的日期物件，名称为“ d ”，并设定为当天的日期。
行数 64-66 ：抽取日期“ d ”的日（ dd ）、月（ mm ）及年（ yy ）的资料，并以数字方式表示出来。
行数 67 ：建立变量“ dayOfToday ”，将当天的日期以“日/月/年”的方式表示出来，当中的日和月将会以两个位数字表示，例如 2018 年 3 月 7 日表示方式是 07/03/2018 。 slice （ -2 ）的方法可提取字符串中倒数第二个至最后一个字符。
行数 68-69 ：建立 teacher_array 及 mess_array 两个阵列 Array ，分别储存负责老师的名字及讯息内容。
行数 74-82 ：在 Google 试算表中已储存资料的每一列，检查 Date 字段中的日期是否代表今天的日期（ row[1]==dayOfToday ），如果这个条件成立，系统便会将该列的讯息 row[2] 和负责老师的名字 row[3] 复制度 mess_array 及 teacher_array 中。
行数 83-87 ：完成了复制今天的信息和负责老师的名字到阵列后，便使用 innerHTML 将阵列中的资料显示出来。在这句式中使用了一个计数器 k 、模数运算子 % 及阵列的长度（ .length ），便可以将阵列中的资料循环地显示出来。
行数 88 ：使用 setInterval ，设定每个讯息中间相隔的时间，“ 1,000 ”代表一秒。