美食杰项目登录注册页详细说明

最新推荐文章于 2024-10-16 18:40:59 发布
最新推荐文章于 2024-10-16 18:40:59 发布
阅读量1.6k 收藏 1
点赞数 3
文章标签： 美食 elementui vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IMURLORD/article/details/123464988
版权
这篇博客详细介绍了美食杰项目的登录注册页面实现，利用localStorage和Element UI插件。登录和注册页面的JS代码被展示，同时讲解了路由守卫的原理，包括to、from和next的含义。注册页面可复用登录页面代码，数据处理借助于Element UI的Form表单。
摘要由CSDN通过智能技术生成

项目介绍

			登录
			注册
			路由守卫

代码说明

				登录页展示

登录注册页,均都使用了localStorage和element ui插件
在这里插入图片描述

登录页面代码如下
在这里插入图片描述

登录页js代码

在这里插入图片描述
基本上这样写就可以实现

路由守卫

/路由守卫: 是路由跳转时的一个审核
to: 到哪里去
from:从哪里来
nxet:审核结果
测试数据,功能完成后删除

在这里插入图片描述

注册页面,可以把登录页面拿过来直接使用

注册页面
在这里插入图片描述

注册JS

在这里插入图片描述
data中的数据是element UI插件中的Form表单

以上就是登录,注册,路由守卫的代码实现,有不懂得小伙伴记得咨询作者

