vue+node---使用element框架实现的前后台用户登录注册功能

最新推荐文章于 2024-08-08 16:35:03 发布

maidu_xbd

最新推荐文章于 2024-08-08 16:35:03 发布

阅读量3.6k

点赞数

分类专栏： vue node.js 文章标签：用户登录注册

本文链接：https://blog.csdn.net/maidu_xbd/article/details/90605412

版权

vue 同时被 2 个专栏收录

107 篇文章 9 订阅

订阅专栏

node.js

19 篇文章 0 订阅

订阅专栏

为了更进一步清晰地了解前台数据向后台提交的过程，更好地加强巩固前端开发学习，整理了基础的【前后台用户登录注册功能】实现代码。后台通过node.js开发，数据存储在sqlite中，前台vue+element完成开发，首先功能实现效果展示如下：

一、后台node.js

安装express、body-parser 【npm install express body-parser 】，关于express介绍，见https://blog.csdn.net/maidu_xbd/article/details/86632618 body-parser用于处理post请求

全局安装sqlite3【npm install sqlite3 -g】sqlite使用说明详细见https://blog.csdn.net/maidu_xbd/article/details/99977786

server.js完整代码:

const express = require("express")
const bodyParser = require("body-parser")

const sqlite3 = require("sqlite3").verbose()
const app = express()
// sqlites数据库地址
let sqliteDbPath = "C:\\Users\\lenovo\\Desktop\\Demo.db"
// 打开sqlites数据库
var db = new sqlite3.Database(sqliteDbPath)
app.use(bodyParser.json()) // for parsing application/json
// app.get('/', (req, res) => res.send('Hello World!'))

// 登录请求处理
app.post("/submitLogin", function(req, res) {
    var username = req.body.name
    var password = req.body.password
    db.all(`select * from user where username=?`, username, function(err, row) {
        if (err) throw err
        else {
            // console.log(row)
            if (row == "") {
                // 如果查找数据库用户名为空，则无此用户
                res.send({ status: 500, msg: "此用户不存在" })
            } else {
                // console.log(row[0].password)
                if (row[0].password != password) {
                    // 检验密码是否一致
                    res.send({ status: 500, msg: "密码错误" })
                } else {
                    res.send({ status: 200, msg: "登录成功" })
                }
            }
        }
    })
})

// 注册请求处理
app.post("/submitRegister", (req, res) => {
    var username = req.body.name
    var email = req.body.email
    var password = req.body.password
    console.log(username)
    db.all("select * from user where username=?", username, function(err, row) {
        if (err) throw err
        else {
            // console.log(row)
            if (row == "") {
                // 如果查找数据库用户名为空，则无此用户,在数据库中存储用户名，密码和邮箱信息
                // var sql_add = db.prepare(`insert into user (username, password, email) values('buding1', '1111', '221@sdsd.com')`)
                var sql_add = db.prepare(`insert into user (username, password, email) values(?,?,?)`)
                sql_add.run(username, password, email)
                res.send({ status: 200, msg: "恭喜你，注册成功！" })
            } else {
                res.send({ status: 500, msg: "用户名已注册，请更换用户名" })



            }
        }
    })
})


app.listen(9999, () => console.log("Example app listening on port 9999!"))

注意：接口文件

用户登录验证

前台将用户输入的用户名和密码传入到后台验证
url	/submitLogin
method	POST
request	{“name”:userName,”password”:password}
response	后台验证成功：{“status”:200,”msg”:”登录成功”} 后台密码验证失败：{“status”:500,”msg”:”密码错误”} 后台用户不存在验证失败：{“status”:500,”msg”:”此用户不存在”}

2. 用户注册验证

前台将用户输入的用户名、邮箱和密码传入到后台验证
url	/submitRegister
method	POST
request	{“name”:userName, "email":email, ”password”:password}
response	后台验证成功：{“status”:200,”msg”:”恭喜你，注册成功”} 后台验证失败：{“status”:500,”msg”:”用户名已注册，请更换用户名”}

二、前台vue+element

安装element-ui 【npm i element-ui -S】

安装axios：【npm install axios --save-dev】

详细见https://blog.csdn.net/maidu_xbd/article/details/88566665

Login.vue完整代码如下：

