首页 > 数据库> 文章详细

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

2020-02-21 21:41:57 阅读：326 来源： 互联网

标签：Node function 绑定文章内容 result rem var cms 模板

一、需求

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

二、建表

nav表
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模块：

文章所在的页面：

柳时镇大尉发布了155 篇原创文章 · 获赞 26 · 访问量 3万+ 私信关注

标签：Node,function,绑定,文章内容,result,rem,var,cms,模板
来源： https://blog.csdn.net/weixin_43675447/article/details/104401823

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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