开发者社区> 西游不取经> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

nodejs用expressjs框架搭建多人博客(一)

简介: 想学习点新东西就是开手写,就写了个简单的实现,利用node实现一个博客。主要的内容就在首页也能看到了。
+关注继续查看

想学习点新东西就是开手写,就写了个简单的实现,利用node实现一个博客。主要的内容就在首页也能看到了。



话不多说,expressjs怎么创建项目选择ejs模板,之前的文章都写过了。

首先从用户注册开始,有了用户才能根据id查找文章。




<%- include("../layouts/header", {cssAry: ['/style/reg/index.css']}) %>
<div class="body flex center">
    <div class="index-main">
        <div class="index-header">
            <h1 class="logo"></h1>
            <p class="describe">一条大河波浪宽</p>
        </div>
        <div class="form-name flex center"> 
            <a class="form-active" href="/reg">注册</a>
            <a href="/login">登录</a>
        </div>
        <div class="index-form">
            <form method="post" action="/reg">
                <input type="hidden" name="_csrf" value="<%= csrf %>">
                <div class="form-item">
                     <input type="input" name="email" placeholder="邮箱"/>
                </div>
                <div class="form-item">
                    <input type="password" name="pwd" placeholder="密码(大于六位)">
                </div>
                <div class="form-item">
                    <input type="password" name="repeatpwd" placeholder="确定密码">
                </div>
                <div class="button-item">
                    <input class="btn btn-sure" type="submit" value="注册">
                </div>
            </form>
        </div>
    </div>
</div>
<%- include("../layouts/footer", {jsAry: []}) %>
include 传递参数时就把需要的css 和js 传递到head 和foot模块里

header.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="shortcut icon" type="image/x-icon" href="/images/favicon3.ico">
    <meta name="csrf-token" content="<%= csrf %>">
    <title><%= title %></title>
    <link rel='stylesheet' href='/style/main.css' />
    <% for(var i = 0, item; item = cssAry[i++]; ) {%>
      <link rel='stylesheet' href='<%= item %>'/>
    <% } %>
  </head>
  <body>
footer.ejs

    <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js"></script>   
    <script type="text/javascript" src="/javascripts/main.js"></script>    
    <% for(var i = 0, item; item = jsAry[i++]; ) {%>
      <script type="text/javascript" src="/<%= item %>"></script>
    <% } %>
  </body>
</html>
route路由,编写对应再到reg.ejs的页面

//注册
router.get('/reg', function(req, res) {
    res.render('reg/index', {
        title: '注册',
        pwd_err: req.session.pwd_err
    });
});

//注册提交
router.post('/reg', function(req, res) {
    if(!util.isEqual(req.body.pwd, req.body.repeatpwd)) {
        req.session.pwd_err = true;
        return res.redirect('/reg');
    }
    
    let pwd = util.mix(req.body.pwd);
    let User = {
        email: req.body.email,
        pwd: pwd
    }

    userDao.setUser(User, function(err){
        if (err) {
            return res.redirect('/reg');
        }
        req.session.email =  req.body.email;
        return res.redirect('/login');
    });
});

同时需要user和数据库的交互创建userDao,并且继承自baseDao


import { ObjectID } from 'mongodb';

import connect from '../../config/connect';
import BaseDao from './BaseDao';
import User from '../models/User';
import util  from '../lib/util';

//继承Dao
class UserDao extends BaseDao {

    //获取用户信息 登录等
    getUser (user, callback) {
        this.query(user, 'users', callback);
    }

    //用户注册 玩家 和管理员
    saveUser (user, col, callback) {
        let _that = this;
        let model = Object.assign(JSON.parse(User), user);
        this.query(model, col, function(err, u) {
            //用户已经存在
            if (u !== null) {
                err = 'notnull';
                return callback(err);
            }
            _that.save(model, col, callback);
        });
    };

    //普通用户注册
    setUser (user, callback) { 
        this.saveUser(user, 'users', callback);
    }

    updateUserOne(userUpdate, callback) {
        let ID = {};
        if (util.isString(userUpdate.id) ) {
            ID = {_id: new ObjectID(userUpdate.id)};
        } else {
            ID = userUpdate.id;
        }
        this.updateOne('users', ID,  {$set: userUpdate.field}, callback);
    }
    // 加入postId
    updatePostId(userPost, callback) {
        let _that = this;
        this.updatePromise(userPost.id, 'postId').then(function(result) {
            let postId = result.data || [];
            postId.push(userPost.postId);
            let userUpdate = {
                 id: result.id,
                 field: {
                     postId: postId
                 }
            };
            _that.updateUserOne(userUpdate, callback);
        }, function(err) {
            return err;
        });
    }

