final—先后端分离的网站

时间 2019-11-21

原文原文链接

先后端分离的网站

后台使用 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模块来实现页面通知功能（即成功与失败的信息显示）css

什么是flash？咱们所说的flash即 connect-flash模块（https://github.com/jaredhanson/connect-flash）,flash是一个在session中用于存储信息的特定区域。信息写入flash，下一次显示完毕后即被清除。典型的应用是结合重定向的功能，确保信息是提供给下一个被渲染的页面html
安装模块vue
```
npm install connect-flash --save
```

在app.js中添加调用此模块node

var flash = require('connect-flash');

app.use(flash());//由于flash依赖session，因此他必须放在session后面

在res.locals中增长成功失败信息，以便全部模板中可使用mysql

//用户登陆数据分配
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();
});

设置flash中成功失败信息 /routes/users.js logingit

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');
            }
        }
    });
});

模板中显示github

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

权限控制

根目录建立 middleware目录，并建立auth.js作权限控制

auth.js内容以下sql

    //登陆后才能访问
    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();
        }
    }

在各个路由中根据须要引入对应的验证，如/routes/user.jsvue-cli

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数据库

安装multer中间件，处理图片上传

npm install multer --save

修改 /views/article/add.html 的form，增长 enctype="multipart/form-data".增长 type=file表单
修改/model/models.js 中 artilce的骨架，增长 thumb 字段
建立目录uploads, /public/uploads

修改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');//引入封装好的上传中间件