前端作為當下非常火的職業之一，小編身邊有很多小夥伴在學習前端，但是大部分人在自學過程中十分盲目，不知道自己每個階段應該做什麼，不僅大大降低了學習的效率，也打擊自己的學習熱情。
小編想說，對於編程學科而言，在我們學習掌握了一部分知識，對前端有了進一步的了解之後，我們就急需要一些項目去幫我們整理一下自己學習的知識點，以及提高編程能力。
不斷地找項目練手，通過項目實戰來總結經驗，豐富技術的應用。這樣更有助於我們的學習和工作實踐，對於找工作而言有著大大的幫助。
下面小編就給有一定前端基礎的開發者，分享一個非常乾貨的項目——《個人博客系統開發》。
本項目是基於Node.js中的Express框架做的一個基本的入門案例，使用EJS模板引擎渲染頁面，以及MySQL資料庫實現數據的持久存儲。本項目涵蓋了Node.js連接資料庫的基本操作、接收前端請求並返回請求結果的前端基本交互功能。
特別指出的是，Node.js擁有廣大的JavaScript程式設計師基礎並且完全開源，所以它擁有一個強大的開發者社區。依靠繁榮的社區力量，現在已經發展出成熟的技術體系與龐大的生態。它被廣泛地用在Web服務、開發工作流、客戶端應用等諸多領域。其中，在Web服務開發這個領域，業界對Node.js的接受程度最高。
下面就進入具體的項目實戰吧！
Express框架快速搭建伺服器
Node.js操作MySQL資料庫
EJS模板引擎的使用
博客系統需要有存儲作者信息和文章信息的資料庫---MySQL資料庫。
博客系統需要有登錄註冊功能、博客撰寫功能、所有文章展示以及單篇文章閱讀功能、博客介紹、友情連結等。
首先我們建立一個Node.js的express項目，推薦大家使用使用WebStorm（因為WebStorm為大家集成了Express項目所需的模塊資源，十分方便，特別對於初學者而言是十分友好的哦）
安裝項目所必須的mysql第三方模塊（如果之前全局安裝過略過此步驟）
使用MySQL新建一個資料庫，命名為blog，並在資料庫中建立兩張表，分別為author和article，用於儲存項目中的博客作者和撰寫的博客信息，表的設計分別如下。
項目文件夾結構圖
主要文件夾說明
Public文件夾放公共資源
Routes文件夾放路由文件
Views放ejs模板文件（通俗理解為前端頁面文件）
首先，新建database.js和config.js文件，分別在其中加入資料庫配置信息。
PS：這兩個文件內容可以視作Node.js連接MySQL的模板配置，一般僅需替換資料庫名和密碼即可使用。
接下來，對項目的入口文件app.js做一些設置，具體設置見代碼注釋。
var createError = require('http-errors');var express = require('express');var path = require('path');var cookieParser = require('cookie-parser');var logger = require('morgan');var bodyParser = require('body-parser');var session = require('express-session');
var index = require('./routes/index');var users = require('./routes/users');
var app = express();
app.use(session({ secret:'blog', cookie:{maxAge:1000*60*24*30}, resave: false, saveUninitialized: true}));
app.set('views', path.join(__dirname, 'views'));app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);app.use('/users', users);
app.use(function(req, res, next) { res.render('404');});
app.use(function(err, req, res, next) { res.locals.message = err.message; res.locals.error = req.app.get('env') === 'development' ? err : {};
res.status(err.status || 500); res.render('error');});
app.listen(3000,function(){ console.log('listening port 3000');});module.exports = app;可以看到，博客首頁左側為博客的導航欄，右側有所寫的全部文章概要信息。整個頁面的邏輯為在瀏覽器輸入博客首頁地址---瀏覽器向Node.js伺服器發起請求---伺服器接收到請求---查找資料庫，將所有文章信息返回給前端頁面---前端頁面根據返回的結果使用ejs模板引擎進行渲染顯示。
前端關鍵代碼為
<section class="main-articles"> <ul> <% for(var i = 0, max = articles.length; i < max; i++) {%> <li class="main-articles-item"> <h2><a href="/articles/<%= articles[i].articleID%>"><%= articles[i].articleTitle %></a></h2> <section class="main-articles-items-des"> <p> <span>作者：<%= articles[i].articleAuthor %></span> <span>發布時間：<%= articles[i].articleTime %></span> <span>瀏覽量：<%= articles[i].articleClick %></span> <% if(user) {%> <span class="delete"><a href="/delete/<%= articles[i].articleID %>">刪除</a></span> <span class="modify"><a href="/modify/<%= articles[i].articleID %>">編輯</a></span> <% } %> </p> </section> </li> <% } %> </ul></section>後臺代碼為
router.get('/', function(req, res, next) { var query = 'SELECT * FROM article ORDER BY articleID DESC'; mysql.query(query, function(err, rows, fields){ var articles = rows; articles.forEach(function(ele) { var year = ele.articleTime.getFullYear(); var month; if(ele.articleTime.getMonth() + 1 > 10) month = ele.articleTime.getMonth() + 1; else month = '0' + (ele.articleTime.getMonth() + 1); var date = ele.articleTime.getDate() > 10 ? ele.articleTime.getDate() : '0' + ele.articleTime.getDate(); ele.articleTime = year + '-' + month + '-' + date; }); console.log(req.session.user); res.render("index", {articles: articles,user:req.session.user}); });});細心的小夥伴可能發現了，我們現在還沒有登錄博客系統呢！所以現在是寫不了博客的哦~
點擊左側「登錄博客」按鈕，出現登錄頁面
現在還沒有帳號呢，那點擊「沒有帳號，立即註冊」吧。
現在跳轉到註冊頁面了，輸入自己的用戶名和密碼，就註冊成功了。
登錄和註冊的邏輯基本一致，僅以登錄為例介紹運行邏輯。
輸入用戶名和密碼後---點擊登錄---向後臺發起一個post請求---後臺根據接收到的請求信息，解析出用戶名和密碼---將解析出來的用戶名和密碼與資料庫中的author表進行比對，信息正確則登陸成功；否則返回用戶名或密碼錯誤的提示信息。
前端關鍵代碼為
<form action="/login" method="POST"> <div class="form-group"> <input type="text" name="name" placeholder="登錄名"> </div> <div class="form-group"> <input type="password" name="password" placeholder="密碼"> <%if(message) {%> <p> <%= message%> </p> <% } %> </div> <div class="form-group"> <input type="submit" value="登錄"> <a href="/register"><span style="color: aliceblue;display:block;text-align: center;">沒有帳號，點擊註冊</span></a> </div></form>後臺關鍵代碼為
router.get('/login', function(req, res, next) { res.render('login', {message:'',user:req.session.user});});router.post('/login', function(req, res, next) { var name = req.body.name; var password = req.body.password; var hash = crypto.createHash('md5'); hash.update(password); password = hash.digest('hex'); var query = 'SELECT * FROM author WHERE authorName=' + mysql.escape(name) + ' AND authorPassword=' + mysql.escape(password); mysql.query(query, function(err, rows, fields) { if (err) { console.log(err); return; } var user = rows[0]; if(!user) { res.render('login', {message:'用戶名或密碼錯誤'}); return; } req.session.user = user; res.redirect('/'); });});登錄成功後，首頁會發生一個小變化，那就是原來導航欄的「登錄博客」會變成「登出博客」。
好的，現在我們已經登錄成功，可以寫博客啦！
點擊左側導航欄的「撰寫文章」，會出現一個簡易的文本編輯器，在這裡根據提示寫完博客後，點擊保存，文章就發布成功了哦！
這個過程的邏輯為前端點擊保存按鈕，向後臺發起post請求---後臺根據接收到的請求信息，解析出文章信息，然後向資料庫中添加文章信息，並像前端發起重定向命令，頁面自動跳轉至博客首頁，你會看到剛寫的博客已經置頂啦。
前端關鍵代碼為
<section class="main-articles"> <form action="/edit" method="POST" class="edit"> <div class="form-group"> <label for="">標題</label> <input type="text" name="title"> </div> <div class="text-group"> <label for="">內容</label> <textarea name="content"></textarea> </div> <p><input type="submit" value="保存"></p> </form></section>後臺關鍵代碼為
router.get('/edit', function(req, res, next) { var user = req.session.user; if(!user) { res.redirect('/login'); return; } res.render('edit', {user:req.session.user});});router.post('/edit', function(req, res, next) { var title = req.body.title; var content = req.body.content; var author = req.session.user.authorName; var query = 'INSERT article SET articleTitle=' + mysql.escape(title) + ',articleAuthor=' + mysql.escape(author) + ',articleContent=' + mysql.escape(content) + ',articleTime=CURDATE()'; console.log(query) mysql.query(query, function(err, rows, fields) { if(err) { console.log(err); return; } res.redirect('/'); });});寫博客的時候可能經常會遇到博客內容需要修改或者刪除博客的功能，可以發現我們在每篇文章的右下角都提供了相應按鈕，邏輯與前面的基本一致，代碼裡也附上了注釋，限於篇幅這裡就不再贅述了。
好的，到這基於Node.js的博客系統已經基本分享完畢，相信大家馬上可以搭建自己的專屬博客啦！