node--2016-08-09

本文介绍如何使用Node.js创建一个简单的静态资源服务器,包括HTTP请求响应处理、路由获取及读取静态文件等内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

回顾

  • HTTP协议
  • Request对象
  • Reponse对象
  • Nodejs创建服务器模块

Nodejs创建一个静态资源服务器

  • http模块 const http = require(‘http’);
  • url模块 const url = require(‘url’);
  • fs模块 const fs = require(‘fs’);

创建一个服务器

var port = 8000;
var ip = '127.0.0.1';
var http = require('http); 

var server = http.createServer(function(request,reponse){

		reponse.writeHead(200,{'Content-Type':'text/plain'});
		reponse.write('hellow Nodejs');
		reponse.end();
		
}).listen(port,ip);

实现路由,获取URL

var url = require('url');
var pathname = url.parse(request.url).pathname;

var server = http.createServer(function(request,reponse){

	var pathname = url.parse(request.url).pathname;
	reponse.write(pathname);
	reponse.end(); 
	
});

读取静态文件

var fs = require('fs');
var path = require('path'); 
var sever = http.createServer(function(request,reponse){
var pathname = url.parse(request.url)pathname;
var realPath = 'assets' + pathname; 

path.exists(realPath,function(exists){
		if(!esists){
			reponse.write(404,{'Content-Type':'texty/plain'});
			reponse.write('This request url' + pathname + 'not exists in server');
			reponse.end();
		}else{
		
			fs.readFile(realPath, "binary", function(err, file) {
            if (err) {
                response.writeHead(500, {‘Content-Type‘: ‘text/plain‘});
                response.end(err); 
                
            } else {
                response.writeHead(200, {‘Content-Type‘: ‘text/html‘});
                response.write(file, "binary");
                response.end();
		}
	});
});
### 实现 el-table 父子嵌套表格 在 `el-table` 中实现父子嵌套表格主要依赖于特定的数据结构以及配置项的支持。为了展示树形结构中的数据,需确保每一行记录不仅包含自身的字段信息还应具备表示层级关系的关键属性。 对于每一个节点而言,在其对象内部应当存在一个名为 `children` 的数组来存储该节点下的所有子级条目[^1]: ```json { "id": 1, "name": "Parent Node", "children": [ { "id": 2, "name": "Child Node" } ] } ``` 当构建具有层次感的表格视图时,除了定义好上述提到的数据模型外,还需要设置 `el-table-column` 下的相关参数以适应这种特殊的布局需求。特别是要启用 `show-overflow-tooltip="true"` 属性以便更好地处理过长文字溢出的情况;另外通过自定义列模板可以进一步增强用户体验,比如利用作用域插槽(scope slot)来自由控制单元格内的显示逻辑[^2]。 针对更复杂的交互场景——如复选框的选择操作,则可以通过监听事件并结合计算属性或者方法来进行状态管理。具体来说就是在父组件层面维护一份被选中项目的集合,并根据用户的实际行为更新这份列表的内容。与此同时,还需注意保持各层之间的关联性,即当选定某个上级单位时自动将其下辖的所有成员纳入到当前批次之中反之亦然[^3]。 #### 完整示例代码如下所示: ```html <template> <div class="app-container"> <!-- 表头全选 --> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <!-- 数据表单 --> <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" row-key="id" default-expand-all border lazy load="load"> <!-- 复选框 --> <el-table-column type="selection" width="55"></el-table-column> <!-- 名称 --> <el-table-column prop="date" label="日期" sortable></el-table-column> <!-- 更多其他列 --> </el-table> </div> </template> <script setup lang="ts"> import { reactive } from 'vue'; const tableData = reactive([ { id: 1, date: '2016-05-02', name: 'Tom', children: [ { id: 2, date: '2017-08-09', name: 'Jerry' }, // More child nodes... ], }, ]); // ...其余业务逻辑函数... </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值