DartVM服务器开发(第三天)

作者: rhyme_lph | 来源:发表于2018-08-22 22:03 被阅读136次

    上一篇文章中主要介绍了如何处理请求,获取请求方法,获取请求参数,获取请求头,今天我们学习一下添加pub包管理器、规划项目结构、使用第三方库、返回html页面、记录请求日志,那我们开始学习吧!

    1.添加pub包管理器

    右键点击项目名,New--File,命名为:pubspec.yaml
    并在文件里面输入下面内容
    (因为在使用外部包时,首先你应该是一个包,所以下面这个内容是描述你的包是什么)

    name: 你的web应用名
    descript: 你的web应用介绍
    

    在控制台输入命令pub get(使用该命令前提,需要在该教程的第一天配置好dart环境)
    下面这个是成功的例子,当刷新一下项目文件是会多了两个文件

    pub get success.png
    文件结构.png
    如果提示下面内容,说明你的环境变量还没有配置好!
    环境未好.png
    下面这部分内容,我会认为你已经运行pub get命令成功,未成功,或不知道怎么解决,可以私信给我,我会在空闲的时间帮你解决

    生成的内容解释

    • .packages
      • 当前项目内部包的路径,这个就相当于flutter里面写代码的地方,通常该文件生成出来以/lib为路径
        .packages内容.png
    • pubspec.lock
      • 当前项目外部包的路径,这个文件一般情况下不用编辑,通过pub get根据pubspec.yaml自动记录,一般记录使用外部包的名字、版本号等
        pubspec.lock内容.png

    2. 规划项目结构

    在.packages文件中已经说明,我们还需要添加一个lib文件夹到根目录
    一般情况下,我们会把main.dart文件移动到bin文件夹下,以显示该应用的主要dart文件

    项目结构.png
    如果你需要新建一个其它的dart文件,以引入到main文件,我们可以在lib文件下新建
    新建dart.png
    在main.dart中引入User.dart
    import 'package:ServerApp/entity/User.dart';
    

    3. 使用外部包

    我们今天使用http_server这个包,在pubspec.yaml文件下添加下面代码

    #....
    dependencies:
      http_server: ^0.9.8
    

    然后运行pub get命令,将这个包依赖下来

    可以看到成功依赖下来了.png
    再看看我们的pubspec.lock文件,发生了改变
    pubspec.lock文件.png
    使用http_server这个库,我们打开main.dart文件,输入下面代码
    import 'dart:io';
    import 'package:http_server/http_server.dart';
    //main() async {
    //...
    

    现在我们可以使用http_server这个包了

    4.返回html页面

    在返回html页面之前,我们需要准备一个html页面吧,在项目根目录下新建一个文件夹,以webApp为命名,说明这个是前端页面,然后新建一个index.html文件,输入下面内容

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我的第一个页面</title>
    </head>
    <body>
    
        <h1>Hello World!</h1>
    
    </body>
    </html>
    
    html文件目录.png

    那么,我们怎样将这个页面绑定到服务器上面呢,在刚才,我们依赖了http_server这个包,我们可以使用这个包去返回这个html页面

    main() async {
      VirtualDirectory staticFiles=new VirtualDirectory('.');
    
      var requestServer = await HttpServer.bind(InternetAddress.loopbackIPv6, 8080);
    
      print('监听 localhost地址,端口号为${requestServer.port}');
    
      //监听请求
      await for (HttpRequest request in requestServer) {
    
    //这个可以先不添加,下面介绍到
        writeHeaders(request);
    
        if(request.uri.toString()=='/'||request.uri.toString()=='/index.html'){
    //当我们收到请求根目录或者请求/index.html页面时,返回我们的刚刚写好的html页面
    //因为http_server这个包已经为我们处理好了,所以如果html不存在,也不会让服务器奔溃掉,而是返回未找到页面
          staticFiles.serveFile(new File('../webApp/index.html'), request);//这里是mac系统下的代码
    //    staticFiles.serveFile(new File('webApp/index.html'), request);//win系统使用该代码
        }else{
    //如果不是请求该页面,交回给get,post去处理
          handleMessage(request);
        }
    
      }
    }
    

    点击运行,我们来看一下请求结果吧


    请求成功.png
    请求成功.png

    4. 记录请求日志

    首先我们需要了解两个类

    • Directory 目录
    • File 文件
      我们来写一个根据昨天获取请求头,将请求头写入到文件中的操作吧!
    void writeHeaders(HttpRequest request){
      List<String> headers=[];
      request.headers.forEach((key, values) {
        String header='$key:';
        for (String value in values) {
          header +='$value , ';
        }
        headers.add(header.substring(0,header.length-2));
      });
      writeLog('${headers.join('\n')}');
    }
    
    void writeLog(String log) async{
      var date=DateTime.now();
      var year=date.year;
      var month=date.month;
      var day=date.day;
      var hour=date.hour;
      var minute=date.minute;
    
      //如果recursive为true,会创建命名目录及父级目录
      Directory directory=await new Directory('log/$year-$month-$day').create(recursive: true);
    
      File file = new File('${directory.path}/$hour:$minute.log');
      file.exists().then((isExists){
        String logAddTime='time:${date.toIso8601String()}\n$log';
         file.writeAsString(isExists?'\n\n$logAddTime':logAddTime, mode: FileMode.append);
      });
    }
    

    我们根据当前时间年月日,生成一个文件夹,根据小时跟分钟生成日志文件,这样就能记录下客户端的请求头了,我们还可以使用writeLog方法记录异常信息,下面就是请求时记录的文件

    日志文件.png
    大家有没有发现,如果我们没有使用../xx/xx的格式去生成文件,而是根据xx/xx去生成,会把文件生成在bin目录下,因为main.dart文件所在的位置就是当前文件的根路径(这里补充一下,该现象出现在mac系统中,如果是win系统xx/xx是在项目的根目录下)

    好了,今天学习了如何添加pub包管理器,规划项目结构,使用第三方库,返回html页面,记录请求日志,那么,大家都对dartVM服务器开发都有一个认识了吧,经验老道的程序员,可能在今天起就会尝试着自己去继续完善DartVM服务器项目,那么,我们明天见吧!

    如果想继续学习DartVM服务器开发,请关注我,学习更多骚操作!

    相关文章

      网友评论

      • 最爱小笼包:请问有这个项目的GitHub吗?昨天照着你这个做没问题,今天的无法显示index的页面,谢谢。还有就是我的log文件夹是生成在serverApp下面的,不是在bin下面,我也是完全照这你这个代码写的。
        rhyme_lph:嗯,确实有这个问题,如果是win系统,传入的文件相对路径以项目为根目录,mac系统以当前运行的main.dart的目录为根目录,所以在如果你是win系统,在传入index页面时,直接时webApp/index.html就可以了

      本文标题:DartVM服务器开发(第三天)

      本文链接:https://www.haomeiwen.com/subject/tftuiftx.html