文章管理系统 -- Express学习

文章管理系统 – Express学习

仓库：https://gitee.com/aeipyuan/articles_manage

1.项目搭建

生成express项目

express -e article_managemet   创建项目 -e 表示使用ejs模板引擎

mongodb创建数据库

mongo                               - 开启mongodb
use articles_db                     - 创建/使用数据库
db.createCollection('users')        - 创建users集合
db.createCollection('articles')     - 创建article集合
show collections                    - 查询是否创建成功

测试：
db.users.insertOne({username:'admin',passsword:'000'})
db.users.find()

创建连接mongodb连接的模块

文件位置：model > index.js
    
const MongoClient = require('mongodb').MongoClient;
 /* 连接数据库的url，在mongo命令下可以找到 */
 let url = 'mongodb://localhost:27017';
 /* 连接的数据库名字 */
 let dbName = 'articles_db';
 /* 封装数据库连接方法 */
 function connect(callback) {
     MongoClient.connect(url, (err, client) => {
         if (err) {
             console.log('数据库连接错误！', err);
         } else {
             /* 根据数据库名获取数据库返回给callback处理 */
             let db = client.db(dbName);
             callback && callback(db);
             client.close();
         }
     })
 }
 module.exports = { connect };

 /* 测试 */
 connect(db => {
     db.collection('users').findOne({ username: 'admin' }, (err, docs) => {
         if (err)
             console.log(err)
         else
             console.log(docs); 
     });
 });//{ _id: 5ea442dbbc0dfbff14afd728, username: 'admin', passsword: '000'

2.注册页

注册路由

//位置：routes > index.js
router.get('/regist', (req, res, next) => {
	res.render('regist');
})

页面结构

<div class='form-box'>
    <form action="/users/regist" method="post">
        <input type="text" name="username" placeholder="请输入用户名">
        <input type="password" name="password" placeholder="请输入密码">
        <input type="password" name="password2" placeholder="请确认密码">
        <input type="submit" value="注册">
    </form>
    <div>已有帐户，<a href="/login">立即登录</a></div>
</div>

提交处理

//位置 routes > user.js   
router.post('/regist', (req, res, next) => {
	/* 取出提交数据 */
	let { username, password, password2 } = req.body;
	let data = { username, password, password2 };
	/* 校验数据 */
	if (password !== password2) {
		console.log("两次输入的密码不一致");
		res.redirect('/regist');
	} else {
		model.connect(db => {/* 写入数据库 */
			db.collection('users').insertOne(data, (err, docs) => {
				if (err) {
					console.log('注册失败');
					res.redirect('/regist');//返回注册页
				} else {
					console.log('注册成功');
					res.redirect('/login');//返回登陆页
				}
			})
		})
	}
})

3.登录页

页面结构

<div class="form-box">
    <form action="/users/login" method="post">
        <input type="text" name="username" placeholder="请输入用户名">
        <input type="password" name="password" placeholder="请输入密码">
        <input type="submit" value="登录">
    </form>
    <div>没有帐号，<a href="/regist">立即注册</a>！</div>
</div>

提交处理
（1）安装express-session拦截登录状态

安装
npm i express-session -S 

/* -------------app.js配置------------- */
/* 配置session */
app.use(session({
	secret: 'qf project',
	resave: false,
	saveUninitialized: true,
	cookie: { maxAge: 1000 * 60 * 10 }   // 指定登录会话的有效时长
}))
/* 拦截登陆状态 */
app.get('*', (req, res, next) => {
	let username = req.session.username;
	let path = req.path;
    console.log("session-" + username);
	if (path != '/login' && path != '/regist') {
		if (!username)
			res.redirect('/login');
	}
	next();
})

（2）从数据库查询信息并存入session

/* 登录提交 */
router.post('/login', (req, res, next) => {
	let data = {
		username: req.body.username,
		password: req.body.password
	}
	/* 连接数据库 */
	model.connect(db => {
		db.collection('users').findOne(data, (err, docs) => {
			if (err) {
				console.log(err);
				res.redirect('/login');
			} else {
				req.session.username = data.username;
				res.redirect('/');
			}
		})
	})
})

