DartVM服务器开发（第三天）--pub管理器、返回html页面

• 目录
• 上一篇：DartVM服务器开发（第二天）--处理请求

上一篇文章中主要介绍了如何处理请求，获取请求方法，获取请求参数，获取请求头，今天我们学习一下添加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文件,输入下面内容

    
    



    
Hello World!

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 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服务器开发，请关注我，学习更多骚操作！

• 下一篇：DartVM服务器开发（第四天）--代码优化