注册与登录功能实现简单步骤2

已于 2022-04-01 23:33:57 修改
阅读量1.2k 收藏
点赞数 1
文章标签： vue
于 2022-04-01 23:23:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61464384/article/details/123909351
版权

一：前端

1：路由组件一般放在views里面，在里面创建一个register文件夹其中里面在创建一个index.vue

这里面写vv2 div里面写内容

2：在src下的router里面的index.js引入上面的index.vue，并且里面创建一个router文件夹 配置路由组件写出path（路径），name（起个名字），conponent（组件）

6c73c90ec61e44e5b4bfcfff1ea5667c.png

3：然后再App.vue中渲染出口router-view

----------------------到这步访问/regiister 就可以拿到div里面的内容

现在进行配置注册页面

二：前端

1：使用element-ui 复制表单组件 放入到注册文件夹里面的index.vue页面

vue页面里面包含data (定义变量--绑定的数组，对象之类） components methods （里面定义绑定方法（例如重置，提交等）里面写的东西都可以在element-ui里面找到）

------这样大体页面就配置好了 下面进行配置注册规则

2：在ui里面找校验规则，在注册页面里面的data里面定义的rule进行定义校验 规则，同时在from里面定义一下在rule里面写的规则名称，同时在data里面写自定义校验密码规则（来自ui）

-------------------------------------------------------------------------------------------------------------------------------表单成功之后---现在要发送请求到后台了要配置node.js了---当接收到注册请求之后验证账号昵称是否存在，验证成功生成token和用户权限，并且将新用户添加到mongodb中，跳转登录页面

二：后台

1：创建一个router.js里面写路由判断，还要有一个操作数据库的，暂时叫curd.js

2：同时在app.js里面使用express中间件里面的代码获取post请求提交数据，并且引入router.js

再写开放路径（固定写法），最后在调用一下路由 ，还需要引入path模块

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5p2O5b-D6ZuoTA==,size_20,color_FFFFFF,t_70,g_se,x_16

3：在router.js里面配置路由  以及路由地址

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5p2O5b-D6ZuoTA==,size_13,color_FFFFFF,t_70,g_se,x_16

 这是访问127.0.1:3000就可以页面拿到abcdefg路由发送的东西

 

 

 

我叫LiLi
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue+MySQL实现登录注册案例
weixin_52580677的博客
03-09 2万+
Vue+MySQL实现登录案例 1.新建vue项目并连接数据库 具体步骤见vue连接mysql数据库 2.新建/views/login.vue 根据自己的喜好搭建页面
登录注册实现
keke的博客
10-04 513
登录注册前端逻辑实现
登录注册退出功能的实现
最新发布
weixin_64182439的博客
04-18 328
使用post方式添加注册方法，接受前端传回来的用户参数，用将数据保存到session中的方法实现注册，将数据通过id保存到session为了便于之后的登录实现以上为参照例子。
Vue----vue-router 的基本使用
emmmm.....
04-21 1625
文章目录2 vue-router 的基本使用2.1 vue-router2.1.1 vue-router 的版本2.2 vue-router 3.x 的基本使用步骤2.2.1 在项目中安装 vue-router2.2.2 创建路由模块2.2.3 导入并挂载路由模块2.2.4 声明路由链接和占位符2.2.5 声明路由的匹配规则2.2.6 完成代码main.jsApp.vuesrc/router/index.js2.3 vue-router 4.x 的基本使用步骤2.3.1 在项目中安装 vue-router
vue学习第五天（9月8号）
qq_59592117的博客
09-08 296
前端代码编写
Vue中路由的正确注册和路由跳转页面
m0_73369512的博客
05-11 821
知识点：路由的页面跳转，路由的默认路径设置，路由的正确注册
unity3d 登录注册界面功能实现 c#
03-02
在Unity3D游戏开发中，登录和注册界面是玩家与游戏进行交互的首要步骤，因此它们的实现至关重要。本文将详细讲解如何使用C#语言在Unity3D中创建登录和注册界面的功能。 首先，我们需要创建UI元素。在Unity中，这...
iOS简单登录LoginViewController、注册RegisterViewController等功能实现方法
09-01
本文将详细介绍如何在iOS平台上实现简单的登录界面`LoginViewController`、注册界面`RegisterViewController`以及个人中心`UcenterViewController`的功能。 首先，我们来看个人中心未登录时的处理方式。在iOS应用中...
IDEA搭建SSM实现登录、注册，增删改查功能
04-18
注册功能类似，创建一个注册页面（register.html），收集用户信息并提交到服务器。在UserController中，调用UserService的注册方法，将新用户信息保存到数据库。 对于增删改查功能，创建对应的CRUD操作页面，如list...
SSM 实现登录验证码功能（附源码）
08-26
本文详细介绍了使用 SSM 框架实现登录验证码功能的方法，包括创建工具类、生成随机图片、绘制干扰线和随机字符、保存验证码到 Session 中等步骤。验证码是系统安全的重要组成部分，本文的方法可以帮助您实现一个安全...
javaweb实现登录注册功能
03-07
在JavaWeb开发中，创建一个具备用户登录和注册功能的应用是一项基础且重要的任务。这个应用通常涉及前后端交互、数据库操作以及用户验证等核心模块。本项目以Servlet技术为基础，结合MySQL数据库和JSP页面，构建了一...
SpringBoot+Vue 实现简单的：登录、注册、查看详情、商品页面、购物车功能
RuanFun的博客
09-25 9670
破解主要难点：如何定义cookie存储用户登录信息，提取cookie中数据，封装前端重复性代码，根据登录与否状态显示不同界面，实现验证码功能.....
用VUE实现一个具有登陆、注册等功能的网站【详细步骤】
热门推荐
weixin_43633329的博客
01-22 5万+
用VUE实现一个具有登陆、注册等功能的网站用VUE实现一个具有登陆、注册等功能的网站一、主要功能二、实现思路三、代码实现四、效果展示五、总结 用VUE实现一个具有登陆、注册等功能的网站 一、主要功能 本次任务主要是使用VUE实现一个具有登陆、注册等功能的网站 主要功能为： 1.要求三个页面 分别是登陆、注册、主页 2.记录存储已注册的用户信息列表 3. 实现各个页面之间的跳转 二、实现思路 1、页面设计 Register.vue 注册页面，包含输入用户名、输入密码、注册按钮等 login.vue登录页面，包
Vue项目 成员管理系统 系统登录模块（4）
不是独角兽的博客
03-03 1277
一、登录页面 1.1 在view文件夹下创建login文件夹，并创建index.vue 界面部分： <template> <div class="login-container"> <el-form :model="form" status-icon :rules="rules" ref="form" label-width="
【SpringBoot+Vue】003-创建Login组件、编写Login组件的页面
訾博（ZiBo）的博客
10-18 647
一、创建Login组件 1、创建Login.vue页面 <template> <div> Login 页面！ </div> </template> <script> export default { } </script> <style lang = "less" scoped> </style> 2、在index.js中引入login.vue，并为其配置.
用户注册与登录
Leon_Jinhai_Sun的博客
12-19 3万+
注册与登录流程如下： 1、用户打开客户端界面 2、输入手机号，点击“点击发送”按钮 ，系统向手机发送验证码 3、手机收到验证码，输入验证码 4、点击登录 4.1 如果你是没有注册过的用户，则先自动注册用户并登录成功 4.2 如果你是已经注册过的用户，则直接进行登录 ...
springboot实现简单的注册登录功能
m0_67402731的博客
06-12 8724
通过spring官网初始化SpringBoot项目 使用idea工具打开Springboot项目，项目结构 添加pom依赖 添加maven远程仓库阿里云镜像 application.yml相关配置 使用navicat数据库可视化管理工具管理MySQL数据库 实体类User mapper接口实现类 UserMapper.xml IUserService:用户注册方法在这个接口中实现 UserServiceImpl：实现用户注册功能相关逻辑 ServiceException ：业务异常处理基类 I
快速上手Springboot项目（登录注册保姆级教程）
MakerHu的博客
06-30 3万+
本文章对SpringBoot开发后端项目结构做了简单介绍，并非常细致地一步步（带图）演示了如何使用SpringBoot+MySQL实现登录的后端功能，同时还附带了前端的教程及源码，适合小白快速入门
登录和注册的基本实现，超简单！
m0_68987535的博客
05-16 3727
**相信有很多的人在刚刚做项目的实现，登录与注册功能的实现是基本的要求，要是刚刚开始写的小伙伴肯定会有很多的困惑，这里我介绍一下自己的写法，希望能帮到你，也希望能免费点个小 ** 首先是登录操作 我这里为之前写的一个抗疫的网站弄的功能，大家可以根据自己的规则来更改 登录的 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http
javaweb和MySQL实现简易的注册登录功能
09-20
### 回答1： 要实现简易的注册登录功能，需要以下步骤： 1. 创建一个数据库，包含用户表，其中包括用户名和密码字段。 2. 在Java中创建一个Web应用程序，并使用JDBC连接到MySQL数据库。 3. 创建注册页面和登录页面，分别包括用户名和密码输入框以及提交按钮。 4. 在注册页面中，将用户输入的用户名和密码插入到MySQL数据库中。可以使用PreparedStatement对象来执行插入操作。 5. 在登录页面中，将用户输入的用户名和密码与数据库中的记录进行比较。如果用户名和密码匹配，则将用户重定向到主页或其他受保护的页面。 下面是一个简单的示例代码来实现这个功能： 1. 创建一个名为“users”的表，其中包含“username”和“password”字段。 ``` CREATE TABLE users ( id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY, username VARCHAR(30) NOT NULL, password VARCHAR(30) NOT NULL ); ``` 2. 在Java中连接到MySQL数据库，可以使用以下代码： ``` String url = "jdbc:mysql://localhost:3306/mydatabase"; String user = "root"; String password = "mypassword"; Connection conn = DriverManager.getConnection(url, user, password); ``` 3. 创建注册页面和登录页面，可以使用HTML和JSP来实现。 4. 在注册页面中，将用户输入的用户名和密码插入到MySQL数据库中。可以使用以下代码： ``` String username = request.getParameter("username"); String password = request.getParameter("password"); PreparedStatement stmt = conn.prepareStatement("INSERT INTO users (username, password) VALUES (?, ?)"); stmt.setString(1, username); stmt.setString(2, password); stmt.executeUpdate(); ``` 5. 在登录页面中，将用户输入的用户名和密码与数据库中的记录进行比较。如果用户名和密码匹配，则将用户重定向到主页或其他受保护的页面。可以使用以下代码： ``` String username = request.getParameter("username"); String password = request.getParameter("password"); PreparedStatement stmt = conn.prepareStatement("SELECT * FROM users WHERE username=? AND password=?"); stmt.setString(1, username); stmt.setString(2, password); ResultSet rs = stmt.executeQuery(); if (rs.next()) { // 登录成功，将用户重定向到主页或其他受保护的页面 response.sendRedirect("home.jsp"); } else { // 登录失败，显示错误消息 request.setAttribute("errorMessage", "Incorrect username or password."); RequestDispatcher dispatcher = request.getRequestDispatcher("login.jsp"); dispatcher.forward(request, response); } ``` ### 回答2： 实现简易的注册登录功能，我们可以使用JavaWeb和MySQL来完成。 首先，我们需要创建一个数据库，并创建两张表：用户表和登录表。用户表用于存储用户的基本信息，包括用户名、密码、电子邮箱等字段；登录表用于存储用户的登录记录，包括用户名、登录时间等字段。 接下来，我们可以使用JavaWeb来实现注册和登录的功能。对于注册功能，用户输入用户名、密码、电子邮箱等信息，然后将这些信息插入到用户表中即可。在插入前，需要先判断用户名是否已经存在，如果存在则提示用户重新选择用户名；如果不存在，则将用户信息插入到用户表中。 对于登录功能，用户输入用户名和密码，然后根据输入的用户名在用户表中查找对应的记录。如果用户名不存在，则提示用户重新输入；如果存在该用户名，则判断密码是否匹配，如果匹配则登录成功，否则提示用户密码错误。 在实现过程中，我们可以使用JDBC来连接Java和MySQL数据库，使用SQL语句来操作数据库表。可以使用PreparedStatement来预编译SQL语句，以提高执行效率和防止SQL注入攻击。可以使用Cookie来记录用户登录状态，实现自动登录功能。 总之，通过JavaWeb和MySQL的结合，我们可以实现简易的注册登录功能，提供用户注册和登录的基本操作，以满足基本的用户认证需求。 ### 回答3： 要实现简易的注册登录功能，可以使用JavaWeb和MySQL进行开发。 首先，在MySQL数据库中创建一个用户表，表中包含用户名和密码两个字段。可以使用以下SQL语句创建表： ```sql CREATE TABLE user( id INT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(50) NOT NULL, password VARCHAR(50) NOT NULL ); ``` 接下来，在JavaWeb中，通过编写Java代码实现注册和登录的功能。可以使用JDBC连接MySQL数据库，实现与数据库的交互。 对于注册功能，用户在注册页面中输入用户名和密码，通过Java代码将用户输入的数据插入到MySQL数据库的用户表中。可以使用以下代码示例： ```java import java.sql.*; public class Register { public static void main(String[] args) { String url = "jdbc:mysql://localhost:3306/db_name"; // 数据库连接地址 String username = "root"; // 数据库用户名 String password = "password"; // 数据库密码 Connection conn = null; PreparedStatement stmt = null; try { Class.forName("com.mysql.cj.jdbc.Driver"); // 加载MySQL驱动程序 conn = DriverManager.getConnection(url, username, password); // 建立数据库连接 String sql = "INSERT INTO user (username, password) VALUES (?, ?)"; // SQL插入语句 stmt = conn.prepareStatement(sql); // 创建PreparedStatement对象 String newUsername = "newUser"; // 用户输入的用户名 String newPassword = "newPassword"; // 用户输入的密码 stmt.setString(1, newUsername); // 设置用户名参数 stmt.setString(2, newPassword); // 设置密码参数 int rows = stmt.executeUpdate(); // 执行插入操作 if (rows > 0) { System.out.println("注册成功"); } else { System.out.println("注册失败"); } } catch (Exception e) { e.printStackTrace(); } finally { try { if (stmt != null) stmt.close(); if (conn != null) conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } } ``` 对于登录功能，用户在登录页面中输入用户名和密码，通过Java代码查询数据库中是否存在与用户输入匹配的用户记录。可以使用以下代码示例： ```java import java.sql.*; public class Login { public static void main(String[] args) { String url = "jdbc:mysql://localhost:3306/db_name"; // 数据库连接地址 String username = "root"; // 数据库用户名 String password = "password"; // 数据库密码 Connection conn = null; PreparedStatement stmt = null; ResultSet rs = null; try { Class.forName("com.mysql.cj.jdbc.Driver"); // 加载MySQL驱动程序 conn = DriverManager.getConnection(url, username, password); // 建立数据库连接 String sql = "SELECT * FROM user WHERE username = ? AND password = ?"; // SQL查询语句 stmt = conn.prepareStatement(sql); // 创建PreparedStatement对象 String inputUsername = "inputUser"; // 用户输入的用户名 String inputPassword = "inputPassword"; // 用户输入的密码 stmt.setString(1, inputUsername); // 设置用户名参数 stmt.setString(2, inputPassword); // 设置密码参数 rs = stmt.executeQuery(); // 执行查询操作 if (rs.next()) { System.out.println("登录成功"); } else { System.out.println("登录失败"); } } catch (Exception e) { e.printStackTrace(); } finally { try { if (rs != null) rs.close(); if (stmt != null) stmt.close(); if (conn != null) conn.close(); } catch (SQLException e) { e.printStackTrace(); } } } } ``` 通过以上代码可以实现简易的注册登录功能，用户可以在注册页面中输入用户名和密码进行注册，然后在登录页面中输入对应的用户名和密码来进行登录。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

我叫LiLi

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

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

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

打赏作者

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

抵扣说明：

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

余额充值