vue、node、mysql多页面项目入门学习笔记（一）登录注册篇

先生余枫

已于 2024-03-18 12:05:27 修改

阅读量827

点赞数 22

分类专栏： vue.js node.js 前后端交互文章标签：学习笔记 vue.js node.js mysql

于 2024-03-18 11:18:06 首次发布

本文链接：https://blog.csdn.net/qq_51165365/article/details/136793164

版权

vue.js 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

node.js

2 篇文章 0 订阅

订阅专栏

前后端交互

2 篇文章 0 订阅

订阅专栏

一、总说

首先这是个人学习的项目，入门级别的想法，纯属个人兴趣爱好，可能做不完，仅此做一个学习笔记，也希望对大家学习有关有所帮助。项目主题就是“灵山书院”，文章根据功能设计，一共设计五篇，此为登录注册篇。

二、个人项目设计

设计功能内容有：

1.登录注册（验证码【QQ邮箱示例】，可能会涉及管理者与非管理者分类，先忽略此。）

2.历史书籍文献资料的查阅（文件检索，文件查阅，文件上传）

3.有关历史地图2d,3d模式（地形）资料展示与查阅（需要功能4的数据积累）

4.有关历史地图可视化制作与上传（天地图API为主）

5.历史与地理学术论坛(文章编辑，主题讨论，学术评价)

设计一个大功能一个页面，前端使用vue3 的vue cli 脚手架，没有使用vite,官方推荐的vite，由于我是入门的，所以我没有深入研究，直接会用就行，后端主要使用node，数据库使用mysql

三、登录注册实现的功能实现过程

（一）前端vue-cli

前端准备

1.新建项目文件夹，路径下cmd，如果没有梯子，建议更换下载源，网址可查询镜像源，下面使用的是淘宝最新镜像源。后面为vue cli 脚手架安装与项目创建。

/* 淘宝镜像源路径更新了*/
npm config set registry https://registry.npmmirror.com

/* 1.安装vue cli*/
npm install -g @vue/cli
/* 2.创建项目i*/
vue create my-project

2.开始创建项目界面，enter即可（默认vue3）

构建完成后是vue cli构建的默认demo,打开vscode 编辑器开始改造。

多网页应用设计，改造vue-cli 项目

1.修改网页标题和图标，首先制作自己的图标（必须是favicon.ico），然后再index.html修改即可

2.安装vue-router （注意版本问题），过于高的版本会有报错或者警告，本项目使用的是

npm i vue-router@3.5.2

3.删除src下面的所有文件，assets可以保留，src下新建pages文件夹，对文件重新构造，如下，home,index是网页设计名称，注意其中index是建议不修改名称，他是项目默认访问的路径名称

每个项目必须包含app.vue,main.js,router.js文件，js、css、views、app.js是自定义的，个人喜欢js,css,html分开，其中views是用来放置单页面组件.vue的

main.js文件，可以引入全局样式文件

//样式
import './css/main.css'
//部署全局jquery
import {$} from 'jquery'//没有使用
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// Vue.config.productionTip = false
createApp(App).use(router).mount('#app')

router.js

// router.js

import router from 'vue-router';
import Home from './App.vue';

const routes = [
  { path: '/', component: Home },

];

export default new router({
  routes
});

app.vue

<template>
  <component :is="msg"></component>

  <div class="heng" id="my_lan">

    <ur @click="login_get_pswds($event)" id="get_pswds">验证登录 </ur>
    <ur id="reg_ur" @click="reg_con($event)">注册账号</ur>
  </div>
</template>
 
<script  src="./App.js"></script>
<style src="">
</style>

app.vue中App.js

//这里的from路径根据自己的布局更改路径  组件

import Reg from './views/register_.vue';
import Login from './views/login_.vue';
import Getpswds from './views/get_passwords.vue';

