第一步：链切换工作完成

src/App.vue

@@ -38,12 +38,30 @@
           </v-row>
         </v-container>
       </v-tabs-items>
+      <v-tabs-items v-else-if="!selected" v-model="tab">
+        <v-container class="pt-16 mt-16">
+          <v-row align="center">
+            <v-col cols="3"></v-col>
+            <v-col cols="6">
+              <v-select persistent-hint return-object single-line
+                  item-text="networkName" item-value="id" label="请选择Chain"
+                  :items="chainList" :hint="`${chain.id}   ${chain.networkName}`" v-model="chain"></v-select>
+            </v-col>
+          </v-row>
+          <v-row align="center" v-if="chain.id !== ''">
+            <v-col cols="3"></v-col>
+            <v-col cols="6">
+              <v-btn tile large depressed color="primary" elevation="0" @click="selected = true">我选好了</v-btn>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-tabs-items>
       <v-tabs-items v-else v-model="tab">
         <v-tab-item key="pending">
-          <Pending></Pending>
+          <Pending :chain="chain"></Pending>
         </v-tab-item>
         <v-tab-item key="history">
-          <History></History>
+          <History :chain="chain"></History>
         </v-tab-item>
       </v-tabs-items>
     </v-main>
@@ -54,6 +72,7 @@
 
 import History from '@/components/History'
 import Pending from '@/components/Pending'
+import Chain from '@/plugins/model/Chain.js'
 import md5 from 'md5-node'
 
 export default {
@@ -64,6 +83,12 @@ export default {
   },
   data: () => ({
     tab: 'pending',
+    chain: {
+      id: '',
+      networkName: ''
+    },
+    selected: false,
+    chainList: [],
     pwdMD5: '7f5029bbd4daae18f3ae4cd910f0f4f0',
     pwd: ''
   }),
@@ -74,6 +99,15 @@ export default {
     jump () {
       window.open('https://etherscan.io/address/' + this.pwd)
     }
+  },
+  async mounted() {
+    const rst = await Chain.getAll()
+
+    if (rst.state) {
+      this.$msgkit.normal(rst.msg)
+
+      this.chainList = rst.data
+    }
   }
 };
 </script>

src/components/History.vue

@@ -11,12 +11,14 @@
 <script>
 import Top from '@/components/viewer/Top'
 import Table from '@/components/viewer/Table'
-import EthMev from '@/plugins/model/EthMev'
+import Tx from '@/plugins/model/Tx'
 
 export default {
   name: 'History',
   components: {Top, Table},
+  props: ['chain'],
   data: () => ({
+    tx: undefined,
     query: {
       block: '',
       hash: '',
@@ -56,14 +58,14 @@ export default {
   methods: {
     // 获取数据
     async generateTableData() {
+      if (!this.tx) this.createTx()
+
       this.table.loading = true
       this.table.data.length = 0
 
-      const rst = await EthMev.getEthMevData(this.query.block, this.query.hash, this.query.dataVague,
-          this.table.pageNum, this.table.pageSize)
+      const rst = await this.tx.findByPaginate(this.table.pageNum, this.table.pageSize)
 
       if (rst.state) {
-        EthMev.generateTableDataByDbData(rst.data)
         this.table.data = rst.data
         this.$msgkit.success(rst.msg)
       } else {
@@ -71,6 +73,9 @@ export default {
       }
 
       this.table.loading = false
+    },
+    createTx() {
+      this.tx = new Tx(this.chain.id, Tx.MODULES.HISTORY)
     }
   },
   provide() {

src/components/Pending.vue

@@ -11,12 +11,14 @@
 <script>
 import Top from '@/components/viewer/Top'
 import Table from '@/components/viewer/Table'
-import EthMev from '@/plugins/model/EthMev'
+import Tx from '@/plugins/model/Tx'
 
 export default {
   name: 'Pending',
   components: {Top, Table},
+  props: ['chain'],
   data: () => ({
+    tx: undefined,
     query: {
       block: '',
       hash: '',
@@ -56,14 +58,14 @@ export default {
   methods: {
     // 获取数据
     async generateTableData() {
+      if (!this.tx) this.createTx()
+
       this.table.loading = true
       this.table.data.length = 0
 
-      const rst = await EthMev.getEthMevPendingData(this.query.block, this.query.hash, this.query.dataVague,
-          this.table.pageNum, this.table.pageSize)
+      const rst = await this.tx.findByPaginate(this.table.pageNum, this.table.pageSize)
 
       if (rst.state) {
-        EthMev.generateTableDataByDbData(rst.data)
         this.table.data = rst.data
         this.$msgkit.success(rst.msg)
       } else {
@@ -71,6 +73,9 @@ export default {
       }
 
       this.table.loading = false
+    },
+    createTx() {
+      this.tx = new Tx(this.chain.id, Tx.MODULES.PENDING)
     }
   },
   provide() {

src/plugins/model/Chain.js

@@ -0,0 +1,11 @@
+import http from 'axios'
+import NumKit from '@/plugins/kit/NumKit'
+
+export default class EthMev {
+  static async getAll() {
+    const url = '/chain/getAll'
+    const rst = await http.post(url, {})
+
+    return rst.data
+  }
+}

src/plugins/model/Tx.js

@@ -0,0 +1,36 @@
+import http from 'axios'
+
+export default class Tx {
+  static MODULES = {
+    HISTORY: 'history',
+    PENDING: 'pending'
+  }
+
+  constructor(chainId, module) {
+    if (!chainId || !module) throw "Must have [chainId, module]."
+
+    this.chainId = chainId
+    this.module = module
+  }
+
+  async findByPaginate(pageNumber=1, pageSize=200) {
+    const url = `/${this.module}/findByChainIdAndPaginate`
+    const rst = await http.post(url, {
+      chainId: this.chainId,
+      pageNumber: pageNumber,
+      pageSize: pageSize
+    })
+
+    return rst.data
+  }
+
+  async findByHash(hash) {
+    const url = `/${this.module}/findByChainIdAndHash`
+    const rst = await http.post(url, {
+      chainId: this.chainId,
+      hash: hash
+    })
+
+    return rst.data
+  }
+}

src/plugins/network.js

@@ -3,7 +3,6 @@
 import Vue from 'vue';
 import axios from "axios";
 import md5 from "md5-node"
-import qs from "qs"
 
 axios.defaults.baseURL = process.env.VUE_APP_BASE_URL
 
@@ -20,8 +19,7 @@ axios.interceptors.request.use(
       config.data.auth = authStr
 
       // headers处理
-      config.headers['content-type'] = 'application/x-www-form-urlencoded'
-      config.data = qs.stringify(config.data)
+      config.headers['content-type'] = 'application/json'
 
       return config;
     },

vue.config.js

@@ -6,7 +6,7 @@ module.exports = {
   devServer: {
     proxy: {
       '/api': {
-        target:'http://192.168.101.42:8088',
+        target:'http://192.168.101.42:8888',
         changeOrigin:true,
         pathRewrite:{
           '^/api': ''