1. Análise de abertura
Olá a todos, Big Bear está aqui novamente. Ontem, eu não escrevi um blog por causa de algo pessoal, então saí novamente hoje. Este artigo trata principalmente de escrever um pequeno aplicativo para o bloco de notas, o artigo anterior,
Também introduzi o uso do middleware "Connect" e o uso de "MongoDB". Hoje, combinarei esses dois middleware para escrever um exemplo prático, melhorar e refactá -lo constantemente, e alcançaram o objetivo de "sincero"
O objetivo do aprendizado total. Ok, vamos parar de falar bobagem, basta ir direto para o tópico.
2. Análise de requisitos
(1) Função de registro e login do usuário (nenhum cenário de interação complexo está envolvido e o usuário determinará se já existe ao se registrar).
(2) O usuário efetuou login com sucesso e inseriu o plano de fundo do sistema de gerenciamento de notas (a função de adicionar, excluir, modificar e verificar o módulo de nota).
(3) Os usuários podem ter uma divisão de permissão simples (administrador, usuário registrado).
(4) A interface é relativamente simples e se concentra no aprendizado.
3. Comece a projetar e aplicar (parte 1)
(1), crie uma página de login de usuário, o código é o seguinte:
A cópia do código é a seguinte:
<! doctype html>
<html>
<head>
<title> BigBear Noffad Application Login </ititle>
<meta content = "ie = 8" http-equiv = "x-ua compatível com"/>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<style type = "text/css">
.note-título {
Bottom de margem: 45px;
Antecedentes: #6699cc;
Size da fonte: 14px;
Peso da fonte: negrito;
Cor: #ffff;
Fonte-família: Arial;
Altura: 24px;
altura da linha: 24px;
}
A {
Cor: #336699;
Fonte-família: Arial;
Size da fonte: 14px;
Peso da fonte: negrito;
}
</style>
<script src = "js/index.js"> </script>
</head>
<Body>
<div> BigBear Noffad Application Login </div>
<form action = "/login" Method = "post">
<span> nome de usuário: </span> <input type = "text" name = "name"/> <br/> <br/>
<pan> Senha: </span> <input type = "senha" name = "senha" />
<input type = "submit" value = "login" />
<a href = "reg.html"> eu quero registrar </a>
</morm>
</body>
</html>
Imagem de reprodução:
(2) Crie uma página de registro de usuário, o código é o seguinte:
A cópia do código é a seguinte:
<! doctype html>
<html>
<head>
<Title> Registro de aplicativos de BigBear no bloco de notas </title>
<meta content = "ie = 8" http-equiv = "x-ua compatível com"/>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8">
<style type = "text/css">
.note-título {
Bottom de margem: 45px;
Antecedentes: #FF3300;
Size da fonte: 14px;
Peso da fonte: negrito;
Cor: #ffff;
Fonte-família: Arial;
Altura: 24px;
altura da linha: 24px;
}
</style>
<script src = "js/index.js"> </script>
</head>
<Body>
<div> Registro de aplicação no bloco de bigbear </div>
<form ação = "/reg" método = "post">
<span> nome de usuário: </span> <input type = "text" name = "name"/> <br/> <br/>
<pan> Senha: </span> <input type = "senha" name = "senha"/> <br/> <br/>
<input type = "submit" value = "registro" />
</morm>
</body>
</html>
Imagem de reprodução:
(3) Estabeleça o código de conexão "MongoDB", como segue:
A cópia do código é a seguinte:
var mongodb = requer ("mongodb");
var Server = new MongoDB.Server ("localhost", 27017, {
Auto_reconnect: true
});
var con
Seguro: verdadeiro
});
Conn.open (função (erro, db) {
se (erro) lançar erro;
console.info ("MongoDB conectado!");
});
exports = module.exports = Conn;
(4) Crie a classe Model Entity "Usuário", como segue:
A cópia do código é a seguinte:
var Conn = requer ("../ conn");
função usuário (usuário) {
this.name = user ["nome"];
this.password = user ["senha"];
};
User.prototype.save = function (retorno de chamada) {
var que = this;
Conn.Collection ("Usuários", {
Seguro: verdadeiro
}, função (erro, coleta) {
if (error) retorna Conn.Close ();
Coleção.findone ({// Determine se esse usuário existe
Nome: that.name
}, função (erro, usuário) {
if (error) retorna Conn.Close ();
if (! usuário) {
coleção.insert ({
Nome: that.name + "",
Senha: that.password + ""
}, {
Seguro: verdadeiro
}, função (erro, usuário) {
if (error) retorna Conn.Close ();
retorno de chamada e retorno de chamada (usuário);
Conn.Close ();
});
}
outro{
retorno de chamada ("Usuário se registrou!");
}
});
});
};
User.login = function (nome, senha, retorno de chamada) {
Conn.Collection ("Usuários", {
Seguro: verdadeiro
}, função (erro, coleta) {
if (error) retorna Conn.Close ();
Coleção.findone ({
Nome: Nome,
Senha: senha
}, função (erro, usuário) {
if (error) retorna Conn.Close ();
retorno de chamada e retorno de chamada (usuário);
Conn.Close ();
});
});
};
exports = module.exports = user;
Imagem de reprodução:
(5), crie o aplicativo "aplicativo", como segue:
A cópia do código é a seguinte:
// app.js
var connect = requer ("./ lib/connect");
var user = requer ("./ modelos/usuário");
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", função (solicitação, resposta, próximo) {
var name = request.body ["nome"];
var senha = request.body ["senha"];
user.login (nome, senha, função (usuário) {
if (usuário) {
Response.end ("Bem -vindo a:" + usuário ["nome"] + " ^ _ ^ ... ...");
}
outro{
Response.END ("Usuário:" + Nome + "Não Registre!");
}
});
})
.Use ("/reg", função (solicitação, resposta, próximo) {
var name = request.body ["nome"];
var senha = request.body ["senha"];
novo usuário ({
Nome: Nome,
Senha: senha
}). Salvar (função (usuário) {
if (user && user ["name"]) {
Response.end ("Usuário:" + nome + "registro feito!");
}
outro{
Response.end ("Usuário:" + nome + "se registrou!");
}
});
})
.Listen (8888, function () {
console.log ("servidor da web em execução na porta ---> 8888.");
});
Deixe -me explicar:
(1) "Connect.Query ()" ------- Processe a análise da solicitação "Get".
(2) "Connect.BodyParser ()" ------ Processe a análise da solicitação "post".
(3) "Connect.Static (__ Dirname +"/Views "), Connect.Static (__ Dirname +"/public ")"
Representa a exibição de modelo "HTML" e os diretórios de recursos que recursos estáticos, como "JS, CSS, JPG, GIF".
A seguir, é apresentada a estrutura do diretório deste aplicativo:
Quatro, vamos resumir
(1) Domine as instruções de operação básica do banco de dados operacional NODEJS.
(2), divida hierarquias, como modelos, vistas e rotas.
(3) Otimizar e modificar continuamente os exemplos deste artigo (por exemplo, registrando -se para verificar se o usuário existe, você pode criar independentemente um "userManager" para concluir as ações de verificação e economia do usuário).
(4) Para continuar a concluir as funções subseqüentes amanhã, aguarde ansiosamente por isso.