export default {
  name: "App",
  data() {
    return {
      msg: "Login",
    };
  },
  methods: {
    login_get_pswds(e) {
      //点击元素的ID this 放在methods内部才有效
      // let ID = e.target.id
      // let val = e.target.innerText 减少对元素内容的依赖，更少错误

      if (this.msg == "Login") {
        this.msg = "Getpswds"
        e.target.innerText = "密码登录"
        // $("#get-code_btn").css({ display:"block" });
      }
      else if (this.msg == "Getpswds") {
        this.msg = "Login"
        e.target.innerText = "验证登录"
        // $("#get-code_btn").css({ display:"none" });
      } else {
        this.msg = "Login"
        e.target.innerText = "验证登录";
        //下一个元素
        e.currentTarget.nextElementSibling.innerText="注册账号"
        //修改样式
        $("#my_lan").css({ "top":"53%" });
        // $("#get-code_btn").css({ display:"none" });
     
      }
    },
    reg_con(e) {
      this.msg = "Reg"
      //留白
      e.target.innerText = ""
      //前一个元素获取
      let dom =  e.currentTarget.previousElementSibling
      dom.innerText = "返回登录"
      $("#my_lan").css({ "top":"63%" });
      // $("#get-code_btn").css({ display:"block" });
     

    },
  },
  //父组件传出值参数
  provide() {
    return {
      msg: this.msg
    }
  },
  components: {
    Login,
    Reg,
    Getpswds,
  },
};

views js文件里面一一对应：

如login_.js,login_.vue

<template>
  <div class="container">
    <div class="login-wrapper" id="login_con">
      <div class="header">账号登录</div>
      <div class="form-wrapper">
        <input
          type="text"
          name="username"
          placeholder="用户手机/邮箱"
          class="input-item"
        />
        <input
          type="password"
          name="password"
          placeholder="密码"
          class="input-item"
        />
      
        <div class="btn"  id="login_pswds" @click="login_($event)">登录</div>
      </div>
    </div>
  </div>
</template>
 

<script src="../js/login_.js"> 
</script>

import { login_post } from '../../../../public/global_function'
import { check } from '../../../../public/global_function'
//vscode自动寻找路径


const login_Log = (e,this_) => {
    let user = e.currentTarget.previousElementSibling.previousElementSibling.value
    let pswds = e.currentTarget.previousElementSibling.value
    console.log(user, pswds)
    if (user == "" || pswds == "" || check(user) == false) {
        if (check(user) == false)
            alert("用户不是（手机或）邮箱格式!")
        else {
            console.log("不能登录")
            alert("请完善账户信息登录!")
        }

    } else {
        console.log(user + "密码：" + pswds + "请求登录")
        login_post("passwds", [user, pswds],this_)
    }
}

export default {
    //组件名称
    name: "Login",
    inject: ["msg"],//父组件传入值
    //函数方法
    methods: {
        login_(e){
            //传递this
            let this_=this
            login_Log(e,this_)

        },


    },

};

其中global_function是全局函数方法文件,global_function.js如下

/*其他文件 import {函数名}  from 'public/global.js' 全局暴露在使用的时候不需要this*/
/**
 * 登录请求
 * @param {*} login_type  登录类型 {code; passwords}
 * @param {*} userInfo  qq.com
 */
function login_post(login_type, userInfo,this_) {

    console.log(login_type + userInfo)
    let name = userInfo[0], pwd = userInfo[1]

    //向服务器提交数据post
    $.ajax({
        method: "post",
        data: { username: name, userpwd: pwd, type_log: login_type },
        params: { username: name, userpwd: pwd, type_log: login_type },
        url: "http://localhost:3000/login",
        success: function (res) {
            //返回结果与信息
            console.log("登录连接成功！");
            console.log(res)
            if (res.static == true) {
                console.log("登录成功！");
                //页面跳转传参
                 window.location.href ='http://192.168.1.37:8080/map/user='+res.username
             
            }
            else {
                console.log("登录失败！请重新输入密码");
            }

        },
        error: function (err) {
            if (err.readyState == 0) {
                alert("连接异常，请检查客户端网络或者服务端状态！")
            }
            console.log(err);
        },
        timeout: 2000
    }).then(function (response) {
        //成功时服务器返回 response 数据
        // alert(response.data)
    }).catch(function (error) {
        console.log(error);
    });

}

