Vue.js
话题列表 社区 Wiki 优质外文 招聘求职 Vue.js 实战教程 社区文档
登录
注册

Vue.js+Laravel 前后端分离 API 多用户多表登陆课题（四）

Sloth 的个人博客 / 146 / 0 / 创建于 4年前 / 更新于 4年前

接续于 = >《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>

首页模版更新为

Vue.js+Laravel 前后端分离 API 多用户多表登陆课题（四）

实现学生个人中心页面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')
  }
]

最终显示为

Vue.js+Laravel 前后端分离 API 多用户多表登陆课题（四）

Vue.js+Laravel 前后端分离 API 多用户多表登陆课题（四）
增添一个点击事件，完成登录路由的跳转

<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>

Vue.js+Laravel 前后端分离 API 多用户多表登陆课题（四）
新建注册页面，以及完成相应的路由跳转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')
  }
]

最后刷新页面，得到

Vue.js+Laravel 前后端分离 API 多用户多表登陆课题（四）

Vue.js laravel 前后端分离 auth api
本作品采用《CC 协议》，转载必须注明作者和本文链接
一直在学习，从未停止，终身学习。
Sloth
课程读者 57 声望
努力迈向全栈技术的大门
讨论数量: 0
排序：
时间 投票
(=￣ω￣=)··· 暂无内容！

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！
支持 MD 帮助
Sloth
未填写
文章
11
粉丝
11
喜欢
19
收藏
17
排名：950
访问：6194
私信
所有博文
文章归档
1 篇 2020 年 8 月 3 篇 2020 年 7 月 1 篇 2020 年 6 月 5 篇 2020 年 2 月 1 篇 2019 年 11 月
最新文章 最受欢迎
3年前 Vue.js双大括号渲染不认短横杆 - 的变量，被拆分了，怎么解决？ 3年前 公司局域网服务器是Ubantu 18.04部署了laravel api无法访问 3年前 [求助] VSCode 识别不了 Homestead 的 PHP 吗？ 3年前 求推荐 PHP 开源的网上商城，收费授权的也可以，适合简单二次开发的。 3年前 买了课程大半年，今天终于可以交作业了，因为明天要上战场了。
5 Laravel 多用户多表登陆的第三方扩展包 passport-multiauth（二） 4 Vue.js+Laravel 前后端分离的多表多用户登陆课题（三） 3 买了课程大半年，今天终于可以交作业了，因为明天要上战场了。 3 Laravel + Vue.js 前后端分离之新手入门级的开源项目（最终篇） 2 面试官 CTO 给的一道基于 Laravel 多用户多表登陆 API 技术课题（一）
博客标签
auth
1
 api
2
 laravel
2
 passport
1
 vuex
1
 laravel-cors
1
 跨域
1
 Vue.js
1
 前后端分离
2
 多用户多表登陆
2
 Vue Router
1
 Vue CLI
1
社区赞助商
成为赞助商

关于 LearnKu

LearnKu 是终身编程者的修道场
做最专业、严肃的技术论坛
LearnKu 诞生的故事

资源推荐

  • 《社区使用指南》
  • 《文档撰写指南》
  • 《LearnKu 社区规范》
  • 《提问的智慧》

    • 服务提供商

    其他信息

  • 成为版主
  • 所有测验
  • 联系站长（反馈建议）

    • 粤ICP备18099781号-6 | 粤公网安备 44030502004330号 | 违法和不良信息举报

    由 Summer 设计和编码 ❤

    请登录

    内容举报
    匿名举报，为防止滥用，仅管理员可见举报者。

    我要举报该，理由是：

    取消