登录注册完整流程

最新推荐文章于 2024-04-07 01:13:31 发布
最新推荐文章于 2024-04-07 01:13:31 发布
阅读量3.6k 收藏 13
点赞数
文章标签： 前端 mysql node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yuan_hongbao8888/article/details/108212665
版权

开发场景描述：
当准备从零开始做一个项目时，此时前后台同时开发，由于后台可能会由于时间问题不能提供数据，此时就需要前端人员模拟数据，例如Mock。在外面的Vue中，同样可以实现mock的操作模拟数据。
需要对 JWT (Json Web Token) 和 token 有一定认知。
· 首先打开Apache 和 MySQL

实现登录部分

  1. 第一步 ：搭建vue基本项目框架，前端安装 npm i --save axios ，创建一个登录页面 Login
<template>
  <div>
    账号：<input type="text" placeholder="账号" v-model="username">
    密码：<input type="text" placeholder="密码" v-model="password">
    <button @click="myLogin">登录</button>
  </div>
</template>
<script>
export default {
    data(){
        return{
            username:"",
            password:""
        }
    },
    methods:{
        myLogin(){
           //登录流程
        }
    }
}
</script>
  1. 第二步 ：将Login引入路由并配置
  2. 第三步：用 mock 模拟后台数据，在项目根目录下创建一个 mock 文件夹，打开终端安装 npm i --save express axios ，mock下分别创建两个文件index.js 和 router.js
index.js文件
const express = require("express");
const app = express();
const router = require("./router")
const bodyParser = require("body-parser");

app.use(bodyParser.urlencoded({
    extended:true
}))

app.use("/api",router)

app.listen(3000,() =>{
    console.log("服务器运行在3000端口上");
})

router.js文件
const express = require("express");
const router = express.Router();

router.post('/login',(req,res)=>{
    const username = req.body.username;
    const password = req.body.password;
    if(username && password){
        res.send({
            msg:"登录成功",
            code:200
        })
    }else{
        res.send({
            msg:"登录失败",
            code:400
        })
    }
})

module.exports = router;
  1. 先用 postman 测试，这样容易分别是前端出错还是后台出错，如果可以获取成功后执行下一步
  2. 回到前台，创建 utils 文件夹，里边创建 request.js 并配置
//封装网络请求：Axios

import axios from "axios"
import qs from "query-string"

// 错误信息的响应方法
const errorHandle = (status,other) => {
    switch(status){
        case 400:
            // 请求头和服务器的限制
            console.log(" 服务器不理解请求的语法");
            break;
        case 401:
            // token验证失败，用户身份验证失败
            console.log("（未授权） 请求要求身份验证");
            break;
        case 403:
            // 用户身份过期了，服务器请求限制
            console.log("（禁止） 服务器拒绝请求");
            break;
        case 404:
            // 网络请求地址错误
            console.log("（未找到） 服务器找不到请求的网页。");
            break;
        default:
            console.log(other);
            break;
            
    }
}

// 创建axios对象
const instance = axios.create({
    timeout:5000  // 请求超时
})

// 全局配置
instance.defaults.baseUrl = "http://iwenwiki.com";
// instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 创建请求拦截和响应拦截操作
instance.interceptors.request.use(config =>{
        // 配置
        if(config.method === 'post'){
            config.data = qs.stringify(config.data);
        }
        return config;
    },
    error => Promise.reject(error)
)

instance.interceptors.response.use(
    // 成功 
    /**
     * 成功和失败的判断：
     *  1.请求成功和请求失败
     *  2.请求成功：结果的成功和结果的失败
     * 
     * 真正好的代码：
     *  1.可读性高
     *  2.可维护性强
     * 不是流水账的代码！！！
     * 面向对象的思维方式：OOP
     */
    response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
    // 我们自己封装的，所以为了代码的清晰可读性，我们需要增Promise
    // response => response,
    error => {
        const { response } = error; // ES6的解构赋值
        /**
         * response包含的信息：
         *  status
         *  data
         */
        if(response){
            // 给出开发者具体的错误信息
            errorHandle(response.status,response.data);
            return Promise.reject(response);
        }else{
            console.log("请求中断或者断网了");
        }
    }
)

export default instance;

再创建一个 api 文件夹，里边分别创建 base.js 用来存储路径；index.js 来存储封装的网络请求

//base.js文件
const base = {
    baseUrl:'/api',
    login:'/api/login'
}

export default base;

//index.js文件
import base from './base'
import axios from '../utils/request'

const api = {
    // 登录接口
    getLogin(params){
       return axios.post(base.baseUrl + base.login,params)
    }
}

export default api;
  1. 解决跨域问题：在项目根目录下创建一个vue.config.js配置文件并设置配置项：