function reg_post(login_type, userInfo,this_) {
    console.log(login_type + userInfo)
    let name = userInfo[0], pwd = userInfo[1], code = userInfo[2]

    //向服务器提交数据post
    $.ajax({
        method: "post",
        data: { username: name, userpwd: pwd, type_log: login_type, code: code },
        params: { username: name, userpwd: pwd, type_log: login_type, code: code },
        url: "http://localhost:3000/reg",
        success: function (res) {
            //返回结果与信息
            console.log("注册连接成功！");
            console.log(res)
            if (res.static == true) {
                // console.log("登录成功！");
            }
            else {
                // console.log("登录失败！请重新输入密码");
            }

        },
        error: function (err) {
            if (err.readyState == 0) {
                alert("连接异常，请检查客户端网络或者服务端状态！")
            }
            console.log(err);
        },
        timeout: 3000
    }).then(function (response) {
        //成功时服务器返回 response 数据
        // alert(response.data)
    }).catch(function (error) {
        console.log(error);
    });


}

/**
 *  邮箱格式验证
 * @param {*} txt   手机没有写 
 * @returns 
 */
function check(txt) {
    var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/g; //邮箱验证
    console.log("输入的邮箱验证开始")

    if (reg.test(txt)) {

        return true;
    } else {

        return false;
    }
}
/**
 * 验证码获取事件
 * @param {*} input_str 输入用户内容 qq.com
 * @param {*} type 验证码类型 login  reg
 */
function getemail(input_str,type) {
    //获取邮箱验证事务
    let login_type = "get_Email_codes"
    let name = input_str
    console.log("用户" + name + "正在获取验证码")
    $.ajax({
        method: "post",
        data: { username: name, userpwd: "no! To_get_this_server_Email_codes", type_log: login_type,type:type },
        params: { username: name, userpwd: "no! To_get_this_server_Email_codes", type_log: login_type,type:type },
        url: "http://localhost:3000/checkCode",
        success: function (res) {
            console.log(res)
            if (res == "邮箱发送成功") {
                alert("邮箱发送成功！");
            } else if (res == "用户未注册") {
                alert(res + ",请先注册账号!");
            }
            else {
                alert("邮箱发送失败！");
            }
        },
        error: function (err) {
            console.log("连接异常，请检查客户端网络或者服务端状态！")
            console.log(err);
        },
        timeout: 2000
    }).catch(function (error) {
        console.log(error);
    });
}
export {			//关键
    login_post, getemail, check, reg_post
}

关键配置vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
const webpack = require("webpack");
//入口文件
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,//驼峰语法报错esli
  //jquery插件
  configureWebpack: {
    plugins: [
      // 配置jQuery
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery",
      })
    ],
  },
  //多页面配置
  pages: {
    // 先配置主页
    index: {
      entry: 'src/pages/index/main.js',
      template: './public/index.html',
      title: '用户登录'
    },
    // 登录后首页
    home: {
      entry: 'src/pages/home/main.js',
      template: './public/home.html',
      title: '黔灵山书院大厅'
    },
    map: {
      entry: 'src/pages/map/main.js',
      template: './public/map.html',
      title: '黔灵山书院地图'
    }
  },
})

此时还有Jquery,element-plus没有安装，执行


//修改样式使用了Jquery需要安装
npm i jquery 
//有已使用了elment-plus
npm install element-plus

 npm run serve

生成三个可以访问的页面（暂时试验），http://localhost:8080/index ; http://localhost:8080/home

http://localhost:8080/map

页面跳转代码及网页传参

//页面跳转传参
window.location.href ='http://localhost:8080/map/user='+res.username

其中有些样式没有给，可以根据路径创建，这里给index/css/main.css


.title {
  position: absolute;
  width: 25%;
  left: 35%;
  display: inline-flex;
  text-align: center;
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
}

.btn {
  background-color: rgb(210, 193, 326);
  border-radius: 28px;
  border: 1px solid #ffffff;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 17px;
  padding: 16px 31px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #2f6627;
  margin: 10px 20px;
}

