主頁內容

主頁內容

• 除了登錄接口，必須有服務端授權才能請求數據。
• 使用授權的API，必須在請求頭中使用Autorization字段提供token令牌。

通過axios請求攔截器添加token，保證擁有獲取數據的權限。

• 請求函數，到達服務器之前調用函數，給請求頭添加token

//請求函數，到達服務器之前調用函數，給請求頭添加token
axios.interceptors.request.use(config => {
  // console.log(config)
  NProgress.start()
  //爲請求頭對象，添加token驗證的Autorization字段
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 最後必須添加下面這一行
  return config
})

獲取菜單數據

// 獲取所有的菜單
async getMenuList() {
  const { data: res } = await this.$http.get('menus')
  if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
  this.menulist = res.data
  console.log(res)
},

2. 渲染數據：return中定義menulist: []，不等於200報錯誤。

雙重for循環，渲染菜單

1. 一級菜單：menulist
2. 二級菜單:chilren

登錄成功後跳到welcome

1. 添加一個welcome.vue
2. 路由導入welcome組件
3. 以子路由形式嵌套

      redirect: '/welcome',
      children: [
        {
          path: '/welcome',
          component: Welcome
        },

4. home裏添加路由佔位符router-view
5. 重定向到welcome組件，我們在home組件佔位符位置展示了welcome子組件

左側改爲路由菜單

1. ui裏的router爲true，開啓路由跳轉
2. for循環代碼里加 :index="'/' + subItem.path"

路由展示，子路由

      children: [
        {
          path: '/welcome',
          component: Welcome
        },
        {
          path: '/users',
          component: Users
        },

引出列表

1. @click="saveNavState('/' + subItem.path)"
2. 保存鏈接的激活狀態。點擊後多了sessionstorage多了一個acitivepath屬性

    // 保存鏈接激活狀態
    saveNavState(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
    }

3. data定義一個。activePath: ''
4. from綁定 :default-active='activePath'
5. 組件創建的時候，home被創建時，把session值取出來賦值給菜單進行激活。

  created() {
    this.getMenuList()
    this.activePath = window.sessionStorage.getItem('activePath')
  },

獲取用戶數據，獲取api接口

1. 在user.vue裏的created裏調用接口請求數據，

created() {
    this.getUserList()
  },

2. methods寫方法

    async getUserList() {
      const { data: res } = await this.$http.get('users', {
        params: this.queryInfo
      })

3. data中寫數據類型

      //   獲取用戶列表參數對象
      queryInfo: {
        query: '',
        // 當前頁數
        pagenum: 1,
        // 每頁顯示多少條數據
        pagesize: 2

4. 判斷結果

      this.userlist = res.data.users
      this.total = res.data.total

5. 定義數據

      userlist: [],
      total: 0,

分頁

1. ui導入

 <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1,2,3,5,8,10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>

2. element.js逗號導入Vue.use()
3. 監聽頁面改變

    // 監聽pagesize改變
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getUserList()
    },
    // 監聽頁碼值改變
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.queryInfo.pagenum = newPage
      this.getUserList()
    },y'yi