Kata pengantar
Hari ini kami akan membangun sistem rilis berita sederhana. Tahap pertama sistem tidak perlu terlalu sulit. Ini terutama memiliki fungsi berikut
① Manajemen Jenis Berita
② Manajemen Berita (dengan Fungsi Upload Gambar)
③ Berita menjelajah
Meskipun tidak ada banyak fungsi, ini juga mencakup banyak operasi dasar. Program ini hanya ditambahkan, dihapus, diperiksa dan dimodifikasi, dan cukup untuk menambah dan mengunggah lampiran. Jadi mari kita mulai belajar hari ini
Persiapan
Setelah masalah kemarin, kita sudah memiliki lingkungan NodeJs dan MongoDB. Sekarang kita dapat secara langsung membuat file proyek baru dan file database
Langkah pertama adalah membuka karakter perintah dan beralih ke D disk untuk masuk
Salin kode sebagai berikut: D:/> Express -e News
Jadi sistem akan secara otomatis membangun lingkungan dasar dengan senang hati
Jelas bahwa banyak modul tidak memiliki dependensi. Saat ini, saya akan langsung mengambil paket kemarin.
Salinan kode adalah sebagai berikut:
{
"Nama": "Aplikasi-Nama",
"Versi": "0.0.1",
"Pribadi": Benar,
"Scripts": {
"Mulai": "node app.js"
},
"dependensi": {
"Express": "3.4.8",
"ejs": "*",
"MongoDB": "*"
}
}
Kemudian beralih ke direktori proyek:
Salin kode sebagai berikut: Instal NMP
Semua dependensi selesai, dan kemudian kami masuk
Salinan kode adalah sebagai berikut:
D:/News> Aplikasi Node
Mendengarkan server ekspres di port 3000
Jadi, program kami mulai berjalan dengan senang hati. Ketika kami membuka URL, kami menemukan bahwa tidak ada masalah.
PS: Ada masalah di sini yang perlu dicatat. File yang kami unduh bukan pengkodean UTF-8, sehingga mungkin ada kode yang kacau dalam bahasa Cina, dan pengkodean file perlu disatukan oleh semua orang.
Saat program mulai berjalan, itu membutuhkan konfigurasi terkait database
① Pertama membuat folder berita baru di direktori MongoDB
② Tambahkan Pengaturan File Konfigurasi.js ke proyek
Salinan kode adalah sebagai berikut:
module.exports = {
cookiesecret: 'mynews',
DB: 'Berita',
Tuan rumah: 'Localhost'
};
③ Buat direktori model baru dan buat DB.js baru
Salinan kode adalah sebagai berikut:
var pengaturan = membutuhkan ('../ pengaturan'),
Db = membutuhkan ('mongoDb'). Db,
Koneksi = membutuhkan ('mongoDb'). Koneksi,
Server = membutuhkan ('mongoDb'). Server;
module.exports = db baru (settings.db, server baru (settings.host, connection.default_port), {safe: true});
④ Buat program news.bat baru di desktop
Salin kode sebagai berikut: D: /MongoDB/bin/mongod.exe -dbpath D:/MongoDB/News
Di masa depan, kita perlu memulai database, jalankan saja. Dengan cara ini, persiapan awal kami pada dasarnya sudah berakhir.
Tapi ada dua hal yang lebih mengganggu di sini. Salah satunya adalah sangat menjengkelkan untuk memulai program berita setiap saat, dan yang lainnya adalah Anda perlu memulai kembali saat memodifikasi apa pun. Jadi mari kita selesaikan dua masalah ini terlebih dahulu.
① Buat news_app.bat di desktop, dan kemudian jalankan untuk memulai program.
Salin kode sebagai berikut: Node D:/News/App
② Pengawas adalah pelindung proses. Kami dapat menggunakannya untuk membantu kami memulai kembali program, pertama -tama ikuti, dan kemudian sesuaikan node_app.bat kami
Salin kode sebagai berikut: Pengawas D:/Berita/Aplikasi
Tentu saja, Anda perlu menginstalnya sebelumnya:
Salin kode sebagai berikut: Instal NPM -G Supervisor
Setelah ini, Anda tidak perlu memulai kembali secara manual setelah memodifikasi file (news_app perlu ditempatkan di direktori proyek), sehingga persiapan sudah ada di sini
Struktur proyek
Setelah langkah pertama selesai, kita perlu memikirkan struktur proyek
① Halaman beranda adalah indeks, dan semua jenis berita dan entri berita akan terdaftar di sini
② Setiap item berita memiliki tiga tombol untuk mengedit/menghapus/melihat
③ Halaman beranda memiliki tombol berita (gambar dapat diunggah saat menambahkan)
Fungsi dasar seperti di atas
Jadi, kami menghapus fungsi perutean di aplikasi dan memasukkan semua rute ke dalam indeks
Salinan kode adalah sebagai berikut:
// Masukkan fungsi perutean ke dalam indeks
//app.get('/ ', routes.index);
//app.get('/users ', user.list);
rute (aplikasi);
Salinan kode adalah sebagai berikut:
module.exports = function (app) {
// halaman beranda, sekarang juga halaman beranda
app.get ('/', function (req, res) {
res.render ('index', {title: 'express'});
});
app.get ('/add', function (req, res) {
res.send ('Tambahkan permintaan berita');
});
app.get ('/delete', function (req, res) {
res.send ('hapus permintaan berita');
});
app.get ('/view', function (req, res) {
res.send ('lihat permintaan berita');
});
app.get ('/update', function (req, res) {
res.send ('ubah permintaan berita');
});
};
Langkah pertama sederhana, karena harus ada halaman terpisah untuk menambahkan berita, dan mengklik tombol Tambah akan menyebabkan pemrosesan lain, sehingga permintaan internal harus dibagi lagi. Peraturan berikut ini sekarang sebagai berikut:
/ Halaman default, yang menampilkan semua jenis serta berita, dengan tombol hapus
/Tambahkan untuk menambahkan halaman berita
/AddNews Tambahkan Berita Alamat Permintaan Posting Khusus Berita (Respons Saat mengklik tombol)
/hapus permintaan berita
/Lihat pertanyaan berita tertentu
Jadi sedikit memodifikasi rute di atas:
Salinan kode adalah sebagai berikut:
module.exports = function (app) {
// halaman beranda, sekarang juga halaman beranda
app.get ('/', function (req, res) {
res.render ('index', {title: 'express'});
});
app.get ('/add', function (req, res) {
res.send ('Tambahkan halaman berita');
});
app.post ('/addnews', function (req, res) {
res.send ('Tangani Tambah Permintaan Berita');
});
app.get ('/delete', function (req, res) {
res.send ('hapus permintaan berita');
});
app.get ('/view', function (req, res) {
res.send ('lihat permintaan berita');
});
};
Jadi kita perlu membuat beberapa templat baru untuk mengatur halaman web kita. Di sini kami tidak memisahkan halaman pertama dan terakhir.
Tambahkan dua file template Tambah dan lihat, yang sementara berkinerja konsisten dengan index.ejs, dan terkait dengan modifikasi navigasi
Salinan kode adalah sebagai berikut:
module.exports = function (app) {
// halaman beranda, sekarang juga halaman beranda
app.get ('/', function (req, res) {
res.render ('index', {title: 'express'});
});
app.get ('/add', function (req, res) {
res.render ('add', {title: 'tambahkan halaman berita'});
});
app.post ('/addnews', function (req, res) {
res.send ('Tangani Tambah Permintaan Berita');
});
app.get ('/delete', function (req, res) {
res.send ('hapus permintaan berita');
});
app.get ('/view', function (req, res) {
res.render ('view', {title: 'lihat permintaan berita'});
});
};
Struktur proyek berakhir
Operasi Data
Setelah keseluruhan struktur keluar, kita perlu melakukan operasi data:
① Tambahkan data (tambahkan berita)
② Tampilkan Data (Berita Tampilan)
③ Hapus data (hapus berita)
Awalnya melibatkan operasi jenis, tetapi sudah selesai dan sudah hilang. Tidak peduli untuk saat ini, karena mudah untuk bingung saat melakukannya untuk pertama kalinya.
Tambahkan berita
Di sini, kami tidak menggunakan pengiriman formulir, kami menggunakan Ajax ... di sini kami memperkenalkan perpustakaan Zepto, jadi halaman kami menjadi seperti ini
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<title>
< %= title %> </ title>
<tautan rel = 'stylesheet' href = '/stylesheets/style.css'/>
<skrip src = "javascripts/zepto.js" type = "text/javascript"> </script>
</head>
<body>
<h1>
< %= judul %> </h1>
<div>
Judul: <input type = "text" id = "title" />
</div>
<div>
Konten: <textarea id = "content"> </textarea>
</div>
<div>
<input type = "tombol" type = "tombol" id = "ok" value = "tambahkan berita" />
</div>
<type skrip = "Teks/JavaScript">
$ (dokumen) .ready (function () {
$ ('#ok'). Klik (fungsi () {
var param = {};
param.title = $ ('#title'). val ();
param.content = $ ('#content'). val ();
$ .post ('/addNews', param, function () {
console.log ('ditambahkan dengan sukses');
});
});
});
</script>
</body>
</html>
Meskipun belum ada program respons permintaan, data tidak akan diproses, dan tidak ada lampiran di sini (lampiran hanya diizinkan untuk satu), jadi saya memodifikasi kode dan menambahkan gambar:
PS: Yang lebih merepotkan adalah bahwa gambar itu sedikit merepotkan setelah pemrosesan Ajax, jadi mari kita beralih kembali ke operasi formulir di sini, jika tidak berapa lama waktu yang dibutuhkan untuk melakukannya ...
Salinan kode adalah sebagai berikut:
<Html>
<head>
<title>
< %= title %> </ title>
<tautan rel = 'stylesheet' href = '/stylesheets/style.css'/>
</head>
<body>
<h1>
< %= judul %> </h1>
<form enctype = "multipart/form-data" Method = "POST" ACTION = "/ADDNEWS">
<div>
Judul: <input type = "text" id = "title" name = "title" />
</div>
<div>
Gambar: <input type = "file" id = "pic" name = "pic" />
</div>
<div>
Konten: <textarea id = "content" name = "content"> </textarea>
</div>
<div>
<input type = "kirim" id = "ok" value = "tambahkan berita" />
</div>
</form>
</body>
</html>
Tidak perlu terlalu mempertimbangkan masalah lampiran. Mari kita lakukan untuk saat ini. Sekarang kami akan memproses program permintaan terlebih dahulu. Di sini kami akan membuat folder berita baru di depan umum untuk menyimpan fotonya.
model
Tambahkan file news.js baru ke folder model, bangun entitas untuk itu, dan berikan operasi terkait kueri baru:
Salinan kode adalah sebagai berikut:
var mongodb = membutuhkan ('./ db');
Berita fungsi (judul, konten, pic) {
this.title = judul;
this.content = konten;
this.pic = pic; // simpan jalur penyimpanan
};
Module.Exports = News;
// data penyimpanan
News.prototype = {
simpan: function (callback) {
var date = new date ();
var time = {
Tanggal: Tanggal,
tahun: date.getlear (),
Bulan: Date.getLyEar () + "-" + (date.getMonth () + 1),
Day: Date.getLyEar () + "-" + (date.getMonth () + 1) + "-" + date.getDate (),
Menit: Date.getLyEar () + "-" + (date.getMonth () + 1) + "-" + date.getDate () + "" +
date.getHours () + ":" + (date.getMinutes () <10? '0' + date.getMinutes (): date.getMinutes ())
}
// Objek penyimpanan data
var news = {
Judul: this.title,
Konten: This.Content,
pic: this.pic, // akhirnya, ketika datang ke pemrosesan gambar, simpan terlebih dahulu
Waktu: Waktu
};
// buka koneksi data, buka itu adalah panggilan balik ...
mongodb.open (function (err, db) {
// Keluarlah jika kesalahannya salah
if (err) {
return callback (err);
}
// buka koleksi berita
db.collection ('news', function (err, collection) {
if (err) {
mongoDb.close ();
return callback (err);
}
// Tulis ke koleksi (tulis ke database)
collection.insert (news, {safe: true}, function (err) {
return callback (err);
});
callback (null); // err adalah null
});
});
}
};
Jadi, ada program untuk ditulis ke database. Di sini kami akan mencoba memasukkan database. Tentu saja, kita perlu memodifikasi program di kantor perutean.
PS: Tentu saja, perutean tidak dapat menulis terlalu banyak kode logis, file ini harus dipisahkan di masa depan
Saat ini logika di /addnews perlu diubah
Salinan kode adalah sebagai berikut:
app.post ('/addnews', function (req, res) {
var title = req.body.title;
var content = req.body.content;
var pic = req.body.pic;
var news = News baru (judul, konten, pic)
news.save (function (err, data) {
res.send (data);
})
});
Setelah bertanya, tidak ada masalah besar, sekarang masalah lampiran adalah masalahnya
Unggah gambar
Fungsi pengunggahan Express sendiri mendukungnya. Express parse Badan permintaan melalui bodyparser, dan kemudian mengunggah file melalui itu. Menggunakan format internal.
Di sini, ubah app.use (express.bodyparser ()) di app.js menjadi:
Salinan kode adalah sebagai berikut: app.use (express.bodyparser ({Keepextensions: true, unggah: './public/news'}));
Buka index.js dan tambahkan baris kode di depannya:
Salin kode sebagai berikut: fs = membutuhkan ('fs'),
Ubah file indeks:
Salinan kode adalah sebagai berikut:
app.post ('/addnews', function (req, res) {
untuk (var i di req.files) {
if (req.files [i] == 0) {
// Hapus file dalam sinkronisasi
fs.unlinksync (req.files [i] .path);
console.log ('Sukses menghapus file kosong');
} kalau tidak {
var path = './public/news/' + req.files [i] .name;
// Ubah nama file menggunakan metode sinkron
fs.renamesync (req.files [i] .path, path);
Console.log ('Sunccess berganti nama menjadi file');
}
}
// var title = req.body.title;
// var content = req.body.content;
// var pic = req.body.pic;
// var news = News baru (judul, konten, pic)
// news.save (function (err, data) {
// res.send (data);
//})
});
Saat ini, setelah memilih file, klik Tambah Berita, dan file kami akan diunggah
Saat ini, saya hanya perlu merekam nama file di database, dan ada gambar di direktori file
Salinan kode adalah sebagai berikut:
app.post ('/addnews', function (req, res) {
var pic = null;
untuk (var i di req.files) {
if (req.files [i] == 0) {
// Hapus file dalam sinkronisasi
fs.unlinksync (req.files [i] .path);
console.log ('Sukses menghapus file kosong');
} kalau tidak {
var path = './public/news/' + req.files [i] .name;
// Ubah nama file menggunakan metode sinkron
fs.renamesync (req.files [i] .path, path);
Console.log ('Sunccess berganti nama menjadi file');
}
pic = req.files [i] .name;
}
var title = req.body.title;
var content = req.body.content;
var news = News baru (judul, konten, pic)
news.save (function (err, data) {
res.send (data);
})
res.send ('<a href = "./"> Permintaan berhasil, kembali ke beranda </a>');
});
Ada data dalam database, dan direktori kami juga memiliki file. Sekarang kita hanya perlu membaca data.
PS: Saudara -saudara mendesak saya untuk minum selama liburan
Baca data
Langkah kedua tentu saja membaca data, dan yang pertama adalah membaca data di halaman beranda:
Salinan kode adalah sebagai berikut:
var mongodb = membutuhkan ('./ db');
Berita fungsi (judul, konten, pic) {
this.title = judul;
this.content = konten;
this.pic = pic; // simpan jalur penyimpanan
};
Module.Exports = News;
// data penyimpanan
News.prototype = {
simpan: function (callback) {
var date = new date ();
// Objek penyimpanan data
var news = {
Judul: this.title,
Konten: This.Content,
pic: this.pic, // akhirnya, ketika datang ke pemrosesan gambar, simpan terlebih dahulu
Tanggal: Tanggal
};
// buka koneksi data, buka itu adalah panggilan balik ...
mongodb.open (function (err, db) {
// Keluarlah jika kesalahannya salah
if (err) {
return callback (err);
}
// buka koleksi berita
db.collection ('news', function (err, collection) {
if (err) {
mongoDb.close ();
return callback (err);
}
// Tulis ke koleksi (tulis ke database)
collection.insert (news, {safe: true}, function (err) {
return callback (err);
});
callback (null); // err adalah nol
});
});
}
};
// Baca artikel dan informasi terkait
News.get = function (id, callback) {
// Buka database
mongodb.open (function (err, db) {
if (err) {
return callback (err);
}
db.collection ('news', function (err, collection) {
if (err) {
mongoDb.close ();
return callback (err);
}
var query = {};
if (id) {
query.id = id;
}
// Artikel kueri berdasarkan objek kueri
collection.find (query) .sort ({
Tanggal: -1
}). toArray (function (err, data) {
mongoDb.close ();
if (err) {
return callback (err); //Gagal! Kembali ke err
}
Callback (null, data); //Kesuksesan! Mengembalikan hasil kueri sebagai array
});
});
});
};
news.js
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<title>
< %= title %> </ title>
<tautan rel = 'stylesheet' href = '/stylesheets/style.css'/>
</head>
<body>
<h1>
< %= judul %> </h1>
<ul>
< %untuk (var k dalam data) { %>
<li>
<div>
Judul: < %= Data [k] .Title %> </div>
<div>
Konten: <%= data [k] .content%> </div>
<div>
Lampiran: <img src = "news/<%= data [k] .pic%>"/> </div>
</div>
<div>
<a href = "/delete? id = < %= data [k] %>"> hapus </a>
</div>
<hr/>
</li>
< %} %>
</ul>
</body>
</html>
Kesimpulan
Oke, mari kita berhenti di sini untuk produksi sistem penerbitan artikel. Di masa depan, kami secara bertahap akan menambahkan fungsi dan mempercantiknya.