app后端框架开发 一步一步开发一个完整的APP

　　一，概述

　　本篇介绍APP开发，APP开发使用谷歌的开发框架Flutter，Flutter支持跨平台运行，而且具有接近原生APP的性能，前不久阿里闲鱼也开源了一个Flutter的应用框架，总总迹象表明Flutter有可能成为开发APP的热门工具，笔者经过一段时间学习使用后，对Flutter越来越推崇。如需要APP源代码，请评论区回复邮箱地址。

　　二，APP功能

　　简单的日志APP:支持添加日志，查询历史日志功能。

　　三，效果

　　APP效果

　　四，步骤

　　1，创建APP框架

　　开发使用的ide为VS Code，VS Code环境配置不在这里介绍了，请自行百度。

　　使用VS Code创建一个空的Flutter应用，添加如下代码：

　　import 'package:flutter/material.dart';

　　void main() => runApp(MyApp());

　　class MyApp extends StatelessWidget {

　　// This widget is the root of your application.

　　@override

　　Widget build(BuildContext context) {

　　return MaterialApp(

　　title: '日志',

　　debugShowCheckedModeBanner: false,

　　theme: ThemeData(

　　primarySwatch: Colors.blue,

　　),

　　home: MyHomePage(),

　　);

　　}

　　}

　　以上代码创建了一个基本的APP框架，包括标题，主题，主页等信息。其中MyHomePage是主页的名称。

　　2，创建主页-显示日志列表

　　主页主要实现日志列表显示，流程图如下：

　　（１）MyHomePage页面结构

　　@override

　　Widget build(BuildContext context) {

　　return Scaffold(

　　appBar: AppBar(

　　title: Text(widget.title, style: TextStyle(fontSize: 18)),

　　actions:[

　　GestureDetector(

　　child: Icon(

　　Icons.add,

　　size: 35,

　　),

　　onTap: () {

　　Navigator.push(

　　context,

　　new MaterialPageRoute(builder: (context) => new NewLogPage()),

　　);

　　},

　　),

　　Container(

　　width: 20,

　　)

　　],

　　),

　　body: ListView(

　　children: GetLogList(),

　　),

　　);

　　（２）连接ＷebSocketServer

　　WebSocketUtils _webSocketUtils = new WebSocketUtils();

　　_webSocketUtils.Connect(OnConnected);

　　（3）连接后请求日志列表

　　var message = {"Method": "Log.GetList"};

　　_webSocketUtils.SendMessage(jsonEncode(message));

　　（4）解析日志列表信息

　　void DealMessage(dynamic data) {

　　print(data.toString());

　　dynamic message = jsonDecode(data);

　　String method = message["Method"];

　　if (method == "Log.GetList") {

　　dynamic result = message["Result"];

　　for (int i = 0; i < result.length; i++) {

　　Log log = new Log();

　　log.title = result[i]["Title"];

　　log.content = result[i]["Content"];

　　log.Date = result[i]["Date"];

　　_logList.add(log);

　　}

　　setState(() {});

　　}

　　}

　　（5）显示日志列表

　　ListwList = new List();

　　for (int i = 0; i < _logList.length; i++) {

　　Card card = Card(

　　color: Colors.white,

　　child: Column(

　　crossAxisAlignment: CrossAxisAlignment.start,

　　children:[

　　Row(

　　mainAxisAlignment: MainAxisAlignment.spaceAround,

　　children:[

　　Text(_logList[i].Date, style: TextStyle(fontSize: 12)),

　　Text(_logList[i].title, style: TextStyle(fontSize: 14))

　　],

　　),

　　Padding(

　　padding: EdgeInsets.all(10),

　　child: Text(_logList[i].content,

　　style: TextStyle(fontSize: 12)))

　　]));

　　wList.add(card);

　　}

　　3，创建新建日志页

　　（１）创建日志页面结构

　　Scaffold(

　　appBar: AppBar(title: Text("添加日志", style: TextStyle(fontSize: 18))),

　　body: new ListView(children:[

　　(new Padding(

　　padding: EdgeInsets.fromLTRB(20, 20, 20, 0),

　　child: new Column(

　　mainAxisSize: MainAxisSize.max,

　　mainAxisAlignment: MainAxisAlignment.center,

　　children: [

　　Row(children: [

　　Text("标题:", style: TextStyle(fontSize: 15.0)),

　　new Expanded(child: TextField(

　　onChanged: (String data) {

　　_title = data;

　　},

　　)),

　　]),

　　Row(children: [

　　Text(

　　"内容:",

　　style: TextStyle(fontSize: 15.0),

　　),

　　new Expanded(

　　child: TextField(

　　onChanged: (String data)

　　{

　　_content=data;

　　},

　　maxLines: 8,

　　))

　　]),

　　Row(children: [

　　new Expanded(

　　child: Padding(

　　padding: EdgeInsets.fromLTRB(80, 20, 80, 0),

　　child: RaisedButton(

　　onPressed: () {

　　CreateNewMeeting();

　　},

　　color: Colors.blue,

　　child: Text("添加",style:TextStyle(color:Colors.white)))))

　　]),

　　])))

　　]),

　　);

　　（2）发送添加日志请求，并跳回到主页

　　void CreateNewMeeting()

　　{

　　var data = {

　　"Method":"Log.Add",

　　"Title":_title,

　　"Content":_content

　　};

　　_webSocket.SendMessage(jsonEncode(data));

　　Navigator.of(context).push(new MaterialPageRoute(builder: (_) {

　　return new MyHomePage();

　　}));

　　}

　　至此APP整体的开发过程就介绍完了，如有更好的建议，请评论区回复，如需要源代码，请评论区回复邮箱地址。