.btn:hover {
  background-color: rgb(180, 193, 237);
}

.btn:active {
  position: relative;
  top: 1px;
}

.login-wrapper {
  background-color: #fff;
  width: 358px;
  height: 588px;
  border-radius: 15px;
  padding: 0 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.header {
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
}
#reg_form{
  position: relative;
  top:-8%
}

.input-item {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  border: 0;
  padding: 10px;
  border-bottom: 1px solid rgb(128, 125, 125);
  font-size: 15px;
  outline: none;
}

.input-item:placeholder {
  text-transform: uppercase;
}

.btn {
  text-align: center;
  padding: 10px;
  width: 100%;
  margin-top: 40px;
  background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
  color: #fff;
  margin: 0 auto;
}

.msg {
  text-align: center;
  line-height: 88px;
}

a {
  text-decoration-line: none;
  color: #abc1ee;
}

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0px;
}
.heng{
  display:flex;
}
#code_input{
  display: block;
  width: 100%;
  height: 10%;
}
#get_code_reg,#get_code_login{
  position: relative;
  width: 50%;
  top:-48px;
 
  left:5%;

}

#my_lan{
  position: absolute;
  width: 50%;
  left:38.4%;
  top:53%;
  color:#A3C2E9;
  cursor: pointer;
}
#reg_ur{
  position: relative;
  left:31%;
  color:#84CFA3;
  cursor: pointer;

}
.container {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right, #ddeef1, #a0ebcc);
}



