IPアドレスの一覧表の形式を修正
GLIPAHサイトのIPアドレスの一覧表の形式を変更します。
これまでの一覧表は以下の形式です。
id | IPアドレス | アクセス日時 |
---|---|---|
2 | xx.xx.xx.xx | 2020/05/31 21:46:18 |
1 | xx.xx.xx.xx | 2020/05/31 21:46:17 |
これを以下の形式に変更します。
IPアドレス | アクセス回数 | 初回のアクセス日時 | 最新のアクセス日時 |
---|---|---|---|
xx.xx.xx.xx | 2 | 2020/05/31 21:46:18 | 2020/05/31 21:46:18 |
yy.yy.yy.yy | 10 | 2020/05/31 21:46:17 | 2020/05/31 21:46:17 |
IPアドレスごとにまとめて、各IPアドレスごとにアクセス回数、初回と最新のアクセス日時を表示します。 各行は初回のアクセス日時が新しいIPアドレスが上にソートします。 これは、次にIPアドレスごとに、なんらかの処理、たとえばGoogleアナリティクスのフィルターとして登録したことを記録するための準備です。
影響するテストをスキップ
一覧表をHTMLレベルで確認するテストは修正が一区切りするまでエラーになるため、スキップさせます。
テストケースの見直し
一覧表の修正にあわせて、テストケースを見直します。 以下は、現状のHTMLレベルで確認するテストケースです。
ケース1
IPアドレスとアクセス日時をipHistory配列に設定します。
IPアドレス | アクセス日時 |
---|---|
zz.zz.zz.zz | 2020-04-30 12:34:56 |
以下のように表示されます。
IPアドレス | アクセス回数 | 初回のアクセス日時 | 最新のアクセス日時 |
---|---|---|---|
zz.zz.zz.zz | 1 | 2020-04-30 12:34:56 | 2020-04-30 12:34:56 |
ケース2
IPアドレスとアクセス日時をipHistory配列に設定します。
IPアドレス | アクセス日時 |
---|---|
zz.zz.zz.zz | 2020-04-30 12:34:56 |
yy.yy.yy.yy | 2020-05-01 11:11:11 |
IPアドレス | アクセス回数 | 初回のアクセス日時 | 最新のアクセス日時 |
---|---|---|---|
yy.yy.yy.yy | 1 | 2020-05-01 11:11:11 | 2020-05-01 11:11:11 |
zz.zz.zz.zz | 1 | 2020-04-30 12:34:56 | 2020-04-30 12:34:56 |
ケース3
axios.getとDateをモックにして、テストデータを返します。
IPアドレス | アクセス日時 |
---|---|
ab.cd.ef.gh | 2020-05-06 01:02:03 |
以下のように表示されます。
IPアドレス | アクセス回数 | 初回のアクセス日時 | 最新のアクセス日時 |
---|---|---|---|
ab.cd.ef.gh | 1 | 2020-05-06 01:02:03 | 2020-05-06 01:02:03 |
ケース4
axios.getとDateをモックにして、テストデータを返します。
IPアドレス | アクセス日時 |
---|---|
ab.cd.ef.gh | 2020-05-06 01:02:03 |
ab.cd.ef.gh | 2020-05-06 01:02:03 |
IPアドレス | アクセス回数 | 初回のアクセス日時 | 最新のアクセス日時 |
---|---|---|---|
ab.cd.ef.gh | 2 | 2020-05-06 01:02:03 | 2020-05-06 01:02:03 |
ケース5
axios.getとDateをモックにして、テストデータを返します。
IPアドレス | アクセス日時 |
---|---|
ab.cd.ef.gh | 2020-05-06 01:02:03 |
11.22.33.44 | 2020-05-10 00:11:22 |
以下のように表示されます。
IPアドレス | アクセス回数 | 初回のアクセス日時 | 最新のアクセス日時 |
---|---|---|---|
11.22.33.44 | 1 | 2020-05-10 00:11:22 | 2020-05-10 00:11:22 |
ab.cd.ef.gh | 1 | 2020-05-06 01:02:03 | 2020-05-06 01:02:03 |
上記のテストケースのうち、以下のように変更します。
テストケース1と2はテストケース3と5と重複しているため、削除します。
ケース4の2回目のアクセス日時を2020-05-07 03:49:38に変更して、初回のアクセス日時と最新アクセス日時の違うテストをします。
あわせて以下のテストケースを追加します。追加するテストケースは、axios.getとDateをモックにしてテストデータを返します。
ケース6
3回とも同じIPアドレスからのアクセス、日時の順にアクセスされています。
IPアドレス | アクセス日時 |
---|---|
ab.cd.ef.gh | 2020-05-06 01:02:03 |
ab.cd.ef.gh | 2020-05-21 07:23:39 |
ab.cd.ef.gh | 2020-06-01 22:11:00 |
IPアドレス | アクセス回数 | 初回のアクセス日時 | 最新のアクセス日時 |
---|---|---|---|
ab.cd.ef.gh | 3 | 2020-05-06 01:02:03 | 2020-06-01 22:11:00 |
ケース7
3回とも同じIPアドレスからのアクセス、アクセスの順序が入れ替わっています。
IPアドレス | アクセス日時 |
---|---|
ab.cd.ef.gh | 2020-05-06 01:02:03 |
ab.cd.ef.gh | 2020-06-01 22:11:00 |
ab.cd.ef.gh | 2020-05-21 07:23:39 |
IPアドレス | アクセス回数 | 初回のアクセス日時 | 最新のアクセス日時 |
---|---|---|---|
ab.cd.ef.gh | 3 | 2020-05-06 01:02:03 | 2020-06-01 22:11:00 |
ケース8
3回目に別のIPアドレスからアクセスされています。
IPアドレス | アクセス日時 |
---|---|
ab.cd.ef.gh | 2020-05-06 01:02:03 |
ab.cd.ef.gh | 2020-06-01 22:11:00 |
11.22.33.44 | 2020-06-10 00:11:22 |
IPアドレス | アクセス回数 | 初回のアクセス日時 | 最新のアクセス日時 |
---|---|---|---|
11.22.33.44 | 1 | 2020-06-10 00:11:22 | 2020-06-10 00:11:22 |
ab.cd.ef.gh | 2 | 2020-05-06 01:02:03 | 2020-06-01 22:11:00 |
ケース9
2回めに別のIPアドレスからアクセスされています。
IPアドレス | アクセス日時 |
---|---|
ab.cd.ef.gh | 2020-05-06 01:02:03 |
11.22.33.44 | 2020-05-10 00:11:22 |
ab.cd.ef.gh | 2020-06-01 22:11:00 |
IPアドレス | アクセス回数 | 初回のアクセス日時 | 最新のアクセス日時 |
---|---|---|---|
11.22.33.44 | 1 | 2020-05-10 00:11:22 | 2020-05-10 00:11:22 |
ab.cd.ef.gh | 2 | 2020-05-06 01:02:03 | 2020-06-01 22:11:00 |
ケース10
初回のアクセス日時の更新を確認します。
IPアドレス | アクセス日時 |
---|---|
ab.cd.ef.gh | 2020-06-01 22:11:00 |
ab.cd.ef.gh | 2020-05-06 01:02:03 |
11.22.33.44 | 2020-05-10 00:11:22 |
IPアドレス | アクセス回数 | 初回のアクセス日時 | 最新のアクセス日時 |
---|---|---|---|
11.22.33.44 | 1 | 2020-05-10 00:11:22 | 2020-05-10 00:11:22 |
ab.cd.ef.gh | 2 | 2020-05-06 01:02:03 | 2020-06-01 22:11:00 |
プログラムの修正
テンプレートを以下のように修正します。
<thead>
<tr>
<th>IPアドレス</th>
<th>アクセス回数</th>
<th>初回のアクセス日時</th>
<th>最新のアクセス日時</th>
</tr>
</thead>
<tbody v-for="item in ipHistory" :key="item.ipAddress">
<tr>
<td>{{ item.ipAddress }}</td>
<td>{{ item.accessCount }}</td>
<td>{{ item.firstAccessDate }}</td>
<td>{{ item.lastAccessDate }}</td>
</tr>
</tbody>
ipHistory配列への代入を以下のように修正します。
addIpHistory(id, ipAddress, accessDate) {
const index = this.ipHistory.findIndex(
address => address.ipAddress === ipAddress
);
if (index == -1) {
this.ipHistory.unshift({
id: id,
ipAddress: ipAddress,
accessCount: 1,
firstAccessDate: accessDate,
lastAccessDate: accessDate
});
} else {
if (this.ipHistory[index].firstAccessDate > accessDate) {
this.ipHistory[index].firstAccessDate = accessDate;
}
if (this.ipHistory[index].lastAccessDate < accessDate) {
this.ipHistory[index].lastAccessDate = accessDate;
}
this.ipHistory[index].accessCount++;
}
},