后台管理系统2——登录、退出、注册功能、个人中心页面

1、登录功能

1.1 页面内容的修改

由于刚开始直接是进行编写主要的页面，在进行登录页面的编写时，会将登录页面显示在内容区域，而不是单独呈现出一个页面，所以为了解决这个问题，就将原来的header sider 组件不直接放到App.vue里面，在App.vue组件中只放入router-view,此时页面只显示内容。
存在的问题： 此时header 和 sider 部分就不能显示在页面上了。
解决办法： 在 src下创建一个Layout 文件夹，里面创建一个 Layout.vue文件，在此文件中，将header 和 sider 进行引入。具体的代码如下：

<template>
  <div>
    <Header></Header>
    <!-- 主题部分-->
    <div style="display: flex; width: 100%">
      <!-- 左侧——侧边栏 -->
      <Aside></Aside>
      <!-- 右侧——内容区域-->
      <router-view style="flex: 1" />
    </div>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Aside from "../components/Aside";
export default {
     
  name: "Layout",
  components: {
     
    Header,
    Aside,
  },
};
</script>

1.2 路由的实现

在router文件夹的index.js进行代码的编写，此时由于将原来的部分分为两部分，所以在路由设置的时候，分为登录和主页面，登录页面是以**/login**进入，而主页面则是以默认的 / 或者 /home 的形式进入。

import {
    createRouter, createWebHistory } from 'vue-router'
import Layout from '../layout/Layout.vue'

// 内容区域的路由
const routes = [
  // 默认路由页面,主体区域
  {
   
    // 头部加上侧边栏
    path: '/',
    name: 'Layout',
    // 重定向功能，当访问 / 时，会自动的访问 /home 的页面
    redirect: '/home',
    component: Layout,
    // 进行路由的嵌套 主体区域
    children:[
      {
   
        path: '/home',
        name: 'Home',
        component: ()=>import("@/views/Home"),
      }
    ]
  },
  {
   
    path: '/login',
    name: 'Login',
    component: ()=>import("@/views/Login")
  },
]

const router = createRouter({
   
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

1.3 登录页面的设计

登录页面的位置在 views文件夹下的login.vue里面，主要包括标题，文本框，密码框，登录按钮，具体的样式使用 element-plus 中的样式，具体代码如下：

<template>
  <div class="login">
    <div style="width: 400px; margin: 150px auto">
      <div
        style="
          color: rgb(71, 80, 156);
          font-size: 30px;
          text-align: center;
          padding: 30px 0;
        "
      >
        欢迎登录
      </div>
      <el-form :model="form">
        <el-form-item>
          <el-input v-model="form.username" prefix-icon="user"> </el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.password" prefix-icon="lock" show-password />
        </el-form-item>
        <el-form-item>
          <el-button style="width: 100%" type="primary">登 录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
     
  name: "Login",
  data() {
     
    return {
     
      form: {
     },
    };
  },
};
</script>

<style>
.login {
     
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(
    -225deg,
    #69eacb 0%,
    #eaccf8 48%,
    #6654f1 100%
  );
  overflow: hidden;
}
</style>

1.4 登录逻辑实现

此时只是简单的页面，具体的登录逻辑： 通过给登录按钮绑定一个点击事件login，然后在methods中进行发送请求，判断当前请求的是否正确。
需要将原先定义的request文件进行引入

import request from "../utils/request";

methods: {
   
    login() {
   
      // 通过 post 请求进行发送
     // 把表单的数据发送给后台，后台根据用户名和密码进行验证，验证通过，登录成功，否则，将错误信息进行返回
      request.post("/user/login",this.form).then((res) => {
   
        console.log(res);
        if (res.code === "0") {
   
          this.$message({
   
            type: "success",
            message: "登录成功",
          });
          // 登录成功之后要进行页面的跳转
          this.$router.push("/")
        } else {
   
          this.$message({
   
            type: "error",
            message: res.msg,
          });
        }
      });
    },
  },

1.5 后台的实现

登录代码：

 // 登录接口
    @PostMapping("/login")
    // Result<?>表示接收任何类型的数据
    // 使用user 进行接收 ，因为 user中包含 username 和 password
    public Result<?> login(@RequestBody User user){
   
    	// 查询数据库中用户名和密码
        User res = userMapper.selectOne(Wrappers.<User>lambdaQuery().eq(User::getUsername,user.getUsername())