專案總覽

index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Panda from '@/components/panda'
import Spotslist from '@/components/spotslist'
import Hotellist from '@/components/hotellist'
import Spots from '@/components/spots'
import Hotel from '@/components/hotel'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: '首頁',
      component: Panda
    },
    {
      path: '/HelloWorld',
      name: '測試頁面',
      component: HelloWorld
    },
    {
      path: '/spotslist',
      name: '景點詳情',
      component: Spotslist
    },
    {
      path: '/hotellist/:id',
      name: '酒店詳情',
      component: Hotellist
    },
    {
      path: '/spots',
      name: '景點詳情',
      component: Spots
    },
    {
      path: '/hotel',
      name: '酒店詳情',
      component: Hotel
    }
  ]
})

validate.js

// 判斷是否為空
export const isDataValid = (data) => {
  if (data != null && data !== '' && data !== 'undefined' && data !== null && data != undefined) {
    return true
  }
  return false
  }
export const config = {
  dataserver: 'http://127.0.0.1:8081/',
  imgserver: 'http://192.168.1.100/'
}

panda.vue

一：使用資料

script>
import {isDataValid,config} from '../util/validate'
import {service} from '../util/service'
import axios from 'axios'

export default {
  name: 'panda',   //是哪個頁面
  data () {   //頁面需要使用的資料
    return {
    inputValue: '',
      username: '張三',
      password: '123',
       arealist:  [{areaid: '', areaname: '', areastate: '', areasort: ''} ],
      spotlist:  [{spotsid: '',spotname: '',spotsaddr: '',spotsaddr2: '',spotsopentime: '',
        spotsoneworlds: '',spotsimg: '',spotsstate: '',spotsfirst: '',spotshot: '',
        spotsareaid: '',spotsareaname: '',spotsdesc: ''}],   //這個寫出來只是方便閱讀
      typelist: [{htid: '',htname: '',htstate: '',htsort: ''}],
      hotellist: [{}],
      imgserver: config.imgserver
    }
  },

二：呼叫方法（可連線資料介面）

 methods: {   //方法
 getIndex (index) {
      // console.log(index)
      this.curIndex = index
    },
    product (areaid) {
      let that = this
      axios.get(config.dataserver + 'spots/getdatabyid?id=' + areaid).then(res => {
        that.spotlist = res.data
      })
    },
    products(){
      let that=this
      axios.get(config.dataserver + 'spots/getdata').then(res =>{
        that.spotlist=res.data
      })
    },

三：（資料介面）

mounted: function () {   //資料介面
    let that = this
    axios.get(config.dataserver + 'sys/area/getdata').then(res =>{
      that.arealist = res.data
      console.log(res.data)  //顯示得到的資料
    })

    axios.get(config.dataserver + 'spots/getdata').then(res =>{
      that.spotlist = res.data
      console.log(res.data)
    })

四：使用資料

  <li v-for="item in arealist"  @click="product(item.areaid)">
                    {{item.areaname}}
                  </li>