Node實戰——繫結資料庫進行對應文章內容顯示
阿新 • • 發佈:2020-02-22
一、需求
- 點選導航欄中部落格模板裡的版權圖或帝國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,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",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,cmsblogres:res14
}
return allres;
}
getData().then(function(result){
res.render("cmsdetail",result);
});
});
}
五、效果展示
部落格模板:
網站首頁中的帝國cms模組:
文章所在的頁面: