比如有一个个人主页,个人主页首页有许多文章,点第一篇文章,就要显示第一篇文章的内容,点第二篇文章就要现实第二篇文章的内容,今天主要来实现这个功能.
这边需要用到mysql,表的内容我已经建好了.
TIM图片20180123205734.png
使用的是navicat for mysql建的表,非常方便好用.
我们的思路是这样的:
1.当用户访问我的主页的时候,就渲染主页的内容(这个时候需要服务器把客户端需要的信息都加在res参数上返回给客户端)
2.客户端根据从服务器拿到的数据,对每篇文章进行标号
3.当用户点击a标签准备访问文章的时候,就访问 /article 页面
我们先看js代码
const express=require('express');
const static=require('express-static');
const cookieParser=require('cookie-parser');
const cookieSession=require('cookie-session');
const bodyParser=require('body-parser');
const multer=require('multer');
const consolidate=require('consolidate');
const mysql=require('mysql');
const db=mysql.createPool({
host:'localhost',
user:'root',
password:'158298232',
database:'blog'
});
var server=express();
server.listen(3000,function(err){
if(!err){
console.log('server is listening 3000 port');
}else{
console.log(err);
}
});
server.set('view engine','html');
server.set('views','./template2');
server.engine('html',consolidate.ejs);
//当客户端访问根目录即主页面的时候,渲染首页的内容给用户
//处理facivon.ico
server.get('/favicon.ico',function(req,res){});
//因为处理同一个页面,如果不断的嵌套会显得很混乱,所以这里使用express的链式操作next
//这里的get处理banners的图片
server.get('/',function(req,res,next){
//当用户访问主页面即'/'的时候,我们先从数据库里读取banners图片的数据
db.query('SELECT * FROM banner_table',function(err,data){
if(err){
res.send('ERROR');
}else{
//我们把数据库读取出来的数据加在res的banners参数上
//res表示返回给客户端的
//因此客户端可以取得数据库的数据
console.log(data);
res.banners=data;
//处理完后前往下一个链式操作
next();
}
});
});
//这里的get处理文章的id,读取文章的id
//本质来说服务器如何渲染文件取决于客户端如何给服务器发送请求
//因此服务器需要返回各种信息给客户端来使用
server.get('/',function(req,res,next){
db.query('SELECT id,title,summary FROM article_table',function(err,data){
if(err){
console.log(err);
}else{
//把数据库取得的data数据加在res的articles参数上
res.articles=data;
//前往下一个链式操作
next();
}
});
});
//最后一个链式操作
server.get('/',function(req,res){
//response即返回给客户端的文件是渲染后的index.ejs文件
res.render('index.ejs',{
//这里给客户端返回的json上有数据
//banners上是数据库banners_table的数据
//articles上是数据库article_table的数据
banners:res.banners,
articles:res.articles
});
});
//如果客户端没有点a标签即没有请求这个/article页面,那这边是不会执行的
//假设客户端有人点了a标签
//a标签请求,并且会带着id
//于是需要处理对/article的请求
server.get('/article',function(req,res){
//判断req上是否真的有id值
//如果req有id值则查询数据库,如果没有就向客户端返回错误
if(req.query.id){
//查询数据库,这边用了字面量字符串,需要用反单引号(1旁边的那个)括起来
//这句sql语句的意思是把这个id值的所有数据都选出来
db.query(`SELECT * FROM article_table WHERE id=${req.query.id}`,function(err,data){
console.log(data);
// 如果有错就返回错误
if(err){
console.log(err);
}else{
// 没有的话判断一下数据库里有没有这个数据
// 如果数据库里都是空的,那就返回错误,说明没有内容
if(data.length==0){
res.status(404).send(err).end();
}else{
// 如果数据库里有内容就渲染出来
res.render('conText.ejs',{
// 这边的data就一个数据,所以直接返回了,用data[0]
article_data:data[0]
});
}
}
});
}else{
res.status(404).send(err).end();
}
});
server.use(static('./www'));
然后是两个ejs模版
先是首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<!-- 这边把数据库里所有的文章都循环出来了 -->
<% for(var i=0;i<articles.length;i++){ %>
<!-- 这边设置了a标签请求的页面 -->
<!-- 这边在后面带上了id -->
<!-- id会出现在req.query.id上 -->
<!-- 然后id的实际值使用的是服务器所给客户端的数据,即数据库里的id值 -->
<!-- 这个数据在还没请求/article的时候就已经都拿到了 -->
<!-- 然后把他们循环出来 -->
<a href="/article?id=<%= articles[i].id%>">
<%= articles[i].title %>
</a>
<% } %>
</body>
</html>
然后是文章内容页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="content"><%= article_data.content %></div>
</body>
</html>
中间有几个打印log的是为了测试一下是否正常,可以忽略
测试了一下,结果如下:
首页:
TIM图片20180123221207.png
点击a标签后:
TIM图片20180123221301.png
这边我点的是第二篇文章,所以出来的是第二篇文章内容,get那边的数据article的id也是2. 接下来就可以不断的完善下去了.力争先把页面布局好.先做一个纯发布内容的blog吧
网友评论