//vue.config.js文件
module.exports = {
    devServer:{
        proxy:{
            "/api":{
                target:"http://localhost:3000/",
                pathRewrite:{  //重写路径
                    "^/api":""
                },
                changeOrigin:true  //允许跨域
            }
        }
    }
}
  1. 在Login组件中获取数据
methods:{
        myLogin(){
           this.$api.getLogin({
               username:this.username,
               password:this.password
           }).then(res=>{
               console.log(res);
           }) 
        }
    }

实现登录验证部分

场景：点击进入 about 页面验证用户是否登录，如果登录成功则可以进入 about 页面，如果用户未登录或者登录不成功则自动跳转到 Login 登录页面。这里有两个知识点 token 和 jwt(json web token)

  1. 第一步：给 about组件设置路由元信息。
{
    path: '/about',
    name: 'About',
    meta:{
      isLogin:true
    },
    component: () => import('../views/About.vue')
 }
  1. 第二步：后台生成 token。在mock文件中创建一个 config.js 并配置
module.exports = {
    jwtSecret:"somesecrtekeyforjsonwebtoken"  
    //真实项目中是后台负责的
}
  1. 第三步：后台配置路由。后台安装 npm i --save jsonwebtoken 并且在router.js 中配置
const config = require("./config");
const jwt = require("jsonwebtoken");
//生成token
const token = jwt.sign({
                username: username,
                password: password
            }, config.jwtSecret);
res.send({
		...
		token:token,
		username:username
	})
  1. 第四步：此时前台浏览器就能打印拿到token，然后将它保存到本地，
    修改Login组件：
<template>
    <div>
        <div v-if="token_username.length <= 0">
            <input placeholder="用户名" type="text" v-model="username" />
            <input placeholder="密码" type="text" v-model="password" />
            <button @click="loginHandle">登陆</button>
        </div>
        <div v-else>
            {{ token_username }}
        </div>
    </div>
</template>
<script>
export default {
    name: "Login",
    data() {
        return {
            username: "",
            password: "",
            token_username:""
        };
    },
    created(){
        if(localStorage.getItem("token")){
            this.token_username = localStorage.getItem("username");
        }
    },
    methods: {
        loginHandle() {
            // 登陆流程
            this.$api.getLogin({
                    username: this.username,
                    password: this.password
                }).then(res => {
                    if(res.data.code == 400){
                        alert("用户名密码错误");
                    }else{
                        this.token_username = res.data.username;
                        localStorage.setItem("token", res.data.token);
                        localStorage.setItem("username",res.data.username)
                    }
                });
        },
        logoutHandle(){
            localStorage.removeItem("token");
            localStorage.removeItem("username");
            this.token_username = "";  //让页面刷新
            this.$router.push("/login");
        }
    }
};
</script>
  1. 第五步：前台路由就可以读取token值了，编辑
router.beforeEach((to,from,next) =>{
  if(to.meta.isLogin){
    // token:令牌
    var token = localStorage.getItem("token");
    if(token){
      next();
    }else{
      next({
        path:"/login"
      })
    }
  }else{
    next();
  }
})

实现登录服务器端验证部分

  1. 第一步：新创建一个mysql数据库，创建表，插入数据：username : joe和password : 8888。
  2. 第二步：打开后台终端安装数据库 npm i --save mysql
  3. 第三步：在 mock 文件夹下创建一个 SQLConnect.js 文件用来连接数据库
const mysql = require("mysql");
const MySQLObj = {
    host:"localhost",
    user:"root",
    password:"",
    database:"web1910"  //库名
}

const client = mysql.createConnection(MySQLObj);
function SQLConnect(sql,arr,callback){
    client.query(sql,arr,(error,result)=>{
        if(error){
            console.log(error);
            return;
        }
        callback(result);
    })
}

module.exports = SQLConnect;
  1. 后台路由引入并且配置
const SQLConnect = require("./SQLConnect");

const sql = "select * from user where username=? and password=?";
    const arr = [username, password];
    SQLConnect(sql, arr, result => {
        if (result.length > 0) {
            const token = jwt.sign({
                username: username,
                password: password
            }, config.jwtSecret);

            res.send({
                msg: "登陆成功",
                code: 200,
                token: token,
                username: username
            })
        } else {
            res.send({
                msg: "登陆失败",
                code: 400
            })
        }
    })
  1. 成功实现登录验证。当点击 About 页面时，验证用户是否登录，如果登录则进入 About 页面；如果没有登录则跳转到 Login 登录页面。在 Login 页面用户输入账号密码点击登录时，再次验证输入的账号密码是否正确，如果正确则进入到 Login 页面，此时可以被允许进入 About 页面了；如果账号或者密码错误则显示提示消息。当点击 退出登录 按钮时，清除存储在本地 localStorage 里边的数据，并且通过将存储的用户名更改为空字符串来实现页面刷新的效果 this.token_username = " "; 通过 this.$router.push("/login") 回到初始化的 Login 登录页面
  2. 下面附上部分文件完整的代码
