基于vue做一个管理员登陆界面和普通用户登陆界前端输入账户密码发送到后端，后端先查询数据库判单账户密码是否存在且正确，如果正确再查询数据库寻找职位，根据职位不同向前端发送不同数据，前端再根据接收到的数据进行不同的页面跳转，用springboot和vue实现

在Vue.js中创建管理员和普通用户登录界面，你可以按照以下步骤进行：

1. **前端设计**：
- 使用Vue的组件化思想，为管理员和普通用户的登录界面分别创建单独的组件(`AdminLogin.vue` 和 `UserLogin.vue`)。
- 在这两个组件中，添加表单元素（如`username`、`password`输入框），并设置提交按钮事件，当点击时触发`login`方法。

<!-- AdminLogin.vue -->
<template>
  <div>
    <!-- 表单内容... -->
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  methods: {
    login() {
      this.$emit('login', { adminUsername: this.username, adminPassword: this.password });
    }
  }
}
</script>

<!-- UserLogin.vue -->
同样的结构，替换`admin`为`user`，并将数据传递给`userLogin`方法。

2. **父子组件通信**：
- 使用`v-on`监听`login`事件，并将用户名和密码作为参数传给它。

   <ChildComponent @login="handleLogin"></ChildComponent>

- 在父组件中处理登录事件：

   methods: {
     handleLogin({ username, password }) {
       // 发送请求到后端...
     }
   }

3. **后端处理**：
- 创建SpringBoot API来接收登录请求，使用JWT或其他认证机制验证用户名和密码。
- 如果验证成功，根据用户名查询对应的权限或职位信息，然后返回不同数据（例如权限标识或特定用户信息）。

4. **响应式数据**：
- 后端返回的数据通过axios等库获取，在父组件中接收到数据后，使用Vuex存储状态，以便在整个应用中共享。

5. **路由管理**：
- 根据后端返回的不同数据，使用`vue-router`做条件性的页面跳转。例如：

   if (isAdmin) {
     router.push('/admin/dashboard');
   } else {
     router.push('/user/dashboard');
   }