Предисловие
Сегодня мы построим простую систему пресс -релиза. Первый этап системы не должен быть слишком сложным. В основном он имеет следующие функции
① Управление типом новостей
② Управление новостями (с функцией загрузки картин)
③ Новости просмотр
Хотя функций не так много, это также охватывает множество основных операций. Программа добавляется только, удаляется, проверяется и модифицирована, и ее достаточно, чтобы добавить и загружать вложения. Итак, давайте начнем нашу учебу сегодня
Подготовка
После вчерашней проблемы у нас уже есть Nodejs и MongoDB. Теперь мы можем напрямую создавать новые файлы проекта и файлы базы данных
Первый шаг - открыть символ командного символа и переключиться на D Disk, чтобы ввести
Скопируйте код следующим образом: D:/> Express -e News
Таким образом, система с радостью будет автоматически создавать основную среду
Очевидно, что многие модули не имеют зависимости. В настоящее время я прямо возьму вчерашний пакет.json:
Кода -копия выглядит следующим образом:
{
"Имя": "Приложение-имени",
"Версия": "0,0,1",
«Частный»: правда,
"Скрипты": {
"Start": "node app.js"
},
"Зависимости": {
"Express": "3.4.8",
"EJS": "*",
"mongodb": "*"
}
}
Затем переключитесь на каталог проектов:
Скопируйте код следующим образом: NMP Install
Все зависимости завершены, а затем мы входим
Кода -копия выглядит следующим образом:
D:/News> Приложение узла
Экспресс -сервер прослушивание на порту 3000
Итак, наша программа начала работать счастливо. Когда мы открыли URL, мы обнаружили, что проблем не было.
PS: Здесь есть проблема, которую нужно отметить. Файл, который мы скачали, не является кодированием UTF-8, поэтому на китайском может быть искаженное код, а кодирование файла должно быть объединено всеми.
Когда программа начинает работать, она требует конфигурации, связанной с базой данных
① Сначала создайте новую папку новостей в каталоге MongoDB
② Добавить настройки файла конфигурации.
Кода -копия выглядит следующим образом:
module.exports = {
cookiesecret: 'mynews',
DB: «Новости»,
Ведущий: 'Localhost'
};
③ Создайте новый каталог модели и создайте новый DB.JS
Кода -копия выглядит следующим образом:
настройки var = require ('../ settings'),
Db = require ('mongodb'). Db,
Connection = require ('mongodb'). Соединение,
Server = require ('mongodb'). Server;
module.exports = new db (stens.db, новый сервер (sutres.host, connection.default_port), {safe: true});
④ Создайте новую программу news.bat на рабочем столе
Скопируйте код следующим образом: d: /mongodb/bin/mongod.exe -dbpath d:/mongodb/news
В будущем нам нужно запустить базу данных, просто запустите ее. Таким образом, наши предварительные препараты в основном закончились.
Но здесь есть еще две раздражающие вещи. Одним из них является то, что очень раздражает начинать новостную программу каждый раз, а другое заключается в том, что вам нужно перезапустить при изменении чего -либо. Итак, давайте сначала решим эти две проблемы.
① Создайте news_app.bat на рабочем столе, а затем запустите его, чтобы запустить программу.
Скопируйте код следующим образом: Узел D:/News/App
② Руководитель - защитник процесса. Мы можем использовать его, чтобы помочь нам перезапустить программу, сначала следуйте, а затем настроить наш Node_app.bat
Скопируйте код следующим образом: Supervisor D:/News/App
Конечно, вам нужно установить его раньше:
Скопируйте код следующим образом: NPM Install -g Supervisor
После этого вам не нужно перезапускать вручную после изменения файла (News_App должен быть размещен в каталоге проекта), поэтому приготовления здесь
Структура проекта
После того, как первый шаг закончился, нам нужно подумать о структуре проекта
① Домашняя страница - это указатель, и все типы новостей и записи новостей будут перечислены здесь
② Каждое новостное предмет имеет три кнопки для редактирования/удаления/просмотра
③ Домашняя страница имеет кнопку новостей (изображения можно загрузить при добавлении)
Основные функции, как указано выше
Итак, мы удаляем функцию маршрутизации в приложении и помещаем все маршруты в индекс
Кода -копия выглядит следующим образом:
// Поместите функцию маршрутизации в индекс
//app.get(''/ ', routes.index);
//app.get('susers ', user.list);
маршруты (приложение);
Кода -копия выглядит следующим образом:
module.exports = function (app) {
// домашняя страница, теперь также домашняя страница
app.get ('/', function (req, res) {
res.render ('index', {title: 'Express'});
});
app.get ('/add', function (req, res) {
res.send ('добавить запрос новостей');
});
app.get ('/delete', function (req, res) {
res.send ('удалить запрос новостей');
});
app.get ('/view', function (req, res) {
res.send («Просмотреть запрос новостей»);
});
app.get ('/update', function (req, res) {
res.send ('изменить запрос новостей');
});
};
Первый шаг прост, потому что должна быть отдельная страница для добавления новостей, и нажатие кнопки «Добавить» вызовет другую обработку, поэтому внутренний запрос должен быть подразделен. Следующие правила теперь следующие:
/ Страница по умолчанию, которая отображает все типы, а также новости, с кнопкой Delete
/Добавить в добавление страницы новостей
/AddNews Добавить адрес запроса на конкретный пост новостей (ответ при нажатии на кнопку)
/DELETE DELETE Запрос новостей
/Просмотреть конкретные новости запроса
Так что слегка изменяйте вышеуказанный маршрут:
Кода -копия выглядит следующим образом:
module.exports = function (app) {
// домашняя страница, теперь также домашняя страница
app.get ('/', function (req, res) {
res.render ('index', {title: 'Express'});
});
app.get ('/add', function (req, res) {
res.send ('добавить страницу новостей');
});
app.post ('/addnews', function (req, res) {
res.send ('Ручка добавить запрос новостей');
});
app.get ('/delete', function (req, res) {
res.send ('удалить запрос новостей');
});
app.get ('/view', function (req, res) {
res.send («Просмотреть запрос новостей»);
});
};
Таким образом, нам нужно создать несколько новых шаблонов для организации наших веб -страниц. Здесь мы не разделяем первые и последние страницы.
Добавить два шаблона Files Add and View, которые временно выполняют согласованность с index.ejs и связаны с изменением навигации
Кода -копия выглядит следующим образом:
module.exports = function (app) {
// домашняя страница, теперь также домашняя страница
app.get ('/', function (req, res) {
res.render ('index', {title: 'Express'});
});
app.get ('/add', function (req, res) {
res.render ('add', {title: 'добавить страницу новостей'});
});
app.post ('/addnews', function (req, res) {
res.send ('Ручка добавить запрос новостей');
});
app.get ('/delete', function (req, res) {
res.send ('удалить запрос новостей');
});
app.get ('/view', function (req, res) {
res.render ('view', {title: 'view news запрос'});
});
};
Структура проекта заканчивается
Операция данных
После того, как общая структура выходит, нам нужно выполнить операции данных:
① Добавить данные (добавить новости)
② Показать данные (отображать новости)
③ Удалить данные (Delete News)
Первоначально это включало типовые операции, но это было сделано, и это исчезло. Не заботитесь об этом на данный момент, потому что это легко запутаться, делая это в первый раз.
Добавить новости
Здесь мы не используем подчинение формы, мы используем Ajax ... здесь мы представляем библиотеку Zepto, поэтому наша страница становится такой
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<название>
< %= title %> </title>
<link rel = 'styleSheet' href = '/styleSheets/style.css'/>
<script src = "javascripts/zepto.js" type = "text/javascript"> </script>
</head>
<тело>
<h1>
< %= title %> </h1>
<div>
Название: <input type = "text" id = "title" />
</div>
<div>
Содержание: <TextAREA ID = "Content"> </textarea>
</div>
<div>
<input type = "кнопка" type = "кнопка" id = "ok" value = "добавить новости" />
</div>
<script type = "text/javascript">
$ (document) .ready (function () {
$ ('#OK'). Click (function () {
var param = {};
param.title = $ ('#title'). val ();
param.content = $ ('#content'). val ();
$ .post ('/addnews', param, function () {
console.log ('добавлен успешно');
});
});
});
</script>
</body>
</html>
Несмотря на то, что программа ответа на запросы пока нет, данные не будут обработаны, и здесь нет вложения (вложение разрешено только для одного), поэтому я изменил код и добавил изображение:
PS: Самое беспокойство то, что изображение немного неприятно после обработки AJAX, поэтому давайте просто переберемся на операции с формой, в противном случае, сколько времени потребуется, чтобы сделать это ...
Кода -копия выглядит следующим образом:
<html>
<голова>
<название>
< %= title %> </title>
<link rel = 'styleSheet' href = '/styleSheets/style.css'/>
</head>
<тело>
<h1>
< %= title %> </h1>
<form enctype = "multipart/form-data" method = "post" action = "/addnews">
<div>
Название: <input type = "text" id = "title" name = "title" />
</div>
<div>
Изображение: <input type = "file" id = "pic" name = "pic" />
</div>
<div>
Содержимое: <textarea id = "content" name = "content"> </textarea>
</div>
<div>
<input type = "отправить" id = "ok" value = "добавить новости" />
</div>
</form>
</body>
</html>
Нет необходимости слишком много учитывать проблему привязанности. Давайте сделаем это на данный момент. Теперь мы сначала обработаем программу запроса. Здесь мы создадим новую папку новостей на публике, чтобы хранить свои фотографии.
модель
Добавьте новый файл News.js в папку моделей, создайте для него объект и дайте новые операции, связанные с запросом:
Кода -копия выглядит следующим образом:
var mongodb = require ('./ db');
Функциональные новости (заголовок, контент, pic) {
this.title = заголовок;
this.content = content;
this.pic = pic; // Сохранить путь хранения
};
module.exports = news;
// данные хранения
News.prototype = {
Сохранить: function (обратный вызов) {
var date = new Date ();
var time = {
Дата: дата,
Год: date.getiflyear (),
Месяц: date.getEar () + "-" + (date.getMonth () + 1),
День: date.getFielyear () + "-" + (date.getMonth () + 1) + "-" + date.getDate (),
Минута: date.getFielyear () + "-" + (date.getMonth () + 1) + "-" + date.getDate () + "" +
date.gethours () + ":" + (date.getminutes () <10? '0' + date.getminutes (): date.getminutes ())
}
// объект хранения данных
var news = {
Название: this.title,
Контент: это.
PIC: this.pic, // Наконец, когда дело доходит до обработки изображений, сначала сохраните его
Время: время
};
// Откройте соединение данных, открытие оно - обратный вызов ...
mongodb.open (function (err, db) {
// выйти, если ошибка неверна
if (err) {
вернуть обратный вызов (ERR);
}
// Откройте коллекцию новостей
db.collection ('news', function (err, collection) {
if (err) {
mongodb.close ();
вернуть обратный вызов (ERR);
}
// Записать в коллекцию (запишите в базу данных)
collection.insert (news, {safe: true}, function (err) {
вернуть обратный вызов (ERR);
});
обратный вызов (null); // err is null
});
});
}
};
Таким образом, есть программа для написания в базе данных. Здесь мы постараемся вставить базу данных. Конечно, нам нужно изменить программу в офисе маршрутизации.
PS: Конечно, маршрутизация не может записать слишком много логического кода, этот файл должен быть разделен в будущем
В настоящее время необходимо изменить логику в /addnews
Кода -копия выглядит следующим образом:
app.post ('/addnews', function (req, res) {
var title = req.body.title;
var content = req.body.content;
var pic = req.body.pic;
var news = новые новости (название, контент, PIC)
news.save (function (err, data) {
res.send (data);
})
});
После запроса проблем нет, теперь проблема привязанности является проблемой
Загрузить картинки
Функция загрузки самого Express поддерживает его. Экспресс анализирует тело запроса через BodyParser, а затем загружает файл через него. Он использует форматируемый внутри.
Здесь измените app.use (express.bodyparser ()) в app.js на:
Кода кода выглядит следующим образом: app.use (express.bodyParser ({KeepExtensions: true, uploadDir: './public/news'}));
Откройте index.js и добавьте линию кода перед ним:
Скопируйте код следующим образом: fs = require ('fs'),
Измените файл индекса:
Кода -копия выглядит следующим образом:
app.post ('/addnews', function (req, res) {
для (var i in req.files) {
if (req.files [i] == 0) {
// Удалить файл с синхронизацией
fs.unlinksync (req.files [i] .path);
console.log («успех удалил пустой файл»);
} еще {
var path = './public/news/' + req.files [i] .name;
// Переименование файла с помощью синхронного метода
fs.renamesync (req.files [i] .path, path);
console.log ('sunccess переименован в файл');
}
}
// var title = req.body.title;
// var content = req.body.content;
// var pic = req.body.pic;
// var news = новые новости (заголовок, контент, рис)
// news.save (function (err, data) {
// res.send (data);
//})
});
В настоящее время, после выбора файла, нажмите «Добавить новости», и наш файл будет загружен
В настоящее время мне просто нужно записать имя файла в базе данных, и в каталоге файла есть изображения.
Кода -копия выглядит следующим образом:
app.post ('/addnews', function (req, res) {
var pic = null;
для (var i in req.files) {
if (req.files [i] == 0) {
// Удалить файл с синхронизацией
fs.unlinksync (req.files [i] .path);
console.log («успех удалил пустой файл»);
} еще {
var path = './public/news/' + req.files [i] .name;
// Переименование файла с помощью синхронного метода
fs.renamesync (req.files [i] .path, path);
console.log ('sunccess переименован в файл');
}
pic = req.files [i] .name;
}
var title = req.body.title;
var content = req.body.content;
var news = новые новости (название, контент, PIC)
news.save (function (err, data) {
res.send (data);
})
res.send ('<a href = "./"> запрос добивается успеха, возвращается на домашнюю страницу </a>');
});
В базе данных есть данные, и в нашем каталоге также есть файлы. Теперь нам нужно только прочитать данные.
PS: братья призвали меня выйти выпить во время праздника
Прочитать данные
Второй шаг, конечно, чтение данных, и первый читает данные на домашней странице:
Кода -копия выглядит следующим образом:
var mongodb = require ('./ db');
Функциональные новости (заголовок, контент, pic) {
this.title = заголовок;
this.content = content;
this.pic = pic; // Сохранить путь хранения
};
module.exports = news;
// данные хранения
News.prototype = {
Сохранить: function (обратный вызов) {
var date = new Date ();
// объект хранения данных
var news = {
Название: this.title,
Контент: это.
PIC: this.pic, // Наконец, когда дело доходит до обработки изображений, сначала сохраните его
Дата: дата
};
// Откройте соединение данных, открытие оно - обратный вызов ...
mongodb.open (function (err, db) {
// выйти, если ошибка неверна
if (err) {
вернуть обратный вызов (ERR);
}
// Откройте коллекцию новостей
db.collection ('news', function (err, collection) {
if (err) {
mongodb.close ();
вернуть обратный вызов (ERR);
}
// Записать в коллекцию (запишите в базу данных)
collection.insert (news, {safe: true}, function (err) {
вернуть обратный вызов (ERR);
});
обратный вызов (null); // err null
});
});
}
};
// Читать статьи и связанную информацию
News.get = function (id, обратный вызов) {
// Откройте базу данных
mongodb.open (function (err, db) {
if (err) {
вернуть обратный вызов (ERR);
}
db.collection ('news', function (err, collection) {
if (err) {
mongodb.close ();
вернуть обратный вызов (ERR);
}
var Query = {};
if (id) {
Query.id = id;
}
// Запрос статьи на основе объекта запроса
collection.find (Query) .sort ({
Дата: -1
}). toarray (function (err, data) {
mongodb.close ();
if (err) {
вернуть обратный вызов (ERR); //Неуспешный! Вернуться к Err
}
обратный вызов (null, data); //Успех! Вернуть результат запроса в качестве массива
});
});
});
};
News.js
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<название>
< %= title %> </title>
<link rel = 'styleSheet' href = '/styleSheets/style.css'/>
</head>
<тело>
<h1>
< %= title %> </h1>
<ul>
< %для (var k в данных) { %>
<li>
<div>
Название: < %= data [k] .title %> </div>
<div>
Содержание: <%= data [k] .content%> </div>
<div>
Приложение: <img src = "News/<%= data [k] .pic%>"/> </div>
</div>
<div>
<a href = "/delete? id = < %= data [k] %>"> delete </a>
</div>
<HR/>
</li>
< %} %>
</ul>
</body>
</html>
Заключение
Хорошо, давайте остановимся здесь для производства системы публикации статьи. В будущем мы постепенно добавим функции и украсим их.