手把手用NodeJs搭建一个简单服务

2017-04-12 本文已影响3179人诺奕

前言：最近研究axios做数据交互的时候用php写简单的接口，发现各种问题。所以就看了看node然后搭了一个简单的服务。
本文github地址，可直接下载整个项目。

一、安装环境

1. 安装node.js

可以某度搜索nodejs下载安装包或者访问我的百度网盘。将安装包下载好后，双击鼠标左键。然后一路开车即可。

2. 安装mysql数据库

可以某度搜索mysql下载安装包或者访问我的百度网盘。将安装包下载好后，双击鼠标左键。同样一路开车即可。但是有一点注意的就是设置数据库的帐号密码要记住。如果修改了端口那就更要记住了。谨记！谨记！！

二、编写服务模块（server）

说明：用到了node中的3个模块（服务模块、文件模块、和数据库模块）。
其中数据库模块属于第三方的，所以要用的话得先安装npm install mysql
思路：首先连接数据库，然后开启一个服务（以便可访问），监听一个端口（也就是定义个大门，就像自己要要有门一样）。随后根据request请求所带的参数。来进行不同处理。

var http=require('http');
var fs=require('fs');
var mysql=require('mysql');
var db=mysql.createConnection({  //连接mysql数据库
    host:'localhost',
    user: 'root',
    password: '123456',
    database:'datura'
}); 
var httpObj=http.createServer(function(req,res){
    console.log('谁访问过哪：'+req.url);//日志文件
    if(req.url.indexOf('getnews')!=-1){
        //从数据库拿数据
        console.log('进来了！');
        db.query('select * from news',function(err,data){
            if(!err){
                res.write(JSON.stringify(data));
                res.end();
            }
        });
    }else{
        fs.readFile('www'+req.url,function(err,data){
            //console.log('www'+req.url);
            if(!err){
                res.write(data);
                res.end();
            }else{
                res.write('404');
                res.end();
            }
        });
    }
});
httpObj.listen(8088);

二、编写展示页面（new.html）

思路：用ajax从后台请求数据，然后根据数据来“动态”生成相应数量的新闻列表（“li”）

<body>
    <div id="box">
        <h3>新闻</h3>
        <ul id="ul1">
        </ul>
    </div>
</body>
</html>
<script src="ajax.js" type="text/javascript"></script>
<script>
    window.onload = function () {
        var oUl = document.getElementById('ul1');
        ajax({
            url:'getnews',
            success: function (str) {
                //var jsonD = eval('(' + str + ')');
                var jsonD = JSON.parse(str);
                for (var i=0;i<jsonD.length;i++){
                    var oLi = document.createElement('li');
                    oLi.innerHTML = "<h4>"+ jsonD[i].title +"</h4><p>"+ jsonD[i].content +"</p>"
                    oUl.appendChild(oLi);
                }
            }
        });
    }
</script>

三、运行

a.手动开启服务（找到server所在文件夹，然后执行node server）
b.用webstrom关联node模块，然后打开server.js文件，右键单机run
2.在浏览器地址栏中输入http://localhost:8088/news.html；
说明：这里没有做重定向，所以地址栏中必须那么输入
在最终数据展示如下：