主页内容

主页内容

• 除了登录接口，必须有服务端授权才能请求数据。
• 使用授权的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