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

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

vue项目美食杰 -- 注册登录
Im_xiaopei的博客
09-23 417
美食杰项目是本人所做过项目之一，对技术提升有极大帮助，因此分享出来和广大网友一起来学习进步。话不多说，先上个首页图 因为此项目不算很小，加上时间和精力的问题，本人将整个项目分为多个板块来进行分享，毕竟贪多嚼不烂嘛，而且更容易帮助读者整理哦。 今日份分享的是登录和注册板块。 登录大家应该在熟悉不过了，账号密码输入，就完事了，但是，朋友们啊，咱们今天不是用户，是一个开发者呀，所以我们得拿出自己的技术出来，来实现底层逻辑哟。 所用技...
美食杰项目-登录注册
yxy831524yxy的博客
09-24 229
内容精选
美食杰登录注册(路由守卫)
weixin_67651040的博客
03-13 276
一，路由守卫：beforEach 有些路由时需要登录状态的，判断登录状态(是否需要登录) ​ 不需要登录的， 直接跳转 ​ 需要登录的：进入下一步判断： ​ a. 判断是否已经登录，如果以及登录，直接跳转 ​ b. 判断是否已经登录，如果没有登录，跳转到登录页 代码如下： 二，登录注册样式图 注册的样式和储存数据的...
美食杰项目登录注册页详细说明
IMURLORD的博客
03-13 1701
项目介绍 登录 注册 路由守卫 代码说明 登录页展示 登录注册页,均都使用了localStorage和element ui插件 登录页面代码如下 登录页js代码 基本上这样写就可以实现 路由守卫 /路由守卫: 是路由跳转时的一个审核 to: 到哪里去 from:从哪里来 nxet:审核结果 测试数据,功能完成后删除 注册页面,可以把登录页面拿过来直接使用 注册页面 注册JS data中的数据是element UI插件中的Form表单 以上就是登录,注册,路由守卫的
美食杰—登录，注册，退出
oo_ring的博客
09-24 293
今天我们来写页面注册、登录、退出 1.注册 此时是未登录状态，所以头部拥有登录 注册按钮 点击登录，跳转到登录页面，然后用tab切换，控制登录和注册页面(此效果可用Element UI实现) 如图我们用到Element UI框架的提交表单(详细用法)，绑定事件，input绑定相应的用户名和密码v-model事件。 因为此处是注册页面，提交的时候要向后端发送请求，将用户输入的名字和密码向后端发送请求。 此时我们就可以注册号账号. 2.登录 登录页面的表单和注册的一样 依...
美食杰项目----登录页面，看了不会来找我！！！
m0_62201566的博客
09-25 533
一.项目介绍： 通过使用element ui组件库对页面进行布局，然后再通过路由守卫验证登录状态 验证登录：有些路由是需要登录的，判断状态 1.没有登录：跳转到登录页 2.登录：直接进入 3.有些路由不需要登录，那就直接进入； ps：是否需要登录--meta 二.效果展示： 三.代码展示： login.vue:登录页面 <template> <div class="login-section"> <!-- :rules=...
美食杰项目（一）登录注册页
m0_60970928的博客
11-23 456
美食杰项目登录详情页的具体功能和样式
VUE——超详细的美食杰项目—登录注册
weixin_51962708的博客
09-24 596
VUE——超详细的美食杰项目项目介绍代码过程登录页面登录页面——JS导航守卫注册页面退出登录 项目介绍 本篇主要实现美食杰项目的登录、注册和退出登录 代码过程 登录页面 <template> <div class="login-section"> <!-- :rules="rules" --> <el-form label-position="top" label-width="100px" class="
美食杰---登录
Sco_114的博客
10-04 226
登录 需要在路由表里使用beforeEach守卫拦截判断状态 1. 没有登录，需要跳转到登录页 2. 登录，直接进入 ps：判断是否需要登录，看路由里面配置有没有meta元信息 ( login为true ) beforeEach守卫拦截判断一下 登录 此时可引用饿了么开放的框架（element UI） 自行去from表单找属性复制代码 rules 验证规则 model 数据对象 validate 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校
vue美食杰 登录
abcdefj123562145的博客
03-14 1096
文章目录效果图login.vuerouter 效果图 login.vue <template> <div class="login-section"> <!-- :rules="rules" :model="ruleForm" :rules="rules"--> <el-form label-position="top" label-width="100px" class
美食杰----菜谱大全
m0_62201566的博客
10-09 531
今天我们来写美食杰的菜谱大全页面，首先要讲的是实现这个页面的流程： 拿到数据----渲染数据----监听路由传参----判断----写点击事件 1.在api里面拿到数据getClassify, getProperty, getMenus。 2.再创建个空数组classify存放数据，把数据赋值给data。 3.渲染数据，用v-for渲染数据。 4.在watch里深度监听路由传参。 5.再用if判断，判断是否点击，如果点击过就取消；否则，选中。 6.用@click写点击事件，点击的时候地址栏中的
Java课程设计项目-servlet+jsp美食系统、菜品管理系统
qq_46274901的博客
12-04 639
Java课程设计项目-servlet+jsp美食系统 > 1. 用户登录、注册 > 2. 首页菜品展示、轮播图 > 3. 美食菜品分类、查询 > 4. 作品动态、个人简介、菜品收藏 > 5. 创建菜谱、添加步骤
美食杰-菜谱大全
as_long_的博客
10-09 208
一、介绍 菜谱大全通过element组件进行渲染，实现了tab切换和下拉列表效果。 二、过程 首先导入api，在data里面创建需要用到的属性。 import {getClassify, getProperty, getMenus} from '@/service/api'; data data() { return { classify:[],//存储tab切换的所有数据 classifyTyp.
美食出处（文件版）
zhanghongyi_cpp的博客
05-23 184
【问题描述】有个"delicacy.txt"文件文件中给出了我国若干个省份（或直辖市）的特色美食。请编写程序，从键盘输入一个美食名称，如果该美食在"delicacy.txt"文件中，则在屏幕上输出相应的省份等信息，如果美食不在文件中，则输出“没有找到”信息。【样例说明】open(“delicacy.txt”,“r”,encoding=“utf-8”)函数中的文件描述不写文件路径，直接给出文件名.扩展名。【输入形式】读取"delicacy.txt"文件中的内容；【输出形式】用print()函数。
基于SpringBoot的美食分享平台设计与开发（Vue MySQL）
欧阳小白闯天涯
05-22 983
本文介绍了一个基于SpringBoot框架的美食分享平台，旨在为用户提供系统化的美食分享、学习和互动服务。平台采用MySQL数据库和Vue前端技术，分为管理员和用户两大角色。管理员负责系统配置、文章管理、评论管理等操作，用户可发布文章、点赞、评论、收藏等。平台功能包括文章分类、标签管理、热搜、数据统计等，帮助用户快速获取感兴趣内容，并为管理员提供运营数据支持。系统设计注重用户体验，具备权限控制、性能优化、安全保障和可扩展性，满足日益增长的市场需求。
vue组件和插件的区别
u014642921的博客
05-28 291
只要有install方法并且接受Vue构造函数作为参数，就能够被Vue.use使用。可以是第三方库，也可以是自己编写的组件。
el-table-column如何获取行数据的值
最新发布
LoveYouQueena的博客
05-29 289
一旦你获取到了当前行的数据，就可以根据需要进行后续的操作或展示，比如删除、编辑当前行的数据等。的模板中定义一个按钮，并为该按钮添加一个点击事件处理器。在Vue 2.x中，你可以使用。属性（在Vue 3.x中）来获取当前行的数据。点击事件处理器会接收到一个参数（在Vue 2.x中是。如果你使用的是Vue 3.x，代码将略有不同，主要是将。中获取当前行的数据，并通过点击事件处理器进行后续操作。在Vue 3.x中，则使用。），该参数包含了当前行的数据。属性（在Vue 2.x中）或者。，在Vue 3.x中也是。
【Vue Vapor Mode ：技术突破与性能优化的可能性】
weixin_37342647的博客
05-27 1101
Vue Vapor Mode是Vue.js正在开发的新型编译策略，旨在通过抛弃虚拟DOM、采用直接DOM操作和编译时优化来显著提升性能。本文概述了其发展历程、核心概念、使用方法、预期性能提升和迁移注意事项。Vapor Mode预计可减少65%内存使用、67%包体积，并提升92%运行时性能。目前仅确认项目级启用方式，部分功能如SSR水合暂不支持。该模式将逐步集成到Vue 3.6及后续版本，有望成为Vue的默认编译策略，解决传统虚拟DOM在大型应用中的性能瓶颈问题。
八、【状态管理篇】：Pinia 在大型应用中的状态管理实践
blues_C的博客
05-27 965
状态管理库 Pinia 提供了一个集中的存储（Store），用于存放共享状态。任何组件都可以从中读取状态，或者触发改变状态的动作 (Actions)。这样，状态的管理就变得清晰、可预测且易于维护。
餐饮美食app登录注册界面设计素材下载
资源摘要信息:"本资源是一套专为美食餐饮类应用程序设计的登录注册用户界面(UI)素材，可下载的文件格式为(fig)。fig文件是基于Figma这款流行的UI设计工具生成的，它允许设计师以矢量形式编辑和共享设计元素。Figma...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

清风 与我

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

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

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

打赏作者

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

抵扣说明：

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

余额充值