美食杰项目 -- 登录注册（三）

已于 2022-11-23 10:55:59 修改
阅读量638 收藏 2
点赞数 2
分类专栏： 美食杰项目 文章标签： 美食 vue.js javascript
于 2022-11-22 08:52:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62897746/article/details/127975659
版权
本文介绍如何使用Element-UI在美食杰项目中实现登录注册功能，包括账号密码双向绑定、登录验证及路由跳转等关键步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

前言：

本文给大家讲解，美食杰项目中 登录注册实现的效果，和具体代码。

具体实现思路：

  1. 引入element-ui中的登录和分页功能实现方法
  2. 账号密码进行双向绑定
  3. 登录和注册把账号密码传递过去
  4. 成功把token报错至本地，失败则返回失败的结果
  5. 点击清空input框
  6. 引入当前的vuex，并写出所有路由跳转
  7. 使用全局导航守卫和meta字段进行登录验证判断
  8. 判断跳转的路由是否需要登录，已登录则判断是否获取到用户信息
  9. 未获取则删除存储至本地的 token，跳转至登录页
  10. 判断是否有 token 值，没有跳转至登录
  11. 判断已登录，并且跳转至登录页，跳转至首页

步骤：

1. 展示美食杰登录注册效果

在这里插入图片描述

2. 引入element-ui

点击跳转至 element-ui 中 Tabs 标签页使用方法：https://element.eleme.cn/#/zh-CN/component/tabs

点击跳转至 element-ui 中 Form 表单页使用方法：https://element.eleme.cn/#/zh-CN/component/form

3. 代码

  • 路由跳转页（router）
import Vue from 'vue'
import VueRouter from 'vue-router'
// import home from '@/components/home.vue'
import { userInfo } from '@/connector/api'
// 引入当前的vuex
import store from '@/store/index'
Vue.use(VueRouter)

