web前端效率提升-nginx+nodejs搭建本地生态

1.起因

  编写的项目是一个偏向于后台管理的web系统,使用了angular框架,在绑定数据的时候就依赖于后台的接口格式。

  以前是后台写好接口后,我在绑定,在这之前一些逻辑是没法做的,有时候后台接口给的慢,就要绑定假数据写死在js里面,

感觉非常被动,后台接口、服务器出个错什么的,我的进度就要被拖延,返回的格式不友好,或者返回的格式和传递的格式不一样的时候,我还要转格式。

人家拍拍屁股说接口写好了,回家休息,我就要加班来写代码。

2.解决思路

  返回格式和接受格式,已表单提交为例

  

  <input ng-model="data.type" type="text">
  <input ng-model="data.id" type="text">

  如果保存修改后的信息  后台的字段变为data_id  data_type,就系要做一下映射。我期望的自然是获取和提交的格式一样,这样就能最大程度发挥mvvc的特性

  第一步  由前端自己定义返回的格式和url,当然要找后端工程师确认

  第二步  用nodejs搭建本地服务器  

    将url转换为文件名,读取txt格式文件,没有则自动创建,用来存储要返回的数据。

  第三步  使用nginx做请求转发

    nginx用来做静态服务器,他可以通过配置拦截指定的url,并将请求l转发到指定地址,这样我们可以开两个端口,一个用来连接后台开发人员的服务器,一个用来

连接自己搭建的nodejs务器

3.具体步骤

  安装nginx、和使用nginx做请求转发请自行百度

  安装nodejs、ws模块(websocket请求,看官网的)、运行文件请自行百度

  nodejs执行脚本的代码

  

var http = require('http');

var url = require('url');

var readFile = require("fs");

http.createServer(function(request,response){

var params = url.parse(request.url,true).query;

var textName = request.url.slice(1,request.url.length).replace(/\//g,"_");//转换url为文件名

var path =  textName+".txt";

readFile.exists(path, function(exists){

        if(!exists){//不存在则创建

          readFile.writeFile(path,"{\r\n}",function(err) {

              if(err) {

                  return console.log(err);

              }

              responseJson(path,response);

          });

        }else{

        responseJson(path,response);

        }

    });

 

 

})

.listen(8888);

console.log("am-server is running");

function responseJson(path,response){

var data =JSON.parse(readFile.readFileSync(path,"utf-8"));//读取文件内容并转化为对象

response.writeHead(200,{

'Content-Type':"application/json"

})

var responseData = {

data,

code:200

}

response.end(JSON.stringify(responseData));

}

* 上述方案得到我们项目组后端工程师、项目负责人的大力支持。换个端口就能得到数据,测试、开发不依赖后台。

 var http = require('http');
var url = require('url');
var readFile = require("fs");
http.createServer(function(request,response){
var params = url.parse(request.url,true).query;
var textName = request.url.slice(1,request.url.length).replace(/\//g,"_");
var path =  textName+".txt";
console.log(path)
readFile.exists(path, function(exists){
        if(!exists){
          readFile.writeFile(path,"{\r\n}",function(err) {
              if(err) {
                  return console.log(err);
              }
              responseJson(path,response);
          });
        }else{
         responseJson(path,response);
        }
    });


})
.listen(8888);
console.log("am-server is running");
function responseJson(path,response){
var data =JSON.parse(readFile.readFileSync(path,"utf-8"));
response.writeHead(200,{
'Content-Type':"application/json"
})
var responseData = {
data,
code:200
}
response.end(JSON.stringify(responseData));
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Nginx是一个高性能的开源Web服务器,同时也可以用作反向代理服务器、负载均衡器和流媒体服务器。Nginx的Rtmp-Module是一个第三方模块,它为Nginx服务器添加了RTMP(Real-Time Messaging Protocol)支持,使其可以充当一个流媒体服务器。FFmpeg是一个跨平台的音视频处理工具,它可以用来进行多媒体文件的转码、编解码、录制和流媒体传输等操作。 引用中提到了使用Nginx Nginx-Rtmp-Module Ffmpeg搭建流媒体服务器的方法。具体配置可以查看conf/nginx.conf文件。首先需要解压文件,然后运行nginx_start.bat文件来启动Nginx服务器。这样就可以使用Nginx服务器提供的RTMP服务,通过FFmpeg推送一个RTMP流到Nginx,然后客户端可以通过访问Nginx来收看实时视频流。还可以使用HLS(HTTP Live Streaming)协议,通过HTTP协议来访问Nginx服务器并收看视频流,但是FFmpeg推送流仍然是RTMP的。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [nginx+nginx-rtmp-module+ffmpeg搭建流媒体服务器服务器](https://blog.csdn.net/sinat_16643223/article/details/115108327)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [ffmpeg+nginx+nginx-rtmp-module搭建个人直播平台](https://download.csdn.net/download/qq_29114677/13012815)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值