Vue.js+Laravel 前後端分離 API 多使用者多表登陸課題（四）

接續於 = >《Vue.js+Laravel 前後端分離的多表多使用者登陸課題（三）》

填充假資料，完善首頁模版，修改src/views/home/home.vue

<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="老師列表">
        <el-table
                :data="data"
                style="width: 100%">
          <el-table-column
                  prop="name"
                  label="老師名稱">
          </el-table-column>
          <el-table-column
                  fixed="right"
                  label="操作"
                  width="200">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">關注</el-button>
              <el-button type="text" size="small">取消關注</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="學生列表">
        <el-table
                :data="data"
                style="width: 100%">
          <el-table-column
                  prop="name"
                  label="老師名稱">
          </el-table-column>
          <el-table-column
                  fixed="right"
                  label="操作"
                  width="200">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">關注</el-button>
              <el-button type="text" size="small">取消關注</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
  export default {
    name: "home",
    data() {
      return {
        data: [{
          name: '王小虎',
        }, {
          name: '王小虎',
        }, {
          name: '王小虎',
        }, {
          name: '王小虎',
        }]
      }
    },
    methods: {
      /*handleSelect(key, keyPath) {
        console.log(key, keyPath)
      }*/
    }
  }
</script>

<style scoped>
</style>

增加 個人中心 和 退出登陸 的點選觸發事件，修改src/components/AppHeader.vue

<template>
  <el-header>
    <el-row>
      <el-col :span="18">
        <router-link to="/">Logo</router-link>
      </el-col>
      <el-col :span="6">
        <div class="right">
          <el-button type="text" :plain="true">登陸</el-button>
          <el-button type="text" :plain="true">註冊</el-button>
          <el-dropdown>
            <el-button :plain="true">
              <i class="el-icon-user-solid"></i>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="logout">個人中心</el-dropdown-item>
              <el-dropdown-item @click.native="logout">退出登陸</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
  export default {
    name: 'AppHeader',
    data() {
      return {
      }
    },
    methods: {
      logout ()  {
      },
    },
    computed: {
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-header {
    border-bottom: 1px solid #e6e6e6;
    height: 60px;
    line-height:60px;
  }
  .el-button {
    border:none;
  }
  .right {
    float:right;
  }
  a {
    text-decoration:none;
  }
</style> 

首頁模版更新為

實現學生個人中心頁面src/views/personal-center/student.vue

<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="個人資訊">
        <el-row class="user-row">
          <el-col :span="2">
            <strong>姓名</strong>
          </el-col>
          <el-col :span="22">
            test
          </el-col>
        </el-row>
        <el-row class="user-row">
          <el-col :span="2">
            <strong>使用者名稱</strong>
          </el-col>
          <el-col :span="22">
            username
          </el-col>
        </el-row>
        <el-row class="user-row">
          <el-col :span="2">
            <strong>性別</strong>
          </el-col>
          <el-col :span="22">
            男
          </el-col>
        </el-row>
        <el-row class="user-row">
          <el-col :span="2">
            <strong>Line</strong>
          </el-col>
          <el-col :span="22">
            1522100512
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="關注的老師">
        <div v-for="teacher in teachers" :key="teacher.id">
          <el-row>
            <el-col>
              {{ teacher.name }}
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    name: "studentPersonalCenter",
    data() {
      return {
        teachers: [
          {
            id: 1,
            name: "賈伯斯",
          },
          {
            id: 2,
            name: "雷軍",
          },
        ]
      }
    },
  }
</script>

<style scoped>
  .user-row {
    margin-bottom: 15px;
  }
</style> 

實現老師的個人中心頁面src/views/personal-center/teacher.vue

<template>
  <el-tabs type="border-card">
    <el-tab-pane label="個人資訊">
      <el-row class="user-row">
        <el-col :span="2">
          <strong>姓名</strong>
        </el-col>
        <el-col :span="22">
          test
        </el-col>
      </el-row>
      <el-row class="user-row">
        <el-col :span="2">
          <strong>使用者名稱</strong>
        </el-col>
        <el-col :span="22">
          username
        </el-col>
      </el-row>
      <el-row class="user-row">
        <el-col :span="2">
          <strong>性別</strong>
        </el-col>
        <el-col :span="22">
          男
        </el-col>
      </el-row>
      <el-row class="user-row">
        <el-col :span="2">
          <strong>Line</strong>
        </el-col>
        <el-col :span="22">
          1522100512
        </el-col>
      </el-row>
    </el-tab-pane>
    <el-tab-pane label="關注我的學生">
      <div v-for="student in students" :key="student.id">
        <el-row>
          <el-col>
            {{ student.name }}
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  export default {
    name: "teacherPersonalCenter",
    data() {
      return {
        students: [
          {
            id: 1,
            name: "賈伯斯",
          },
          {
            id: 2,
            name: "雷軍",
          },
        ]
      }
    },
  }
</script>

<style scoped>
  .user-row {
    margin-bottom: 15px;
  }
</style> 

引入權鑑路由src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import beforeEach from './beforeEach'
//引入鑑權路由
import auth from '../views/auth/routes' 
import home from '../views/home/routes'
import personalCenter from '../views/personal-center/routes'

Vue.use(Router)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    ...auth, ...home, ...personalCenter
  ]
})