    updatePromise(id, key) {
        let _that = this;
        let ID = {_id: new ObjectID(id)};
        
        return new Promise(function(resolve, reject) {
            _that.query(ID, 'users', function(err, rtn) {
                if (err) {
                    reject(err);
                } else {
                    let result = {data: rtn[key], id: ID};
                    resolve(result);
                }
            });
        });
    }
}

module.exports = UserDao;
import connect from '../../config/connect';
import { ObjectID } from 'mongodb';

class BaseDao {
    //查询 field查询字段, col 集合或表
    query(field, col, callback) {
        connect.open(function(err, db) {
            if (err) {
                return callback(err);
            }
            //要查找的集合
            db.collection(col, function(err, collection) {
                //要查找的字段
                collection.findOne(field, function(err, result){
                    connect.close();
                    if (err) {
                        return callback(err);
                    }
                    //成功
                    callback(null, result); 
                });
            });
        });
    }
    //查找排序 query={field: field, orderby: orderby, }
    querySort(query, col, callback) {
        connect.open(function(err, db) {
            if (err) return callback(err);
            db.collection(col, function(err, collection) {
                if (query.limit) {
                    collection.find(query.field).sort(query.orderby).limit(query.limit).toArray(function(err, result) {
                        connect.close();
                        if (err) return callback(err);
                        callback(null, result);
                    });
                } else {
                    collection.find(query.field).sort(query.orderby).toArray(function(err, result) {
                        connect.close();
                        if (err) return callback(err);
                        callback(null, result);
                    });
                }
            });
        });
    }
    //查询首页全部
    queryAll(col, query, callback) {
        connect.open(function(err, db) {
            if( err ) return callback(err);
            db.collection(col, function(err, collection) {
                collection.find().sort(query.sort).limit(query.limit).toArray(function(err, result) {
                    connect.close();
                    if (err) return callback(err);
                    callback(null, result);
                });
            });
        });
    }
    //保存 新建
    save(field, col, callback) {
        connect.open(function(err, db) {
            if (err) {
                return callback(err);
            }
            db.collection(col, function(err, collection) {
                //if(field._id) delete field._id;
                collection.insert(field, {
                    safe: true
                }, function(err, result) {
                    connect.close();
                    if (err) {
                        return callback(err);
                    }
                    callback(null, result);
                });
            });
        });
    }
    //只修改一个 根据Id查找
    updateOne(col, id, updateField, callback) {
        connect.open(function(err, db) {
            if (err) {
                return callback(err);
            }
            db.collection(col, function(err, collection) {
                collection.updateOne(id, updateField, function(err, result) {
                    connect.close();
                    if (err) {
                        return callback(err);
                    }
                    //成功
                    callback(null, result); 
                });
            });
        });
    }
    //更新
    updates(col, field, updateFields, callback) {
        connect.open(function(err, db) {
            if (err) {
                return callback(err);
            }
            db.collection(col, function(err, collection) {
                collection.update(field, updateFields, function(err, result) {
                    connect.close();
                    if (err) {
                        return callback(err);
                    }
                    //成功
                    callback(null, result); 
                });
            });
        });
    }
    //删除一个表
    removeOne(col, field, callback) {
        connect.open(function(err, db) {
            if (err) {
                return callback(err);
            }
            db.collection(col, function(err, collection) {
                collection.removeOne(field, function(err, result) {
                    connect.close();
                    if (err) {
                        return callback(err);
                    }
                    //成功
                    callback(null, result); 
                });
            });
        });
    }
}

module.exports = BaseDao;

工具类

import crypto from 'crypto';

class util {
    static isNull(str) {
        if (str.trim() == null || str.trim() == '') {
            //为空
            return true;
        }
    }

    //密码加密混淆
    static mix(str) {
        let sha1 = crypto.createHash('sha1');
        return sha1.update(str).digest('hex');
    }

    //字符串是否相等
    static isEqual(str, str2) {
        if(str.trim() === str2.trim()) {
            return true;
        } 
    }

    //未登录 1 
    static notLogin = function(req, res) {
        if(!req.session.user){
            req.flash('isLogin', '1');
            res.redirect('/login');
            return true;
        }
        return false;
    }

