搭建一个网站服务器在互联网络上展示自己学习的知识而制作的网站主页,是很多学习计算机应用技术的萌新基本上都想达到的成就。
搭建网站有很多种方法,如:
安装《APACHE TOMCAT》软件就是搭建一个网站服务器环境,用来承载自己制作的网站主页就是搭建了一个网站。
安装《PHPStudy》软件,使用《PHPStudy》软件进行功能组件应用选择,也可以实现搭建网站的能力。
使用Windows操作系统自带的Internet信息服务软件(IIS)搭建网站也完全没有问题。
本文在这里推荐一个比较适合萌新学习网页制作开发(web前端)的一种搭建网站的方式。
那就是 node JS+express框架。实现简易的网站服务器的搭建。
接下来先是一波关于express框架的介绍。
Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。
使用 Express 可以快速地搭建一个完整功能的网站。
Express 框架核心特性:
可以设置中间件来响应 HTTP 请求。定义了路由表用于执行不同的 HTTP 请求动作。可以通过向模板传递参数来动态渲染 HTML 页面。
好,就这么简单介绍完了,那么就快速进入正题了。
首先,在自己使用的电脑系统中,安装node JS软件,为express框架提供运行环境。
已安装nodeJS的萌新可跳过这步哦。
使用浏览器(建议使用Google Chrome 谷歌浏览器)访问 nodejs.org 进入nodeJS的官网,如图:
打开百度APP看高清图片
接下来就是下载完成,双击安装包出现的安装界面了
1、
2、
3、
4、
5、
到这一步是比较关键的,仔细图上的说明哦。
6、
7、这里就是安装的过程了
8、
安装 node JS 扯了那么多了。接下来就是真真正正的主题了。
这里推荐萌新们用一款开发工具,其实也可以说是一个大号的文本编辑器,那就是
VS Code (全称 Visual Studio Code),微软公司的一款运用 Chromium 开源项目而制作的开源作品。方便萌新们入门和便捷使用哦,告诉你们一个秘密,很多搞IT开发的大佬也都喜欢这款工具哦,而我就是独特的,喜欢WebStorm,也超好用哦。
请看下图 ↓
Visual Studio Code ↓
到这里,准备开始写相应的代码,来,炫(zhuang)耀(bi)的时刻到了。
还有一部重要的工作哦,那就是安装express框架到expressTest文件夹内哦。
看下图 ↓
开始写代码,代码如下:
/**引入express框架,使用require函数传递形参 'express' 进行引入,其实在 let 的后面的名称可以自己定义即可*/
let express = require('express');
/**使用引入进来的express框架的变量名express来构建一个web服务器实例,名叫myWeb,也可自定义实例名称*/
let myWeb = new express();
/**往实例 myWeb 的调用函数use传入指定的网络路径和自己编写的响应中间件(其实就是一个函数),
* 这就是服务器的接口的编写方式*/
myWeb.use("/",function(req,res){
res.send("你好,这是我第一个使用node JS+express框架搭建的web服务器,YEAH!!");
res.end();
});
/**调用listen函数,传递好服务器要用的端口号,一般尽量不是电脑操作系统保留范围的端口号即可,8080就是这个
* 服务器的端口号
*/
myWeb.listen(8080,function(){
//这里可以输入服务器启动成功后要执行的代码,如启动是否成功等终端输出提示,一般这个回调函数可有可无
});
看图 ↓
接下来,就是在点击 终端 → 新终端,最后输入 node index.js 按 Enter(回车)键
↓
效果图
如需显示自己写好的网页作品,请先把使用use函数传入的路径只为"/"的中间件函数代码给注释掉,加入以下一行代码
myWeb.use("/",express.static("E:\\Guide\\rframework\\build"));
↓
效果图 ↓
由于篇幅有限,也就介绍到这里,有关express框架或其他的知识点。可以看菜鸟教程(https://www.runoob.com/)
上述展示的网页作品其实是笔者本人使用React框架制作的网站服务器模块的使用说明指南。该模块其实也是用了express框架加上http、https这两个框架组合而成的一个网站服务器模块,能更简单、快捷的使用。暂时未发布至Gitee和Github。
如有好的建议或话题,请在下方评论或私信,也可以关注笔者。