Node实战——绑定数据库进行对应文章内容显示

最新推荐文章于 2022-09-20 09:42:00 发布
最新推荐文章于 2022-09-20 09:42:00 发布
阅读量238 收藏 1
点赞数
分类专栏： node 文章标签： node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43675447/article/details/104401823
版权

一、需求

  • 点击导航栏中博客模板里的版权图或帝国cms模块中的文章阅读，能跳转到该文章所在的页面中

二、建表

  1. nav表
    在这里插入图片描述

  2. template表

在这里插入图片描述

三、页面及样式

cms.ejs：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客模板</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/index.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <%-include('detachPart/nav.ejs')%>
    <div class="container">
        <div class="row">
            <div class="col-lg-9">
                <div class="cms_pic cms_word">
                    <h1>个人网站模板</h1>
                    <p>青于蓝博客模板网站，不仅提供免费的个人网站模板,个人博客模板下载，还提供帝国cms个人博客模板,帝国cms个人网站模板下载，帝国cms企业网站模板下载</p>
                </div>
                <%-include('bigPart/leftimg.ejs')%>
                <%-include('bigPart/cmsblog.ejs')%>
            </div>  
            <div class="col-lg-3">
                <%-include('smallPart/rightimg_2.ejs')%>
                <%-include('smallPart/mylink.ejs')%>
                <%-include('smallPart/information.ejs')%>
            </div>
        </div>
    </div>
    <%-include('detachPart/footer.ejs')%>
</body>
</html>

cmsblog.ejs：

<%for(var i=0;i<allcmsres.length;i++){%>
    <div class="cms_pic">
        <i class="cms_pic_img">
            <a href="/cmsdetail?id=<%=allcmsres[i].id%>" target="_blank"><img src="<%=allcmsres[i].logo%>" alt=""></a>
        </i>
        <section class="cms_box">
            <h2><%=allcmsres[i].title%></h2>
            <p class="cms_box_info"><%=allcmsres[i].intro%></p>
            <p class="cms_box_time"><b>最后更新：</b><%=new Date(allcmsres[i].lastupdate).getFullYear()+"-"+("0"+(new Date(allcmsres[i].lastupdate).getMonth()+1)).slice(-2)+"-"+("0"+(new Date(allcmsres[i].lastupdate).getDate())).slice(-2)%></p>
            <span class="cms_box_link">
                <a href="#">付费模板</a>
                <a href="#">在线预览</a>
            </span>
        </section>
    </div>   
<%}%>

cmsdetail.ejs：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客模板</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/index.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <%-include('detachPart/nav.ejs')%>
    <div class="container">
        <div class="row">
            <div class="col-lg-9">
                <div class="cms_pic">
                    <i class="cms_pic_img">
                        <a href="#" target="_blank"><img src="<%=cmsblogres[0].logo%>" alt=""></a>
                    </i>
                    <section class="cms_box">
                        <h2><%=cmsblogres[0].title%></h2>
                        <p class="cms_box_info"><%=cmsblogres[0].intro%></p>
                        <p class="cms_box_time"><b>最后更新：</b><%=new Date(cmsblogres[0].lastupdate).getFullYear()+"-"+("0"+(new Date(cmsblogres[0].lastupdate).getMonth()+1)).slice(-2)+"-"+("0"+(new Date(cmsblogres[0].lastupdate).getDate())).slice(-2)%></p>
                        <span class="cms_box_link">
                            <a href="#">付费模板</a>
                            <a href="#">在线预览</a>
                        </span>
                    </section>
                </div>   
                <%-include('bigPart/leftimg.ejs')%>
            </div>  
            <div class="col-lg-3">
                <%-include('smallPart/rightimg_2.ejs')%>
                <%-include('smallPart/mylink.ejs')%>
                <%-include('smallPart/information.ejs')%>
            </div>
        </div>
    </div>
    <%-include('detachPart/footer.ejs')%>
</body>
</html>

index.css：

