fix

front_end/src/store/getters.js

@@ -3,6 +3,8 @@ const getters = {
   token: state => state.user.token,
   userId: state => state.user.userId,
   userInfo: state => state.user.userInfo,
+  hotelListLoading: state => state.hotel.hotelListLoading,
+  hotelList: state => state.hotel.hotelList
   }
   
   export default getters

front_end/src/store/modules/hotel.js

@@ -1,15 +1,69 @@
+import { message } from 'ant-design-vue'
+import store from '@/store'
 import {
     getHotelsAPI
 } from '@/api/hotel'
+
 const hotel = {
     state: {
+        hotelList: {
+
+        },
+        hotelListParams: {
+            pageNo: 0,
+            pageSize: 12
+        },
+        hotelListLoading: true,
+        currentHotelId: '',
+        currentHotelInfo: {
 
+        }
+    },
+    mutations: {
+        set_hotelList: function(state, data) {
+            state.hotelList = data
+        },
+        set_hotelListParams: function(state, data) {
+            state.hotelListParams = {
+                ...state.hotelListParams,
+                ...data
+            }
+        },
+        set_hotelListLoading: function(state, data) {
+            state.hotelListLoading = data
+        },
+        set_currenhotelId: function(state, data) {
+            state.currentHotelId = data
+        },
+        set_currenhotelInfo: function(state, data) {
+            state.currentHotelInfo = {
+                ...state.currentHotelInfo,
+                ...data
+            }
+        },
     },
+
     actions: {
-        getHotelList: async({ state }) => {
+        getHotelList: async({commit, state}) => {
             const res = await getHotelsAPI()
-            console.log(res)
-        }
+            if(res){
+                commit('set_hotelList', res)
+                commit('set_hotelListLoading', false)
+                console.log(state.hotelList)
+            }
+        },
+        // getByHotelId: async({commit, state}) => {
+        //     const res = await getByHotelIdAPI({
+        //     hotelId: state.currenhotelId
+        //     })
+        //     if(res){
+        //         commit('set_currenhotelInfo', res)
+        //         commit('set_rateParams',{
+        //             rate: state.currenhotelInfo.myRate/2
+        //         })
+        //     }
+        // }
     }
 }
+
 export default hotel

front_end/src/store/modules/user.js