4. 通用顶部组件

结构

<!-- bar.ejs -->
<div class='bar'>
    <span><%- username  %></span>
    <a href='/write'>写文章</a>
    <a href='/users/logout'>退出</a>
    <a href='/' class='home'>
        <img src="/images/home.png" alt="首页">
    </a>
</div>

处理退出请求

router.get('/logout', (req, res, next) => {
	req.session.username = null;
	res.redirect('/login');
})

5. 写文章

页面结构

<%- include('bar',{username:username}) %>
<form class="article" action="/article/add" method="post">
    <input type="text" name="title" placeholder="请输入文章标题">
    <textarea name="content" class="xheditor" cols="30" rows="10"></textarea>
    <input type="submit" value="发布">
</form>
<!-- xheditor富文本编辑器 -->
<script type="text/javascript" src="/xheditor/jquery/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/xheditor/xheditor-1.2.2.min.js"></script>
<script type="text/javascript" src="/xheditor/xheditor_lang/zh-cn.js"></script>
<script>
    $('.xheditor').xheditor({
        tools: 'full',
        skin: 'default',
        upImgUrl: '/article/upload',
        html5Upload: false,
        upMultiple: 1
    });
</script>

数据提交
（1）创建article路由处理文件

/* app.js配置 */
var articleRouter=require('./routes/article');
app.use('/article', articleRouter);

（2）处理提交请求

/* routes > article.js */
router.post('/add', (req, res, next) => {
    /* 获取数据 */
    let username = req.session.username;
    let data = {
        title: req.body.title,
        content: req.body.content,
        id: Date.now(),
        username: username
    }
    /* 写入数据库 */
    model.connect(db => {
        db.collection('articles').insertOne(data, (err, docs) => {
            if (err) {
                console.log('提交失败', err);
                res.redirect('/write');
            } else {
                console.log('提交成功');
                res.redirect('/');
            }
        })
    })
})

6. 首页

页面结构

<%- include('bar',{username}) %>
<div class='list'>
	<% data.list.map((item,index)=>{ %>
	<div class='row'>
		<span><%- index+1 %></span><!-- 序号 -->
		<span><%- item.username %></span><!-- 作者 -->
		<span>
			<a href="/detail?id=<%- item.id %>&pageIndex=<%- data.pageIndex %> "> <%- item.title %></a><!-- 标题 -->
		</span>
		<span><%- item.time %></span><!-- 时间 -->
		<div>
			<a href=" /write?id=<%- item.id %>&pageIndex=<%- data.pageIndex %>">编辑</a>
			<a href="/article/delete?id=<%- item.id %>&pageIndex=<%- data.pageIndex %>">删除</a>
		</div>
	</div>
	<% }) %>
	<!-- 显示页码 -->
	<div class="pages">
		<% for(let i=1;i<=data.total;i++){ %>
		<a href="/?pageIndex=<%- i %>"><%- i %></a><!-- 根据页码重新请求数据 -->
		<% } %>
	</div>
</div>
<!--
data数据结构：
{
	total: 1,
	pageIndex: 1,
	list: [{
		_id: 5ea5538ad8c2e22d908155eb,
		title: '1dxsxx',
		content: 'dccfwvfr',
		id: 1587893130840,
		username: 'a',
		time: '2020-04-26 05:25:30'
	}]
} -->

数据请求实现分页
通过url将当前页码pageIndex传入，然后第一次查询总的数量处理pageSize获得总页数total，第二次查询添加限制条件获取页面需要显示的数据列表，针对不是第一页时页面数据为空的问题，将pageIndex-1重新加载