.cms_pic{
    background-color: #fff;
    border-radius: 5px;
    padding: 1.2rem;
    margin-right: 1rem;
    margin-top: 1.5rem;
    overflow: hidden;
}
.cms_pic_img{
    position: relative;
    width: 45%;
    float: left;
    display: block;
}
.cms_pic_img::after{
    position: absolute;
    top: -10px;
    right: 55px;
    content: "...";
    color: #fff;
    font-size: 1.3rem;
}
.cms_pic_img>a{
    text-decoration: none;
    color: #333;
}
.cms_pic_img img{
    width: 92%;
    border-radius: 8px;
    border-top: 1.2rem solid #222;
    border-left: 1.2rem solid #222;
    border-right: 1.2rem solid #222;
    border-bottom: 0.6rem solid #444;
}
.cms_box{
    position: relative;
    width: 55%;
    float: right;
    display: block;
}
.cms_box h2{
    font-size: 1.2rem;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cms_box_info{
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    background-color: #f7f7f7;
    color: #666;
    padding: 0.2rem 0.8rem;
    margin: 0.8rem 0;
    font-size: 0.9rem;
    height: 4.45rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.cms_box_time{
    margin-left: 0.6rem;
}
.cms_box_link{
    display: block;
}
.cms_box_link a{
    color: #fff;
    background-color: #2689f3;
    border-radius: 5px;
    padding: 0.3rem 0.6rem;
    margin: 0.3rem 0.6rem;
    text-decoration: none;
}
.cms_box_link a:nth-child(1){
    background-color: #8c4bcc;
}
.cms_word h1{
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 1.2rem;
}
.cms_word p{
    color: #666;
    font-size: 1rem;
}

四、MySQL数据

connection.js：

var mysql=require("mysql");
var setting=require("./setting");
var connection;
var connectionmysql=function(){
    connection=mysql.createConnection({
        host:setting.host,
        port:setting.port,
        user:setting.user,
        password:setting.pwd,
        database:setting.base
    });
}
connectionmysql();  //初始化连接数据库
// 不带参
exports.select=function(str,callback){
    connectionmysql();  //重新连接数据库
    connection.query(str,function(err,res){
        if(err) throw err;
        callback(res);
        connection.end();  //关闭服务器
    });
}   
// 带参
exports.find=function(str,params,callback){
    connectionmysql();  //重新连接数据库
    connection.query(str,params,function(err,res){
        if(err) throw err;
        callback(res);
        connection.end();  //关闭服务器
    });
}

sql.js：

module.exports={
    findTitle:"select * from nav",
    templateBlog:"select * from template where template.id=?",
    allTemplate:"select * from template"
}

promise.js：

var mysql=require("../MySQL/connection");
var sql=require("../MySQL/sql");
module.exports={
    findTitle:function(){
        return new Promise(function(resolve){
            mysql.select(sql.findTitle,function(result){
                resolve(JSON.parse(JSON.stringify(result)));
            });
        })
    },
    templateBlog:function(id){
        return new Promise(function(resolve){
            mysql.find(sql.templateBlog,id,function(result){
                resolve(JSON.parse(JSON.stringify(result)));
            });
        });
    },
    allTemplate:function(){
        return new Promise(function(resolve){
            mysql.select(sql.allTemplate,function(result){
                resolve(JSON.parse(JSON.stringify(result)));
            });
        });
    }
}

router.js：

var promise=require("../MySQL/promise");
module.exports=function(app){
    app.get("/cms",function(req,res){
        async function getData(){
            var res1=await promise.findTitle();
            var res16=await promise.allTemplate();
            var allres={
                titleindex:2,
                navres:res1,
                allcmsres:res16
            }
            return allres;
        }
        getData().then(function(result){
            res.render("cms",result);
        });
    });
    app.get("/cmsdetail",function(req,res){
        var cmsid=req.query.id;
        if(!cmsid){
            res.send("404");
            return;
        }
        async function getData(){
            var res1=await promise.findTitle();
            var res14=await promise.templateBlog(cmsid);
            var allres={
                titleindex:2,
                navres:res1,
                cmsblogres:res14
            }
            return allres;
        }
        getData().then(function(result){
            res.render("cmsdetail",result);
        });
    });
}

五、效果展示

博客模板：
在这里插入图片描述
网站首页中的帝国cms模块：
在这里插入图片描述
文章所在的页面：
在这里插入图片描述

易安sparkle
关注
专栏目录
Node实战——幼教平台
12-03
在本项目"Node实战——幼教平台"中，我们将探讨如何使用Node.js技术栈构建一个教育平台，特别是针对幼儿教育的资源部分。这个平台包含了文章的展示与修改功能，同时涉及用户权限管理，确保安全、有效的教育资源管理...
vb6实现union数据结构_算法之数据结构（下）【整理】
weixin_39803207的博客
12-05 123
二叉树 Binary Tree 一个二叉树是有节点(node)组成的。 二叉树(binary Tree)中的每一个节点都包含一个“left” pointer, 一个“right” pointer, 和一个data element。 根节点指针(root pointer) 指向树的最顶点的那个节点(即root node). the left pointers and right pointers 递...
VB6+Python混合编程（COM组件）
wengduke的博客
03-12 6710
Python的方便不用说，VB6做GUI的简单程度更不用说。二者混合编程的需求一直非常旺盛，但我苦苦搜寻了很久，始终未找到合适的解决方案。 在很长一段时间内，我都是通过创建、读取、删除临时文件来在VB程序和Python程序间传递信息，麻烦，且低级。（如下） 比如下面是一个典型的处理流程 1. VB创建需要处理的文本please.txt，并调用Python 2. Python...
用VB6写在线更新程序（上篇）(3/3)
Cable Fan编程笔记
09-02 1449
与Delphi中不同的是，读取一个结点的属性值时，要判断属性的存在性，试图读取返回的空值将引发错误。解析得到的值保存在XmlConfiguration类的属性中，而文件列表通过一个数组来保存。这里又遇到一个问题：索引属性，这个概念不好解释，还是看代码吧：  Files(文件列表)属性Public Property Get Files(Index As Intege
node.js从数据库获取数据
12-23
本文需要用node.js做一个从Sqlserver获取数据并显示到页面上的小功能，下面就为大家分享： app.js： var sqlbll = require('./routes/sqlbll'); ... app.get('/sqlbll/:ver', function(req, res){ var versionId=...
详解TreeView绑定数据库
09-03
在本文中，我们将深入探讨如何将TreeView控件与数据库进行有效绑定，以便用户可以直观地查看和操作数据库中的递归结构数据。 首先，让我们了解数据库的结构。在示例中，数据库包含一个表，具有`id`（全局唯一标识符...
Node.js数据库依赖文件
最新发布
09-02
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时用于开发服务器端应用程序。node-v14.15.0-win-x64 是 Node.js 的特定版本，适用于 Windows 操作系统的 64 位版本。具体而言：node：表示 Node.js。 v14.15.0...
前端 node配置 10分钟实现获取数据库的内容并显示到页面上
10-02
本教程将指导初学者如何在10分钟内配置Node.js环境，并通过简单的步骤获取数据库内容，将其呈现在前端页面上。 首先，我们需要确保已经安装了Node.js。如果还没有安装，可以访问官方网站下载对应操作系统的安装包，...
node连接数据库获取内容，把数据返回到前台页面
06-08
直接用就可以，特别简单，简单易懂 代码有注释很好看懂
VB6常用方法汇编
忘得快的专栏
11-12 7036
使用静态变量放置控件:  Form1:Label1,Command1 属性设置: cLabel1.Autosize= true代码:Private Sub Command1_Click()  Static stflag As Boolean  使用静态变量来保存变量值  If stflag = False Then    Label1.Font.Size = 14
让 VB6 开发的程序拥有视觉样式（ XP 风格），VC++6.0 同样适用
ROVAST的专栏
05-19 4580
让 VB6 开发的程序拥有视觉样式（ XP 风格），VC++6.0 同样适用。     相信用 VB6 或 VC6 开发过程序的朋友都曾郁闷过吧，VB6 或 VC6 做的程序都没有视觉样式（XP风格），毕竟是 98 年的产品了！很老了。笔者也因此改用 VB2005，可以直接编写出拥有视觉样式（XP风格）的程序。但是 VB2005 编写的小程序占用近 10MB 的内存不说，还得事先安装 .NE
VB6控件TreeView的使用
曹觉
10-20 5690
【实验名称】VB6控件TreeView的使用【实验原理】在FormLoad事件的时候，以TreeView中显示数据库中数据表的结构信息。【实验步骤】1.使用SQL Server2000数据库建立两个数据表：CREATE TABLE [地区信息] (      [系统ID] [int] IDENTITY (1, 1) NOT NULL ,      [地区名称] [char]
nodejs+express实现数据库mysql的访问，并展示数据到页面上【文尾分享源码包】
赏樱看雪撸代码
08-25 6095
nodejs实现mysql数据库访问，node访问数据库，node访问本地数据库，nodejs访问mysql数据库并展示
nodejs--开发自己的项目——6.1--文章分类管理-获取文章分类列表数据——get路由-url:my/article/cates
weixin_47295886的博客
09-20 343
服务器：app.js是有权限的接口，需要token验证。
node.js实战记录3 文章分类管理功能、文章管理功能
AIpoem的博客
02-14 1124
multer处理form-data类型数据
Node.js与Mongoose：MongoDB数据库操作实战
在Node.js环境中，Mongoose是一个非常重要的库，它提供了一种方便的方式来操作MongoDB数据库。作为一款强大的对象数据建模工具，Mongoose简化了与MongoDB的交互，使得在Node.js应用程序中处理CRUD（创建、读取、更新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值