const routes = [    
  {
    path: '/',
    name: 'home',
    title: '首页',
    component: ()=>import('@/components/home.vue'),
    children: [
      {
        path: '',
        name: 'page',
        alias: 'page',
        title: '首页',
        component: ()=>import('@/views/home-page/index'),
      },
      {
        path: 'recipes',
        name: 'recipes',
        title: '菜谱大全',
        component: () => import('@/views/Daquan-recipes/index'),
      },
      {
        path: 'login',
        name: 'login',
        title: '登录',
        component: ()=>import('@/views/login/index'),
      },
      {
        path: 'DishesInformation',
        name: 'DishesInformation',
        title: '菜谱详情',
        component: () => import('@/views/DishesInformation/index'),
      },
      {
        path: 'MyHomepage',
        name: 'MyHomepage',
        title: '个人主页',
        redirect: { name: 'works' },
        component: () => import('@/views/MyHomepage/index'),
        meta:{
          IsLogin: true,
        },
        children: [
          {
            path: 'works',
            name: 'works',
            title: '作品',
            component: () => import('@/views/MyHomepage/roll'),
            meta: { login: true },
          },
          {
            path: 'collection',
            name: 'collection',
            title: '收藏',
            component: () => import('@/views/MyHomepage/roll'),
            meta: { login: true },
          },
          {
            path: 'fans',
            name: 'fans',
            title: '粉丝',
            component: () => import('@/views/MyHomepage/bean'),
            meta: { login: true },
          },
          {
            path: 'following',
            name: 'following',
            title: '关注',
            component: () => import('@/views/MyHomepage/bean'),
            meta: { login: true },
          },
        ]
      },
      {
        path: 'PublishRecipes',
        name: 'PublishRecipes',
        title: '发布菜谱',
        component: () => import('@/views/PublishRecipes/PublishRecipes'),
        // 路由元信息，加上可以用来判断是否需要登录
        meta:{
          IsLogin: true,
        }
      },
      {
        path: 'personal',
        name: 'personal',
        title: '编辑个人资料',
        component: () => import('@/views/personal/index'),
      }
    ]
  },
  
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// meta为路由元信息，加上可以用来判断是否需要登录
// 路由守卫
router.beforeEach(async (to, from, next) => {
  // 获取存储至本地的 token 验证
  let token = localStorage.getItem('token')
  // 判断是否有值（!!token 返回 true 和 false）
  let islogin = !!token
  // 获取用户信息
  let user = await userInfo()
  // 存储至 vuex
  store.commit('userInfo', user.data)
  // 判断跳转的路由是否需要登录（meta 路由元信息）
  if (to.matched.some((item) => item.meta.IsLogin)) {
    // 判断是否获取到用户信息
    if (user.error == 400) {
      // 删除存储至本地的 token
      localStorage.removeItem('token')
      // 跳转至登录页
      window.location.href = '/login'
    } else {
      // 判断是否有 token 值
      if (islogin) {
        next()
      } else {
        // 没有跳转至登录
        window.location.href = '/login'
      }
      
    }
  } else {
    // 判断已登录，并且跳转至登录页
    if (islogin && to.path === '/login') {
      // 跳转至首页
      window.location.href = '/'
      return
    }
    next()
  }
})

export default router
  • 登录注册的根页面

登录注册页大致相同，只需要把接口进行改变，其他的都可以直接复制过去

<template>
  <div class="login-page">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="登录" name="login">
        <Login></Login>
      </el-tab-pane>
      <el-tab-pane label="注册" name="register">
        <Register></Register>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import Login from "./login.vue";
import Register from "./register";
export default {
  components: { Login, Register },
  data() {
    return {
      // 进入时显示的页面
      activeName: "login",
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.login-page {
  width: 500px;
  background-color: #fff;
  margin: 20px auto 0;
  box-shadow: 0 0 25px #cac6c6;
  border-radius: 10px;
}
</style>
  • 登录页
<template>
  <div class="login-section">
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="formLabelAlign"
      ref="ruleFroms"
    >
      <el-form-item label="用户名">
        <el-input v-model="formLabelAlign.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formLabelAlign.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add('ruleFroms')">提交</el-button>
        <el-button @click="reset('ruleFroms')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { login } from "@/connector/api";
export default {
  data() {
    return {
      formLabelAlign: {
        // 用户名
        username: "",
        // 密码
        password: "",
      },
    };
  },
  methods: {
    add() {
      // 用户名和密码不能为空
      if (
        this.formLabelAlign.username !== "" &&
        this.formLabelAlign.password !== ""
      ) {
        // 登录接口
        login({
          name: this.formLabelAlign.username,
          password: this.formLabelAlign.password,
        }).then((data) => {
          // console.log(data);
          // 判断是否登录成功
          if (data.code === 0) {
            // token 存储至本地
            localStorage.setItem("token", data.data.token);
            // 跳转至首页
            window.location.href = "/";
          } else {
            // 登录失败则返回失败问题
            this.$message({
              message: data.mes,
              type: "warning",
            });
          }
        });
      } else {
        this.$message({
          message: "账号或密码不能为空！",
          type: "warning",
        });
      }
    },
    // 清空 input 框
    reset() {
      this.formLabelAlign.username = "";
      this.formLabelAlign.password = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.login-section {
  padding: 0 20px;
}
</style>
  • 注册页
<template>
  <div class="login-section">
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="formLabelAlign"
      ref="ruleFroms"
    >
      <el-form-item label="用户名">
        <el-input v-model="formLabelAlign.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formLabelAlign.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add">提交</el-button>
        <el-button @click="reset('ruleFroms')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { register } from "@/connector/api";
export default {
  data() {
    return {
      formLabelAlign: {
        // 用户名
        username: "",
        // 密码
        password: "",
      },
    };
  },
  methods: {
    add() {
      // 用户名和密码不能为空
      if (
        this.formLabelAlign.username !== "" &&
        this.formLabelAlign.password !== ""
      ) {
        // 注册接口
        register({
          name: this.formLabelAlign.username,
          password: this.formLabelAlign.password,
        }).then((data) => {
          console.log(data);
          // 判断是否登录成功
          if (data.code === 0) {
            // 跳转至登录页
            window.location.href = "/login";
          } else {
            // 注册失败则返回失败问题
            this.$message({
              message: data.mes,
              type: "warning",
            });
          }
        });
      } else {
        this.$message({
          message: "账号或密码不能为空！",
          type: "warning",
        });
      }
    },
    // 清空 input 框
    reset() {
      this.formLabelAlign.username = "";
      this.formLabelAlign.password = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.login-section {
  padding: 0 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

总结：

总结：
以上就是 美食杰项目 中 登录注册的具体实现方法，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

清风 与我

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值