.login-wrapper {
  background-color: #fff;
  width: 358px;
  height: 588px;
  border-radius: 15px;
  padding: 0 50px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.header {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
}

.input-item {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  border: 0;
  padding: 10px;
  border-bottom: 1px solid rgb(128, 125, 125);
  font-size: 15px;
  outline: none;
}

.input-item:placeholder {
  text-transform: uppercase;
}

.btn {
  text-align: center;
  padding: 10px;
  margin: 0 auto;
  width: 100%;
  margin-top: 40px;
  background-image: linear-gradient(to right, #a6c1ee, #7bd38e);
  color: #fff;
}

.msg {
  text-align: center;
  line-height: 88px;
}

a {
  text-decoration-line: none;
  color: #abc1ee;
}

需要说明public文件夹下面是这样;

global.js 前面已经给了，config.js是全局变量配置，比如：

// 全局变量
const Is_reg = false


export { Is_reg }

前端改造多网页的模板搭建完成，可以考虑下一步的前后端交互，还有后端对数据库的增删改查

（二）后端node+mysql

总说

因为是登录注册，所以还需要验证功能，试验需要，使用QQ邮箱，开启邮箱的发送邮件APi请移步有关搜索。由于本人属于入门学习，有很多不足，望勿责。

mysql配置与建表

本人使用My SQL WorkBench操作，由于刚学习，使用node直接进行操作的话的不太会，所以这里先用工具操作，node只是负责增删改查和前端交互。具体操作请搜索有关基本操作，建数据库

，建表，本人有两个表如下

表1的字段与约束设计如下：

表2如下

node交互数据库与前端

我的node这样;

其中config.js是配置变量的文件；


const connectUser = {
    // sql
    mysqlUser: {
        host: 'localhost',
        user: 'admin',//user
        password: '*******',
        port: "3306",// 默认使用3306端口号
        database: 'mysql_pswds'//数据库名
    },
    //qqEmail
    qqEmail: {
        host: "smtp.qq.com", //qq smtp服务器地址
        secureConnection: false, //是否使用安全连接，对https协议的
        port: 465, //qq邮件服务所占用的端口
        auth: {
            user: '*******@qq.com', //QQ邮箱SMTP授权用户名
            pass: '**********' // SMTP授权码
        }
    },
    tableInfo:
    {
        table_log: {
            type: "查",
            tableName: "mypswords",
            if: "",
            tableCd: "username,passwds,type,qqcom,sex",
            CDValues: "'凡语春秋','10086yj',1,'2409479323@qq.com',1",
            endValue: ""
        },

    },
    new_table_cd: {
        username: "",
        passwds: "",
        type: "",
        qqcom: "",
        sex: "",
        is_using: "",
        reg_code: "",
        login_code: ""
    },

}

module.exports = connectUser;

global.js是函数方法文件；

const { qqEmail } = require("./config");

//node语法与前端的import有区别
function myCode() {

    let code = "";
    while (code.length < 6) {
        code += Math.floor(Math.random() * 10);
    }
    console.log(code)
    return code
}

function add_(connect, table_info, data) {

    let userAddSql = 'INSERT INTO ' + table_info.tableName + '(qqcom,passwds) VALUES(?,?)';
    let addParams = ['2409479323@qq.com', 1]
    //增 add
    connect.query(userAddSql, addParams, function (err, result) {
        if (err) {
            console.log('[INSERT ERROR] - ', err.message);
            return;
        } else {
            console.log('插入成功！')
        }

    });

}


function del_(connect, del_if, table_info) {
    let userDelSql = 'DELETE FROM ' + table_info.tableName + ' WHERE ' + del_if;
    //查 query
    connect.query(userDelSql, function (err, result) {
        if (err) {
            console.log('删除失败 ', err.message);
            return;
        } else {
            console.log('删除成功 ');

        }
    });
}
// del_("userid=100012",table_info)
//修改更新 注意关键字的空格！！
/**
 * 更新sql
 * @param {} connect 
 * @param {*} table_info 
 * @param {*} updateArr  更新条件与字段,新的内容
 */
function update_(connect, table_info, update_if) {
    let sqlStr = "UPDATE " + table_info.tableName + " SET " + " username = ?, qqcom = ? WHERE userid = ? "
    let user_params = ["我是小白", "3216948972@qq.com", 100008]
    //执行mysql 语句1
    connect.query(sqlStr, user_params, (err) => {
        if (err) {
            console.log(err)
            console.log("修改失败")
        } else {
            console.log('修改成功！')
            //成功后的页面显示
        }
    })
}
// update_(connect, table_info)
/* //增删改查同时操作时候，end()必须最后关闭，或者必须异步，否则报错
function get_check(connect, table_info, req, res) {

    let uername = req.body.username
    console.log("是否存在用户" + uername)
    let type = req.body.type_log

    let select_if = "qqcom='" + uername + "'";

    let userGetSql = 'SELECT *' + ' FROM ' + table_info.tableName + " WHERE " + select_if;
    //查 query
    connect.query(userGetSql, function (err, result) {
        if (err) {
            console.log('查询失败 ', err.message);
            return err.message;
        } else {
            console.log('查询成功，下面结果： ');

            data = eval(JSON.stringify(result))//QQ唯一性
            console.log(data);
            if (data[0] == undefined || data[0] == null) {
                return null

            }
            else {
                let password = data[0].passwds
                console.log(data[0])
                if (type == "passwds") {
                    // 密码登录
                    console.log("开始密码验证")
                    if (password == pwd) {
                        let data = {
                            static: true,
                            uername: uername,
                            password: password

                        }
                        res.send(data);
                        console.log("用户" + uername + "登录授权成功!")
                    } else {
                        let tip = "密码错误！"
                        let data = {
                            static: false,
                            uername: uername,
                            tip: tip
                        }
                        res.send(data);
                    }
                } else if (type == "codes") {
                    //验证码登录
                    console.log("开始邮箱验证")
                    let password = codes_Arr[codes_Arr.length - 1][0]
                    console.info("邮箱验证码" + password);
                    if (password == pwd) {
                        let data = {
                            static: true,
                            uername: uername,
                            password: password
                        }
                        res.send(data);
                    } else {
                        let tip
                        if (password == "原始验证码是啥子呢，因为你没有请求！") {
                            tip = "未获取验证码或验证码已经失效，请重新获取验证码！"
                        }
                        let data = {
                            static: false,
                            uername: uername,
                            tip: tip
                        }
                        res.send(data);
                    }
                } else {
                    //???
                    console.log(pwd)
                    res.send("请检查请求方式post或get与服务端是否一致");
                }
                return data
            }



        }
    });
}
function get_update(){

} */
//get 查 验证密码 验证码
function get_(connect, table_info, req, res) {
    let pwd = req.body.userpwd
    console.log("登录用户输入密码" + pwd)
    let uername = req.body.username
    console.log("登录用户" + uername)
    let type = req.body.type_log
    console.log("登录类型" + type)
    let select_if = "qqcom='" + uername + "'";

    let userGetSql = 'SELECT *' + ' FROM ' + table_info.tableName + " WHERE " + select_if;
    //查 query
    connect.query(userGetSql, function (err, result) {
        if (err) {
            console.log('查询失败 ', err.message);
            return;
        } else {
            console.log('查询成功 ');

            data = eval(JSON.stringify(result))//QQ唯一性
            console.log(data);
            if (data[0] == undefined || data[0] == null) {
                return null
            }
            else {
                let password = data[0].passwds
                console.log(data[0])
                if (type == "passwds") {
                    // 密码登录
                    console.log("开始密码验证")
                    if (password == pwd) {
                        let data = {
                            static: true,
                            uername: uername,
                            password: password

                        }
                        res.send(data);
                        console.log("用户" + uername + "登录授权成功!")
                    } else {
                        let tip = "密码错误！"
                        let data = {
                            static: false,
                            uername: uername,
                            tip: tip
                        }
                        res.send(data);
                    }
                } else if (type == "codes") {
                    //验证码登录
                    console.log("开始邮箱验证")
                    let password = codes_Arr[codes_Arr.length - 1][0]
                    console.info("邮箱验证码" + password);
                    if (password == pwd) {
                        let data = {
                            static: true,
                            uername: uername,
                            password: password
                        }
                        res.send(data);
                    } else {
                        let tip
                        if (password == "原始验证码是啥子呢，因为你没有请求！") {
                            tip = "未获取验证码或验证码已经失效，请重新获取验证码！"
                        }
                        let data = {
                            static: false,
                            uername: uername,
                            tip: tip
                        }
                        res.send(data);
                    }
                } else {
                    //???
                    console.log(pwd)
                    res.send("请检查请求方式post或get与服务端是否一致");
                }
                return data


            }

        }
    });
}

// get_("username='我是小白'",table_info)
/**
 * 
 * @param {*} transporter 邮箱API
 * @param {*} code  生成的验证码
 * @param {*} uername 发送对象
 * @param {*} req 请求来源
 * @param {*} res 返回的结果
 */
function qqEmail_send(transporter, code, uername, req, res) {
    let post_chek = "登录"
    //发送邮箱
    let mailOption = {
        from: "3216948972@qq.com",
        to: uername,//收件人
        subject: '【黔灵山书院】请您验证', // 标题
        html: `
        <p>你好！</p>
        <p>您正在使用手机或邮箱${post_chek}社区账号</p>
        <p>你的验证码是：<strong style="color: #ff4e2a;">${code}</strong></p>
        <p>为了您的账户安全，请勿泄露你的验证码,请确认是你本人操作！</p>
        <p>***该验证码3分钟内有效***</p>` // html 内容
    };
    transporter.sendMail(mailOption, function (error, info) {
        if (error) {
            res.send("邮箱发送失败");
            return console.info(error);
        } else {
            res.send("邮箱发送成功");
            console.info("Message send" + code);
        }
    })

}
const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay * 1000))


