vue+mysql+node+express+elementui实现登录注册

vue文件中安装的组件 elementui,axios
在main.js中引入

expres创建node文件需要安装的插件 mysql(数据库),cors（跨域）
app.js中引入

创建数据库db.js

创建登录路由 login.js

index.js中引入数据库db.js

登录功能
Login.vue 代码

<template>
  <div class="about">
    <h1>这里是登录页面</h1>
    <form action="">
      <input type="text" v-model="username" id="user" />
      <input type="password" v-model="password" id="pwd" />
      <input type="button" @click="tohome" value="登录" id="logbtn" />
    </form>
  </div>
</template>
<script>
// import $ from "jquery";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    tohome() {
      this.$axios
        .post("http://localhost:3000/login", {
          username: this.username,
          password: this.password,
        })
        //调用成功
        .then((result) => {
          if (result.data.status == 1) {
            //登录成功后的弹窗
            this.$message({
              message: "恭喜你，登陆成功",
              type: "success",
            });
            console.log(result.data);
            localStorage.setItem("user", JSON.stringify(result.data.data));
            //登录成功后跳转到home页面
            this.$router.push({ path: "/home" });
          }
          console.log(result.data.msg);
          this.message = result.data.msg;
        })
        //调用失败
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>

vue文件 中的路由index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component:() => import('../views/Login.vue')
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import('../views/Home')
  },
  {
    path:'/register',
    name:'Register',
    component:()=>import('../views/Register')
  },
]

const router = new VueRouter({
  routes
})

export default router

Home.vue

<template>
  <div class="home">
    这是首页页面
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  components: {
  }
}
</script>

express创建的node文件
db.js

let mysql = require('mysql');
exports.base = (sql, data, callback) => {
    // 加载数据包
    let mysql = require('mysql');

    // 创建数据库连接
    let connection = mysql.createConnection({
        host: 'localhost',
        user: 'root',
        password:'123',
        database:'yihe',
    })

    // 真正的连接数据库
    connection.connect();

    // 操作数据库（异步）
    connection.query(sql, data, function(error, results, fields) {
        if (error) throw error;
        // 用回调函数处理所有的操作
        callback(results);
    });

    // 关闭数据库
    connection.end();
}

login.js

var express = require('express');
var router = express.Router();
let db=require('../public/js/db');
const { log } = require('debug');

router.post('/', function(req, res, next) {
    //从前端发过来的值 req.body
    let info=req.body
   //查找数据库中有没有相同的值
   let data=[info.username,info.password]
   let sql='select * from `login` where username=? and password=?'
   db.base(sql, data,(result) =>{//数组包对象格式
    //  从数据库中查的值
       if(result.length!=0){
           console.log('登陆成功');
           //通过判断返回status的状态值渲染页面
           return res.json({status:1, msg:'登录成功',data:result[0]})
       }else{
            console.log('用户名不存在或者密码错误');
           return res.json({status:2, msg:'用户名不存在或者密码错误'})
  
       }
   })
    
  });
router.post('/name', function(req, res, next) {
  });
module.exports = router;

注册功能 register.vue

<template>
  <div>
    <h1>注册页面</h1>
    <form action="">
      <div>
        <label for="username">用户名: </label>
        <input type="text" name="username" v-model="username" id="uname" />
      </div>
      <div>
        <label for="password">密码：</label>
        <input type="password" name="password" v-model="password" id="pwd" />
      </div>
      <div>
        <input type="button" @click="subbtn" value="注册" id="regbtn" />
      </div>
    </form>
  </div>
</template>
<script>
// import qs from 'qs'
export default {
  name: "Register",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    subbtn() {
      this.$axios
        .post("http://localhost:3000/register", {
          username: this.username,
          password: this.password,
        })
        .then((result) => {
          if (result.data.status == 1) {
            this.$message({
              message: "恭喜你，注册成功",
              type: "success",
            });
            console.log(result.data);
            localStorage.setItem("user", JSON.stringify(result.data.data));
            this.$router.push({ path: "/home" });
          } else {
            console.log(result.data.msg);
            this.$message({
              message: "该用户名已被注册",
              type: "error",
            });
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>

node文件中 app.js中·引入 register路由

注册路由 register.js

var express = require('express');
var router = express.Router();
let db = require('../public/js/db');
const {
    log
} = require('debug');

     //注册成功(在数据库中做去重功能后)
router.post('/', function (req, res, next) {
    //从前端发过来的值 req.body
   let info = req.body
    //查找数据库中有没有相同的值
   let data = [info.username, info.password]
   let sql='select * from `login` where username=?'
   db.base(sql, data,(result) =>{//数组包对象格式
    //  从数据库中查的值
       if(result.length==0){
        let sql = `insert into login(username,password) values(?,?)`;
        db.base(sql,data,(result) => { //数组包对象格式
            console.log(result);
           if(result){
               console.log('注册成功');
               return res.json({status:1, msg:'注册成功', data:result[0]})
           }else{
               console.log('注册失败');
               return res.json({status:2,msg:'注册失败'});
           }
        })
       }else{
            console.log('用户名已被注册');
           return res.json({status:2, msg:'用户名已被注册'})
       }
   })



     //注册成功(没有在数据库中做去重功能)
    // let sql = `insert into login(username,password) values(?,?)`;
    // db.base(sql,data,(result) => { //数组包对象格式
    //     console.log(result);
    //    if(result){
    //        console.log('注册成功');
    //        return res.json({status:1, msg:'注册成功', data:result[0]})
    //    }else{
    //        console.log('注册失败');
    //        return res.json({status:2,msg:'注册失败'});
    //    }
    // })
});
// router.post('/name', function (req, res, next) {});
module.exports = router;

加了正则判断后的注册
register.vue

<template>
  <div>
    <el-form :model="formData" :rules="rule" ref="form">
      <el-form-item label="用户名" prop="username" >
        <el-input
          v-model="formData.username"
          placeholder="请输入用户名"
          style='width:auto'
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="formData.password"
          placeholder="请输入密码"
          style='width:auto'
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="subform('form')">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import qs from "qs";
export default {
  data() {
    return {
      formData: {
        username: "",
        password: "",
      },
      rule: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 10, message: "长度在2到10个字符", trigger: "blur" },
          {
            required: true,
            pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
            message: "用户名不支持特殊字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 12, message: "请输入6到12位密码", trigger: "blur" },
          {
            required: true,
            pattern: /^[a-zA-Z0-9]{6,12}$/,
            message: "请输入英文或数字",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    subform(formData) {
      this.$refs[formData].validate((valid) => {
        if (valid) {
          // console.warn(this.formData.username,this.formData.password)
          let params = {
            username: this.formData.username,
            password: this.formData.password,
          };
          this.$axios
            .post("http://localhost:3000/register", qs.stringify(params))
            .then((result) => {
              console.error(result);
              if (result.data.status == 1) {
                this.$message({
                  message: "恭喜你，注册成功",
                  type: "success",
                });
                console.log(result.data);
                localStorage.setItem("user", JSON.stringify(result.data.data));
                // this.$router.push({ path: "/home" });不支持跳转功能
              } else {
                console.log(result.data.msg);
                this.$message({
                  message: "该用户名已被注册",
                  type: "error",
                });
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        }else{
          console.log('error submit');
          return false;
        }
      });
    },
  },
};
</script>

注意：el-form-item中尽量不要设置 label-width=‘auto’,否则会报错，