From 0fd16a74f7828188792b8df03d07f8618583a8ab Mon Sep 17 00:00:00 2001
From: liweiwei <liweiwei@youzan.com>
Date: Fri, 27 Dec 2019 18:33:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=B0=8F=E8=AF=B4=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/index.js                     |   4 +-
 package-lock.json                   |  53 ++++++---
 src/common/request.js               |   8 +-
 src/components/subviews/TopMenu.vue |  39 ++++---
 src/router/index.js                 | 109 +++++++++++-------
 src/store/modules/menuList.js       |  43 +++----
 src/views/Novel.vue                 | 115 +++++++++++++++++++
 src/views/catalog.vue               | 168 ++++++++++++++++++++++++++++
 src/views/chapter.vue               |  89 +++++++++++++++
 9 files changed, 530 insertions(+), 98 deletions(-)
 create mode 100644 src/views/Novel.vue
 create mode 100644 src/views/catalog.vue
 create mode 100644 src/views/chapter.vue

diff --git a/config/index.js b/config/index.js
index 10c0aae..437e3b6 100644
--- a/config/index.js
+++ b/config/index.js
@@ -9,7 +9,7 @@ module.exports = {
 
     // Paths
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: 'http://127.0.0.1:8080/',
     proxyTable: {},
 
     // Various Dev Server settings
@@ -50,7 +50,7 @@ module.exports = {
     // Paths
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: 'https://www.qnnnd.cn/',
 
     /**
      * Source Maps
diff --git a/package-lock.json b/package-lock.json
index c3f6860..30b688a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3961,9 +3961,9 @@
       "dev": true
     },
     "element-ui": {
-      "version": "2.4.8",
-      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.4.8.tgz",
-      "integrity": "sha512-hkt8beJRhOvojx1USK3KS/CbE6SdPtqNdul0uxCMHSdr4RbfTS5HAMRFRdbTjXb1bKlF2D2GFERY2lzrWtk6Qw==",
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.13.0.tgz",
+      "integrity": "sha512-KYsHWsBXYbLELS8cdfvgJTOMSUby3UEjvsPV1V1VmgJ/DdkOAS4z3MiOrPxrT9w2Cc5lZ4eVSQiGhYFR5NVChw==",
       "requires": {
         "async-validator": "~1.8.1",
         "babel-helper-vue-jsx-merge-props": "^2.0.0",
@@ -5265,7 +5265,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5286,12 +5287,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5306,17 +5309,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5433,7 +5439,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5445,6 +5452,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5459,6 +5467,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5466,12 +5475,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5490,6 +5501,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5570,7 +5582,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5582,6 +5595,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5667,7 +5681,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5703,6 +5718,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5722,6 +5738,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5765,12 +5782,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -12273,9 +12292,9 @@
       "dev": true
     },
     "resize-observer-polyfill": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz",
-      "integrity": "sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg=="
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
     },
     "resolve": {
       "version": "1.8.1",
diff --git a/src/common/request.js b/src/common/request.js
index 9faf6ae..299a7af 100644
--- a/src/common/request.js
+++ b/src/common/request.js
@@ -1,9 +1,9 @@
 import axios from 'axios';
 
-const domainMap = window._global.url;
-// const domainMap = {
-//     server_url : "http://localhost:8089",
-//   }
+// const domainMap = window._global.url;
+const domainMap = {
+    server_url : "https://www.qnnnd.cn/",
+  }
 
 function checkStatus(response) {
   if (response.status >= 200 && response.status < 300) {
diff --git a/src/components/subviews/TopMenu.vue b/src/components/subviews/TopMenu.vue
index ecbfbab..0e838c2 100644
--- a/src/components/subviews/TopMenu.vue
+++ b/src/components/subviews/TopMenu.vue
@@ -1,29 +1,38 @@
 <template>
-    <el-menu router=true :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
-        <el-menu-item index="1">我的笔记</el-menu-item>
-        <el-menu-item index="2">我的博客</el-menu-item>
-        <el-submenu index="3">
-            <template slot="title">小工具</template>
-            <el-menu-item index="2-1">选项1</el-menu-item>
-            <el-menu-item index="2-2">选项2</el-menu-item>
-            <el-menu-item index="2-3">选项3</el-menu-item>
-        </el-submenu>
-        <el-menu-item index="2">设置</el-menu-item>
-    </el-menu>
+  <el-menu
+    router="true"
+    :default-active="activeIndex"
+    class="el-menu-demo"
+    mode="horizontal"
+    @select="handleSelect"
+    background-color="#545c64"
+    text-color="#fff"
+    active-text-color="#ffd04b"
+  >
+    <el-menu-item index="1">我的笔记</el-menu-item>
+    <el-menu-item index="2">我的博客</el-menu-item>
+    <el-submenu index="3">
+      <template slot="title">小工具</template>
+      <el-menu-item index="2-1">选项1</el-menu-item>
+      <el-menu-item index="2-2">选项2</el-menu-item>
+      <el-menu-item index="2-3">选项3</el-menu-item>
+    <el-menu-item index="2">设置</el-menu-item> 
+    </el-submenu>
+  </el-menu>
 </template>
 <script>
 export default {
   data() {
     return {
-      activeIndex: '1',
-    }
+      activeIndex: "1"
+    };
   },
   methods: {
     handleSelect(key, keyPath) {
-      console.log(key, keyPath)
+      console.log(key, keyPath);
     }
   }
-}
+};
 </script>
 <style>
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index 93cce28..11c80c3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,46 +7,73 @@ Vue.use(Router)
 export default new Router({
   // mode: 'history',
   routes: [{
-      path: '/',
-      component: Layout,
-      redirect: 'myNote',
-    },
-    {
-      path: '*',
-      redirect: '/index',
-      hidden: true
-    },
-    {
-      path: '/index',
-      component: Layout,
-      redirect: 'myNote'
-    },
-    {
-      path: '',
-      component: Layout,
-      children: [{
-        path: 'myNote',
-        component: () =>
-          import('@/views/Mynote')
-      }]
-    },
-    {
-      path: '',
-      component: Layout,
-      children: [{
-        path: 'myBlog',
-        component: () =>
-          import('@/views/MyBlog')
-      }]
-    },
-    {
-      path: '',
-      component: Layout,
-      children: [{
-        path: 'file',
-        component: () =>
-          import('@/views/FileUpload')
-      }]
-    }
+    path: '/',
+    component: Layout,
+    redirect: 'novel'
+  },
+  {
+    path: '*',
+    redirect: '/index',
+    hidden: true
+  },
+  {
+    path: '/index',
+    component: Layout,
+    redirect: 'myNote'
+  },
+  {
+    path: '',
+    component: Layout,
+    children: [{
+      path: 'myNote',
+      component: () =>
+        import('@/views/Mynote')
+    }]
+  },
+  {
+    path: '',
+    component: Layout,
+    children: [{
+      path: 'myBlog',
+      component: () =>
+        import('@/views/MyBlog')
+    }]
+  },
+  {
+    path: '',
+    component: Layout,
+    children: [{
+      path: 'novel',
+      component: () =>
+        import('@/views/Novel')
+    }]
+  },
+  {
+    path: '',
+    component: Layout,
+    children: [{
+      path: 'file',
+      component: () =>
+        import('@/views/FileUpload')
+    }]
+  },
+  {
+    path: '',
+    component: Layout,
+    children: [{
+      path: 'chapter',
+      component: () =>
+        import('@/views/chapter')
+    }]
+  },
+  {
+    path: '',
+    component: Layout,
+    children: [{
+      path: 'catalog',
+      component: () =>
+        import('@/views/catalog')
+    }]
+  }
   ]
 })
diff --git a/src/store/modules/menuList.js b/src/store/modules/menuList.js
index abcb134..2b75d1f 100644
--- a/src/store/modules/menuList.js
+++ b/src/store/modules/menuList.js
@@ -1,27 +1,32 @@
 export const menuRouterList = [{
-    path: '/myNote',
-    name: '我的笔记',
-    hasChild: false,
-    selected: true
-  },
-  {
-    path: '/myBlog',
-    name: '我的博客',
-    hasChild: false,
-    selected: false
-  },
-  {
-    path: '/file',
-    name: '文件上传',
-    hasChild: false,
-    selected: false
-  }
+  path: '/novel',
+  name: '小说查询',
+  hasChild: false,
+  selected: true
+}
+// },{
+//   path: '/myNote',
+//   name: '我的笔记',
+//   hasChild: false,
+//   selected: true
+// },
+// {
+//   path: '/myBlog',
+//   name: '我的博客',
+//   hasChild: false,
+//   selected: false
+// },
+// {
+//   path: '/file',
+//   name: '文件上传',
+//   hasChild: false,
+//   selected: false
+// }
 ]
 
-
 const menuList = {
   state: {
-    menuRouter : menuRouterList
+    menuRouter: menuRouterList
   }
 }
 
diff --git a/src/views/Novel.vue b/src/views/Novel.vue
new file mode 100644
index 0000000..a33a7cb
--- /dev/null
+++ b/src/views/Novel.vue
@@ -0,0 +1,115 @@
+<template>
+  <div id="novel_search">
+    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+      <el-form-item label>
+        <el-input v-model="formInline.novelName" placeholder="小说名称"></el-input>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">查询</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table :data="tableData" style="width: 100%" @row-click="handdle">
+      <el-table-column prop="date" style="width: 100%">
+        <template slot-scope="props">
+          <el-form label-position="left" inline class="demo-table-expand">
+            <el-row :gutter="20">
+              <el-col :span="10">
+                <div class="grid-content bg-purple">
+                  <img :src="props.row.picurl" style="width: 100px; height: 100px" />
+                </div>
+              </el-col>
+              <el-col :span="14">
+                <el-form-item label="书名">
+                  <span>{{ props.row.resourcename }}</span>
+                </el-form-item>
+                <el-form-item label="作者">
+                  <span>{{ props.row.author }}</span>
+                </el-form-item>
+                <el-form-item label="最新章节">
+                  <el-link
+                    type="primary"
+                    :href='"#/chapter?resourceId=" + props.row.resourceid + "&chapterId=" + props.row.lastserialid '
+                  >{{ props.row.lastserialname }}</el-link>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import { request, URL } from "../common/request";
+
+export default {
+  data() {
+    return {
+      formInline: {
+        novelName: ""
+      },
+      tableData: [
+        // {
+        //   resourceid: "1100565711",
+        //   resourcename: "掠天记",
+        //   author: "黑山老鬼",
+        //   lastserialid: 1821,
+        //   lastserialname: "新书《大劫主》发布啦，求票求收藏求关注！",
+        //   picurl: "http://wfqqreader.3g.qq.com/cover/711/565711/t3_565711.jpg",
+        //   summary:
+        //     "有人说他是修行界里的一粒老鼠屎，坏了礼义廉耻，乱了道门秩序！有人说他是南瞻部州最大的败类，勾结魔道，坑蒙拐骗，无恶不作！对于所有污蔑，方行说：“没错，我就是那粒传说中的老鼠屎，有问题吗？”       【掠天记总群： 193466328】"
+        // },{
+        //   resourceid: "1125443555",
+        //   resourcename: "九天",
+        //   author: "黑山老鬼",
+        //   lastserialid: 1821,
+        //   lastserialname: "新书《大劫主》发布啦，求票求收藏求关注！",
+        //   picurl: "http://wfqqreader.3g.qq.com/cover/555/25443555/t3_25443555.jpg",
+        //   summary:
+        //     "有人说他是修行界里的一粒老鼠屎，坏了礼义廉耻，乱了道门秩序！有人说他是南瞻部州最大的败类，勾结魔道，坑蒙拐骗，无恶不作！对于所有污蔑，方行说：“没错，我就是那粒传说中的老鼠屎，有问题吗？”       【掠天记总群： 193466328】"
+        // }
+      ]
+    };
+  },
+  methods: {
+    onSubmit() {
+      if (this.formInline.novelName === "") {
+        return false;
+      }
+      request(URL.site("server_url", "/api/novel/search"), {
+        method: "GET",
+        params: {
+          key: this.formInline.novelName
+        }
+      }).then(res => {
+                console.log(this.tableData);
+
+        this.tableData = res.response.rows
+        console.log(this.tableData);
+      });
+    },
+    handdle(row, event, column) {
+      this.$router.push("/catalog?resourceId=" + row.resourceid);
+    }
+  }
+};
+</script>
+
+<style>
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 80px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 100%;
+}
+</style>
+
diff --git a/src/views/catalog.vue b/src/views/catalog.vue
new file mode 100644
index 0000000..a3ef6b7
--- /dev/null
+++ b/src/views/catalog.vue
@@ -0,0 +1,168 @@
+<template>
+  <div id="catalog">
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <div class="grid-content bg-purple">
+          <img :src="novel.picurl" style="width: 120px; height: 120px" />
+        </div>
+      </el-col>
+      <el-col :span="14">
+        <el-form label-position="left" label-width="80px" class="demo-table-expand">
+          <el-form-item label="书名">
+            <span>{{ novel.resourceName }}</span>
+          </el-form-item>
+          <el-form-item label="作者">
+            <span>{{ novel.author }}</span>
+          </el-form-item>
+          <el-form-item label="最新章节">
+            <el-link
+              type="primary"
+              :href='"#/chapter?resourceId=" + novel.resourceID + "&chapterId=" + novel.lastSerialid '
+            >{{ novel.lastSerialname }}</el-link>
+          </el-form-item>
+          <el-form-item label="简介">
+            <div class="jianjie">
+              <span>{{ novel.summary }}</span>
+            </div>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <div style="height: 100px"></div>
+    <el-table :data="tableData" style="width: 100%" @row-click="handdle">
+      <el-table-column align="center" style="width: 100%" prop="serialname" label="章节"></el-table-column>
+    </el-table>
+
+    <el-button-group>
+      <el-button type="primary" icon="el-icon-arrow-left" @click.native="prevChapter">上一页</el-button>
+      <el-button type="primary" @click.native="nextChapter">
+        下一页
+        <i class="el-icon-arrow-right el-icon--right"></i>
+      </el-button>
+    </el-button-group>
+  </div>
+</template>
+
+<script>
+import { request, URL } from "../common/request";
+
+export default {
+  // :href='"#/chapter?resourceId=" + novel.resourceID + "&chapterId=" + novel.lastSerialid '
+  data() {
+    return {
+      resourceId: 0,
+      page: 1,
+      pageSize: 10,
+      novel: {
+        resourceID: "1100565711",
+        resourceName: "掠天记",
+        author: "黑山老鬼",
+        lastSerialid: 1821,
+        serialnum: 200,
+        lastSerialname: "新书《大劫主》发布啦，求票求收藏求关注！",
+        picurl: "http://wfqqreader.3g.qq.com/cover/711/565711/t3_565711.jpg",
+        summary:
+          "有人说他是修行界里的一粒老鼠屎，坏了礼义廉耻，乱了道门秩序！有人说他是南瞻部州最大的败类，勾结魔道，坑蒙拐骗，无恶不作！对于所有污蔑，方行说：“没错，我就是那粒传说中的老鼠屎，有问题吗？”       【掠天记总群： 193466328】"
+      },
+      tableData: [
+        {
+          resourceid: "1100565711",
+          serialid: "181",
+          serialname: "第181章 宗主陈玄华"
+        },
+        {
+          resourceid: "1100565711",
+          serialid: "181",
+          serialname: "第181章 宗主陈玄华"
+        }
+      ]
+    };
+  },
+  created: function() {
+    this.resourceId = parseInt(this.$route.query.resourceId);
+
+    request(URL.site("server_url", "/api/novel/detail"), {
+      method: "GET",
+      params: {
+        novelId: this.resourceId
+      }
+    }).then(res => {
+      this.novel = res.response.data.bookInfo;
+    });
+
+    request(URL.site("server_url", "/api/novel/catalog"), {
+      method: "GET",
+      params: {
+        novelId: this.resourceId,
+        page: this.page,
+        pageSize: this.pageSize
+      }
+    }).then(res => {
+      this.tableData = res.response.rows;
+      console.log(res);
+    });
+  },
+  methods: {
+    handdle(row, event, column) {
+      this.$router.push(
+        "/chapter?resourceId=" + row.resourceid + "&chapterId=" + row.serialid
+      );
+      console.log(row);
+    },
+    prevChapter: function() {
+      if (this.page === 1) {
+        return;
+      }
+
+      request(URL.site("server_url", "/api/novel/catalog"), {
+        method: "GET",
+        params: {
+          novelId: this.resourceId,
+          page: this.page--,
+          pageSize: this.pageSize
+        }
+      }).then(res => {
+        this.tableData = res.response.rows;
+        console.log(res);
+      });
+    },
+    nextChapter: function() {
+      
+      request(URL.site("server_url", "/api/novel/catalog"), {
+        method: "GET",
+        params: {
+          novelId: this.resourceId,
+          page: this.page++,
+          pageSize: this.pageSize
+        }
+      }).then(res => {
+        this.tableData = res.response.rows;
+        console.log(res);
+      });
+    }
+  },
+  name: "catalog"
+};
+</script>
+
+<style>
+.demo-table-expand {
+  font-size: 0;
+}
+.demo-table-expand label {
+  width: 80px;
+  color: #99a9bf;
+}
+.demo-table-expand .el-form-item {
+  margin-right: 0;
+  margin-bottom: 0;
+  width: 100%;
+}
+.jianjie {
+  font-size: 10px;
+  line-height: 5px;
+  height: 20px;
+  padding: 0px;
+  line-height: 1.5;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/chapter.vue b/src/views/chapter.vue
new file mode 100644
index 0000000..56eddb3
--- /dev/null
+++ b/src/views/chapter.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="chapter_info">
+    <el-button-group>
+      <el-button type="primary" icon="el-icon-arrow-left" @click.native="prevChapter">上一章</el-button>
+      <el-button type="primary" icon="el-icon-house" @click.native="catalog">目录</el-button>
+      <el-button type="primary" @click.native="nextChapter">
+        下一章
+        <i class="el-icon-arrow-right el-icon--right"></i>
+      </el-button>
+    </el-button-group>
+    <ul class="chapter_info">
+      <p v-for="item in this.items" align="left"> &nbsp;&nbsp;&nbsp;&nbsp; 
+ {{ item }}</p>
+    </ul>
+    <el-button-group>
+      <el-button type="primary" icon="el-icon-arrow-left" @click.native="prevChapter">上一章</el-button>
+      <el-button type="primary" icon="el-icon-house" @click.native="catalog">目录</el-button>
+      <el-button type="primary" @click.native="nextChapter">
+        下一章
+        <i class="el-icon-arrow-right el-icon--right"></i>
+      </el-button>
+    </el-button-group>
+  </div>
+</template>
+
+<script>
+import { request, URL } from "../common/request";
+
+export default {
+  name: "chapter",
+  data() {
+    return {
+      resourceId: 0,
+      chapterId: 0,
+      nextChapterId: 0,
+      prevChapterId: 0,
+      items: []
+    };
+  },
+  methods: {
+    prevChapter: function() {
+      this.$router.push(
+        "/chapter?resourceId=" +
+          this.resourceId +
+          "&chapterId=" +
+          this.prevChapterId
+      );
+    },
+    nextChapter: function() {
+      this.$router.push(
+        "/chapter?resourceId=" +
+          this.resourceId +
+          "&chapterId=" +
+          this.nextChapterId
+      );
+    },
+    catalog: function() {
+      this.$router.push("/catalog?resourceId=" + this.resourceId);
+    }
+  },
+
+  created: function() {
+    this.resourceId = parseInt(this.$route.query.resourceId);
+    this.chapterId = parseInt(this.$route.query.chapterId);
+    this.nextChapterId = this.chapterId + 1;
+    this.prevChapterId = this.chapterId - 1;
+
+    console.log(this.resourceId + "" + this.chapterId);
+
+    request(URL.site("server_url", "/api/novel/chapter"), {
+      method: "GET",
+      params: {
+        novelId: this.resourceId,
+        chapterId: this.chapterId
+      }
+    }).then(res => {
+      this.items = res.response.data.content;
+      console.log(res);
+    });
+  }
+};
+</script>
+
+<style>
+.chapter_info{
+  padding-inline-start:0px;
+}
+</style>
+