    //已经登录 0 
    static login(req, res) {
        if(req.session.user){
            if(req.session.user['_id'] === req.params._id) {
                req.flash('isLogin', '0');
                return true;
            } else {
                return false;
            }
        }
        return false;
    }
    //json里出去空值
    static mergeJson(basedata, newdata) {
        let merge = {};

        for (let key1 in basedata) {
            merge[key1] = basedata[key1];
        }
        for (let key in newdata) {
            if ( newdata[key] !== '' && newdata !== null) {
                merge[key] = newdata[key];
            }
        }
        return merge;
    }
    //字符串
    static isString(str) {
        if(typeof str === 'string' && str.constructor === String )  return true;
    }
    //图片路径
    static getPath(str, aim) {
        var reg = new RegExp(aim + '\\/(\\S*)');
        return str.match(reg)[1];
    }
    //时间格式化
    static format(str, mat) {
        let d, date = new Date(str),
            year = date.getFullYear(),
            month = date.getMonth() + 1,
            day = date.getDate();
        switch(mat){
            case 'year':
                d = year
            break;
            case 'month':
                d = month;
            break 
            case 'day':
                d = day;
            default:
                d =  year+'-'+month+'-'+day;
        }
        return d;
    }
    
}

module.exports = util;


做到此发觉痛点是和数据库mongodb交互用mongodb = require('mongodb'),很别扭,应该用mongoose,不过既然都这么用了,就都应该学习下。

接下来进入登录界面



登录的路由

//进入登录页面
router.get('/login', function(req, res) {
    let error_name = req.flash('error_name');
    res.render('login/index', {
        title: '登录',
        error_name: req.flash('error_name'),
        error_pwd: req.flash('error_pwd'),
        isLogin: req.flash('isLogin'),
        email: req.session.email,
    });
});
//登录
router.post('/login', function(req, res) {
    if (util.isNull(req.body.email)) {
        req.flash('error_name', 'error_name');
        return res.redirect('/login');
    }
    if (util.isNull(req.body.pwd)) {
        req.flash('error_pwd', false);
        return res.redirect('/login');
    }

    //用户查找
    let pwd = util.mix(req.body.pwd);
    let User = {
        email: req.body.email,
        pwd: pwd
    }
    userDao.getUser(User, function(err, result) {
        if (err) {
            return res.redirect('/login');
        }
        if (result === null) {
            return res.redirect('/reg');
        }
        if (req.session.user && req.session.user['email'] === req.params.email) {
            delete req.session.user;
        }
        req.session.user = {
            _id: result._id,
            email: result.email,
        };
        return res.redirect('/personal/'+ result._id);
    });
});


<%- include("../layouts/header", {cssAry: ['/style/login/index.css']}) %>
<div class="body flex center">
    <div class="index-main">
        <div class="index-header">
            <h1 class="logo"></h1>
            <p class="describe">一条大河波浪宽</p>
        </div>
        <div class="form-name flex center"> 
            <a class="form-active" href="/login">登录</a>
            <a href="/reg">注册</a>
        </div>
        <div class="index-form">
            <form method="post" action="/login">
                <input type="hidden" name="_csrf" value="<%= csrf %>">
                <div class="form-item">
                     <input type="input" name="email" placeholder="邮箱"/>
                </div>
                <div class="form-item">
                    <input type="password" name="pwd" placeholder="请输入密码">
                </div>
                <div class="button-item">
                    <input class="btn btn-sure" type="submit" value="注册">
                </div>
            </form>
        </div>
    </div>
</div>
<%- include("../layouts/footer", {jsAry: []}) %>




登录成功后进入个人中心页面personal,根据id进入同时用到

import async from 'async';
当然不用的话可以用es6的promise(resolve,reject), resolve就是成功后的参数传递,reject就是错误异常时。

//个人中心
router.get('/personal/:_id', function(req, res) {
    let ID = req.params._id;
    let boo =  util.login(req, res);
    
    async.waterfall([function(callback){
        userDao.getUser({_id: new ObjectID(ID)}, function(err, result) {
            if(err) return false;
            callback(null, result)
        });
    }, function(arg1, callback) {
        let options = {
            field: {id: ID}, 
            orderby: {time: -1}
        }
        postDao.queryPostSort(options, function(err, rtn) {
            let json = {
                title: '个人中心',
                id: ID,
                usermsg: arg1.usermsg,
                postId: arg1.postId,
                postSize: arg1['postId'].length,
                postList: rtn,
                login: boo
            }
            callback(null, json);
        });
    }], function(err, result) {
        res.render('personal/index', result);
    });
});

用户主要的字段信息有如下

let user = {
    "email" : "",
    "pwd" : "",
    "postId" :[],
    "usermsg" : {
        "username" : "",
        "userwork" : "",
        "userdegree" : "",
        "userarea" : "",
        "usersex" : "",
        "userintr" : "",
        "userhead": "",
    },
    "postclass":{
        0: "博文"
    }, //作者文章分类
}

当点击资料编辑时,进入资料编辑页面