/* http://localhost:8888/?pageIndex=1  */
router.get('/', async (req, res, next) => {
	/* 页面数据 */
	let pageIndex = req.query.pageIndex || 1;
	let pageInfo = {
		total: 0,/* 总共页数 */
		pageIndex,/* 当前页 */
		list: []/* 页面数据 */
	}
	let pageSize = 3;
	model.connect(db => {/* 查询所有数据 */
		db.collection('articles').find().toArray((err, docs) => {
			if (err) {
				console.log('首页数据查询错误');
				res.render('index', { username, pageInfo });
			} else {
				pageInfo.total = Math.ceil(docs.length / pageSize);//获取总的页面数
				model.connect(db => {/* 限制条件查询 */
					db.collection('articles').find()/* 查找所有 */
						.sort({ id: -1 })/* 按时间倒序 */
						.limit(pageSize)/* 限制数量 */
						.skip((pageIndex - 1) * pageSize)/* 跳过数量 */
						.toArray((err2, list) => {
							if (err2) {
								console.log('首页数据查询错误', err2);
							} else {/* 除第一页若页面数据条数为0则请求前一页 */
								if (pageIndex != 1 && !list.length) {
									res.redirect('/?pageIndex=' + (pageIndex - 1));
								} else {
									/* 格式化时间 */
									list.forEach(v => v.time = moment(v.id).format('YYYY-MM-DD hh:mm:ss'))
									pageInfo.list = list;
								}
								/* 将数据传给页面 */
								res.render('index', {
									username: req.session.username,
									data: pageInfo
								});
							}
						})
				})
			}
		})
	})
})

7.文章详情

页面结构

<!-- index.ejs入口 -->
<a href="/detail?id=<%- item.id %>&pageIndex=<%- data.pageIndex %> ">
 	<%- item.title %>
</a><!-- 标题 -->

<!-- detail.ejs -->
<%- include('bar',{username}) %>
<div class='detail'>
	<div class='title'><%- data.title %></div>
	<div class="desc"><span>作者：<%- data.title %></span> <span> 发布时间：<%- data.time %></span></div>
	<div class="content"><%- data.content %></div>
</div>
<!-- 
data格式：
{
  _id: 5ea5538ad8c2e22d908155eb,
  title: '1dxsxx',
  content: 'dccfwvfr',
  id: 1587893130840,
  username: 'a',
  time: '2020-04-26 05:25:30'
}
 -->

数据处理

/* 文章详情 http://localhost:8888/detail?id=1587900351782&pageIndex=1 */
router.get('/detail', (req, res, next) => {
	let id = parseInt(req.query.id);
	let pageIndex = req.query.pageIndex;
	model.connect(db => {
		db.collection('articles').findOne({ id }, (err, docs) => {
			if (err) {
				console.log('详情获取失败' + err);
				res.redirect('/?=' + pageIndex);//返回主页
			} else {
				/* 时间格式化 */
				docs.time = moment(docs.id).format('YYYY-MM-DD hh:mm:ss');
				console.log(docs)
				res.render('detail', {
					username: req.session.username,
					data: docs
				})
			}
		})
	})
})

8.文章编辑

页面结构
编辑与添加文章结构相同,区别在于数据id和pageIndex记录,修改write页结构即可

<!-- index.ejs的入口 -->
<a href=" /write?id=<%- item.id %>&pageIndex=<%- data.pageIndex %>">编辑</a>
<!-- write.ejs -->
<form class="article" action="/article/add" method="post">
	<!-- 传递参数使用hidden -->
	<input type="hidden" name="id" value="<%- data.id %>">
	<input type="hidden" name="pageIndex" value="<%- data.pageIndex %>">
	<input type="text" name="title" placeholder="请输入文章标题" value="<%- data.title %>">
	<textarea class="xheditor" name="content" cols="30" rows="10"><%- data.content %></textarea>
	<input type="submit" value="<%- data.id?'修改':'发布' %>">
</form>
<!-- data数据结构
	{
		id: 1587893123696,
		title: 'qqqqq',
		content: 'qcdxcdxcxzczx',
		pageIndex: '1'
	}
-->

数据处理
1.进入write页面数据获取
写文章进入write页时没有id和pageIndex传入，修改文章时可以通过id查询到文章title和content，通过pageIndex可以标识修改完成后要返回的页面

