node从数据库中拿数据的轮播图

最新推荐文章于 2022-04-11 14:47:00 发布

AIYOUWAI哈

最新推荐文章于 2022-04-11 14:47:00 发布

阅读量1.6k

点赞数 1

本文链接：https://blog.csdn.net/qq_41841562/article/details/84573103

版权

node从数据库中拿到数据，然后在html中写入。

需要三个工具：atom编译器（也可以是其它的，只要支持ejs文件）；Navicat(将数据库写入) ，编写html的用的习惯的工具。

第一步：用div+css+jquery写好一个轮播图，图片和图片下边的注释都写死的那种；

第二步：banner（表名）：

数据字典：ID int 不为空主键

imgSrc（图片的地址） varchar(16) （图片名字的长度）不为空

subtitle（副标题） varchar(16)（副标题字的个数设置）不为空

title（对图片解释的文字，其实是在图片上边的字） varchar(60) 不为空

第三步：使用atom开始写入用js设计的内容。

（1）、先下载各个板块：

express：帮助搭建各个web项目，可以使用HTTP协议；

body-parser:解析在前端在input框内写入的数据；

cookie-parser：解析cookie数据，并对浏览器产生一定的加密效果；

cookie-session：解析session数据

multer:处理node.js的中间件，，主要用作文件上传，但是需要在form中加入multipart/form-data（不会处理任何不是这个的文件）；

consolidate：作为模板引擎的整合模板，，模板引擎常见的有两种（ejs和jade），由于前者和h5的语法几乎一样，所以自己设计的时候基本上都是用前者。

ejs:模板；

mysql:引入数据库。

使用上述的模块都需要下载，在自己的文件路径下用 npm install express cookie-parser -D等模块。

淘宝镜像下载npm install -g cnpm --registry=https://registry.npm.taobao.org 然后下载模块用cnpm install 模块名

（2）、在js文件中引入文件：用const 定义变量 const express=require('express'); 引入模块的形式和上边的一样

注意：multer的使用 multer作为文件的上传，自然需要上传文件的地址，可以这样定义

const multer=require('multer'); const multerobj=multer({dest:' 要写入到哪里的地址'});

（3）、需要获取express和对监听 var server =express(); server.listen();

(4)、用createPool建立一个连接池，里边的参数包括，host: ***数据库名字，用户名，密码，自定义的端口号，这些用json格式，并且定义一个变量获取它，，然后用query属性解析；里边的第一个参数是想从数据库中获取的东西，第二个是一个函数，里边的两个参数分别为err data ，，如果错误，向前台传输一个错误信息，，如果正确，就要开始渲染前台主页的内容；

（5）、解析cookie，使用session，.post数据吗，配置模板引擎，（上一个以详细介绍过consolidate的用法）；

主页的具体代码如下：

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: '926983', database: 'my_blog'});

var server=express();
server.listen(8080);

//1.解析cookie
server.use(cookieParser('sdfasl43kjoifguokn4lkhoifo4k3'));

//2.使用session
var arr=[];
for(var i=0;i<100000;i++){
arr.push('keys_'+Math.random());
}
server.use(cookieSession({name: 'zns_sess_id', keys: arr, maxAge: 20*3600*1000}));

//3.post数据
server.use(bodyParser.urlencoded({extended: false}));
server.use(multer({dest: './www/upload'}).any());

//4.配置模板引擎
//输出什么东西
server.set('view engine', 'html');
//模板文件放在哪儿
server.set('views', './template');
//哪种模板引擎
server.engine('html', consolidate.ejs);

//接收用户请求
server.get('/', (req, res)=>{
//查询banner的东西
db.query("SELECT * FROM banner", (err, data)=>{
if(err){
console.log(err);
res.status(500).send('database error').end();
}else{
console.log(data);

//1.ejs是前台页面的名字
res.render('index1.ejs', {banner: data});
}
});
});

//4.static数据
server.use(static('./www'));

前台页面，，可以设计自己的轮播图，我的如下：

//将表遍历，可以得到几个object，可以使用，让他作为数组，里边存的是自己定义的id，imgSrc,title,subtitle,找到对应位置，将前台写死的内容进行替换，这个时候出现的图片以及图片上的文字都是在数据库中拿出的
<% for(var i=0;i<banner.length;i++){ %>
                    <li class="slider-item">
                        <a href="#">
                            <img src="<%=banner[i].picSrc %>" width="720" height="500" >
                            <span class="slider-title">
                                <em>
<%=banner[i].title %>
                                    
                                </em>
<em>--->
<%=banner[i].speaker %>
</em>
                            </span>
                        </a>
                    </li>
<% } %>
                                       
                                       
                </ul>
            </div>
            <div class="progress"></div>

</div>

<div class="banner" id="b04">
                <ul>
<% for(var i=0;i<banner.length;i++){ %>
                    <li class="slider-item">
                        <a href="#">
                            <img src="<%=banner[i].picSrc %>" width="720" height="500" >
                            <span class="slider-title">
                                <em>
<%=banner[i].title %>
                                    
                                </em>
<em>--->
<%=banner[i].speaker %>
</em>
                            </span>
                        </a>
                    </li>
<% } %>
                                       
                                       
                </ul>
            </div>
            <div class="progress"></div>

</div>

AIYOUWAI哈

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
node从数据库中拿数据的轮播图

node从数据库中拿到数据，然后在html中写入。需要三个工具：atom编译器（也可以是其它的，只要支持ejs文件）；Navicat(将数据库写入) ，编写html的用的习惯的工具。第一步：用div+css+jquery写好一个轮播图，图片和图片下边的注释都写死的那种；第二步：banner（表名）：数据字典：ID int 不为空主键 ...
复制链接

扫一扫