安装黄栋云的框架，实现了Chain.vue从后台读取BlockList并显示。

src/i18n/en.js

@@ -35,12 +35,12 @@ export default {
     tableNone: '暂无数据',
   },
   chain: {
-    tableHeader: '区块列表',
+    tableHeader: 'Block List',
     searchHolder: '请输入该输入的',
-    thHeight: '区块高度',
+    thHeight: 'Height',
-    thTimestamp: '时间戳',
+    thTimestamp: 'Timestamp',
-    thType: '区块类型',
+    thType: 'Type',
-    thId: '区块 ID',
+    thHash: 'Hash',
     tableNone: '暂无数据',
   },
 }

src/i18n/zh-CN.js

@@ -40,7 +40,7 @@ export default {
     thHeight: '区块高度',
     thTimestamp: '时间戳',
     thType: '区块类型',
-    thId: '区块 ID',
+    thHash: '区块哈希',
     tableNone: '暂无数据',
   },
 }

src/services/axios.js

@@ -1,4 +1,4 @@
 import axios from 'axios'
 import app from './app'
 
-axios.defaults.baseURL = app.dev ? 'http://localhost:6842/' : 'http://test-sg.bittic.net:6842/'
+axios.defaults.baseURL = app.dev ? 'http://test-sg.bittic.net:6842/api/' : 'http://test-sg.bittic.net:6842/api/'

src/store/modules/chain.js

@@ -1,3 +1,5 @@
+import axios from 'axios'
+
 export default {
   namespaced: true,
 
@@ -7,14 +9,14 @@ export default {
       { text: 'chain.thHeight', value: 'height', align: 'center' },
       { text: 'chain.thTimestamp', value: 'timestamp', align: 'center' },
       { text: 'chain.thType', value: 'type', align: 'center' },
-      { text: 'chain.thId', value: 'id', align: 'center' },
+      { text: 'chain.thHash', value: 'hash', align: 'center' },
     ],
     desserts: [
       {
         height: '1',
         timestamp: '2011-11-20',
         type: '0',
-        id: 'ajlk;gaklewklgjqwejj',
+        hash: 'ajlk;gaklewklgjqwejj',
       },
     ],
     fetching: false,
@@ -34,9 +36,20 @@ export default {
     hideModal(state) {
       state.modal = false
     },
+
+    updateDesserts(state, blockList){
+      state.desserts=blockList
+    }
   },
 
-  actions: {},
+  actions: {
+    async queryBlockList({state, commit}){
+      console.log('current desserts are ')
+      console.log(state.desserts)
+      let result=await axios.post('Block/getBlockList', {config:{order:'height DESC'}})
+      commit('updateDesserts', result.data||[])
+    },
+  },
 
   getters: {},
 }

src/store/modules/owner.js

@@ -47,7 +47,7 @@ export default {
       let account = sessionStorage.getItem('KEY_ACCOUNT')
       try {
         account = JSON.parse(account)
-        const result = await axios.post('api/Account/getBalance', {
+        const result = await axios.post('Account/getBalance', {
           Account: { address: account.address },
         })
         commit('updateBalance', result.data || 0)

src/views/Chain.vue

@@ -36,7 +36,7 @@
             <td>{{ props.item.height }}</td>
             <td>{{ props.item.timestamp }}</td>
             <td>{{ props.item.type }}</td>
-            <td>{{ props.item.id }}</td>
+            <td>{{ props.item.hash }}</td>
           </template>
           <template slot="no-results">
             {{ $t('chain.tableNone') }}
@@ -64,7 +64,7 @@
             <td>{{ props.item.height }}</td>
             <td>{{ props.item.timestamp }}</td>
             <td>{{ props.item.type }}</td>
-            <td>{{ props.item.id }}</td>
+            <td>{{ props.item.hash }}</td>
           </template>
           <template slot="no-results">
             {{ $t('chain.tableNone') }}
@@ -90,12 +90,6 @@ const { mapState, mapGetters, mapActions, mapMutations } = createNamespacedHelpe
 export default {
   name: 'Chain',
 
-  data(){
-    return {
-      blockList:[],
-    }
-  },
-  
   computed: {
     ...mapState([
       'headers',
@@ -108,17 +102,13 @@ export default {
     ...mapGetters([]),
   },
 
-  created: async function(){
+  mounted(){
-    let result=await axios({
+    this.queryBlockList()
-      method:'post',
-      url:location.protocol+'//'+location.hostname+':6842/api/Block/getBlockList',
-      data: {config:{order:'height DESC'}}
-    })
-    this.blockList=result.data||[]
   },
 
   methods: {
     ...mapActions([
+      'queryBlockList'
     ]),
     ...mapMutations([
       'inputFilter',