移动web前端学习-HTML常用特性部分-简单地用Node.js将代码放到本地服务器上

版权声明: https://blog.csdn.net/u011008834/article/details/79975771

软件安装:HBuilder+Chrome浏览器+Node.js

安装调试Node.js:

    安装:https://nodejs.org/en/

    验证:cmd—>node -v

在HBuilder里面创建一个移动App项目,命名项目测试包(随便你命名,之后记得在bin里面改)

然后打开文件所在目录,创建bin.js,代码如下

var http = require("http");
//获取mime模块
var mime = require("mime");
//文件模块
var fs = require('fs');
//引用其他js
var otherjs = require('./file/index');
//错误处理文件路径
var error = "./file/error404.html";
//主页面路径
var cx = "./测试项目包/index.html";
//函数Response,将HTML、css、js等文件响应给客户端
var Response = function(res, filePath) {
	console.log("filePath::"+filePath);
	//读取文件,读取完成后给客户端响应
	fs.readFile(filePath, function(err, data) {
		if(err) { //如果失败,就返回错误文件
			if(filePath != error) //如果失败的不是错误文件,才返回错误文件
				Response(res, error);
		} else {
			res.writeHead(200, {
				'Content-type': mime.getType(filePath)
			});
			res.end(data);
		}
	});
};
//404错误响应文件
var error404 = function(res) {
	Response(res, error);
};

//创建HTTP服务器
var server = http.createServer(function(req, res) {
	//解决跨域
	res.setHeader('Access-Control-Allow-Origin', '*');
	console.log("在控制台打印请求::" + decodeURIComponent(req.url)); //在控制台打印请求
	//判断URL,提供不同的路由
	if(req.url == '/') { //主页
		otherjs.index(res, cx, error);
	} else {
		if(req.url.indexOf("favicon.ico") == -1) {
			if(decodeURIComponent(req.url).indexOf("测试项目包") == -1) {
				if(req.url.indexOf("?") == -1) {
					console.log("自定义路径::" + req.url)
					Response(res, "./测试项目包" + req.url);
				} else {
					console.log("自定义路径::" + req.url.substring(0, req.url.indexOf("?")))
					Response(res, "./测试项目包" + req.url.substring(0, req.url.indexOf("?")));
				}

			} else {
				req.url = decodeURIComponent(req.url);
				if(req.url.indexOf("?") == -1) {
					console.log("非自定义路径" +  "."+req.url)
					Response(res, "." + req.url);
				} else {
					console.log("非自定义路径" +  "."+req.url.substring(0, req.url.indexOf("?")));
					Response(res, "."+req.url.substring(0, req.url.indexOf("?")));
				}
				
				
			}
		} else {
			Response(res, error);
		}
		//测试引用
		//console.log(otherjs.a)
	}
});

//启动服务器
server.listen('8888', function() {
	console.log("服务器启动");
});

文件夹中Shift+右键->此处打开命令行 —>

由于之后我们会使用httpserver和mime模块,所以要npm install http-server -g和npm install mime

同时在file中写一个index.js,用于测试模块引用,代码如下:

/**
 * Created by Administrator on 2015/3/26.
 */
//文件模块
var fs = require('fs');
var error;
var self = this;
exports.index = function(res,filePath,errorpage){
	if(errorpage){
		error = errorpage; 
	}	
   fs.readFile(filePath,function(err,data){
        if(err){                        //如果失败,就返回错误文件
        	console.log("err"+filePath);
            if(error && filePath != error)       //如果失败的不是错误文件,才返回错误文件
                exports.index(res,error);
        }else{
            res.writeHead(200,{              //响应客户端,将文件内容发回去
                'Content-type':"text/html"});
            res.end(data);
        }
    });
};
exports.a = 1;


然后node bin.js 查看是否有输出“服务器启动”;

然后创建file文件夹,里面随便写一个error404.html,这个页面将会在无服务的时候被离线缓存调用

接下来修改HBuilder中的工具->选项->HBuilder->外置服务器->新建

这时候在HBuilder中直接点击浏览器内运行就会走我们刚才打开那个服务的路线,也就是将代码放到了服务器上。

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页