//个人资料修改
router.get('/personal/edit/:_id', function(req, res) {
    let boo = util.notLogin(req, res);
    if(boo) return false;
    req.session.article = false;
    let ID = req.session.user['_id'];
    
    async.parallel([function(callback) {
        userDao.getUser({_id: new ObjectID(ID)}, function(err, result) {
            if(err) return false;
             callback(null, result.usermsg);
        });
    }, function(callback) {
        //头像上传
        mkdirs('/var/www/near/public/images/users/' + req.session.user['_id'] + '/avatar/', '0777');
        callback(null, 'ok');
    }], function(err, results){
        res.render('personal/edit', {
            title: '个人资料修改',
            id: ID,
            usermsg: results[0],
            login: true
        });
    });
});

router.post('/personal/edit/:_id', function (req, res) {
    let boo = util.notLogin(req, res);
    if(boo) return false;
    if(req.session.user['_id'] !== req.params._id) return res.redirect('login');

    let Upload =  upload.single("userhead"); //头像图片上传,未把头像图片单独做出来,选中后ajax提交
    Upload(req, res, function(err) {
        if (err) {
            return ;
        }
        let id = req.session.user['_id'];

        userDao.updatePromise(id, 'usermsg').then(function(result) {
            let data = util.mergeJson(result.data, req.body);
                data['userhead'] = req.session.postcover;
                req.session['postcover'] = null;
            let userUpdate = {
                id: result.id,
                field: {usermsg: data}
            };
            userDao.updateUserOne(userUpdate, function() {
                return res.redirect('/personal/'+ id);
            })
        }, function(err) {
            return res.redirect('/reg');
        });
    });
import upload from '../lib/multer.config';
import multer from 'multer';
import fs from 'fs' ;

var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        let newDestination = '/var/www/near/public/images/users/' + req.session.user['_id'];
            req.session.article ?  (newDestination += '/posts/') : (newDestination += '/avatar/');
        cb(null, newDestination);
    },
    filename: function (req, file, cb) {
        let originalname = file.originalname,
            start =  originalname.lastIndexOf('.'),
            len = originalname.length,
            type = originalname.substring(start+1, len),
            filename = Date.now() + '.' + type;
            req.session.postcover = filename;
            cb(null, filename);
    }
});

let upload = multer(
    { 
        limits: {
            fieldNameSize: 100,
            fileSize: 60000000
        },
        storage: storage
    }
);

module.exports = upload;
ejs
<%- include("../layouts/header", {cssAry: ['/style/personal/edit.css']}) %>

