简述
我是一个前端的小白,学长推荐这个社区给我已经有一段时间了。但是始终觉得自己的水平太低,一直没在这上
面写点什么。最近开始学习nodejs,就做了一个demo来分享给大家.第一次写,不足的地方还望海涵。
注册的html
基本的表单html代码就不详细说了,这个不是重点,直接上代码:
<div class="regist">
<h2>注册</h2>
<div class="inputbox">
<input type="text" name="fullname" placeholder=" 昵称" id="nikename">
<input type="text" name="email" placeholder=" 邮箱" id="email-two">
<input type="password" name="password" placeholder=" 密码" id="password-two">
</div>
<button id="register">注册</button>
</div>
注册的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
同样是简单的表单内容,直接上代码了:
<div class="login">
<h2>登陆</h2>
<div class="inputbox">
<input type="text" name="email" placeholder=" 邮箱" id="email-one">
<input type="password" name="password" placeholder=" 密码" id="password-one">
<input type="text" name="authCode" placeholder=" 验证码" id="authcode-one">
</div>
<button id="userLogin">登陆</button>
</div>
登录的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(); // 关闭数据库
})
这是小白第一次发文章,希望与跟我一样的小白共享。本文有什么不足之处希望各大神斧正。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。