前言:最近研究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;
说明:这里没有做重定向,所以地址栏中必须那么输入
在最终数据展示如下: