final—先後端分離的網站

先後端分離的網站

• 後臺使用 express+mysql搭建
• 前臺使用vue-cli搭建

安裝

        cnpm install express express-static cookie-parser body-parser multer cookie-session mysql consolidate --save

目錄結構

• libs：自定義的工具庫
• libs/db.js: 數據庫操做
• static：靜態文件 css upload js
• views： ejs模板目錄
• route： 路由
• route/admin： 後臺路由
• route/api： 前臺數據接口
• app.js: 入口文件

設置靜態文件目錄，用於css、js等靜態文件的獲取

    app.use(express.static(path.join(__dirname, 'static')));

---

操做後信息提示功能

引入flash模塊來實現頁面通知功能（即成功與失敗的信息顯示）

1. 什麼是flash？ 咱們所說的flash即 connect-flash模塊（https://github.com/jaredhanson/connect-flash）,flash是一個在session中用於存儲信息的特定區域。信息寫入flash，下一次顯示完畢後即被清除。典型的應用是結合重定向的功能，確保信息是提供給下一個被渲染的頁面

2. 安裝模塊

   npm install connect-flash --save
   

3. 在app.js中添加調用此模塊

   var flash = require('connect-flash');
   
   app.use(flash());//由於flash依賴session，因此他必須放在session後面
   

4. 在res.locals中增長成功失敗信息，以便全部模板中可使用

   //用戶登陸數據分配
   app.use(function(req,res,next){
       //res.locals 屬性是express模板引擎最後分配的數據對象，由於每一個模板都要分配user數據，因此直接寫入這個對象便可
       res.locals.user = req.session.user;
       res.locals.success = req.flash('success').toString();
       res.locals.error = req.flash('error').toString();
       next();
   });
   

5. 設置flash中成功失敗信息 /routes/users.js login

   router.post('/login', function (req, res, next) {
       var user = req.body;
       var username = user.username;
       var password = utils.md5(user.password);
       userModel.findOne({username: username, password: password}, function (err, doc) {
           if (err) {
               reg.flash('error','登陸失敗');
               res.redirect('back');
           } else {
               if (doc) {//登陸成功後，將數據寫入session
                   req.session.user = doc;
                   req.flash('success','登陸成功');
                   res.redirect('/');
               } else {
                   req.flash('error','用戶名或密碼錯誤');
                   res.redirect('back');
               }
           }
       });
   });
   

6. 模板中顯示

   <% if(success){ %>
       <div class="alert alert-success"><%= success %></div>
   <% } %>
   <% if(error){ %>
       <div class="alert alert-danger"><%= error %></div>
   <% } %>
   

權限控制

1. 根目錄建立 middleware目錄，並建立auth.js作權限控制

auth.js內容以下

    //登陸後才能訪問
    exports.checkLogin = function(req,res,next){
        if(req.session.user){
            next();
        }else{
            req.flash('error','請登陸後查看');
            res.redirect('/users/login');
        }
    }
    //沒登陸時才能訪問
    exports.checkNotLogin = function(req,res,next){
        if(req.session.user){
            req.flash('error','您已經登陸了');
            res.redirect('/');
        }else{
            next();
        }
    }

1. 在各個路由中根據須要引入對應的驗證，如/routes/user.js

   var auth = require('../middleware/auth');//引入權限驗證中間件
   
    router.get('/login',auth.checkNotLogin, function (req, res, next) {
        res.render('users/login', {title: '登陸'});
    });
   

md5 加密

        const crypto = require('crypto');
        module.exports = {
            md5(str){
                return crypto.createHash('md5').update(str).digest('hex');
            }
        }

發表文章時能夠上傳圖片

使用方法查看 Readme.md

1. 安裝multer中間件，處理圖片上傳

npm install multer --save

1. 修改 /views/article/add.html 的form， 增長 enctype="multipart/form-data".增長 type=file表單

2. 修改/model/models.js 中 artilce的骨架，增長 thumb 字段

3. 建立目錄uploads, /public/uploads

4. 修改routes/article.js

   //引入multer處理上傳圖片
   var multer = require('multer');
   var storage = multer.diskStorage({
       //指定上傳路徑
       destination: function (req, file, cb) {
           //注意路徑，位置不能寫錯，文件夾要存在，否則都會報錯
           cb(null, 'public/uploads');
       },
       //指定上傳文件名
       filename: function (req, file, cb) {
           cb(null, Date.now()+'.'+file.mimetype.slice(file.mimetype.indexOf('/')+1));
       }
   })
   
   var upload = multer({ storage: storage });
   
   router.post('/add',auth.checkLogin,upload.single('thumb'), function (req, res, next) {
       var article = req.body;
       article.user = req.session.user._id;
       //若是有上傳文件，那麼寫入模型
       if(req.file){
           var uploadPath = '/uploads/'+req.file.filename;
           article.thumb = uploadPath;
       }
   
       new Model('articles')(article).save(function(err,doc){
           if(err){
               req.flash('error','添加文章失敗');
               res.redirect('back');
           }else{
               if(doc){
                   req.flash('success','文章添加成功');
                   res.redirect('/');
               }
           }
       })
   
   });
   

能夠將上傳封裝成中間件，建立 /middleware/multerUpload.js,將以下代碼從article.js中移入，並修改以下。

    //引入multer處理上傳圖片
    var multer = require('multer');
    var storage = multer.diskStorage({
        //指定上傳路徑
        destination: function (req, file, cb) {
            //注意路徑，位置不能寫錯，文件夾要存在，否則都會報錯
            cb(null, 'public/uploads');
        },
        //指定上傳文件名
        filename: function (req, file, cb) {
            cb(null, Date.now()+'.'+file.mimetype.slice(file.mimetype.indexOf('/')+1));
        }
    })

    module.exports = multer({ storage: storage });

在/routes/article.js中，引入。之後須要上傳功能的地方，引入以下內容便可

    var upload = require('../middleware/multerUpload');//引入封裝好的上傳中間件