module.exports = { add_, del_, update_, get_, qqEmail_send, sleep, myCode }

serve.js是服务主题。

const express = require('express')
let mysql = require('mysql')
const app = express()
const cors = require('cors')
const bodyparser = require('body-parser')
const multiparty = require('connect-multiparty')
const connectUser = require("./config")
const global = require("./global")
const util = require('util');//包装mysql嵌套函数async_await

app.use(cors())
app.use(bodyparser.urlencoded({
    extended: true
}));
app.use(bodyparser.json())
app.use(multiparty())
/* 安装在电脑系统根目录下终端进行  不建议编译器下终端 */
let nodemailer = require("nodemailer");
var session = require("express-session");
const { request } = require('http')
app.use(session({
    secret: 'keyboard cat',
    resave: true,
    saveUninitialized: true,
    cookie: { secure: false, maxAge: 1000 * 60 * 20 }
}));
//增加头部信息解决跨域问题
app.all('*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");//设置响应头，*表示任何地址都亦可以访问
    res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("Access-Control-Allow-Credentials", true);
    res.header("X-Powered-By", ' 3.2.1');
    next();
});
//使用bodyParse解释前端提交数据
app.use(bodyparser.urlencoded({ extended: true }));
app.use(bodyparser.json());
//mysql信息
const mysql_user = connectUser.mysqlUser

