Flutter后端服务搭建

使用dart搭建一个返回数据的服务器

开发工具使用的是vscode,手动编写dart文件和配置文件pubspec.yaml,最大程度上减少外部代码的依赖。

pubspec.yaml

name: flutter_web_app_server
description: A new Flutter application.

dependencies:
  http_server: ^0.9.8+3

手动编写的测试数据data.dart

var  products = {
  "items":[
    {
    "name":"算法第四版",
    "auth":"Robert Sedgewick & Kevin Wayne",
    "pice":"99",
    "imageUrl":"asset/images/01.png"
    },
    {
    "name":"Android源码设计模式",
    "auth":"何红辉,关爱民",
    "pice":"99",
    "imageUrl":"asset/images/01.png"
    },
    {
    "name":"Android进阶之光",
    "auth":"刘望舒",
    "pice":"89",
    "imageUrl":"asset/images/01.png"
    },
    {
    "name":"Android开发艺术探索",
    "auth":"任玉刚",
    "pice":"79",
    "imageUrl":"asset/images/01.png"
    },

    {
    "name":"深入理解java虚拟机",
    "auth":"周志明",
    "pice":"79",
    "imageUrl":"asset/images/01.png"
    },
    {
    "name":"Android进阶解密",
    "auth":"刘望舒",
    "pice":"99",
    "imageUrl":"asset/images/01.png"
    },
    {
    "name":"android软件安全权威指南",
    "auth":"丰强生",
    "pice":"95",
    "imageUrl":"asset/images/01.png"
    },
    {
    "name":"算法第四版",
    "auth":"Robert Sedgewick & Kevin Wayne",
    "pice":"99",
    "imageUrl":"asset/images/01.png"
    },
    {
    "name":"算法第四版",
    "auth":"Robert Sedgewick & Kevin Wayne",
    "pice":"99",
    "imageUrl":"asset/images/01.png"
    },
    {
    "name":"算法第四版",
    "auth":"Robert Sedgewick & Kevin Wayne",
    "pice":"99",
    "imageUrl":"asset/images/01.png"
    },
    {
    "name":"算法第四版",
    "auth":"Robert Sedgewick & Kevin Wayne",
    "pice":"99",
    "imageUrl":"asset/images/01.png"
    },

  ] 
};

var news = {
  "items":[
    {"title":"任正非:不需要美国 华为已经能自己解决供应问题","autho":"新京报","content":"日前,华为心声社区发布了一篇任正非与德国媒体的圆桌纪要。在这场圆桌上,任正非与德国媒体谈到了华为目前的处境、5G布局,以及孟晚舟近况等。"},
    {"title":"港姐嫁富商住400平别墅 自己种菜下厨照顾3女儿","autho":"易起看家","content":"他来了!他带着豪宅和精彩故事来了!”周一搬砖的苦闷日子,家居君为大家准备了轻松的豪宅之旅,希望能给你的社畜生活带来一丝快乐。"},
    {"title":"2019第十届互联网牛耳人人盛典开幕在即","autho":"网易传媒","content":"12月26日,2019第十届互联网牛耳人人盛典将在北京M空间隆重开幕。本届盛典以“创行智远”为主题,将在记录2019年中国互联网发展历程的同时,为过去一年中能代表互联网行业发展的伟大企业与优秀创业者献上桂冠。"},
    {"title":"2019第十届互联网牛耳人人盛典开幕在即","autho":"网易传媒","content":"12月26日,2019第十届互联网牛耳人人盛典将在北京M空间隆重开幕。本届盛典以“创行智远”为主题,将在记录2019年中国互联网发展历程的同时,为过去一年中能代表互联网行业发展的伟大企业与优秀创业者献上桂冠。"},
    {"title":"2019第十届互联网牛耳人人盛典开幕在即","autho":"网易传媒","content":"12月26日,2019第十届互联网牛耳人人盛典将在北京M空间隆重开幕。本届盛典以“创行智远”为主题,将在记录2019年中国互联网发展历程的同时,为过去一年中能代表互联网行业发展的伟大企业与优秀创业者献上桂冠。"},
    {"title":"2019第十届互联网牛耳人人盛典开幕在即","autho":"网易传媒","content":"12月26日,2019第十届互联网牛耳人人盛典将在北京M空间隆重开幕。本届盛典以“创行智远”为主题,将在记录2019年中国互联网发展历程的同时,为过去一年中能代表互联网行业发展的伟大企业与优秀创业者献上桂冠。"},
    {"title":"2019第十届互联网牛耳人人盛典开幕在即","autho":"网易传媒","content":"12月26日,2019第十届互联网牛耳人人盛典将在北京M空间隆重开幕。本届盛典以“创行智远”为主题,将在记录2019年中国互联网发展历程的同时,为过去一年中能代表互联网行业发展的伟大企业与优秀创业者献上桂冠。"},
    {"title":"2019第十届互联网牛耳人人盛典开幕在即","autho":"网易传媒","content":"12月26日,2019第十届互联网牛耳人人盛典将在北京M空间隆重开幕。本届盛典以“创行智远”为主题,将在记录2019年中国互联网发展历程的同时,为过去一年中能代表互联网行业发展的伟大企业与优秀创业者献上桂冠。"},
    {"title":"2019第十届互联网牛耳人人盛典开幕在即","autho":"网易传媒","content":"12月26日,2019第十届互联网牛耳人人盛典将在北京M空间隆重开幕。本届盛典以“创行智远”为主题,将在记录2019年中国互联网发展历程的同时,为过去一年中能代表互联网行业发展的伟大企业与优秀创业者献上桂冠。"},

   
   
    ]
};

main.dart 如下

import 'dart:convert';
import 'dart:io';
import 'data.dart';

main() async {
  var requestServer = await HttpServer.bind("192.168.31.120", 8080);
  print("http 服务启动起来");
  await for(HttpRequest request in requestServer){
    handleMessage(request);

  }
}

void handleMessage(HttpRequest request){
  try{
    if(request.method == 'GET'){
     handleGet(request);
    } else if(request.method == 'POST'){
      //TODO
    }

  }catch(e){
    print('出现了异常:$e');
  }
}

void handleGet(HttpRequest request){
     var action = request.uri.queryParameters["action"]; 
     if(action == 'getProducts'){
       print("获得产品数据");
       request.response
       ..statusCode=HttpStatus.ok
       ..write(json.encode(products))
       ..close();
     }
     if(action == "getNews"){
      print("获得新闻");
       request.response
       ..statusCode=HttpStatus.ok
       ..write(json.encode(news))
       ..close();
     }
}
void handlePost(HttpRequest request){
  
}

app访问数据方式如下。

            String url = 'http://192.168.31.120:8080/?action=getProducts';
            var res = await http.get(url);
            String str = res.body;
            var json = jsonDecode(str);
            print("转化后的json是$json");

 

这样在vscode中启动之后,就能在浏览器中访问http://192.168.31.120:8080/?action=getProducts就能访问数据了,注意这里的ip需要在代码中配置成自己电脑的ip,

需要在模拟器中才能够访问后台返回的数据,真机我反正没有连接成功。

值得注意的一点是vscode的配置文件lunch.json中需要配置一下启动的dart文件,因为默认生成的program配置,不是我们编写的启动文件。

你可能感兴趣的:(Flutter实战笔记)