资讯专栏INFORMATION COLUMN

node+ajax+mysql实现登录注册

刘德刚 / 1223人阅读

摘要:简述我是一个前端的小白,学长推荐这个社区给我已经有一段时间了。后台的返回值访问失败注册的这里我使用的的框架,不懂框架的可以先去了解一下。后台返回的参数访问失败登录的这里也跟上面的注册差不多,只是逻辑稍稍有点不同,请看注释。

简述
我是一个前端的小白,学长推荐这个社区给我已经有一段时间了。但是始终觉得自己的水平太低,一直没在这上

面写点什么。最近开始学习nodejs,就做了一个demo来分享给大家.第一次写,不足的地方还望海涵。

注册的html
基本的表单html代码就不详细说了,这个不是重点,直接上代码:
 

注册

注册的js
这里的js主要使用的是jquery,不懂jquery的可以先去了解。jquery使用ajax是特别方便的,这里以get的方式传递给后台username,nickname,password三个参数。url里面写上与后台协商的地址,然后再是成功与失败的回调函数,常用ajax的小伙伴是不是觉得很常规。是的,这样写无论后台语言是什么就都没关系了。
    $("#register").click(function() {
        $.ajax({
            url: "/regist",
            type: "GET",
            data: {
                username: $("#email-two").val(),
                nickname: $("#nikename").val(),
                password: $("#password-two").val()
            },
            success: function(data){    //    alert后台的返回值
                alert(data);
            },
            error: function(){
                alert("访问失败");
            }
        });
    });
注册的node
这里我使用的nodejs的express框架,不懂express框架的可以先去了解一下。这个框架上手很容易的,很适合我们这样的新手。如果你想直接使用这里的代码,肯定是会报错的,需要你拿npm安装express和mysql。当然至于mysql你需要在本地安装mysql,不会一点mysql的先去了解一下mysql。其实你也可以用nodejs把数据写到文件里面,就可以不用mysql了。其他的见代码注解。
var express=require("express");    //    导入express
var events = require("events");
var emitter = new events.EventEmitter();    //    创建监听器对象(你也可以直接返回值,不用这个)
var app=express();
var path=require("path");
var mysql=require("mysql");    //    导入mysql
var dirname=__dirname;    //    指向当前js的路径
app.use(express.static(path.join(__dirname, "project")));    //    这里你能够直接访问你的静态文件,比如你的index.html
    
/*----注册---*/

  app.get("/regist",function(req,res){    //    获取get的请求的路径,拿到前台传来的参数
    //    创建数据库连接
    var connection=mysql.createConnection({
        host:"localhost",
        user:"root",
        password:"您的密码",
        database:"node"
    });
    //    连接数据库
    connection.connect();
    //    监听数据库写入返回的参数
    emitter.on("ok",function(){
        return res.end("注册成功");    //    向前台返回数据
    });
    emitter.on("false",function(){
        return res.end("用户名已存在");    //    向前台返回数据
    });

    var sql="insert into user(username,password,nickname) values(?,?,?)";    //    向user这个表里写入数据
    var sqlValue=[req.query.username,req.query.password,req.query.nickname];
    connection.query(sql,sqlValue,function(err){    //    执行sql语句
        if(err){
            console.log(err.message);    //    输出数据库错误信息
            emitter.emit("false");    //    返回失败
        }
        emitter.emit("ok");    //    返回成功
    });
    connection.end();    //    关闭数据库
  });
app.listen(8081);    //    设置请求的端口号,你可以在本地访问localhost://8081(随便写一个没被占用的端口就好)
登录html
同样是简单的表单内容,直接上代码了:
登录的js
这里使用的同样是一个ajax请求,基本跟注册的请求差不多,传用户名跟密码到后台,就不多说了。
    $("#userLogin").click(function(){
        $.ajax({
          url: "/login",
          type: "GET",
          data: {
              username: $("#email-one").val(),
              password: $("#password-one").val()
          },
          success: function(data){    //    alert后台返回的参数
              alert(data);
          },
          error: function(){
            alert("访问失败");
          }
      });
    });
登录的node
这里也跟上面的注册nodejs差不多,只是逻辑稍稍有点不同,请看注释。这里登录也写在同一个js文件里面,就不一一地去导入某些文件了,处着app这个对象直接用,这里就不用监听器。
app.get("/login",function(req,res){    //    获取登录传过来的值
    //    创建数据库连接
    var connection=mysql.createConnection({
        host:"localhost",
        user:"root",
        password:"您的密码",
        database:"node"
    });
    //    连接数据库
    connection.connect();
    var sql="select * from user where username=""+req.query.username+"" and password=""+req.query.password+""";    //    在数据库里面查询用户名跟密码
    connection.query(sql,function(err,result){    //    执行sql语句,并返回结果
        if(err){
            res.end("登录失败");    //    数据库错误
            console.log(err);
        }
        if(result.length==0){    
            res.end("用户名密码不正确");    //    数据库里面没找到配对的内容返回参数
        }else{
            res.end("登陆成功");    //返回登录成功
        }
    })
    connection.end();    //    关闭数据库
})
这是小白第一次发文章,希望与跟我一样的小白共享。本文有什么不足之处希望各大神斧正。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83410.html

相关文章

  • node项目实战-用node-koa2-mysql-bootstrap搭建一个前端论坛

    摘要:项目初始化此时已经创建好了文件了。接下来向添加数据库操作语句,建表增删改查。。。前端页面开发项目基本结构搭建好后,就可以进行前端页面的编写了。 前言 在学习了koa2和express并写了一些demo后,打算自己写一个项目练练手,由于是在校生,没什么好的项目做,即以开发一个前端论坛为目标,功能需求参照一下一些社区拟定,主要有: 登录注册 个人信息维护、头像等基本信息 发表文章,富文本...

    beanlam 评论0 收藏0
  • node项目实战-用node-koa2-mysql-bootstrap搭建一个前端论坛

    摘要:项目初始化此时已经创建好了文件了。接下来向添加数据库操作语句,建表增删改查。。。前端页面开发项目基本结构搭建好后,就可以进行前端页面的编写了。 前言 在学习了koa2和express并写了一些demo后,打算自己写一个项目练练手,由于是在校生,没什么好的项目做,即以开发一个前端论坛为目标,功能需求参照一下一些社区拟定,主要有: 登录注册 个人信息维护、头像等基本信息 发表文章,富文本...

    RobinQu 评论0 收藏0
  • Node+Koa2+Mysql 搭建简易博客

    摘要:搭建简易博客预览地址写在前面本篇教程一方面是为了自己在学习的过程加深记忆,也是总结的过程。 Koa2-blog 2018-1-5 更新教程(新增上传头像、新增分页、样式改版、发布文章和评论支持markdown语法)现在GitHub的代码结构有变现在GitHub的代码结构有变,接口名也有变动。 Node+Koa2+Mysql 搭建简易博客 预览地址 http://blog.wclimb....

    darkbug 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<