let user = mysql_user.user
let connect = mysql.createConnection(mysql_user)
// 测试连接状态
connect.connect(err => {
    if (err) {
        console.log(`mysql连接失败: ${err}!`)
    } else {
        console.log('欢迎' + user + '来到mySQL,mysql连接成功!')
    }

})



/* 创建传输对象 */
let transporter = nodemailer.createTransport(connectUser.qqEmail);
/* sql增删改查操作 */
//增
let table_info = connectUser.tableInfo.table_log

//注意通过util.promisify进行包装的函数，必须满足
//1、函数的最后一个参数是回调函数
//2、回调函数的参数为(err, result)，前者是错误，后者是正常结果
//注意这里不要重新创建一个变量，不然会报错。
connect.query = util.promisify(connect.query);

async function get_check_addcode(transporter, req, res, username, code) {
    let name = table_info.tableName
    let type = req.body.type

    let result = await connect.query('select * from ' + name + ' where qqcom = ?', [username]);
    console.log(result[0]);

    if (result[0] == undefined) {
        if (type == "login") {
            console.log("用户未注册");
            res.send("用户未注册")
            return null
        } else if (type == "reg") {
            name = "reg_table"
            console.log("小编正在努力注册");
            // res.send("小编正在努力注册")
            let userAddSql = 'INSERT INTO ' + name + '(qqcom,reg_code) VALUES(?,?)';
            let addParams = [username, code]
            //增 add
            connect.query(userAddSql, addParams, function (err, result) {
                if (err) {
                    console.log('[INSERT ERROR] - ', err.message);
                    return;
                } else {
                    console.log('注册表插入成功!')
                }

            });
            await global.sleep(0.5)
            let name_ = table_info.tableName
            let userAddSql2 = 'INSERT INTO ' + name_ + '(qqcom) VALUES(?)';
            connect.query(userAddSql2, [username], function (err, result) {
                if (err) {
                    console.log('[INSERT ERROR] - ', err.message);
                    return;
                } else {
                    console.log('注册账号（无密码）插入成功!')
                }

            });
            global.qqEmail_send(transporter, code, username, req, res)
            res.send("邮箱发送成功")
            let sqlStr = "UPDATE " + name + " SET " + " reg_code = ? WHERE qqcom = ? "
            await global.sleep(180)
            code = null
            connect.query(sqlStr, [code, username])
            console.log("验证码已失效");

        }
    } else {
        //验证码入库
        let sqlStr = "UPDATE " + name + " SET " + " login_code = ? WHERE qqcom = ? "
        console.log("验证码入库成功");
        connect.query(sqlStr, [code, username])
        console.log("180秒有效");
        global.qqEmail_send(transporter, code, username, req, res)
        await global.sleep(180)
        code = null
        connect.query(sqlStr, [code, username])
        console.log("验证码已失效");
    }

    //  connect.end();
};
async function login_check_pswds_code(req, res) {
    let pwd = req.body.userpwd
    console.log("登录用户输入密码" + pwd)
    let username = req.body.username
    console.log("登录用户" + username)
    let type = req.body.type_log
    console.log("登录类型" + type)
    let name = table_info.tableName
    let result = await connect.query('select * from ' + name + ' where qqcom = ?', [username]);
    console.log(result[0]);
    // 存在用户,密码配对

    if (result[0] == undefined) {
        console.log("用户未注册");
        res.send("用户未注册")
        return null
    } else {
        //验证密码正确与否
        console.log('查询成功 ');
        console.log(result[0]);
        let password;
        if (type == "passwds")
            password = result[0].passwds
        else if (type == "codes")
            password = result[0].login_code
        // 密码登录
        console.log("开始密码验证")
        if (password === pwd && pwd != null) {
            let data = {
                static: true,
                username: username,
                password: password
            }
            res.send(data);
            console.log("用户" + username + "登录授权成功!")
        } else {
            let tip = "密码错误！"
            let data = {
                static: false,
                username: username,
                tip: tip
            }
            res.send(data);
            console.log("用户" + username + "校验密码错误!")
        }
    }

};