@@ -46,7 +46,6 @@ const user = {
     actions: {
         login: async ({ commit }, userData) => {
             const res = await loginAPI(userData)
-            console.log(res)
             if(res){
                 setToken(res)
                 // Vue.ls.set('ACCESS_TOKEN', res, 7 * 24 * 60 * 60 * 1000)

front_end/src/utils/request.js

@@ -12,66 +12,58 @@ const service = axios.create({
   withCredentials: true
 })
 
-//  const err = (error) => { 
-//   if (error.response) {
-//     const data = error.response.data
-//     const token = Vue.ls.get('ACCESS_TOKEN')
-//     if (error.response.status === 403) {
-//       notification.error({
-//         message: 'Forbidden',
-//         description: data.message
-//       })
-//     }
-//     if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
-//       notification.error({
-//         message: 'Unauthorized',
-//         description: 'Authorization verification failed'
-//       })
-//       if (token) {
-//         store.dispatch('Logout').then(() => {
-//           setTimeout(() => {
-//             window.location.reload()
-//           }, 1500)
-//         })
-//       }
-//     }
-//   }
-//   return Promise.reject(error)
-//  }
+ const err = (error) => { 
+  if (error.response) {
+    const data = error.response.data
+    const token = Vue.ls.get('ACCESS_TOKEN')
+    if (error.response.status === 403) {
+      notification.error({
+        message: 'Forbidden',
+        description: data.message
+      })
+    }
+    if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
+      notification.error({
+        message: 'Unauthorized',
+        description: 'Authorization verification failed'
+      })
+      if (token) {
+        store.dispatch('Logout').then(() => {
+          setTimeout(() => {
+            window.location.reload()
+          }, 1500)
+        })
+      }
+    }
+  }
+  return Promise.reject(error)
+ }
 
 
-// //request incerceptor
-// service.interceptors.request.use((config) => {
-//   if (store.getters.token) {
-//     config.headers['Authorization'] = getToken()
-//   }
-//   const requestConfig = {
-//     ...config,
-//     url: `${config.url}`,
-//   }
-//   return requestConfig
-// }, err)
+//request incerceptor
+service.interceptors.request.use((config) => {
+  if (store.getters.token) {
+    config.headers['Authorization'] = getToken()
+  }
+  const requestConfig = {
+    ...config,
+    url: `${config.url}`,
+  }
+  return requestConfig
+}, err)
 
-// service.interceptors.response.use((response) => {
-//   switch (response.status) {
-//     case 200:
-//       switch (response.data.returnCode) {
-//         case 200:
-//           return response.data.data
-//         default:
-//           if(response.data.message){
-//             message.error(response.data.message)
-//           }
-//       }
-//       break
-//     case 404:
-//       return false
-//     default:
-//       if(response.data.message){
-//         message.error(response.data.message)
-//       }
-//   }
-// })
+service.interceptors.response.use((response) => {
+  switch (response.status) {
+    case 200:
+      return response.data
+    case 404:
+      return false
+    default:
+      if(response.data.message){
+        message.error(response.data.message)
+      }
+  }
+})
 
 const installer = {
   vm: {},

front_end/src/views/hotel/components/hotelCard.vue

@@ -0,0 +1,53 @@
+<template>
+  <a-card hoverable class="hotelCard ant-col-xs-7 ant-col-lg-5 ant-col-xxl-3">
+    <img
+      alt="example"
+      src="@/assets/cover.jpeg"
+      slot="cover"
+      referrerPolicy="no-referrer"
+    />
+    <a-tooltip :title="hotel.title" placement="top">
+      <a-card-meta :title="hotel.name">
+      <template slot="description">
+        <a-rate style="font-size: 15px" :value="hotel.rate" disabled allowHalf/> {{hotel.rate}}分
+      </template>
+    </a-card-meta>
+    </a-tooltip>
+  </a-card>
+</template>
+<script>
+export default {
+  name:'',
+  props: {
+    hotel: {}
+  },
+  data() {
+    return{
+
+    }
+  },
+}
+</script>
+<style scoped lang="less">
+    .hotelCard {
+        margin: 10px 10px;
+        min-width: 180px;
+        max-height: 350px;
+        img {
+          height: 250px;
+        }
+    }
+</style>
+
+<style lang="less">
+.hotelCard{
+  .ant-card-body{
+    padding: 12px
+  }
+}
+
+.ant-card-hoverable:hover {
+  box-shadow: 0 2px 8px rgba(0,0,0,0.4)
+}
+
+</style>

front_end/src/views/hotel/hotelList.vue

@@ -1,25 +1,85 @@
 <template>
-    <div>hotelList</div>
+  <div class="hotelList">
+    <a-divider></a-divider>
+    <a-layout>
+        <a-layout-content style="min-width: 800px">
+          <a-spin :spinning="hotelListLoading">
+            <div class="card-wrapper">
+            <HotelCard :hotel="item" v-for="item in hotelList" :key="item.index" @click.native="jumpToDetails(item.id)"></HotelCard>
+              <div v-for="item in emptyBox" :key="item.name" class="emptyBox ant-col-xs-8 ant-col-lg-6 ant-col-xxl-4">
+              </div>
+            <a-pagination showQuickJumper :total="hotelList.totalElements" :defaultCurrent="1" @change="pageChange"></a-pagination>
+          </div>
+          </a-spin>
+      </a-layout-content>
+    </a-layout>
+  </div>
 </template>
 <script>
-import { mapActions } from 'vuex'
+import HotelCard from './components/hotelCard'
+import { mapGetters, mapActions, mapMutations } from 'vuex'
+
 export default {
-    name: 'hotelList',
-    data() {
-        return {
+  name: 'home',
+  components: {
+    HotelCard
+  },
+  data(){
+    return{
+      emptyBox: [{ name: 'box1' }, { name: 'box2'}, {name: 'box3'}, {name:'box4'}]
+    }
+  },
+  async mounted() {
+    await this.getHotelList()
+    console.log(this.hotelList)
+  },
+  computed: {
+    ...mapGetters([
+      'hotelList',
+      'hotelListLoading'
+    ])
+  },
+  methods: {
+    ...mapMutations([
+      'set_hotelListParams',
+      'set_hotelListLoading'
+    ]),
+    ...mapActions([
+      'getHotelList'
+    ]),
 
-        }
+    pageChange(page, pageSize) {
+      const data = {
+        pageNo: page - 1
+      }
+      this.set_hotelListParams(data)
+      this.set_hotelListLoading(true)
+      this.getHotelList()
     },
-    mounted(){
-        this.getHotelList()
-    },
-    methods: {
-        ...mapActions([
-            'getHotelList'
-        ])
+    jumpToDetails(id){
+      this.$router.push({ name: 'hotelDetail', params: { hotelId: id }})
     }
+  }
 }
 </script>
-<style scoped>
-
+<style scoped lang="less">
+  .hotelList {
+    text-align: center;
+    .emptyBox {
+      height: 0;
+      margin: 10px 20px
+    }
+    .card-wrapper{
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+      flex-grow: 3;
+      min-height: 800px
+    }
+    .card-wrapper .card-item {
+      margin: 30px;
+      position: relative;
+      height: 188px;
+    }
+  }
 </style>

front_end/src/views/login.vue

@@ -206,7 +206,7 @@ export default {
         if(!err){
           this.loginLoading = true
           const data = {
-            username: this.form.getFieldValue("username"),
+            email: this.form.getFieldValue("username"),
             password: this.form.getFieldValue("password")
           }
           await this.login(data).then(()=>{

front_end/src/views/user/info.vue

@@ -81,39 +81,10 @@
                     </a-form-item>
                 </a-form>
             </a-tab-pane>
-            <a-tab-pane tab="我发表的评论" key="2">
-                <div class="chart">
-                    <bar-chart type="bar" title="评论数柱状图"></bar-chart>
-                    <bar-chart type="line" title="评论数折线图"></bar-chart>
-                </div>
-                <a-divider></a-divider>
-                <h1>详细数据</h1>
-                <a-table
-                    rowKey="{record => record.id}"
-                    :loading="postLoading"
-                    :columns="postCommentsColumns"
-                    :dataSource="postCommentsList.content"
-                    :pagination="{ pageSize: 10 }"
-                >
+            <a-tab-pane tab="我的订单" key="2">
                 
-                    <a slot="movieName" slot-scope="record">{{ record }}</a>
-                    <span slot="directors" slot-scope="record">{{ record.join(',') }}</span>
-                </a-table>
-            </a-tab-pane>
-            <a-tab-pane tab="我收到的评论" key="3">
-                <a-table
-                    rowKey="{record => record.id}"
-                    :loading="receiveLoading"
-                    :columns="receiveCommentsColumns"
-                    :dataSource="receiveCommentsList.content"
-                    :pagination="{ pageSize: 10 }"
-                >
-                    <a slot="movieName" slot-scope="record">{{ record }}</a>
-                    <span slot="directors" slot-scope="record">{{ record.join(',') }}</span>
-                </a-table>
             </a-tab-pane>
         </a-tabs>
-        
     </div>
 </template>
 <script>