<div class="body">
    <%- include("../layouts/main_head", {publishBtn: true}) %>
    <div class="main">  
        <form action="/personal/edit/<%= id %>?_csrf=<%= csrf %>" method="POST" id="userform" enctype="multipart/form-data">
            <div class="form-item useravatar" id="useravatar">
                <img src="/<%= usermsg.userhead ? ('images/users/' + id +'/avatar/' + usermsg.userhead) : 'images/default_avatar.jpg' %>">
                <em class="cover" id="cover"></em>
                <input class="input-file item-val" type="file" id="input-file" name="userhead">
            </div>
            <div class="form-item">
                <div class="flex center">
                    <span class="profile-name"><%= usermsg.username || "暂未填写" %></span>
                    <a class="modify-btn" data-type="center" href="javascript:;">修改</a>
                </div>
                <div class="modify-content flex-center-h">
                    <input class="modify-name item-val" type="text" placeholder="请填写昵称" name="username">
                    <a href="javascript:;" class="btn btn-cancel">取消</a>
                    <a href="javascript:;" class="btn btn-sure">确定</a>
                </div>
            </div>
            <div class="form-item flex">
                <div class="item-name">职业</div>
                <div>
                    <p class="modify-msg flex">
                        <span class="modify-file"><%= usermsg.userwork || "暂未填写" %></span>
                        <a class="modify-btn" data-type="com" href="javascript:;">修改</a>
                    </p>
                    <div class="modify-content flex-center-h">
                        <input class="modify-name item-val" type="text" placeholder="请输入职业" name="userwork">
                        <a href="javascript:;" class="btn btn-cancel">取消</a>
                        <a href="javascript:;" class="btn btn-sure">确定</a>
                    </div>
                </div>
            </div>
            <div class="form-item flex">
                <div class="item-name">学位</div>
                <div>
                    <p class="modify-msg flex">
                        <span class="modify-file"><%= usermsg.userdegree || "暂未填写" %></span>
                        <a class="modify-btn" data-type="com" href="javascript:;">修改</a>
                    </p>
                    <div class="modify-content flex-center-h">
                        <input class="modify-name item-val" type="text" placeholder="请输入学位" name="userdegree">
                        <a href="javascript:;" class="btn btn-cancel">取消</a>
                        <a href="javascript:;" class="btn btn-sure">确定</a>
                    </div>
                </div>
            </div>
            <div class="form-item flex">
                <div class="item-name">地区</div>
                <div>
                    <p class="modify-msg flex">
                        <span class="modify-file"><%= usermsg.userarea || "暂未填写" %></span>
                        <a class="modify-btn" data-type="com" href="javascript:;">修改</a>
                    </p>
                    <div class="modify-content flex-center-h">
                        <input class="modify-name item-val" type="text" placeholder="请填写地区" name="userarea">
                        <a href="javascript:;" class="btn btn-cancel">取消</a>
                        <a href="javascript:;" class="btn btn-sure">确定</a>
                    </div>
                </div>
            </div>
            <div class="form-item flex">
                <div class="item-name">性别</div>
                <div>
                    <p class="modify-msg flex">
                        <span class="modify-file"><% if(usermsg.usersex) { %>
                                <%= usermsg.usersex == 0 ? "女" : "男" %>
                            <% } else { %>
                                <%= "暂未填写" %>
                            <% } %></span>
                        <a class="modify-btn" data-type="radio" href="javascript:;">修改</a>
                    </p>
                    <div class="modify-content flex-center-h">
                        <label><input class="item-val" type="radio" name="usersex" value="1"> <em>男</em></label>
                        <label><input class="item-val" type="radio" name="usersex" value="0"> <em>女</em></label>
                        <a href="javascript:;" class="btn btn-cancel">取消</a>
                        <a href="javascript:;" class="btn btn-sure">确定</a>
                    </div>
                </div>
            </div>
            <div class="form-item flex">
                <div class="item-name">介绍自己</div>
                <div>
                    <p class="modify-msg flex">
                        <span class="modify-file"><%= usermsg.userintr || "暂未填写"  %></span>
                        <a class="modify-btn" data-type="com" href="javascript:;">修改</a>
                    </p>
                    <div class="modify-content modify-content-ta">
                        <textarea class="modify-name item-val" placeholder="请简单的介绍自己" name="userintr"></textarea>
                        <a href="javascript:;" class="btn btn-cancel">取消</a>
                        <a href="javascript:;" class="btn btn-sure">确定</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<%- include("../layouts/footer", {jsAry: ['javascripts/personal/edit.js']}) %>

目录结构




有需要的交流的可以加个好友


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Node.js从入门到放弃.随手笔记(一)
Node.js从入门到放弃.随手笔记(一)
0 0
1、后端项目框架搭建 [木字楠博客]
> 后端项目采用多模块项目模式来进行编写 ## 1、新建父模块项目 ### 1.1、SpringBoot项目新建 > Name:MuZiNan-Server => [项目名称] > > Location:D:\project\many\MuZiNan-Server => [项目位置 ] > > Jdk:1.8 => [版本] >
0 0
Laravel-博客实战+踩坑
最近在学习Laravel,参考的课程是后盾网地Laravel5.2博客项目实战,地址是 Laravel 5.2开发实
0 0
使用篇-基于Laravel开发博客应用系列 —— 十分钟搭建博客系统
当我们希望搭建一个属于自己的博客系统时,会出现一个问题,我的博文往哪存,存什么,怎么存,又是如何取出来并展示在页面上的呢? 这其中就涉及到了数据库的概念,当然,这里并不说明数据库本身的原理,而是在Laravel这个框架下我们如何利用数据库实现我们的存储需求。
864 0
NodeJS 开篇 牛刀小试
一、Node&NPM的安装与配置 下载:https://nodejs.org/en/ V4.2.x LTS(9.75MB)——长期支持版,成熟可靠 V5.x.x Stable(9.71MB)——稳定版,最新特性 检测nodejs是否安装成功。
396 0
学习NodeJS第四天:初始化nodejs的历险之旅(下)
包加载 首先声明,原本 JS  是没有模块库机制(module)的,这必然为创建实质项目带来很大的麻烦,毕竟,我们的目标,还是要创造一个系统的、科学现代的、规范合理的控制各逻辑代码的边界,否则如果是一种落后的管理机制那就是一块明显的短板。
540 0
+关注
西游不取经
其实呢,我只是一个前端
文章
问答
文章排行榜
最热
最新
相关电子书
更多
蚂蚁金服高级开发工程师萧恺:IDEA 插件开发入门教程
立即下载
ReactNative实战优化之路
立即下载
探究 Node.js 的服务端之路
立即下载