博客
关于我
node.js模拟qq漂流瓶
阅读量:794 次
发布时间:2023-02-16

本文共 1576 字,大约阅读时间需要 5 分钟。

 

 (文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com)

 

node.js模拟简易漂流瓶,页面有扔瓶子和捡瓶子的功能,一个瓶子只能被捡到一次,阅读完就置状态位,如果没有瓶子,提示无瓶子,等等,功能很丰富哦,let‘s   go

(1)安装python,node,由于这是很久之前装的了,此次不再重复。

(2)下载sqlite3数据库,网址为http://www.sqlite.org/download.html,

选择:Precompiled Binaries for Windows,下载完别忘记把这个文件放在c盘的windows下的sysytem32文件夹里。

(3)新建项目文件夹,打开终端,进入文件夹目录,先安装一下必要的插件,命令如下,npm install cryptojs,npm install sqlite3

开始建数据库,sqlite3  bottle.db就可以建新的bottle数据库啦,然后建表

CREATE TABLE message(
id Integer primary key autoincrement,
nick_name varchar(20),
content varchar(4096),
is_read boolean,
create_time datetime,
update_time datetime
);

整个项目的代码就是html文件和js文件组成的,非常和谐的,

前端html建立XMLHttpRequest,在onreadystatechange这个回调函数里判断状态,用的是最原始的ajax异步调用,get方式,这决定了漂流瓶不能内容太多,url传值有数量限制,最大是4k。

核心代码如下:都是毫无悬念的东西,原生的,求大神指点框架版本的怎么破。

xhr.onreadystatechange=function(){

if(xhr.readyState == 4){
if(xhr.status == 200){
alert(xhr.responseText);
var returnValue = JSON.parse(xhr.responseText);
alert(returnValue.result);
}
else if(xhr.status == 500){
alert("出错了");
}
}
}
xhr.open('get','/send?content='+encodeURIComponent(c)+"&name="+encodeURIComponent(nickName),true);
xhr.send(null);

 

server部分核心代码:

var url = require("url")        类似的方法进行请求

var db = new sqlite.Database("bottle.db");  把咱们建好的数据库用起来

http.createServer(........).listen(8080); 监听端口8080,

最后别忘记退出的时候关闭数据库连接

process.on("SIGINT",function(){
console.log("program will exit.");
db.close();
process.exit(1);
})

好叻,把node跑起来吧,在终端输入node  bottle_server.js

这个就是咱们刚写好的js的名字,现在可以在浏览器中输入localhost:8080

重定向到了html页面,现在就可以扔瓶子捞瓶子了,哈哈,很有趣啊,虽然捞到的都是自己扔的瓶子

 

转载于:https://www.cnblogs.com/iwangzheng/p/3578008.html

你可能感兴趣的文章
Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流
查看>>
nginx-vts + prometheus 监控nginx
查看>>
nginx: [emerg] getpwnam(“www”) failed 错误处理方法
查看>>
Nginx、HAProxy、LVS
查看>>
Nginx下配置codeigniter框架方法
查看>>
Nginx之二:nginx.conf简单配置(参数详解)
查看>>
Nginx代理websocket配置(解决websocket异常断开连接tcp连接不断问题)
查看>>
Nginx代理初探
查看>>
nginx代理地图服务--离线部署地图服务(地图数据篇.4)
查看>>
Nginx代理外网映射
查看>>
Nginx代理模式下 log-format 获取客户端真实IP
查看>>
Nginx代理解决跨域问题(导致图片只能预览不能下载)
查看>>
Nginx代理配置详解
查看>>
Nginx代理静态资源(gis瓦片图片)实现非固定ip的url适配网络环境映射ip下的资源请求解决方案
查看>>
Nginx代理静态资源(gis瓦片图片)实现非固定ip的url适配网络环境映射ip下的资源请求解决方案
查看>>
nginx反向代理
查看>>
nginx反向代理、文件批量改名及统计ip访问量等精髓总结
查看>>
Nginx反向代理与正向代理配置
查看>>
Nginx反向代理及负载均衡实现过程部署
查看>>
Nginx反向代理是什么意思?如何配置Nginx反向代理?
查看>>