//鉤子函式
router.beforeEach(beforeEach) 

export default router

完成個人中心頁面路由src/views/personal-center/routes.js

export default [
  {
    path: '/personal-center/student',
    name: 'studentPersonalCenter',
    component: () => import('./student')
  },
  {
    path: '/personal-center/teacher',
    name: 'teacherPersonalCenter',
    component: () => import('./teacher')
  }
]

最終顯示為

增添一個點選事件，完成登入路由的跳轉

<template>
  <el-header>
    <el-row>
      <el-col :span="18">
        <router-link to="/">Logo</router-link>
      </el-col>
      <el-col :span="6">
        <div class="right">
          <el-button type="text" :plain="true" @click.native="login">登陸</el-button>
          <el-button type="text" :plain="true" @click.native="register">註冊</el-button>
          <el-dropdown>
            <el-button :plain="true">
              <i class="el-icon-user-solid"></i>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="logout">個人中心</el-dropdown-item>
              <el-dropdown-item @click.native="logout">退出登陸</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
  </el-header>
</template>

<script>
export default {
  name: 'AppHeader',
  data() {
    return {
    }
  },
  methods: {
    //push 是路由的一個方法，用來跳轉到一個新的地址
    login () {
      this.$router.push({name: 'login'})
    },
    register () {
      this.$router.push({name: 'login'})
    },
    logout ()  {
    },
  },
  computed: {
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-header {
  border-bottom: 1px solid #e6e6e6;
  height: 60px;
  line-height:60px;
}
.el-button {
  border:none;
}
.right {
  float:right;
}
a {
  text-decoration:none;
}
</style> 

新建註冊頁面，以及完成相應的路由跳轉src/views/auth/register.vue

<template>
  <el-card>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="使用者名稱">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密碼">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="確認密碼">
        <el-input v-model="form.passwordConfirmation" type="password"></el-input>
      </el-form-item>
      <el-form-item label="型別">
        <el-radio v-model="form.provider"  label="student">學生</el-radio>
        <el-radio v-model="form.provider" label="teacher">教師</el-radio>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">註冊</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { login } from "../../api/login"
export default {
    name: "register",
    components: {
    },
    data() {
      return {
        form: {
          username:"",
          password:"",
          passwordConfirmation: "",
          provider: "student",
        }
      }
    },
    methods: {
        onSubmit() {
            login({username: this.form.username, password: this.form.password, provider: this.form.password}).then(response => {
                console.log(response)
            })
        }
    }
}
</script>

<style scoped>

</style> 

src/views/auth/routes.js

export default [
  // 登陸路由
  {
    path: '/auth/login',
    name: 'login',
    component: () => import('./login')
  },
  //註冊路由
  {
    path: '/auth/register',
    name: 'register',
    component: () => import('./register')
  }
]

最後重新整理頁面，得到

本作品採用《CC 協議》，轉載必須註明作者和本文連結