/* 文章 http://localhost:8888/write?id=1587900351782&pageIndex=1*/
router.get('/write', (req, res, next) => {
	/* 获取数据 */
	let id = parseInt(req.query.id) || null;
	let pageIndex = req.query.pageIndex || 1;
	let data = {
		id,
		title: '',
		content: '',
		pageIndex
	}
	/* 查询数据 */
	model.connect(db => {
		db.collection('articles').findOne({ id: id }, (err, docs) => {
			if (err) {
				console.log('获取文章数据失败', err);
				res.redirect('/?pageIndex=' + pageIndex);
			} else {
				if (docs) {/* 查询结果为空是新增文章 */
					data.title = docs.title;
					data.content = docs.content;
				}
				res.render('write', {
					username: req.session.username,
					data
				})
			}
		})
	})
})

2.点击修改按钮更新数据
通过是否含有id来判断是更新操作还是插入操作，操作失败返回当前页，成功则返回主页

/* 文章发布/修改 req.body => id pageIndex title content*/
router.post('/add', (req, res, next) => {
    /* 获取数据 */
    let username = req.session.username;
    let id = parseInt(req.body.id);
    let pageIndex = req.body.pageIndex;
    let data = {
        title: req.body.title,
        content: req.body.content,
        id: id || Date.now(),/* 修改是id，添加是Date.now() */
        username: username,
    }
    model.connect(db => {
        if (id) {/* 修改 */
            db.collection('articles').updateOne({ id }, { $set: data }, (err, docs) => {
                if (err) {
                    console.log('修改失败', err);
                    res.redirect(`/write?id=${id}&pageIndex=${pageIndex}`);/* 重新操作 */
                } else {
                    res.redirect(`/?pageIndex=${pageIndex}`);//回主页
                }
            })
        } else {/* 添加 */
            db.collection('articles').insertOne(data, (err, docs) => {
                if (err) {
                    console.log('发布失败', err);
                    res.redirect('/write');/* 重新操作 */
                } else {
                    console.log('发布成功');
                    res.redirect('/');/* 回主页 */
                }
            })
        }
    })
})

9.删除文章

<a href="/article/delete?id=<%- item.id %>&pageIndex=<%- data.pageIndex %>">删除</a>

在主页加入删除文章选项，id用于找到指定文章，pageIndex确定删除后返回的页面

/* 文章删除  http://localhost:8888/?id=1587874300950&pageIndex=1 */
router.get('/delete', (req, res, next) => {
    /* 获取id和当前页码 */
    let id = parseInt(req.query.id);
    let pageIndex = req.query.pageIndex;
    /* 删除数据 */
    model.connect(db => {
        db.collection('articles').deleteOne({ id }, (err, ret) => {
            if (err) {
                console.log('删除失败', err);
                res.redirect(`/?pageIndex=${pageIndex}`);
            } else {
                console.log('删除成功', ret);
                res.redirect(`/?pageIndex=${pageIndex}`);
            }
        })
    })
})

10.实现图片上传

安装multiparty插件解析请求

npm i multiparty -S

配置xheditor富文本编辑器

$('.xheditor').xheditor({
	tools: 'full',
	skin: 'default',
	upImgUrl: '/article/upload',/* 上传路由 */
	html5Upload: false,
	upMultiple: 1
});

配置上传路由

/* 图片上传 */
router.post('/upload', (req, res, next) => {
    var form = new multiparty.Form();
    form.parse(req, (err, fields, files) => {
        if (err) {
            console.log('上传失败', err);
        } else {
            let file = files.filedata[0];
            /* 创建读写流 */
            let rs = fs.createReadStream(file.path);
            /* 存图片的路径为public下的/uploads/ */
            let newPath = '/uploads/' + file.originalFilename;
            let ws = fs.createWriteStream('./public' + newPath);
            /* 边读边写 */
            rs.pipe(ws);
            ws.on('close', () => {
                console.log('文件上传成功');
                res.send({ err: '', msg: newPath });
            })
        }
    })
})
/* 
files {
  filedata: [
    {
      fieldName: 'filedata',
      originalFilename: 'Snipaste_2019-09-23_00-10-40.png',
      path: 'C:\Users\14329\AppData\Local\Temp\qWOzXsQRXhVyqiO57W3qjMgC.png',
      headers: [Object],
      size: 146188
    }
  ]
}
*/