Node.js搭建服务器-实例-part3

昨天我们进行了服务器的基本搭建,今天我们来连接数据库,从数据库中取数据,然后在页面进行展示,这里我们一mysql数据库为例,实现数据交互

4.3连接数据库

连接数据库,准备工作:

1.安装数据库模型

安装模块是,如果遇到周六日,可能官方网站维护,无法下载,可以用淘宝镜像下载所需要的模块

npm install mysql	//安装mysql第三方模块

//像下面这样去安装第三方模块
npm install mysql --registry=https://registry.npm.taobao.org
npm install art-template --registry=https://registry.npm.taobao.org

2.在控制器中引入 model.js

ps:同时引入模板,一会用于页面显示
controller.js中

//require model.js
var model = require('./model.js')

//require art-template
var template = require('art-template');

3.在数据库中建表

建库

create database blog

建表

CREATE TABLE `haizei` (
  `id` int(11) NOT NULL PRIMARY KEY auto_increment,
  `name` varchar(255) NOT NULL,
  `skill` varchar(255) NOT NULL,
  `groups` varchar(255) NOT NULL,
  `img` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

插入数据

INSERT INTO `haizei` (`id`, `name`, `skill`, `groups`, `img`) VALUES
(1, '路飞', '超人系橡胶果实', '草帽海贼团', ''),
(2, '乔巴', '动物系人人果实', '草帽海贼团', ''),
(3, '罗宾', '超人系花花果实', '草帽海贼团', ''),
(4, '红发-香克斯', '霸王色霸气、武装色霸气', '红发海贼团', ''),
(5, '鹰眼-米霍克', '黑刀.夜', '王下七武海', ''),
(6, '女帝-波雅', '超人系甜甜果实', '九蛇海贼团、王下七武海', '');

4.连接数据库

model.js 中

//require mysql 
var mysql = require('mysql');
var connection =mysql.createConnection({
    host:'127.0.0.1',
    port:'3306',
    user:'root',
    password:'root',
    database:'blog'
});
connection.connect();
module.exports={
    wh:'',
    table:'haizei',
    select:function(req,callback){
        var sql = `select * from ${this.table}`;
        connection.query(sql,function(err,results,fields){
            console.log(results);
            callback(results);
        });
    }
}

此时.我们在浏览器请求 127.0.0.1:8000 可以在控制台看到查询数据库得到的数据

Node.js搭建服务器-实例-part3
我们可以在控制台终端看到查询信息

那么,接下来就是我们如何将查询到的数据,显示到html页面

5.view层展示

当然,拿到数据我们有两种处理方式,将数据发给前端页面,进行遍历输出.
也可以在后端整合,让后将整合好的页面返回给浏览器.
这里我们将介绍使用模板引擎 art-template 去整合数据

5.1 制作前台页面–使用bootstrap模板

引入bootstrap模块

npm install bootstrap --registry=https://registry.npm.taobao.org

Node.js搭建服务器-实例-part3
新建public文件夹
在public下新建css文件夹
将bootstrap 移动到

新建views文件夹
新建 index.html页面
代码如下:

<head>
    <meta charset="UTF-8">
    <title>Hero - Admin</title>
    <link rel="stylesheet" href="./public/css/bootstrap.css">
    <style>
        .hero-list img {
            width: 50px;
        }
    </style>
</head>

<body>
    <header>
        <div class="page-header container">
            <h1>海贼王 <small>角色管理器</small></h1>
        </div>
    </header>
    <div class="container hero-list">
        <a class="btn btn-success pull-right" href="/add">添加英雄</a>
        <table class="table table-hover">
            <thead>
                <th>编号</th>
                <th>名称</th>
                <th>能力</th>
                <th>团体</th>
                <th>图片</th>
                <th>操作</th>
            </thead>
            <tbody id="tbody">
                {{each data}}
                <tr>
                    <td>{{$value.id}}</td>
                    <td>{{$value.name}}</td>
                    <td>{{$value.skill}}</td>
                    <td>{{$value.groups}}</td>
                    <td><img src="{{$value.img}}" alt="#"></td>
                    <td>
                        <a href="/getone?id={{$value.id}}">查看</a>
                        <a href="/editshow?id={{$value.id}}">修改</a>
                        <a href="/delete?id={{$value.id}}">删除</a>
                    </td>
                </tr>
                {{/each}}
            </tbody>
        </table>
    </div>
</body>

</html>

5.2 引入 art-template 模板

 npm install art-template --registry=https://registry.npm.taobao.org

5.3 数据整合,展示页面

Node.js搭建服务器-实例-part3

5.4 路由中增加静态资源获取请求响应

router.js中
Node.js搭建服务器-实例-part3

一个简单的网站请求显示,就完成了.实现了从请求—>服务器—>路由—>控制器—>数据模型—>页面展示
就完成了.

下面附上所有代码, 分享快乐~
http.js

// require module of http;
var http = require('http');

//create a server
var server = http.createServer();

//require router.js
var router = require('./router.js')

//connect to server
router(server);

//add an event listen
server.listen(8000,function(){
    console.log('welcome to the world of node');
});

router.js

//require controller
var controller = require('./controller');

//require fs
var fs = require('fs');
//exports function
module.exports = function (server) {

    //catch a request event
    server.on('request', function (request, response) {

        //get the url info
        var urls = request.url;

        //compare the request info
        if (urls == '/') {


            //call the method of controller
            controller.getAll(request, function (data) {

                //send a message back to browser
                response.end(data);
            });

        } else {
            //get resource file
            fs.readFile('.' + urls, function (error, data) {

                //send resource back to browser
                response.end(data);
            });
        }
    });
};

controller.js

//require model.js
var model = require('./model.js')

//require art-template
var template = require('art-template');
//set root
template.defaults.root='./';

//exports controller
module.exports = {
    /**
     * * getAll info
     * @param {*} req  request object
     * @param {*} callback  callback()
     */
    getAll: function getAll(req, callback) {

        //mock data
        // var data = 'come from controller';
        model.select(req,function(mysql_data){
        
        //integrate template 
        var html = template('./views/index.html',{data:mysql_data});
            //send html back to browser
            callback(html);
        });
    }
}

model.js

//require mysql 
var mysql = require('mysql');

//create a connection object
var connection = mysql.createConnection({
    host: '127.0.0.1',
    port: '3306',
    user: 'root',
    password: 'root',
    database: 'blog'
});
//connect to database
connection.connect();

//exports  object
module.exports = {
    //table name
    table: 'haizei',
    //method of select
    select: function (req, callback) {
        var sql = `select * from ${this.table}`;
        //excute sql sentence
        connection.query(sql, function (err, results, fields) {
            //check the results
            // console.log(results);

            //back data to controller
            callback(results);
        });
    }
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hero - Admin</title>
    <link rel="stylesheet" href="public/css/bootstrap.css">
    <style>
        .hero-list img {
            width: 50px;
        }
    </style>
</head>

<body>
    <header>
        <div class="page-header container">
            <h1>海贼王 <small>角色管理器</small></h1>
        </div>
    </header>
    <div class="container hero-list">
        <a class="btn btn-success pull-right" href="/add">添加英雄</a>
        <table class="table table-hover">
            <thead>
                <th>编号</th>
                <th>名称</th>
                <th>能力</th>
                <th>团体</th>
                <th>图片</th>
                <th>操作</th>
            </thead>
            <tbody id="tbody">
                {{each data}}
                <tr>
                    <td>{{$value.id}}</td>
                    <td>{{$value.name}}</td>
                    <td>{{$value.skill}}</td>
                    <td>{{$value.groups}}</td>
                    <td><img src="{{$value.img}}" alt="#"></td>
                    <td>
                        <a href="/getone?id={{$value.id}}">查看</a>
                        <a href="/editshow?id={{$value.id}}">修改</a>
                        <a href="/delete?id={{$value.id}}">删除</a>
                    </td>
                </tr>
                {{/each}}
            </tbody>
        </table>
    </div>
</body>
</html>

可能有些地方说的不够详细,不懂的可以留言,欢迎交流.
分享是一种快乐,传播快乐是一种美德,分享知识是一件令人愉快的事情.

欢迎加微信429534533 沟通交流,共同成长.

晚安了~

Node.js搭建服务器-实例-part3

4.3连接数据库

1.安装数据库模型

2.在控制器中引入 model.js

3.在数据库中建表

4.连接数据库

5.view层展示

5.1 制作前台页面–使用bootstrap模板

5.2 引入 art-template 模板

5.3 数据整合,展示页面

5.4 路由中增加静态资源获取请求响应

相关推荐