Prefácio
Hoje vamos construir um sistema de comunicado de imprensa simples. A primeira etapa do sistema não precisa ser muito difícil. Tem principalmente as seguintes funções
① Gerenciamento de tipo de notícia
② Gerenciamento de notícias (com função de upload de fotos)
③ Notícias Navegando
Embora não haja muitas funções, também abrange muitas operações básicas. O programa é adicionado apenas, excluído, verificado e modificado, e é suficiente para adicionar e fazer upload de anexos. Então, vamos começar nosso estudo hoje
Preparação
Após o problema de ontem, já temos ambientes NodeJs e MongoDB. Agora podemos criar diretamente novos arquivos de projeto e arquivos de banco de dados
A primeira etapa é abrir o caractere de comando e mudar para o disco D para inserir
Copie o código da seguinte forma: D:/> Express -e News
Portanto, o sistema criará automaticamente o ambiente básico feliz
É óbvio que muitos módulos não têm dependências. Neste momento, vou levar diretamente o package.json de ontem:
A cópia do código é a seguinte:
{
"Nome": "Nome do aplicativo",
"versão": "0.0.1",
"privado": verdadeiro,
"Scripts": {
"Start": "Node App.js"
},
"Dependências": {
"Express": "3.4.8",
"EJS": "*",
"MongoDB": "*"
}
}
Em seguida, mude para o diretório do projeto:
Copie o código da seguinte forma: instalação do NMP
Todas as dependências são concluídas e depois entramos
A cópia do código é a seguinte:
D:/NEWS> NODE APP
Servidor expresso ouvindo na porta 3000
Então, nosso programa começou a correr alegremente. Quando abrimos o URL, descobrimos que não havia problema.
PS: Há um problema aqui que precisa ser observado. O arquivo que baixamos não é a codificação UTF-8, portanto, pode haver código ilegal em chinês, e a codificação de arquivos precisa ser unificada por todos.
Quando o programa começa a ser executado, requer configuração relacionada ao banco de dados
① Crie primeiro uma nova pasta de notícias no diretório MongoDBB
② Adicione Configurações do arquivo de configuração.js ao projeto
A cópia do código é a seguinte:
module.exports = {
CookieSecret: 'MyNews',
DB: 'Notícias',
Anfitrião: 'Localhost'
};
③ Crie um novo diretório de modelos e crie um novo db.js
A cópia do código é a seguinte:
var configurações = requer ('../ Configurações'),
Db = requer ('mongodb'). Db,
Conexão = requer ('mongodb'). Conexão,
Servidor = requer ('mongodb'). Servidor;
Module.Exports = new DB (Settings.db, novo servidor (Settings.Host, Connection.Default_port), {Safe: true});
④ Crie um novo programa de notícias.bat na área de trabalho
Copie o código da seguinte
No futuro, precisamos iniciar o banco de dados, basta executá -lo. Dessa forma, nossos preparativos preliminares acabaram basicamente.
Mas há mais duas coisas irritantes aqui. Uma é que é muito irritante iniciar o programa de notícias sempre, e a outra é que você precisa reiniciar ao modificar qualquer coisa. Então, vamos resolver esses dois problemas primeiro.
① Crie news_app.bat na área de trabalho e execute -o para iniciar o programa.
Copie o código da seguinte forma: Nó d:/Notícias/App
② Supervisor é um protetor de processo. Podemos usá -lo para nos ajudar a reiniciar o programa, seguir primeiro e depois ajustar nosso node_app.bat
Copie o código da seguinte
Claro, você precisa instalá -lo antes:
Copie o código da seguinte
Depois disso, você não precisa reiniciar manualmente depois de modificar o arquivo (News_App precisa ser colocado no diretório do projeto), para que os preparativos estejam aqui
Estrutura do projeto
Após o término da primeira etapa, precisamos pensar na estrutura do projeto
① A página inicial é índice e todos os tipos de notícias e entradas de notícias serão listados aqui
② Cada item de notícia tem três botões para edição/exclusão/visualização
③ A página inicial tem um botão de notícia (as fotos podem ser carregadas ao adicionar)
As funções básicas são como acima
Então, removemos a função de roteamento no aplicativo e colocamos todas as rotas no índice
A cópia do código é a seguinte:
// Coloque a função de roteamento em índice
//app.get('/ ', rotas.index);
//app.get('/Users ', user.list);
rotas (app);
A cópia do código é a seguinte:
module.exports = function (app) {
// Página inicial, agora também página inicial
App.get ('/', function (req, res) {
res.render ('index', {title: 'Express'});
});
App.get ('/add', function (req, res) {
res.send ('Adicionar solicitação de notícias');
});
App.get ('/delete', função (req, res) {
res.send ('excluir solicitação de notícias');
});
App.get ('/View', function (req, res) {
res.send ('visualizar solicitação de notícias');
});
App.get ('/update', function (req, res) {
res.send ('Modificar solicitação de notícias');
});
};
A primeira etapa é simples, porque deve haver uma página separada para adicionar notícias e clicar no botão Adicionar causará outro processamento; portanto, a solicitação interna deve ser subdividida. Os seguintes regulamentos são agora os seguintes:
/ Página padrão, que exibe todos os tipos e notícias, com um botão de exclusão
/Adicionar para adicionar página de notícias
/AddNews Adicionar endereço de solicitação de postagem específico (resposta ao clicar no botão)
/Excluir solicitação de notícia de exclusão
/Visualizar consulta de notícias específica
Modificar ligeiramente a rota acima:
A cópia do código é a seguinte:
module.exports = function (app) {
// Página inicial, agora também página inicial
App.get ('/', function (req, res) {
res.render ('index', {title: 'Express'});
});
App.get ('/add', function (req, res) {
res.send ('adicione notícia');
});
App.Post ('/addNews', função (req, res) {
res.send ('Handle Add Add News Solicy');
});
App.get ('/delete', função (req, res) {
res.send ('excluir solicitação de notícias');
});
App.get ('/View', function (req, res) {
res.send ('visualizar solicitação de notícias');
});
};
Portanto, precisamos criar vários novos modelos para organizar nossas páginas da web. Aqui não separamos a primeira e a última páginas.
Adicione dois arquivos de modelo Adicionar e visualizar, o que tem desempenho temporariamente consistente com o índice.ejs, e está relacionado à modificação da navegação
A cópia do código é a seguinte:
module.exports = function (app) {
// Página inicial, agora também página inicial
App.get ('/', function (req, res) {
res.render ('index', {title: 'Express'});
});
App.get ('/add', function (req, res) {
res.render ('add', {title: 'add notic página'});
});
App.Post ('/addNews', função (req, res) {
res.send ('Handle Add Add News Solicy');
});
App.get ('/delete', função (req, res) {
res.send ('excluir solicitação de notícias');
});
App.get ('/View', function (req, res) {
res.render ('View', {Title: 'View News Request'});
});
};
A estrutura do projeto termina
Operação de dados
Depois que a estrutura geral será lançada, precisamos executar operações de dados:
① Adicione dados (adicione notícias)
Data Data Display (Exibir notícias)
③ Excluir dados (excluir notícias)
Ele originalmente envolveu operações de tipo, mas foi feito e desapareceu. Por enquanto, não se importe com isso, porque é fácil ficar confuso ao fazê -lo pela primeira vez.
Adicione notícias
Aqui, não usamos o envio do formulário, usamos ajax ... aqui apresentamos a biblioteca Zepto, então nossa página se torna assim
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<título>
< %= title %> </title>
<link rel = 'Stylesheet' href = '/stylesheets/style.css'/>
<script src = "javascripts/zepto.js" type = "text/javascript"> </sCript>
</head>
<Body>
<H1>
< %= título %> </h1>
<div>
Título: <input type = "text" id = "title" />
</div>
<div>
Conteúdo: <textarea id = "content"> </sexttarea>
</div>
<div>
<input type = "button" type = "button" id = "ok" value = "adicione notícias" />
</div>
<script type = "text/javascript">
$ (document) .ready (function () {
$ ('#ok'). Clique (function () {
var param = {};
param.title = $ ('#title'). val ();
param.content = $ ('#content'). val ();
$ .post ('/addNews', param, function () {
console.log ('adicionado com sucesso');
});
});
});
</script>
</body>
</html>
Embora ainda não exista um programa de resposta de solicitação, os dados ainda não serão processados e não há anexo aqui (o anexo só é permitido para um), então modifiquei o código e adicionei a imagem:
PS: O mais problemático é que a imagem é um pouco problemática após o processamento do Ajax, então vamos voltar para formar operações aqui, caso contrário, quanto tempo levará para fazê -lo ...
A cópia do código é a seguinte:
<html>
<head>
<título>
< %= title %> </title>
<link rel = 'Stylesheet' href = '/stylesheets/style.css'/>
</head>
<Body>
<H1>
< %= título %> </h1>
<form ENCTYPE = "Multipart/Form-Data" Method = "Post" Action = "/AddNews">>
<div>
Título: <input type = "text" id = "title" name = "title" />
</div>
<div>
Imagem: <input type = "file" id = "pic" name = "pic" />
</div>
<div>
Conteúdo: <Textarea id = "content" name = "content"> </sexttarea>
</div>
<div>
<input type = "submit" id = "ok" value = "adicione notícias" />
</div>
</morm>
</body>
</html>
Não há necessidade de considerar muito o problema de apego. Vamos fazer isso por enquanto. Agora processaremos o programa de solicitação primeiro. Aqui, criaremos uma nova pasta de notícias em público para armazenar suas fotos.
modelo
Adicione um novo arquivo News.js à pasta Modelos, crie uma entidade para ele e forneça novas operações relacionadas à consulta:
A cópia do código é a seguinte:
var monongodb = requer ('./ db');
Notícias da função (título, conteúdo, pic) {
this.title = title;
this.content = content;
this.pic = pic; // salve o caminho de armazenamento
};
Module.Exports = News;
// dados de armazenamento
News.prototype = {
Salvar: function (retorno de chamada) {
var date = new Date ();
var time = {
Data: Data,
ano: data.getlyear (),
mês: data.getlyear () + "-" + (date.getmonth () + 1),
Dia: date.getlyear () + "-" + (date.getmonth () + 1) + "-" + date.getDate (),
minuto: date.getlyear () + "-" + (date.getmonth () + 1) + "-" + date.getDate () + "" " +
date.gethours () + ":" + (date.getminutes () <10? '0' + date.getminutes (): date.getminutes ())
}
// Objeto de armazenamento de dados
var notícias = {
Título: this.title,
Conteúdo: this.content,
foto: this.pic, // finalmente, quando se trata de processamento de imagens, salve -o primeiro
Tempo: tempo
};
// Abra a conexão de dados, abrindo é um retorno de chamada ...
mongodb.open (função (err, db) {
// saia se o erro estiver errado
if (err) {
retornar retorno de chamada (err);
}
// Abra a coleção de notícias
DB.Collection ('News', function (Err, coleção) {
if (err) {
mongodb.close ();
retornar retorno de chamada (err);
}
// Escreva na coleção (escreva no banco de dados)
Coleção.Insert (News, {Safe: True}, function (err) {
retornar retorno de chamada (err);
});
retorno de chamada (nulo); // err é nulo
});
});
}
};
Portanto, existe um programa para escrever no banco de dados. Aqui vamos tentar inserir o banco de dados. Obviamente, precisamos modificar o programa no escritório de roteamento.
PS: Claro, o roteamento não pode escrever muito código lógico, esse arquivo deve ser separado no futuro
Neste momento, a lógica em /addNews precisa ser alterada
A cópia do código é a seguinte:
App.Post ('/addNews', função (req, res) {
var title = req.body.title;
var content = req.body.content;
var pic = req.body.pic;
var notícias = novas notícias (título, conteúdo, foto)
News.Save (function (err, dados) {
res.send (dados);
})
});
Após a consulta, não há grande problema, agora o problema de apego é o problema
Carregue fotos
A função de upload do Express em si suporta. Expresse o corpo de solicitação através do BodyParser e, em seguida, envie o arquivo através dele. Ele usa formatável internamente.
Aqui, altere o app.use (express.bodyparser ()) em app.js para:
A cópia do código é a seguinte: App.Use (Express.BodyParser ({keepTextensions: true, uploaddir: './public/news'}));
Open Index.js e adicione uma linha de código na frente dele:
Copie o código da seguinte forma: fs = requer ('fs'),
Modifique o arquivo de índice:
A cópia do código é a seguinte:
App.Post ('/addNews', função (req, res) {
para (var i em req.files) {
if (req.files [i] == 0) {
// Excluir um arquivo em sincronização
fs.unlinksync (req.files [i] .path);
console.log ('Sucesso removeu um arquivo vazio');
} outro {
var path = './public/news/' + req.files [i] .Name;
// renomear um arquivo usando o método síncrono
fs.renamesync (req.files [i] .Path, path);
console.log ('Sunccess renomeou um arquivo');
}
}
// var title = req.body.title;
// var content = req.body.content;
// var pic = req.body.pic;
// Var News = New News (título, conteúdo, foto)
// news.save (function (err, dados) {
// res.send (dados);
//})
});
No momento, depois de selecionar o arquivo, clique em Adicionar notícias e nosso arquivo será carregado
No momento, eu só preciso gravar o nome do arquivo no banco de dados, e há fotos no diretório de arquivos
A cópia do código é a seguinte:
App.Post ('/addNews', função (req, res) {
var pic = nulo;
para (var i em req.files) {
if (req.files [i] == 0) {
// Excluir um arquivo em sincronização
fs.unlinksync (req.files [i] .path);
console.log ('Sucesso removeu um arquivo vazio');
} outro {
var path = './public/news/' + req.files [i] .Name;
// renomear um arquivo usando o método síncrono
fs.renamesync (req.files [i] .Path, path);
console.log ('Sunccess renomeou um arquivo');
}
pic = req.Files [i] .Name;
}
var title = req.body.title;
var content = req.body.content;
var notícias = novas notícias (título, conteúdo, foto)
News.Save (function (err, dados) {
res.send (dados);
})
Res.send ('<a href = "./"> A solicitação é bem -sucedida, retorne à página inicial </a>');
});
Existem dados no banco de dados e nosso diretório também possui arquivos. Agora precisamos apenas ler os dados.
PS: Os irmãos me pediram para sair para tomar uma bebida durante o feriado
Leia os dados
É claro que o segundo passo está lendo os dados, e o primeiro está lendo os dados na página inicial:
A cópia do código é a seguinte:
var monongodb = requer ('./ db');
Notícias da função (título, conteúdo, pic) {
this.title = title;
this.content = content;
this.pic = pic; // salve o caminho de armazenamento
};
Module.Exports = News;
// dados de armazenamento
News.prototype = {
Salvar: function (retorno de chamada) {
var date = new Date ();
// Objeto de armazenamento de dados
var notícias = {
Título: this.title,
Conteúdo: this.content,
foto: this.pic, // finalmente, quando se trata de processamento de imagens, salve -o primeiro
Data: Data
};
// Abra a conexão de dados, abrindo é um retorno de chamada ...
mongodb.open (função (err, db) {
// saia se o erro estiver errado
if (err) {
retornar retorno de chamada (err);
}
// Abra a coleção de notícias
DB.Collection ('News', function (Err, coleção) {
if (err) {
mongodb.close ();
retornar retorno de chamada (err);
}
// Escreva na coleção (escreva no banco de dados)
Coleção.Insert (News, {Safe: True}, function (err) {
retornar retorno de chamada (err);
});
retorno de chamada (nulo); // err é nulo
});
});
}
};
// Leia artigos e informações relacionadas
News.get = function (id, retorno de chamada) {
// Abra o banco de dados
mongodb.open (função (err, db) {
if (err) {
retornar retorno de chamada (err);
}
DB.Collection ('News', function (Err, coleção) {
if (err) {
mongodb.close ();
retornar retorno de chamada (err);
}
VAR Query = {};
if (id) {
query.id = id;
}
// Artigos de consulta com base no objeto de consulta
Coleção.find (Query) .sort ({
Data: -1
}). ToArray (function (err, dados) {
mongodb.close ();
if (err) {
retornar retorno de chamada (err); //Fracassado! Retornar ao erro
}
retorno de chamada (nulo, dados); //Sucesso! Devolver o resultado da consulta como uma matriz
});
});
});
};
News.js
A cópia do código é a seguinte:
<! Doctype html>
<html>
<head>
<título>
< %= title %> </title>
<link rel = 'Stylesheet' href = '/stylesheets/style.css'/>
</head>
<Body>
<H1>
< %= título %> </h1>
<ul>
< %para (var k em dados) { %>
<li>
<div>
Título: < %= dados [k] .title %> </div>
<div>
Conteúdo: <%= dados [k] .Content%> </div>
<div>
Anexo: <img src = "news/<%= dados [k] .pic%>"/> </div>
</div>
<div>
<a href = "/delete? id = < %= dados [k] %>"> excluir </a>
</div>
<hr/>
</li>
< %} %>
</ul>
</body>
</html>
Conclusão
Ok, vamos parar por aqui para a produção do sistema de publicação de artigos. No futuro, adicionaremos gradualmente funções e embelezá -las.