//mock后台路由router.js文件

const express = require("express");
const router = express.Router();
const config = require("./config");
const jwt = require("jsonwebtoken");
const SQLConnect = require("./SQLConnect");

router.post("/login", (req, res) => {
    const username = req.body.username;
    const password = req.body.password;
    const sql = "select * from user where username=? and password=?";
    const arr = [username, password];
    SQLConnect(sql, arr, result => {
        if (result.length > 0) {
            const token = jwt.sign({
                username: username,
                password: password
            }, config.jwtSecret);

            res.send({
                msg: "登陆成功",
                code: 200,
                token: token,
                username: username
            })
        } else {
            res.send({
                msg: "登陆失败",
                code: 400
            })
        }
    })
})


module.exports = router;

//src文件下前端路由router.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from "../views/Login"

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path:"/login",
    component:Login
  },
  {
    path: '/about',
    name: 'About',
    meta:{
      isLogin:true
    },
    component: () => import('../views/About.vue')
  }
]

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

router.beforeEach((to,from,next) =>{
  if(to.meta.isLogin){
    // token:令牌
    var token = localStorage.getItem("token");
    if(token){
      next();
    }else{
      next({
        path:"/login"
      })
    }
  }else{
    next();
  }
})


export default router
Y一蓑烟雨任平生
关注
  • 0
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
注册登陆完整流程的demo
05-25
可以实现登陆注册完整流程的demo，感兴趣可以看看
注册登录流程
12-27
电商注册登录流程，
用数组实现简单的登录注册
weixin_48143279的博客
09-23 1226
数组的小使用 /* 作业：使用集合实现注册登陆功能， 第一步： 提示用户选择功能， A（注册） B(登陆) c 。 要求： 功能选择 的时候要忽略大小写。 注册： 1. 提示用户输入注册的账号(数字)与密码，如果输入账号已经存在数组中，提示用户重新输入。 登陆： 提示用户输入登陆的账号与密码,如果账号与密码这个用户已经存在数组中，那么登陆成功，否则登陆失败 查看： 查看注册完毕之后，把集合中的所有用户信息打印出来。 退出登录，修改密码放在登录中做 退出系统 */ import java.util.Sca
不连接数据库时，如何利用数组实现登录和注册（同一界面）的校验
weixin_74835614的博客
11-30 841
在我们初次登录某一个全新的网站时，首先要做的一定是账号注册，注册成功后才能实现登录，那这两个功能模块，在不连接数据库的情况下，想要进行账号一致的校验，就需要利用JS部分的数组功能进行实现，主要思路是，1.创建数组获取注册界面的字符串，2将登录界面文本框输入内容与数组内已存的字符串进行比较，如何一致则登录成功，否则显示alert,"用户名或密码错误"
Java Web实现登录注册（超详细附代码）
最新发布
2401_84091468的博客
04-07 2264
相信刚学Javaweb的小伙伴第一个接触的个人小项目都是从项目的登录注册开始的。下面一个小项目中的登录注册将会带大家从零开始学习怎么设计登录注册流程.2.登录注册设计流程3.注册的数据流程那么我们的前端数据是怎么传向后端的？1.首先这里我们是用 表单传递 通过form提交2.在这里，我们输入自己的姓名和密码，点击注册按钮。此时输入的这三个数据，我们可以看做成是一个表单的数据，这些数据会提交到服务器上：3.此时，一个叫Tomcat的东西会处理这个请求，
Python设置登录窗口（升级版）
weixin_67855345的博客
06-06 669
简单的做出一个登录窗口，输入用户和密码进入一个简单的页面。
登陆记录用户名和密码
weixin_38168728的博客
01-13 440
$(function() { $('#login').on('click', function() { var username = $('#username').val(); var password = $('#password').val(); if (username == '' || passw...
实现注册与登录模块
weixin_49884716的博客
11-13 4724
springboot
通过Nodejs搭建网站简单实现注册登录流程
10-16
主要介绍了通过Nodejs搭建网站简单实现注册登录流程，Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。,需要的朋友可以参考下
登录注册流程图.pdf
04-03
登录注册流程图.pdf登录注册流程图.pdf登录注册流程图.pdf登录注册流程图.pdf登录注册流程图.pdf登录注册流程图.pdf
SSM框架实现登录注册功能完整代码
10-23
使用ideal 对ssm框架进行了整合 包含所有jar包和配置文件 部署tomcat后即可运行 首页面index.jsp 主页面用了一点bootstrap框架
用户注册与登录
热门推荐
Leon_Jinhai_Sun的博客
12-19 3万+
注册与登录流程如下： 1、用户打开客户端界面 2、输入手机号，点击“点击发送”按钮 ，系统向手机发送验证码 3、手机收到验证码，输入验证码 4、点击登录 4.1 如果你是没有注册过的用户，则先自动注册用户并登录成功 4.2 如果你是已经注册过的用户，则直接进行登录 ...
【项目实战】登录与注册业务的实现（前端+后端+数据库）
web13618542420的博客
06-21 3851
本示例基于Vue.js和mint UI实现。目录一、数据库的创建二、后端接口与数据库的连接三、前端代码实现1.注册页相关代码2.注册页效果3.登录页相关代码4.登录页效果四、注册登录演示五、项目文件结构此处以Navicat软件进行创建，新建数据库reg_log.sql与数据表reg_log；为了实现注册业务，我们在数据库中设计ID、用户名、密码、邮箱、电话号5个字段。创建结束后保存，便可以在数据库中找到我们刚刚创建的数据库和空表。这样就可以在项目中进行连接了。server文件夹 -> app.js **三、
登录注册的业务逻辑流程梳理
weixin_50367873的博客
11-10 5788
登录注册在不同的产品中有不同的体现，因为对于它的很多功能细节使用的好坏也没法一概而论，还是基于具体场景考虑。 这是早前实习期间做的一个登录注册流程的优化，主要是关于登录注册的业务流程图（Transaction Flow Diagram）梳理，包括短信验证码登录、账号密码登录、第三方登录、忘记密码、图形验证码等以及注意的一些情况。 业务流程图中最主要的几个问题就是： 谁（who），在什么时候（when），在什么条件下（condition），输入什么（input），输出什么（output），输出流向（flow）
几种常见的注册登录流程分析
qq_50909707的博客
03-27 1364
一、用户名注册登录 二、邮箱注册 三、手机号注册登录
账号密码登录和注册业务逻辑
programmer188的博客
03-28 1406
账户密码登录和手机验证码登录 public class LoginServiceImpl implements LoginService { @Value("${md-url}") private String url; @Value("${md-accountSid}") private String accountSid; @Value("${m...
APP登录注册 步骤三：客户端
WU2629409421perfect的博客
03-03 6790
声明： 开发平台：AS 3.5 JDK版本：1.8 MySQL版本：5.7 JDBC驱动：mysql-connector-java-5.1.47.jar 1、项目架构： MainSecondActivity 是 APP 入口程序； Android 上发送 HTTP请求的方式一般有两种：HttpURLConnection 和 HttpClient ！ HttpClientActivity 以...
实训记录（二）：登录注册（一）
L_5327的博客
06-17 259
登录注册功能实现（一）用户信息存储用户实体构造连接数据库下一步工作 用户信息存储 用户信息存储在mysql数据库中，存储格式如下： 用户实体构造 public class UserBean { String sid; String sname; String snum; String sclass; String pwd; public String getSid(){return sid;} public void setSid(String sid){this.sid=sid;} public St
一个简单的登录注册界面流程介绍
qq_43717065的博客
04-11 9855
登录页面实现 其他页面的实现可以到github上克隆下来 一、用户登录 1、密码登录 流程： 用户输入密码； 表单使用正则验证用户名和密码格式； 点击登录，对密码进行加密，并发送登录验证请求； 后台验证用户登录信息是否正确； 正确则生成token返回至前端，否则提示用户名或密码错误。 2、忘记密码 流程： 输入手机号； 表单正则验证手机号格式； 点击获取验证码按钮； 后台验证手机号是否存在； 存在，则生成验证码，加密后保存在服务器session当中，否则提示手机号不存在； 获取到验证码并输入；.
vue3 登录注册的流程
06-02
Vue3 登录注册流程一般包括以下几个步骤： 1. 用户打开登录/注册页面，输入用户名和密码等信息。 2. 前端通过 Ajax 或 Fetch 等方式将用户输入的信息发送到后端服务器进行验证。后端服务器会根据用户提供的信息，进行身份验证和授权。 3. 后端服务器对用户提供的信息进行验证。如果验证通过，则生成一个包含用户身份信息的 token，并将其返回给前端。 4. 前端接收到后端返回的 token，将其存储到浏览器本地存储（比如 localStorage 或 sessionStorage）中，以便在后续的请求中使用。 5. 用户登录成功后，前端会将用户重定向到主页或其他需要登录才能访问的页面。 6. 如果用户在登录时选择了“记住我”的选项，前端会将用户的登录状态保存到 cookie 中，以便用户在下次访问时无需重新登录。 7. 用户退出登录时，前端会将本地存储中的 token 和 cookie 清空，以关闭用户的登录状态。 以上是一个简单的 Vue3 登录注册流程，具体实现方式可能会因项目而异。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值