解决访问后端接口跨域问题、登录后端校验问题和添加表格显示功能

src/api/hotel.js

@@ -0,0 +1,8 @@
+import request from '@/utils/request'
+
+export function findHotelListFromApi() {
+  return request({
+    url: '/producer-helloworld/hotel/hotelList',
+    method: 'get'
+  })
+}

src/api/remote-search.js

@@ -1,17 +0,0 @@
-import request from '@/utils/request'
-
-export function searchUser(name) {
-  return request({
-    url: '/vue-element-admin/search/user',
-    method: 'get',
-    params: { name }
-  })
-}
-
-export function transactionList(query) {
-  return request({
-    url: '/vue-element-admin/transaction/list',
-    method: 'get',
-    params: query
-  })
-}

src/api/user.js

@@ -2,7 +2,7 @@ import request from '@/utils/request'
 
 export function login(data) {
   return request({
-    url: '/vue-element-admin/user/login',
+    url: '/producer-helloworld/user/login',
     method: 'post',
     data
   })
@@ -10,7 +10,7 @@ export function login(data) {
 
 export function getInfo(token) {
   return request({
-    url: '/vue-element-admin/user/info',
+    url: '/producer-helloworld/user/info',
     method: 'get',
     params: { token }
   })
@@ -18,7 +18,7 @@ export function getInfo(token) {
 
 export function logout() {
   return request({
-    url: '/vue-element-admin/user/logout',
+    url: '/producer-helloworld/user/logout',
     method: 'post'
   })
 }

src/main.js

@@ -27,10 +27,12 @@ import * as filters from './filters' // global filters
  * Currently MockJs will be used in the production environment,
  * please remove it before going online ! ! !
  */
+/*
 if (process.env.NODE_ENV === 'production') {
   const { mockXHR } = require('../mock')
   mockXHR()
 }
+*/
 
 Vue.use(Element, {
   size: Cookies.get('size') || 'medium' // set element-ui default size

src/router/index.js

@@ -98,6 +98,18 @@ export const constantRoutes = [
  * the routes that need to be dynamically loaded based on user roles
  */
 export const asyncRoutes = [
+  {
+    path: '/hotel',
+    component: Layout,
+    children: [
+      {
+        path: 'hotel',
+        component: () => import('@/views/hotel/index'),
+        name: 'Hotel',
+        meta: { title: '酒店管理', icon: 'hotel' }
+      }
+    ]
+  },
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]

src/utils/request.js

@@ -5,7 +5,8 @@ import { getToken } from '@/utils/auth'
 
 // create an axios instance
 const service = axios.create({
-  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+  baseURL: 'http://localhost:7000', // url = base url + request url
+  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
   // withCredentials: true, // send cookies when cross-domain requests
   timeout: 5000 // request timeout
 })

src/views/hotel/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <el-table :data="hotelList" border>
+    <el-table-column
+      v-for="{ prop, label } in colConfigs"
+      :key="prop"
+      :prop="prop"
+      :label="label"
+    />
+  </el-table>
+</template>
+
+<script>
+import { findHotelListFromApi } from '@/api/hotel'
+export default {
+  data() {
+    this.colConfigs = [
+      { prop: 'id', label: 'id' },
+      { prop: 'hotelName', label: '酒店名' },
+      { prop: 'country', label: '国家' },
+      { prop: 'city', label: '城市' },
+      { prop: 'longitude', label: '经度' },
+      { prop: 'latitude', label: '纬度' },
+      { prop: 'createTime', label: '创建时间' }
+    ]
+    return {
+      hotelList: [] // 变量即使为空也需要先放在return里面
+    }
+  },
+  created() { // 加载view视图时加载数据
+    this.findHotelListMethod()
+  },
+  methods: {
+    findHotelListMethod() {
+      findHotelListFromApi().then(response => {
+        this.hotelList = response.data
+      })
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>