async function reg_check_pswds_code(req, res) {
    let pwd = req.body.userpwd
    console.log("请求注册")
    let username = req.body.username
    let code = req.body.code
    console.log("登录用户输入密码验证码" + username, pwd, code)
    let type = req.body.type_log
    console.log("登录类型" + type)
    let name = table_info.tableName
    let result = await connect.query('select * from ' + name + ' where qqcom = ?', [username]);
    console.log(result[0]);
    // 存在用户,密码配对

    if (result[0] == undefined) {
        console.log("用户未注册");
        //未注册开始注册
        let mycode = global.myCode()
        console.log("用户未注册" + mycode);
        let userAddSql = 'INSERT INTO ' + " reg_table " + '(qqcom,reg_code) VALUES(?,?)';
        connect.query(userAddSql, [username, mycode])


        res.send("用户未注册")
        return null
    } else {
        //验证密码正确与否
        console.log('查询成功 ');
        console.log(result[0]);
        let password;
        if (type == "passwds")
            password = result[0].passwds
        else if (type == "codes")
            password = result[0].login_code
        // 密码登录
        console.log("开始密码验证")
        if (password === pwd && pwd != null) {
            let data = {
                static: true,
                username: username,
                password: password
            }
            res.send(data);
            console.log("用户" + username + "登录授权成功!")
        } else {
            let tip = "密码错误！"
            let data = {
                static: false,
                username: username,
                tip: tip
            }
            res.send(data);
            console.log("用户" + username + "校验密码错误!")
        }
    }

};



// 接收以后发送 账号，接收密码   验证码 登录方式 并且发邮件//post 客户端post监听端口为:http://127.0.0.1:3000/checkCode
app.post("/checkCode", function (req, res) {
    //调用指定的邮箱给用户发送邮件
    let code = global.myCode()
    console.log(req.body)
    let username = req.body.username
    //查询是否有此用户
    console.log("这里查询用户存在？")
    get_check_addcode(transporter, req, res, username, code);

})
//post 客户端post监听端口为:
app.post("/login", function (req, res) {
    console.log("这里查询密码,并且验证")
    login_check_pswds_code(req, res)
})
//post 客户端post监听端口为:
app.post("/reg", function (req, res) {
    console.log("这里开始注册,并且验证")
    reg_check_pswds_code(req, res)
})





// 启动 端口
app.listen(3000, () => {
    console.log('服务启动在 http://127.0.0.1:' + 3000);
})

serve.js中凡是require的都需要安装依赖，比如require("nodemailer")

 npm i nodemailer

安装全部的依赖插件，可以node serve.js了

本·篇文章这里便结束了，下一篇分析本篇文章的功能函数，vue的有关学习。

先生余枫

关注

22
点赞
踩
24

收藏

觉得还不错? 一键收藏
打赏
1
评论
vue、node、mysql多页面项目入门学习笔记（一）登录注册篇

前端使用vue3 的vue cli 脚手架，直接会用就行，后端主要使用node，数据库使用mysql。新建项目文件夹，路径下cmd，如果没有梯子，建议更换下载源，网址可查询镜像源，下面使用的是淘宝最新镜像源。删除src下面的所有文件，assets可以保留，src下新建pages文件夹，对文件重新构造。登录注册实现，QQ邮箱验证码开启后，node对mysql数据库进行增删改查。
复制链接

扫一扫