Prefacio
Hoy construiremos un sistema de liberación de prensa simple. La primera etapa del sistema no necesita ser demasiado difícil. Principalmente tiene las siguientes funciones
① Gestión de tipos de noticias
② Gestión de noticias (con función de carga de imágenes)
③ navegación de noticias
Aunque no hay muchas funciones, también cubre muchas operaciones básicas. El programa solo se agrega, elimina, verifica y modifica, y es suficiente para agregar y cargar archivos adjuntos. Así que comencemos nuestro estudio hoy
Preparación
Después de los problemas de ayer, ya tenemos entornos NodeJ y MongoDB. Ahora podemos crear directamente nuevos archivos de proyecto y archivos de base de datos
El primer paso es abrir el carácter de comando y cambiar al disco D para ingresar
Copie el código de la siguiente manera: D:/> Express -e News
Entonces el sistema construirá automáticamente el entorno básico felizmente
Es obvio que muchos módulos no tienen dependencias. En este momento, tomaré directamente el paquete de ayer.json:
La copia del código es la siguiente:
{
"Nombre": "Nombre de la aplicación",
"Versión": "0.0.1",
"Privado": Verdadero,
"Scripts": {
"Inicio": "Node App.js"
},
"Dependencias": {
"Express": "3.4.8",
"EJS": "*",
"MongoDB": "*"
}
}
Luego cambie al directorio del proyecto:
Copie el código de la siguiente manera: Instalar NMP
Todas las dependencias se completan y luego entramos
La copia del código es la siguiente:
D:/Noticias> Aplicación de nodo
Servidor expreso escuchando en el puerto 3000
Entonces, nuestro programa comenzó a funcionar felizmente. Cuando abrimos la URL, descubrimos que no había problema.
PD: Aquí hay un problema que debe tenerse en cuenta. El archivo que descargamos no es la codificación UTF-8, por lo que puede haber código confuso en chino, y la codificación del archivo debe ser unificada por todos.
Cuando el programa comienza a ejecutarse, requiere una configuración relacionada con la base de datos
① Primero cree una nueva carpeta de noticias en el directorio de MongoDB
② Agregue el archivo de configuración settings.js al proyecto
La copia del código es la siguiente:
módulo.exports = {
CookiesECret: 'myNews',
DB: 'Noticias',
Anfitrión: 'Localhost'
};
③ Cree un nuevo directorio de modelos y cree un nuevo DB.JS
La copia del código es la siguiente:
Configuración de var = requirir ('../ Configuración'),
Db = require ('MongoDB'). DB,
Conexión = requirir ('MongoDB'). Conexión,
Servidor = requirir ('MongoDB'). Server;
módulo.exports = new db (settings.db, nuevo servidor (settings.host, conexión.default_port), {safe: true});
④ Crear una nueva noticia. Programa Bat en el escritorio
Copie el código de la siguiente manera: D: /MongoDB/Bin/Mongod.exe -DBPath D:/MongoDB/News
En el futuro, necesitamos iniciar la base de datos, simplemente ejecutarla. De esta manera, nuestras preparaciones preliminares han terminado básicamente.
Pero hay dos cosas más molestas aquí. Una es que es muy molesto comenzar el programa de noticias cada vez, y el otro es que necesita reiniciar al modificar cualquier cosa. Así que solucionemos estos dos problemas primero.
① Crea news_app.bat en el escritorio y luego ejecutarlo para iniciar el programa.
Copie el código de la siguiente manera: nodo D:/News/App
② El supervisor es un protector de proceso. Podemos usarlo para ayudarnos a reiniciar el programa, primero seguir y luego ajustar nuestro node_app.bat
Copie el código de la siguiente manera: Supervisor D:/News/App
Por supuesto, debe instalarlo antes:
Copie el código de la siguiente manera: NPM Install -G Supervisor
Después de esto, no necesita reiniciar manualmente después de modificar el archivo (News_App debe colocarse en el directorio del proyecto), por lo que los preparativos están aquí
Estructura de proyectos
Después de que termine el primer paso, debemos pensar en la estructura del proyecto
① La página de inicio es índice, y todos los tipos de noticias y entradas de noticias se enumerarán aquí
② Cada noticia tiene tres botones para editar/eliminar/ver
③ La página de inicio tiene un botón de noticias (las imágenes se pueden cargar al agregar)
Las funciones básicas son las anteriores
Entonces, eliminamos la función de enrutamiento en la aplicación y colocamos todas las rutas en el índice
La copia del código es la siguiente:
// Ponga la función de enrutamiento en índice
//app.get('/ ', rutas.index);
//app.get('/users ', user.list);
rutas (aplicación);
La copia del código es la siguiente:
módulo.exports = function (app) {
// página de inicio, ahora también página de inicio
app.get ('/', function (req, res) {
res.render ('índice', {título: 'express'});
});
app.get ('/add', function (req, res) {
res.send ('Agregar solicitud de noticias');
});
app.get ('/delete', function (req, res) {
res.send ('Eliminar solicitud de noticias');
});
app.get ('/ver', function (req, res) {
res.send ('ver solicitud de noticias');
});
app.get ('/update', function (req, res) {
res.send ('Modificar solicitud de noticias');
});
};
El primer paso es simple, porque debe haber una página separada para agregar noticias, y hacer clic en el botón Agregar causará otro procesamiento, por lo que la solicitud interna debe ser subdividida. Las siguientes regulaciones son ahora las siguientes:
/ Página predeterminada, que muestra todos los tipos y noticias, con un botón de eliminación
/Agregar para agregar la página de noticias
/AddNews Agregar la dirección de solicitud de publicación específica de noticias (respuesta al hacer clic en el botón)
/Eliminar la solicitud de noticias Eliminar
/Ver consulta de noticias específica
Modifica ligeramente la ruta anterior:
La copia del código es la siguiente:
módulo.exports = function (app) {
// página de inicio, ahora también página de inicio
app.get ('/', function (req, res) {
res.render ('índice', {título: 'express'});
});
app.get ('/add', function (req, res) {
res.send ('Agregar página de noticias');
});
app.post ('/addnews', function (req, res) {
res.send ('manejar la solicitud de noticias Agregar');
});
app.get ('/delete', function (req, res) {
res.send ('Eliminar solicitud de noticias');
});
app.get ('/ver', function (req, res) {
res.send ('ver solicitud de noticias');
});
};
Por lo tanto, necesitamos crear varias plantillas nuevas para organizar nuestras páginas web. Aquí no separamos las primeras y las últimas páginas.
Agregue dos archivos de plantilla Agregar y ver, que se realiza temporalmente de acuerdo con index.egs, y está relacionado con la modificación de la navegación
La copia del código es la siguiente:
módulo.exports = function (app) {
// página de inicio, ahora también página de inicio
app.get ('/', function (req, res) {
res.render ('índice', {título: 'express'});
});
app.get ('/add', function (req, res) {
res.render ('add', {título: 'Agregar página de noticias'});
});
app.post ('/addnews', function (req, res) {
res.send ('manejar la solicitud de noticias Agregar');
});
app.get ('/delete', function (req, res) {
res.send ('Eliminar solicitud de noticias');
});
app.get ('/ver', function (req, res) {
res.render ('ver', {Título: 'Ver solicitud de noticias'});
});
};
La estructura del proyecto termina
Operación de datos
Después de que sale la estructura general, necesitamos realizar operaciones de datos:
① Agregar datos (Agregar noticias)
② Datos de visualización (Noticias de visualización)
③ Eliminar datos (eliminar noticias)
Originalmente involucraba operaciones de tipo, pero estaba hecho y desapareció. No me importa por el momento, porque es fácil confundirse al hacerlo por primera vez.
Agregar noticias
Aquí, no usamos la presentación de formulario, usamos Ajax ... Aquí presentamos la Biblioteca Zepto, por lo que nuestra página se vuelve así
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<title>
< %= título %> </title>
<link rel = 'stylesheet' href = '/stylesheets/style.css'/>
<script src = "javaScripts/zepto.js" type = "text/javaScript"> </script>
</ablo>
<Body>
<h1>
< %= título %> </h1>
<div>
Título: <input type = "text" id = "title" />
</div>
<div>
Contenido: <textarea id = "contenido"> </extarea>
</div>
<div>
<input type = "button" type = "button" id = "ok" valor = "agregar noticias" />
</div>
<script type = "text/javaScript">
$ (documento) .Ready (function () {
$ ('#ok'). Click (function () {
var param = {};
param.title = $ ('#title'). val ();
param.content = $ ('#content'). val ();
$ .post ('/addnews', param, function () {
console.log ('agregado con éxito');
});
});
});
</script>
</body>
</html>
Aunque todavía no hay un programa de respuesta de solicitud, los datos no se procesarán, y no hay archivos adjuntos aquí (el archivo adjunto solo está permitido para uno), por lo que modifiqué el código y agregué la imagen:
PD: Lo más problemático es que la imagen es un poco problemática después del procesamiento de Ajax, así que volvamos a formar operaciones aquí, de lo contrario, ¿cuánto tiempo llevará hacerlo ...
La copia del código es la siguiente:
<html>
<Evista>
<title>
< %= título %> </title>
<link rel = 'stylesheet' href = '/stylesheets/style.css'/>
</ablo>
<Body>
<h1>
< %= título %> </h1>
<form de enctype = "multipart/form-data" método = "post" action = "/addnews">
<div>
Título: <input type = "text" id = "title" name = "title" />
</div>
<div>
Imagen: <input type = "file" id = "pic" name = "pic" />
</div>
<div>
Content: <Textarea id = "Content" name = "Content"> </Textarea>
</div>
<div>
<input type = "subt" id = "ok" valor = "agregar noticias" />
</div>
</form>
</body>
</html>
No es necesario considerar demasiado el problema de adjunto. Hagámoslo por ahora. Ahora procesaremos el programa de solicitud primero. Aquí crearemos una nueva carpeta de noticias en público para almacenar sus fotos.
modelo
Agregue un nuevo archivo News.js a la carpeta de modelos, cree una entidad para ella y proporcione nuevas operaciones relacionadas con la consulta:
La copia del código es la siguiente:
var mongodb = require ('./ db');
Function News (Título, Contenido, PIC) {
this.title = title;
this.content = content;
this.pic = pic; // Guardar la ruta de almacenamiento
};
módulo.exports = noticias;
// datos de almacenamiento
News.prototype = {
guardar: function (devolución de llamada) {
var fecha = nueva fecha ();
Var Time = {
Fecha: fecha,
Año: date.gettylyear (),
mes: date.getblyear () + "-" + (date.getMonth () + 1),
Día: date.getblyear () + "-" + (date.getMonth () + 1) + "-" + date.getDate (),
minuto: date.getblyear () + "-" + (date.getMonth () + 1) + "-" + date.getDate () + "" +
date.gethours () + ":" + (date.getminutes () <10? '0' + date.getminutes (): date.getminutes ())
}
// Objeto de almacenamiento de datos
var news = {
Título: this.title,
Contenido: this.content,
Pic: this.pic, // Finalmente, cuando se trata de procesamiento de imágenes, guárdelo primero
Tiempo: hora
};
// Abra la conexión de datos, abriéndola es una devolución de llamada ...
mongodb.open (function (err, db) {
// Salir si el error es incorrecto
if (err) {
devolver la devolución de llamada (err);
}
// Abre la colección de noticias
db.collection ('News', function (err, colección) {
if (err) {
mongodb.close ();
devolver la devolución de llamada (err);
}
// Escribir en la colección (escriba en la base de datos)
Collection.insert (News, {Safe: True}, function (err) {
devolver la devolución de llamada (err);
});
devolución de llamada (nulo); // err es nulo
});
});
}
};
Entonces, hay un programa para escribir en la base de datos. Aquí intentaremos insertar la base de datos. Por supuesto, necesitamos modificar el programa en la oficina de enrutamiento.
PD: Por supuesto, el enrutamiento no puede escribir demasiado código lógico, este archivo debe separarse en el futuro
En este momento, la lógica en /addnews debe cambiarse
La copia del código es la siguiente:
app.post ('/addnews', function (req, res) {
VAR Title = req.body.title;
var content = req.body.content;
var pic = req.body.pic;
var news = New News (título, contenido, foto)
News.save (function (err, data) {
res.send (datos);
})
});
Después de consultar, no hay un gran problema, ahora el problema de archivo adjunto es el problema
Subir fotos
La función de carga de Express la admite. Express analiza el cuerpo de solicitud a través de BodyParser y luego carga el archivo a través de él. Utiliza formatable internamente.
Aquí, cambie la App.use (Express.BodyParser ()) en App.js a:
La copia del código es la siguiente: App.use (Express.BodyParser ({KeepExtensions: true, uploadDir: './public/news'}));
Abra index.js y agregue una línea de código frente a él:
Copie el código de la siguiente manera: fs = require ('fs'),
Modificar el archivo de índice:
La copia del código es la siguiente:
app.post ('/addnews', function (req, res) {
para (var i en req.files) {
if (req.files [i] == 0) {
// Eliminar un archivo sincronización
fs.unlinksync (req.files [i] .path);
console.log ('El éxito eliminó un archivo vacío');
} demás {
var ruta = './public/news/' + req.files [i] .name;
// cambie el nombre de un archivo usando el método síncrono
fs.Renamesync (req.files [i] .path, ruta);
console.log ('sunccess renombrado un archivo');
}
}
// var title = req.body.title;
// var content = req.body.content;
// var pic = req.body.pic;
// var News = New News (título, contenido, foto)
// news.save (function (err, data) {
// res.send (datos);
//})
});
En este momento, después de seleccionar el archivo, haga clic en Agregar noticias, y nuestro archivo se cargará
En este momento, solo necesito grabar el nombre del archivo en la base de datos, y hay imágenes en el directorio de archivos
La copia del código es la siguiente:
app.post ('/addnews', function (req, res) {
var pic = null;
para (var i en req.files) {
if (req.files [i] == 0) {
// Eliminar un archivo sincronización
fs.unlinksync (req.files [i] .path);
console.log ('El éxito eliminó un archivo vacío');
} demás {
var ruta = './public/news/' + req.files [i] .name;
// cambie el nombre de un archivo usando el método síncrono
fs.Renamesync (req.files [i] .path, ruta);
console.log ('sunccess renombrado un archivo');
}
pic = req.files [i] .name;
}
VAR Title = req.body.title;
var content = req.body.content;
var news = New News (título, contenido, foto)
News.save (function (err, data) {
res.send (datos);
})
res.send ('<a href = "./"> La solicitud tiene éxito, regresa a la página de inicio </a>');
});
Hay datos en la base de datos, y nuestro directorio también tiene archivos. Ahora solo necesitamos leer los datos.
PD: Los hermanos me instaron a salir a tomar una copa durante las vacaciones
Leer datos
El segundo paso es, por supuesto, leer los datos, y el primero es leer los datos en la página de inicio:
La copia del código es la siguiente:
var mongodb = require ('./ db');
Function News (Título, Contenido, PIC) {
this.title = title;
this.content = content;
this.pic = pic; // Guardar la ruta de almacenamiento
};
módulo.exports = noticias;
// datos de almacenamiento
News.prototype = {
guardar: function (devolución de llamada) {
var fecha = nueva fecha ();
// Objeto de almacenamiento de datos
var news = {
Título: this.title,
Contenido: this.content,
Pic: this.pic, // Finalmente, cuando se trata de procesamiento de imágenes, guárdelo primero
Fecha: fecha
};
// Abra la conexión de datos, abriéndola es una devolución de llamada ...
mongodb.open (function (err, db) {
// Salir si el error es incorrecto
if (err) {
devolver la devolución de llamada (err);
}
// Abre la colección de noticias
db.collection ('News', function (err, colección) {
if (err) {
mongodb.close ();
devolver la devolución de llamada (err);
}
// Escribir en la colección (escriba en la base de datos)
Collection.insert (News, {Safe: True}, function (err) {
devolver la devolución de llamada (err);
});
devolución de llamada (nulo); // err es nulo
});
});
}
};
// leer artículos e información relacionada
News.get = function (id, devolución de llamada) {
// Abra la base de datos
mongodb.open (function (err, db) {
if (err) {
devolver la devolución de llamada (err);
}
db.collection ('News', function (err, colección) {
if (err) {
mongodb.close ();
devolver la devolución de llamada (err);
}
Var Query = {};
if (id) {
query.id = id;
}
// Artículos de consulta basados en el objeto de consulta
colección.find (consulta) .sort ({
Fecha: -1
}). ToArray (function (err, data) {
mongodb.close ();
if (err) {
devolver la devolución de llamada (err); //¡Fallido! Volver a errar
}
devolución de llamada (nulo, datos); //¡Éxito! Devolver el resultado de la consulta como una matriz
});
});
});
};
News.js
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<title>
< %= título %> </title>
<link rel = 'stylesheet' href = '/stylesheets/style.css'/>
</ablo>
<Body>
<h1>
< %= título %> </h1>
<ul>
< %para (var k en datos) { %>
<li>
<div>
Título: < %= datos [k] .title %> </div>
<div>
Contenido: <%= datos [k] .content%> </div>
<div>
Adjunto: <img src = "News/<%= data [k] .pic%>"/> </div>
</div>
<div>
<a href = "/delete? id = < %= data [k] %>"> Eliminar </a>
</div>
<hr/>
</li>
< %} %>
</ul>
</body>
</html>
Conclusión
Bien, detengamos aquí para la producción del sistema de publicación de artículos. En el futuro, gradualmente agregaremos funciones y las embelleceremos.