1. Opening analysis
Hello everyone, Big Bear is here again. Yesterday, I didn’t write a blog because of something personal, so I came out again today. This article is mainly about writing a small application for notepad, the previous article,
I have also introduced the use of "Connect" middleware and the use of "Mongodb". Today, I will combine these two middleware to write a practical example, constantly improve and refactor it, and have achieved the goal of "Sincere"
The purpose of full learning. OK, let’s stop talking nonsense, just go straight to the topic.
2. Requirement analysis
(1) User registration and login function (no complex interaction scenarios are involved, and the user will determine whether it already exists when registering).
(2) The user logged in successfully and entered the background of the note management system (the function of adding, deleting, modifying and checking of the note module).
(3) Users can have simple permission division (administrator, registered user).
(4) The interface is relatively simple and focuses on learning.
3. Start designing and application (part 1)
(1), create a user login page, the code is as follows:
The code copy is as follows:
<!doctype html>
<html>
<head>
<title>Bigbear Notepad Application Login</title>
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.note-title {
margin-bottom : 45px ;
background : #6699cc ;
font-size : 14px;
font-weight : bold ;
color : #ffff;
font-family:arial ;
height : 24px ;
line-height : 24px ;
}
a {
color : #336699;
font-family:arial ;
font-size : 14px;
font-weight : bold ;
}
</style>
<script src="js/index.js"></script>
</head>
<body>
<div>Bigbear Notepad Application Login</div>
<form action="/login" method="post">
<span>Username:</span><input type="text" name="name" /><br/><br/>
<span>Password:</span><input type="password" name="password" />
<input type="submit" value="Login" />
<a href="reg.html">I want to register</a>
</form>
</body>
</html>
Reproduction image:
(2) Create a user registration page, the code is as follows:
The code copy is as follows:
<!doctype html>
<html>
<head>
<title>Bigbear Notepad Application Registration</title>
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.note-title {
margin-bottom : 45px ;
background : #ff3300;
font-size : 14px;
font-weight : bold ;
color : #ffff;
font-family:arial ;
height : 24px ;
line-height : 24px ;
}
</style>
<script src="js/index.js"></script>
</head>
<body>
<div>Bigbear Notepad Application Registration</div>
<form action="/reg" method="post">
<span>Username:</span><input type="text" name="name" /><br/><br/>
<span>Password:</span><input type="password" name="password" /><br/><br/>
<input type="submit" value="register" />
</form>
</body>
</html>
Reproduction image:
(3) Establish the "Mongodb" connection code, as follows:
The code copy is as follows:
var mongodb = require("mongodb");
var server = new mongodb.Server("localhost",27017,{
auto_reconnect : true
}) ;
var conn = new mongodb.Db("bb",server,{
safe : true
}) ;
conn.open(function(error,db){
if(error) throw error ;
console.info("mongodb connected !");
}) ;
exports = module.exports = conn ;
(4) Create the model entity class "User", as follows:
The code copy is as follows:
var conn = require("../conn");
function User(user){
this.name = user["name"] ;
this.password = user["password"] ;
} ;
User.prototype.save = function(callback){
var that = this ;
conn.collection("users",{
safe : true
},function(error,collection){
if(error) return conn.close() ;
collection.findOne({ // Determine whether this user exists
name : that.name
},function(error,user){
if(error) return conn.close() ;
if(!user){
collection.insert({
name : that.name + "" ,
password : that.password + ""
},{
safe : true
},function(error,user){
if(error) return conn.close() ;
callback && callback(user) ;
conn.close() ;
}) ;
}
else{
callback("User has registered !");
}
}) ;
}) ;
} ;
User.login = function(name,password,callback){
conn.collection("users",{
safe : true
},function(error,collection){
if(error) return conn.close() ;
collection.findOne({
name : name ,
password : password
},function(error,user){
if(error) return conn.close() ;
callback && callback(user) ;
conn.close() ;
}) ;
}) ;
} ;
exports = module.exports = User;
Reproduction image:
(5), create the application "app", as follows:
The code copy is as follows:
// app.js
var connect = require("./lib/connect");
var user = require("./models/user");
var app = connect.createServer();
app .use(connect.logger("dev"))
.use(connect.query())
.use(connect.bodyParser())
.use(connect.cookieParser())
.use(connect.static(__dirname + "/views"))
.use(connect.static(__dirname + "/public"))
.use("/login",function(request,response,next){
var name = request.body["name"] ;
var password = request.body["password"] ;
user.login(name,password,function(user){
if(user){
response.end("Welcome to:" + user["name"] + " ^_^ ... ...") ;
}
else{
response.end("User:" + name + " Not Register !") ;
}
}) ;
})
.use("/reg",function(request,response,next){
var name = request.body["name"] ;
var password = request.body["password"] ;
new user({
name : name ,
password : password
}).save(function(user){
if(user && user["name"]){
response.end("User:" + name + "Register Done !");
}
else{
response.end("User: " + name + "has registered !") ;
}
}) ;
})
.listen(8888,function(){
console.log("Web Server Running On Port ---> 8888 .") ;
}) ;
Let me explain:
(1) "connect.query()"-------process the parsing of the "Get" request.
(2) "connect.bodyParser()"------process the parsing of the "Post" request.
(3) "connect.static(__dirname + "/views"), connect.static(__dirname + "/public")"
Represents the template view "html" and the resource directories that static resources such as "js, css, jpg, gif".
The following is the directory structure of this application:
Four, let's summarize
(1) Master the basic operation statements of NodeJs operating database.
(2), divide hierarchies, such as models, views, and routes.
(3) Continuously optimize and modify the examples in this article (for example, registering to verify whether the user exists, you can independently create a "UserManager" to complete the user verification and saving actions).
(4) To continue to complete subsequent functions tomorrow, please look forward to it.