H～～～
关注
美食杰项目-登录注册
yxy831524yxy的博客
09-24 181
内容精选
美食杰---登录
Sco_114的博客
10-04 188
登录 需要在路由表里使用beforeEach守卫拦截判断状态 1. 没有登录，需要跳转到登录页 2. 登录，直接进入 ps：判断是否需要登录，看路由里面配置有没有meta元信息 ( login为true ) beforeEach守卫拦截判断一下 登录 此时可引用饿了么开放的框架（element UI） 自行去from表单找属性复制代码 rules 验证规则 model 数据对象 validate 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校
使用原生js写一个简单的注册登录页面
一步一个脚印，踏实努力，向着目标前进
07-04 4805
在register()函数中，我们通过getElementById()方法获取用户名和密码的输入框的值，并进行相应的处理。在login()函数中，我们也是通过getElementById()方法获取用户名和密码的输入框的值，并进行相应的处理。需要注意的是，上述代码只是一个简单的示例，没有进行实际的注册和登录操作。在实际的应用中，我们需要将注册和登录的逻辑与后端服务器进行交互，进行真正的注册和登录操作。在注册和登录函数中，我们分别获取注册和登录表单中的用户名和密码，并进行相应的处理。// 切换到登录页面。
美食杰—登录，注册，退出
oo_ring的博客
09-24 254
今天我们来写页面注册、登录、退出 1.注册 此时是未登录状态，所以头部拥有登录 注册按钮 点击登录，跳转到登录页面，然后用tab切换，控制登录和注册页面(此效果可用Element UI实现) 如图我们用到Element UI框架的提交表单(详细用法)，绑定事件，input绑定相应的用户名和密码v-model事件。 因为此处是注册页面，提交的时候要向后端发送请求，将用户输入的名字和密码向后端发送请求。 此时我们就可以注册号账号. 2.登录 登录页面的表单和注册的一样 依...
美食杰项目 -- 登录注册（三）
weixin_62897746的博客
11-22 583
本文给大家讲解，美食杰项目中 登录注册实现的效果，和具体代码。 具体实现思路： 1. 引入element-ui中的登录和分页功能实现方法 2. 账号密码进行双向绑定 3. 登录和注册把账号密码传递过去 4. 成功把token报错至本地，失败则返回失败的结果 5. 点击清空input框 6. 引入当前的vuex，并写出所有路由跳转 7. 使用全局导航守卫和meta字段进行登录验证判断 8. 判断跳转的路由是否需要登录，已登录则判断是否获取到用户信息 9. 未获取则删除存储至本地的 token，
美食杰项目 -- 总结（八）
weixin_62897746的博客
12-01 727
经过大概一周时间的兴勤劳作，美食杰项目的所有代码已经全部编写完成，功能全部完善，这一章给当前项目做一个总结。这一次项目使用了 element-ui 框架来完成静态功能的实现。感谢大家这一直以来对我的支持。 **当前项目其他的页面代码可以在当前专栏中找到**
美食餐饮app登录注册 ui .fig素材下载
04-20
本素材提供的是一个名为"美食餐饮app登录注册 ui .fig"的设计文件，主要用于设计和开发美食餐饮类应用的登录与注册页面。这个设计文件采用的是fig格式，这是一种流行的设计工具Figma所使用的文件格式，适用于跨平台...
美食杰餐饮管理系统.rar
03-17
《美食杰餐饮管理系统详解》 在当今信息化社会，餐饮行业的管理效率与服务质量直接影响着企业的竞争力。美食杰餐饮管理系统，作为一款专为餐饮业设计的管理软件，旨在通过智能化、自动化的方式提升餐厅运营效能，...
美食杰项目后端数据的封装
10-13
先上传一下美食杰后台项目的数据库
M053-美食坊美食购物主题15页面带注册登录.zip
04-11
《M053-美食坊美食购物主题15页面带注册登录》是一个针对美食爱好者和在线购物者设计的网站主题，包含完整的用户注册、登录功能以及15个精心设计的页面。这个主题不仅注重视觉效果，更强调用户体验，旨在提供一个既...
vue项目美食杰 -- 注册登录
Im_xiaopei的博客
09-23 381
美食杰项目是本人所做过项目之一，对技术提升有极大帮助，因此分享出来和广大网友一起来学习进步。话不多说，先上个首页图 因为此项目不算很小，加上时间和精力的问题，本人将整个项目分为多个板块来进行分享，毕竟贪多嚼不烂嘛，而且更容易帮助读者整理哦。 今日份分享的是登录和注册板块。 登录大家应该在熟悉不过了，账号密码输入，就完事了，但是，朋友们啊，咱们今天不是用户，是一个开发者呀，所以我们得拿出自己的技术出来，来实现底层逻辑哟。 所用技...
vue美食杰 登录
abcdefj123562145的博客
03-14 1063
文章目录效果图login.vuerouter 效果图 login.vue <template> <div class="login-section"> <!-- :rules="rules" :model="ruleForm" :rules="rules"--> <el-form label-position="top" label-width="100px" class
实现登录与注册界面（1号店）
dai556688的博客
08-16 6500
登陆界面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; ...
Java项目：157 基于springboot技术的美食烹饪互动平台的设计与实现（含论文+说明文档）
weixin_upcodezhou
10-15 349
本知识管理系统有管理员和用户两个角色管理员权限操作的功能包括管理美食，对美食留言进行回复，管理美食知识信息，管理美食知识类型，管理用户，管理公告等。用户权限操作的功能包括在线观看美食做法视频，查看美食食材信息以及美食详细介绍信息，查看美食知识以及公告信息等。
基于SpringBoot+Vue的校园周边美食探索及分享平台的设计与实现（带文档)
2301_78370204的博客
10-16 348
基于SpringBoot+Vue的校园周边美食探索及分享平台的设计与实现（带文档)校园周边美食探索及分享平台是一个旨在为校园用户提供便捷的美食发现和分享服务的系统。该平台通过现代网络技术，为用户提供了一个直观、互动性强、低成本、方便快捷的在线订餐环境。系统主要分为以下几个角色：管理员、用户和商家。
校园周边美食探索及分享平台的设计与实现(论文+源码)_kaic
涉及毕业论文、远程调试、小程序、管理系统、JAVA、C#、IDEA、VS开发工具等
10-16 639
Java语言擅长开发互联网类应用和商家级应用，现在已经相当的成熟，而且也是目前使用最多的编程语言之一。Java语言具有很好的面向对象性，可以符合人的思维模式进行设计，封装是将对象的属性和方法尽可能地隐藏起来，使得外界并不知道是如何实现的，外界能通过接口进行访问，继承是指每个类都会有一个父类，所有的子类都有父类的方法，可以进行继承，但是只有final修饰的类不能被继承，通过继承可以使得代码得到重新利用，能够提高软件的开发效率，也是多态的前提。
elementUI,设置日期,只能选择过去的和今天的日期
最新发布
weixin_57334661的博客
10-16 162
在 el-date-picker 组件中加：:picker-options="pickerOptions"range-separator="至"<el-form-item label="票据生成日期：">
vue elementui el-table实现增加行，行内编辑修改
weixin_45616483的博客
10-16 145
elementui table 实现增加行，行内编辑
5 首页框架及路由配置
zi__you的博客
10-13 1124
首页框架布局和子路由配置
ui美食登录页主页发现页个人中心页
12-18
根据提供的引用内容，以下是关于UI美食登录页、主页、发现页和个人中心页的介绍： 1. 美食登录页（美食个人登录页面）是用户登录美食应用或网站时的页面，用于验证用户身份并提供登录功能。 2. 美食主页（美食首页）是美食应用或网站的主要页面，通常展示热门美食、推荐菜单、美食活动等内容，以吸引用户的注意并提供导航功能。 3. 美食发现页（美食首页2）是美食应用或网站的发现功能页面，用于展示用户可能感兴趣的美食内容，例如附近的餐厅、新品推荐、美食排行榜等。 4. 美食个人中心页（美食个人中心页面）是用户个人信息和设置的页面，用户可以在此页面查看和编辑个人资料、管理收藏、查看订单等。 以下是一个示例UI设计的演示： 1. 登录页设计示例： ![登录页设计示例](login_page.png) 2. 主页设计示例： ![主页设计示例](home_page.png) 3. 发现页设计示例： [发现页设计示例](discover_page.png) 4. 个人中心页设计示例： ![个人中心页设计示例](profile_page.png)
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值