【Nodejs】基于express|ejs的用户博客管理系统前后端代码

目录

package.json

后端:

server.js

router/admin/index.js

router/admin/login.js

router/admin/blog.js

router/admin/users.js

router/web/index.js

前端:

views/admin/common/top.ejs

views/admin/index.ejs

views/admin/login.ejs

views/admin/blog.ejs

views/admin/users.ejs


无开发,不安全。

这个小项目用了express框架,ejs模板渲染引擎,调用了mysql的api。

实现了session登录验证,session过期机制,用户和博客文章的CURD操作,上传头像图片的操作。

下面直接贴出代码:

package.json

{"name": "ejs-express-mysql","version": "1.0.0","description": "ejs+express+mysql实现的后台管理","main": "server","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["node","express","ejs","mysql"],"devDependencies": {"body-parser": "^1.16.1","consolidate": "^0.14.5","cookie-parser": "^1.4.3","cookie-session": "^2.0.0-beta.1","ejs": "^2.5.6","express": "^4.18.2","express-router": "0.0.1","express-static": "^1.0.3","multer": "^1.3.0","mysql": "^2.13.0"}
}

后端:

server.js


const express = require('express');
const expressStatic = require('express-static');
const bodyParser = require('body-parser');
const multer = require('multer');
const multerObj = multer({dest:'./static/upload'});
const cookieParser = require('cookie-parser');
const cookieSession = require('cookie-session');
const consolidate = require('consolidate');
const ejs = require('ejs');//创建服务器
var server = express();
server.listen(4000);//解析请求数据server.use(express.urlencoded({ extended: false }));
server.use(multerObj.any());//设置cookie,session
server.use(cookieParser('secret'));
(function () {var arr = [];for(var i = 0;i<10000;i++){arr.push('keys_'+Math.random());}server.use(cookieSession({name:'session_id',keys:arr,maxAge:20*60*1000//一般设置20分钟}))
})();//设置模板
server.set('view engine','ejs');
server.set('views','./views');//设置路由
server.use('/admin',require('./router/admin/index')());
server.use('/',require('./router/web/index')());//静态文件的请求
server.use('/files',expressStatic('./static'));

router/admin/index.js


const express = require('express');module.exports = function () {var router = express.Router();router.use(function (req,res,next) {if(!req.session['user_id'] && req.url != '/login'){res.redirect('/admin/login');}else{next();}});router.use('/login',require('./login')());router.use('/blog',require('./blog')());router.use('/users',require('./users')());router.get('/',function (req,res) {res.render('admin/index.ejs');});return router;
};

router/admin/login.js


const express = require('express');
const mysql = require('mysql');
const common = require('../../lib/common');const db = mysql.createPool({host:'localhost',port:3306,user:'root',password:'root',database:'blog'});module.exports = function () {var router = express.Router();router.get('/',function (req,res) {res.render('admin/login.ejs');});router.post('/',function (req,res) {var username = req.body.username;var password = common.md5(req.body.password+common.MD5_SUFFIX);if(username && password){db.query('SELECT * FROM admin_table WHERE username="'+username+'"',function (err,userData) {if(err){console.error(err);res.status(500).send({code:500,data:[],msg:'database error'});}else if(userData.length == 0){res.status(400).send({code:400,data:[],msg:'parameters error'});}else{if(userData[0].password != password){res.status(400).send({code:400,data:[],msg:'username or password error'});}else{req.session['user_id'] = userData[0].ID;//注意这里是在req上面res.status(200).send({code:200,data:[],msg:'success'});}}})}else{res.status(400).send({code:400,data:[],msg:'parameters error'});}});return router;
};

router/admin/blog.js


const express = require('express');
const common = require('../../lib/common');
const mysql = require('mysql');const db = mysql.createPool({host: 'localhost',port: 3306,user: 'root',password: 'root',database: 'blog'
});module.exports = function () {var router = express.Router();router.get('/', function (req, res) {switch (req.query.action) {case 'del'://删除操作db.query('DELETE FROM blog_list_table WHERE id="'+req.query.id+'"',function (err,resultData) {if(err){console.error(err);res.status(500).send({code:500,msg:'database error'});}else{res.redirect('/admin/blog');}});break;case 'mod'://修改操作db.query('SELECT * FROM blog_list_table WHERE id="'+req.query.id+'"',function (err,modData) {if(err){console.error(err);res.status(500).send({code:500,msg:'database error'});}else if(modData.length == 0){res.status(400).send({code:400,msg:'parameters error'});}else{db.query('SELECT * FROM blog_list_table',function (err,allData) {if(err){console.error(err);res.status(500).send({code:500,msg:'database error'});}else{res.render('admin/blog.ejs',{formData:allData,modData:modData});}});}});break;default:db.query('SELECT * FROM blog_list_table', function (err, resultData) {if (err) {console.error(err);res.status(500).send({code: 500, msg: 'database error'}).end();} else {res.render('admin/blog.ejs', {formData: resultData});}});}});router.post('/', function (req, res) {var title = req.body.title.trim();var author = req.body.author.trim();var summary = req.body.summary.trim();var href = req.body.href.trim();if (title && author && summary && href) {if(req.body.modified){//更新操作db.query('UPDATE blog_list_table SET title="'+title+'",author="'+author+'",summary="'+summary+'",href="'+href+'" WHERE ID="'+req.body.modified+'"',function (err,resultData) {if(err){console.error(err);res.status(500).send({code:500,msg:'database error'});}else{res.redirect('/admin/blog');}})}else{//增加操作db.query('INSERT INTO blog_list_table (title,author,summary,href) VALUE("' + title + '","' + author + '","' + summary + '","' + href + '")', function (err, data) {if (err) {console.error(err);res.status(500).send({code: 500, msg: 'database error'}).end();} else {res.redirect('/admin/blog');}});}} else {res.status(400).send({code: 400, msg: 'parameters error'}).end();}});return router;
};

router/admin/users.js


const express = require('express');
const common = require('../../lib/common');
const mysql = require('mysql');
const fs = require('fs');
const pathLib = require('path');const db = mysql.createPool({host: 'localhost',user: 'root',password: 'root',database: 'blog'
});module.exports = function () {var router = express.Router();router.get('/', function (req, res) {switch (req.query.action) {case 'del'://删除操作db.query('SELECT * FROM user_table WHERE ID="' + req.query.id + '"', function (err, queryData) {if (err) {console.error(err);res.status(500).send({code: 500, msg: 'database error'});} else if (queryData.length == 0) {res.status(400).send({code: 400, msg: 'parameters error'});} else {fs.unlink(queryData[0].pic_header.replace('\/files','static'), function (err) {if (err) {console.error(err);res.status(500).send({code:500,msg:'operate err'});} else {db.query('DELETE FROM user_table WHERE ID="'+req.query.id+'"',function (err,resultData) {if(err){console.error(err);res.status(500).send({code: 500, msg: 'database error'});}else{res.redirect('/admin/users');}})}})}});break;case 'mod':db.query('SELECT * FROM user_table',function (err,allData) {if (err) {console.error(err);res.status(500).send({code: 500, msg: 'database error'});} else {db.query('SELECT * FROM user_table WHERE ID="'+req.query.id+'"',function (err,modData) {if (err) {console.error(err);res.status(500).send({code: 500, msg: 'database error'});}else if(modData.length == 0){res.status(400).send({code: 400, msg: 'parameters error'});}else {res.render('admin/users.ejs',{usersData:allData,modData:modData});}});}});break;default:db.query('SELECT * FROM user_table', function (err, allUsersData) {if (err) {console.error(err);res.status(500).send({code: 500, msg: 'database error'});} else {res.render('admin/users.ejs', {usersData: allUsersData});}});}});router.post('/', function (req, res) {var username = req.body.username;var email = req.body.email;if(req.files.length>0){var ext = pathLib.parse(req.files[0].originalname).ext;var pic_header = '/files/upload/' + req.files[0].filename + ext;}//需要进行一些校验,这里就忽略了if(req.body.modified){//修改//查看有没有新传来的头像,如果有,则删除,新建,如果没有,直接更新需要更新的内容if(req.files.length>0){//有修改头像,则进行原来头像的删除,再上传db.query('SELECT * FROM user_table WHERE ID="'+req.body.modified+'"',function (err,modData) {if (err) {console.error(err);res.status(500).send({code: 500, msg: 'database error'});}else if(modData.length == 0){res.status(400).send({code: 400, msg: 'parameters error'});}else{fs.unlink(modData[0].pic_header.replace('\/files','static'),function (err) {if(err){console.error(err);res.status(500).send({code:500,msg:'operate error'});}else{//删除成功,开始对新的文件进行重命名fs.rename(req.files[0].path, req.files[0].path + ext, function (err) {if (err) {console.error(err);res.status(500).send({code: 500, msg: 'operate error'});} else {db.query('UPDATE user_table SET username="'+username+'",email="' + email + '",pic_header="' +pic_header + '" WHERE ID="'+req.body.modified+'"',function (err,data) {if (err) {console.error(err);res.status(500).send({code: 500, msg: 'database error'});}else{res.redirect('/admin/users');}});}});}})}})}else{db.query('UPDATE user_table SET username="'+username+'",email="' + email + '" WHERE ID="'+req.body.modified+'"',function (err,data) {if (err) {console.error(err);res.status(500).send({code: 500, msg: 'database error'});}else{res.redirect('/admin/users');}});}}else{//新增fs.rename(req.files[0].path, req.files[0].path + ext, function (err) {if (err) {console.error(err);res.status(500).send({code: 500, msg: 'data error'});} else {db.query('INSERT INTO user_table (username,email,pic_header) VALUE("' + username + '","' +email + '","' + pic_header + '")', function (err, resultData) {if (err) {console.error(err);res.status(500).send({code: 500, msg: 'database error'});} else {res.redirect('/admin/users');}});}});}});return router;
};

router/web/index.js

const express = require('express');module.exports = function () {var router = express.Router();router.get('/',function (req,res) {res.send('这是前端页面');});return router;
};

前端:

views/admin/common/top.ejs

<!doctype html>
<html lang="utf-8">
<head><meta charset="UTF-8"><title>后台管理-首页</title><link rel="stylesheet" href="/files/admin/css/top.css"><link rel="stylesheet" href="/files/admin/css/reset.css"><script type="text/javascript" src="http://himg2.huanqiu.com/statics/hq2013/js/lib/jquery1.9.1.js"></script><script src="/files/admin/js/top.js"></script>
</head>
<body>
<div class="header"><p>后台管理应用</p><div class="menu"><a href="/admin"><span>首页</span></a><a href="/admin/blog"><span>博文管理</span></a><a href="/admin/users"><span>用户管理</span></a></div>
</div>
</body>
</html>

views/admin/index.ejs

<!doctype html>
<html lang="utf-8">
<head><meta charset="UTF-8"><title>后台管理-首页</title>
</head>
<body>
<% include common/top.ejs%>
<div style="font-size: 32px;font-family: fantasy;padding: 100px 30px 0px;"><p>后台管理主要实现的是:<span style="color: red;">博客的删除修改和新建(涉及到数据的CRUD),以及用户管理(涉及到图片上传).</span></p>
</div>
</body>
</html>

views/admin/login.ejs

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>后台管理员登录</title><link rel="stylesheet" href="/files/admin/css/login.css"><link rel="stylesheet" href="/files/admin/css/reset.css"><script type="text/javascript" src="http://himg2.huanqiu.com/statics/hq2013/js/lib/jquery1.9.1.js"></script><script type="text/javascript" src="/files/admin/js/login.js"></script>
</head>
<body>
<div class="login_container"><div class="username_div login_input_container"><img src="/files/admin/img/user_icon.png"><input type="text" autofocus="autofocus" name="username"/></div><div class="password_div login_input_container"><img src="/files/admin/img/password_icon.png"><input type="password" name="password"></div><div class="login_button"></div>
</div>
</body>
</html>

views/admin/blog.ejs

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>后台管理-博客管理</title><link rel="stylesheet" href="/files/admin/css/blog.css"><script type="text/javascript" src="http://himg2.huanqiu.com/statics/hq2013/js/lib/jquery1.9.1.js"></script><script src="/files/admin/js/blog.js"></script>
</head>
<body>
<% include common/top.ejs %>
<div class="add_button"><img src="/files/admin/img/add.png">
</div>
<div class="add_form"><img src="/files/admin/img/add.png"><div class="form_bg"></div><form action="?" method="post">标题: <input type="text" name="title" autofocus="autofocus"><br>作者: <input type="text" name="author"><br>摘要: <textarea name="summary"></textarea><br>链接: <input type="text" name="href"><br><input type="submit" value="添加"></form>
</div>
<%if(typeof modData != 'undefined'){%>
<div class="add_form" style="display: flex"><img src="/files/admin/img/add.png"><div class="form_bg"></div><form action="?" method="post"><input type="hidden" name="modified" value="<%= modData[0].ID %>">标题: <input type="text" name="title" autofocus="autofocus" value="<%=modData[0].title%>"><br>作者: <input type="text" name="author" value="<%=modData[0].author%>"><br>摘要: <textarea name="summary"><%=modData[0].summary%></textarea><br>链接: <input type="text" name="href" value="<%=modData[0].href%>"><br><input type="submit" value="确认修改"></form>
</div>
<%}%>
<table><tr><th class="id">ID</th><th class="title">标题</th><th class="author">作者</th><th class="summary">摘要</th><th class="href">链接</th><th class="operation">操作</th></tr><% for(var i = 0;i<formData.length;i++){%><tr><td><%=formData[i].ID%></td><td><%=formData[i].title%></td><td><%=formData[i].author%></td><td><%=formData[i].summary%></td><td><%=formData[i].href%></td><td><a href="?action=del&id=<%=formData[i].ID%>" onclick="return confirm('确定删除?')"><button>删除</button></a><a href="?action=mod&id=<%=formData[i].ID%>"><button>修改</button></a></td></tr><%}%>
</table>
</body>
</html>

views/admin/users.ejs

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>后台管理-用户管理</title><link rel="stylesheet" href="/files/admin/css/users.css"><script type="text/javascript" src="http://himg2.huanqiu.com/statics/hq2013/js/lib/jquery1.9.1.js"></script><script src="/files/admin/js/users.js"></script>
</head>
<body>
<% include common/top.ejs%>
<div class="add_button"><img src="/files/admin/img/add.png">
</div>
<div class="add_form"><img src="/files/admin/img/add.png"><div class="form_bg"></div><form action="?" method="post" enctype="multipart/form-data">用户名: <input type="text" name="username" autofocus="autofocus"><br>邮箱: <input type="email" name="email"><br>头像: <input type="file" name="pic_header"><br><input type="submit" value="添加"></form>
</div>
<%if(typeof modData != 'undefined'){%>
<div class="add_form" style="display: flex"><img src="/files/admin/img/add.png"><div class="form_bg"></div><form action="?" method="post" enctype="multipart/form-data"><input type="hidden" name="modified" value="<%= modData[0].ID %>">用户名: <input type="text" name="username" autofocus="autofocus" value="<%=modData[0].username%>"><br>邮箱: <input type="email" name="email" value="<%=modData[0].email%>"><br>头像: <input type="file" name="pic_header"><br><input type="submit" value="确认修改"></form>
</div>
<%}%>
<table><tr><th class="id">ID</th><th class="title">名字</th><th class="author">邮箱</th><th class="summary">头像</th><th class="operation">操作</th></tr><% for(var i = 0;i<usersData.length;i++){%><tr><td><%=usersData[i].ID%></td><td><%=usersData[i].username%></td><td><%=usersData[i].email%></td><td><img src="<%=usersData[i].pic_header%>" alt=""></td><td><a href="?action=del&id=<%=usersData[i].ID%>" onclick="return confirm('确定删除?')"><button>删除</button></a><a href="?action=mod&id=<%=usersData[i].ID%>"><button>修改</button></a></td></tr><%}%>
</table>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/598975.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[蓝桥杯学习]​树上差分

差分 前缀和 sum_i sum_i-1 a_i 差分 diff_i a_i - a_i-1 差分的好处 点的差分 问题引入 解决问题 要用到差分的思想&#xff0c;每次从叶子向上的回溯&#xff0c;让父结点子结点的cnt值&#xff0c;但是仅仅这样&#xff0c;还不行 回溯的过程中&#xff0c;LCA被加…

03- OpenCV:矩阵的掩膜操作

目录 1、矩阵的掩膜操作 简介 2、获取图像像素指针 3、掩膜操作解释 4、代码演示 1、矩阵的掩膜操作 简介 在OpenCV中&#xff0c;矩阵的掩膜操作是一种通过使用一个二进制掩膜来选择性地修改或提取图像或矩阵的特定区域的方法。 掩膜是一个与原始图像或矩阵具有相同大小的…

Moment.js 使用

Moment.js的简介 Moment.js是一个轻量级的JavaScript时间库&#xff0c;以前我们转化时间&#xff0c;都会进行很复杂的操作&#xff0c;而Moment.js的出现&#xff0c;简化了我们开发中对时间的处理&#xff0c;提高了开发效率。日常开发中&#xff0c;通常会对时间进行下面这…

如何使用 NFTScan NFT API 在 PlatON 网络上开发 Web3 应用

PlatON 是由万向区块链和矩阵元主导开发的面向下一代的全球计算架构&#xff0c;创新性的采用元计算框架 Monad 和基于 Reload 覆盖网络的同构多链架构&#xff0c;其愿景是成为全球首个提供完备隐私保护能力的运营服务网络。它提供计算、存储、通讯服务&#xff0c;并提供算力…

使用docker安装mysql 8.0

打开命令行&#xff0c;运行 ocker pull mysql:8.0.21 下载成功后&#xff0c;可以看到 进入cmd&#xff0c;输入 docker run -d --name mysql -p 3306:3306 -v /root/mysql/data:/var/lib/mysql -v /root/mysql/config:/etc/mysql/conf.d -e MYSQL_ROOT_PASSWORDabc12345…

汽车变速箱日常巡检VR虚拟教学课件真实还原维修场景

在汽车行业中&#xff0c;VR技术的应用也日益广泛&#xff0c;尤其是在汽车维修培训领域。VR公司深圳华锐视点采用UE引擎进行渲染开发&#xff0c;制作了一款VR电动汽车故障检测模拟仿真培训系统&#xff0c;以逼真的维修环境&#xff0c;真实的维修过程及沉浸式体验&#xff0…

LeetCode(38)外观数列⭐⭐

「外观数列」是一个整数序列&#xff0c;从数字 1 开始&#xff0c;序列中的每一项都是对前一项的描述。 你可以将其视作是由递归公式定义的数字字符串序列&#xff1a; countAndSay(1) "1"countAndSay(n) 是对 countAndSay(n-1) 的描述&#xff0c;然后转换成另一…

unity图像处理简单流程

在渲染管线中&#xff0c;后处理通常位于渲染过程的末尾&#xff0c;即在所有的渲染通道&#xff08;例如顶点着色器、片段着色器等&#xff09;完成之后执行后处理操作。后处理操作是在已经渲染的图像上进行的&#xff0c;它不会影响到场景的几何形状或光照等因素。一般来说&a…

JavaScript高级程序设计读书记录(四):基本引用类型Date,RegExp,原始值包装类型,Global对象 eval(),Math

引用值&#xff08;或者对象&#xff09;是某个特定引用类型的实例。在 ECMAScript 中&#xff0c;引用类型是把数据和功能组织到一起的结构&#xff0c;经常被人错误地称作“类”。虽然从技术上讲 JavaScript 是一门面向对象语言&#xff0c;但ECMAScript 缺少传统的面向对象编…

MySQL基础笔记(5)DCL数据控制语句

数据控制语句&#xff0c;用来管理数据库用户、控制数据库的访问权限~ 目录 一.用户管理 1.查询用户 2.创建用户 3.修改用户密码 4.删除用户 二.权限管理 1.查询权限 2.授予权限 3.撤销权限 一.用户管理 1.查询用户 use MySQL; select * from user; 2.创建用户 crea…

新年福利|这款价值数万的报表工具永久免费了

随着数据资产的价值逐渐凸显&#xff0c;越来越多的企业会希望采用报表工具来处理数据分析&#xff0c;了解业务经营状况&#xff0c;从而辅助经营决策。不过&#xff0c;企业在选型报表工具的时候经常会遇到以下几个问题&#xff1a; 各个报表工具有很多功能和特性&#xff0c…

5600U PVE安装WIN10后直通核显

修改PVE系统配置 请先安装相同版本的PVE系统&#xff0c;其他版本如果存在问题请自行查找。 安装过程比较简单&#xff0c;具体方法请自行百度 1. 修改grub启动参数&#xff1a; 修改文件 /etc/default/grub 中 GRUB_CMDLINE_LINUX_DEFAULT 配置&#xff1a; GRUB_CMDLINE_LI…

ARM DMA使用整理

Direct Memory Access&#xff0c; 直接存储访问。同SPI,IIC,USART等一样&#xff0c;属于MCU的一个外设&#xff0c;用于在不需要MCU介入的情况下进行数据传输。可以将数据从外设传输到flash&#xff0c;也可以将数据从flash传输到外设&#xff0c;或者flash内部数据移动。 它…

03Spring实现IoC:依赖注入/构造注入

● 控制反转&#xff0c;反转的是什么&#xff1f; ○ 将对象的创建权利交出去&#xff0c;交给第三方容器负责。 ○ 将对象和对象之间关系的维护权交出去&#xff0c;交给第三方容器负责。 ● 控制反转这种思想如何实现呢&#xff1f; ○ DI&#xff08;Dependency Injection&…

Spring学习之——基于注解的IOC配置

基于注解的IOC配置 IOC 1.applicationContext.xml <?xml version"1.0" encoding"UTF-8"?> <beans xmlns"http://www.springframework.org/schema/beans"xmlns:context"http://www.springframework.org/schema/context"x…

华为OD机试 - 火星文计算2(Java JS Python C)

题目描述 已知火星人使用的运算符为#、$,其与地球人的等价公式如下: x#y = 4*x+3*y+2x$y = 2*x+y+3其中 x、y 是无符号整数地球人公式按C语言规则计算火星人公式中,#的优先级高于$,相同的运算符,按从左到右的顺序计算现有一段火星人的字符串报文,请你来翻译并计算结果。…

Vue3.4的新变化

解析器 3.4版本解析器速度提升2倍&#xff0c;提高了 SFC 构建性能。 之前版本Vue 使用递归下降解析器&#xff0c;该解析器依赖于许多正则表达式和前瞻搜索。新的解析器使用基于htmlparser2中的标记生成器的状态机标记生成器&#xff0c;它仅迭代整个模板字符串一次。 响应式…

3190个文件!10GB大小!看3D WEB轻量引擎HOOPS Communicator如何高性能读取?

前言&#xff1a; HOOPS Communicator是专为在云端和Web上构建工程应用程序的3D开发工具包。它针对Web工作流、浏览器和工程图形进行了优化。研发小组花了20多年的时间来研发HOOPS Visualize&#xff08;本地3D可视化引擎&#xff09;&#xff0c;他们在这些工作中积累了大量计…

CyberLink的视频编辑软件PowerDirector Ultimate 2024 22.0版本在win系统下载与安装配置

目录 前言一、PowerDirector Ultimate安装二、使用配置总结 前言 PowerDirector Ultimate是由CyberLink公司开发的一款视频编辑软件&#xff0c;其为高级版本&#xff0c;拥有多种强大的视频编辑和效果功能。该软件具有许多强大的功能和工具&#xff0c;包括多轨时间线编辑、视…

竞赛保研 基于机器视觉的车道线检测

文章目录 1 前言2 先上成果3 车道线4 问题抽象(建立模型)5 帧掩码(Frame Mask)6 车道检测的图像预处理7 图像阈值化8 霍夫线变换9 实现车道检测9.1 帧掩码创建9.2 图像预处理9.2.1 图像阈值化9.2.2 霍夫线变换 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分…