<template>
  <div class="login-demo">
    <div class="login-wrap">
      <el-row type="flex" justify="center">
        <!-- 登录框 -->
        <el-form ref="loginForm" :rules="formRules" :model="user" status-icon label-width="70px">
          <el-tabs :stretch="true" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="登录" name="login">
              <el-form-item prop="username" label="用户名">
                <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item prop="password" label="密码">
                <el-input v-model="user.password" show-password placeholder="请输入密码">
                  <template slot="prepend"></template>
                </el-input>
              </el-form-item>
              <el-checkbox id="savePassword" checked="checked" @click="savePassword()">记住密码</el-checkbox>
              <router-link to="/forgetPassword">忘记密码</router-link>
              <br>
              <br>
              <el-form-item>
                <el-button type="primary" @click="doLogin('loginForm')">登 录</el-button>
              </el-form-item>
            </el-tab-pane>
            <!-- 注册框 -->
            <el-tab-pane label="注册" name="register">
              <el-form-item prop="username" label="用户名">
                <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item prop="email" label="邮箱">
                <el-input v-model="user.email" placeholder="请输入邮箱"></el-input>
              </el-form-item>
              <el-form-item prop="password" label="设置密码">
                <el-input v-model="user.password" show-password placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon @click="doRegister('loginForm')">注册账号</el-button>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </el-row>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "login",
  data() {
    return {
      activeName: "login",
      checked: false,
      user: {
        username: "",
        password: ""
      },
      // 通过 formRules 属性传入约定的验证规则
      formRules: {
        username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { type: "string", min: 6, message: "密码不能小于6位", trigger: "blur" }
        ],
        // bug--由于此处登录和注册共用一个el-form，因此只能绑定一个rules,如果邮箱设置为必填，将导致无法登陆。一般情况下，将登录和注册分别放在不同的el-form中，为它们设置不同的rules
        email: [
          // { required: true, message: "请输入邮箱地址", trigger: "blur"  },
          { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }
        ]
      }
    }
  },
  created() {},
  methods: {
    // 登录
    doLogin(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          axios
            .post("/submitLogin/", {
              // .post("/api/login/", {
              name: this.user.username,
              password: this.user.password
            })
            .then(res => {
              //  console.log("输出response.data", res.data);
              if (res.data.status === 200) {
                this.$router.push({ path: "/welcome" });
              } else {
                this.$message.error(res.data.msg)
              }
            });
        } else {
          return false;
        }
      });
    },
    // 注册账号
    doRegister(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log(valid);
          axios
            .post("/submitRegister/", {
              name: this.user.username,
              email: this.user.email,
              password: this.user.password
            })
            .then(res => {
              // console.log("输出response.data", res.data);
              if (res.data.status === 200) {
                this.$message.success(res.data.msg)
                this.activeName = "login";
              } else {
                this.$message.error(res.data.msg);
              }
            });
        } else {
          return false;
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 记住密码
    savePassword() {
      if (document.getElementById("savePassword").checked) {
        var username = this.user.username;
        var password = this.user.password;
        wind
        ow.sessionStorage.username = username;
        window.sessionStorage.password = password;
        localStorage.rmbPassword = true;
      } else {
        localStorage.rmbPassword = false;
      }
    }
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 公共样式 */
li {
  list-style: none;
  float: left;
}

.login-demo {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url("../assets/images/bg2.png") no-repeat;
  background-size: cover;
  top: 0px;
  left: 0px;
  overflow: hidden;
}

.login-wrap {
  background: url("../assets/images/login_bg.png") no-repeat;
  width: 400px;
  height: 310px;
  margin: 175px auto;
  margin-left: 272px;
  border-radius: 6px;
  line-height: 20px;
  padding-top: 0px;
}

.el-tabs>>>.el-tabs__item {
  font-size: 18px;
  margin: 5px auto;
}

.el-tabs__nav {
  font-size: 18px;
}

a {
  text-decoration: none;
  color: #606266;
  font-size: 14px;
  float: right;
}

a:hover {
  color: coral;
}

.el-checkbox {
  text-indent: 4px;
}

>>>.el-form-item__label {
  padding: 0px 4px 0 0;
}

>>>.el-checkbox__label {
  padding-left: 0px;
}

.el-button {
  width: 118%;
  margin-left: -40px;
  background-color:
    #16696a;
  letter-spacing: 5px;
  border: 0px;
}

</style>

ForgetPassword.vue完整代码如下：
备注：发送邮件尚未做

<template>
  <div class="forget-password">
    <div id="content">
      <h3>{{message}}</h3>
      <el-form :rules="rules" label-width="40px" class="demo-ruleForm">
        <el-form-item label="邮箱" prop="pass">
          <el-input type="input" v-model="email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sumbitForm">确定</el-button>
          <el-button type="primary" @click="cancle">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "forget-password",
  data() {
    return {
      message: "找回密码！",
      email: "",
      rules: {
        email: [{ message: "邮箱不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    sumbitForm() {
      if (!this.email) {
        this.$message.error("请输入邮箱！");
        return;
      } else {
        var reg = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/;
        if (!reg.test(this.email)) {
          this.$message.error("邮箱格式不正确，请重新输入！");
          this.email.focus();
          return false;
        } else {
          this.$message("发送邮件");
          //    axios
          //     .post("/register/", {
          //       name: this.user.username,
          //       email: this.user.email,
          //       password: this.user.password
          //     })
          //     .then(res => {
          //       // console.log("111输出response.data", res.data);
          //       // console.log("111输出response.data.status", res.data.status);
          //       if (res.data.status === 200) {
          //         this.$router.push({ path: "/" });
          //       } else {
          //         alert("您输入的用户名已存在！");
          //       }
          //     });
        }
      }
    },
    cancle() {
      this.$router.go(-1);
    }
  }
};

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.forget-password {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url("../assets/images/bg4.png") no-repeat;
  background-size: cover;
  top: 0px;
  left: 0px;
  overflow: hidden;
}

#content {
  width: 400px;
  height: 200px;
  margin: 100px auto;
  /* background: #d7e695; */
  background-color: rgba(0, 0, 0, 0.2);
  padding: 10px;
  border-radius: 6px;
}

</style>

注意：【config】下【index.js】修改配置文件

proxyTable: {
      '/': {

        target: 'http://localhost:9999',
        changeOrigin: true,
        pathRewrite: {
          '^/': ''

        }
      }
    },