|
|
@@ -1,166 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
-<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <!--<meta name="viewport" content="width=device-width, initial-scale=1">-->
|
|
|
- <script src="https://web.tianyunperfect.cn/util.js"></script>
|
|
|
- <title>历史 URL 列表</title>
|
|
|
- <script src="js/axios.min.js"></script>
|
|
|
- <script src="js/vue.min.js"></script>
|
|
|
- <script src="https://api.map.baidu.com/api?v=2.0&ak=WMYeXwq7z0VcaiUXTuYTGPZsm8Selmfd"></script>
|
|
|
- <style>
|
|
|
- .container {
|
|
|
- width: 500px;
|
|
|
- height: 50px;
|
|
|
- margin: 20px auto;
|
|
|
- }
|
|
|
- .parent {
|
|
|
- width: 100%;
|
|
|
- height: 42px;
|
|
|
- top: 4px;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .parent > input:first-of-type {
|
|
|
- /*输入框高度设置为40px, border占据2px，总高度为42px*/
|
|
|
- width: 380px;
|
|
|
- height: 40px;
|
|
|
- border: 1px solid #ccc;
|
|
|
- font-size: 16px;
|
|
|
- outline: none;
|
|
|
- }
|
|
|
-
|
|
|
- .parent > input:first-of-type:focus {
|
|
|
- border: 1px solid #317ef3;
|
|
|
- padding-left: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .parent > input:last-of-type {
|
|
|
- /*button按钮border并不占据外围大小，设置高度42px*/
|
|
|
- width: 100px;
|
|
|
- height: 44px;
|
|
|
- position: absolute;
|
|
|
- background: #317ef3;
|
|
|
- border: 1px solid #317ef3;
|
|
|
- color: #fff;
|
|
|
- font-size: 16px;
|
|
|
- outline: none;
|
|
|
- }
|
|
|
- </style>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
-<div id="tby">
|
|
|
- <div class="container">
|
|
|
- <form action="" class="parent">
|
|
|
- <input type="text" v-model="msg">
|
|
|
- <input type="button" value="搜索" @click="search">
|
|
|
- </form>
|
|
|
- </div>
|
|
|
- <table>
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <td>id</td>
|
|
|
- <td>时间</td>
|
|
|
- <td>网址</td>
|
|
|
- <td>url</td>
|
|
|
- </tr>
|
|
|
- </thead>
|
|
|
- <tbody>
|
|
|
- <tr v-for="(item,index) in list">
|
|
|
- <td>{{item.id}}</td>
|
|
|
- <td>{{new Date(item.create_time).format("yyyy-MM-dd hh:mm:ss")}}</td>
|
|
|
- <td>
|
|
|
- <a :href="item.url"
|
|
|
- target="_blank">{{item.title}}</a>
|
|
|
- </td>
|
|
|
- <td>{{item.url}}</td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
- <!-- 分页按钮 -->
|
|
|
- <div class="page-icon">
|
|
|
- <button class="firstPage" @click="first_click">第一页</button>
|
|
|
- <button class="beforePage" @click="prev_click">上一页</button>
|
|
|
- <button>第<input v-model="page" @change="choose_page" type="text" value="1"/>页</button>
|
|
|
- <button class="nextPage" @click="next_click">下一页</button>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
-</div>
|
|
|
-
|
|
|
-
|
|
|
-<script>
|
|
|
-
|
|
|
- Date.prototype.format = function (fmt) {
|
|
|
- var o = {
|
|
|
- "M+": this.getMonth() + 1, //月份
|
|
|
- "d+": this.getDate(), //日
|
|
|
- "h+": this.getHours(), //小时
|
|
|
- "m+": this.getMinutes(), //分
|
|
|
- "s+": this.getSeconds(), //秒
|
|
|
- "q+": Math.floor((this.getMonth() + 3) / 3), //季度
|
|
|
- "S": this.getMilliseconds() //毫秒
|
|
|
- };
|
|
|
- if (/(y+)/.test(fmt)) {
|
|
|
- fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
|
|
- }
|
|
|
- for (var k in o) {
|
|
|
- if (new RegExp("(" + k + ")").test(fmt)) {
|
|
|
- fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
|
|
- }
|
|
|
- }
|
|
|
- return fmt;
|
|
|
- }
|
|
|
-
|
|
|
- const scrollElement = (el) => {
|
|
|
- document.querySelector(el).scrollIntoView({behavior: 'smooth'});
|
|
|
- }
|
|
|
-
|
|
|
- let _this = new Vue({
|
|
|
- el: '#tby',
|
|
|
- data: {
|
|
|
- page: 1,
|
|
|
- size: 30,
|
|
|
- msg: "",
|
|
|
- list: []
|
|
|
- },
|
|
|
- mounted: function () {
|
|
|
- this.search();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- first_click: function () {
|
|
|
- this.page = 1;
|
|
|
- this.search();
|
|
|
- },
|
|
|
- prev_click: function () {
|
|
|
- this.page -= 1;
|
|
|
- this.search();
|
|
|
- },
|
|
|
- choose_page: function () {
|
|
|
- this.search();
|
|
|
- },
|
|
|
- next_click: function () {
|
|
|
- this.page += 1;
|
|
|
- this.search();
|
|
|
- },
|
|
|
- getParam: function () {
|
|
|
- let obj = {};
|
|
|
- obj['title'] = this.msg;
|
|
|
- obj['page'] = this.page;
|
|
|
- obj['size'] = this.size;
|
|
|
- return obj;
|
|
|
- },
|
|
|
- search: function () {
|
|
|
- axios.get("https://api.tianyunperfect.cn/web_history/search", {params: this.getParam()}).then(res => {
|
|
|
- if (res.data.code === 1) {
|
|
|
- _this.list = res.data.data.list;
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
-
|
|
|
-</script>
|
|
|
-</body>
|
|
|
-</html>
|
tianyun