一、引子

近日学习了Flutter开发APP的技术，原来一直做后端，所以现在可以独力做一个包括前，后端的APP，这样可以把这些技术做一个串联。

二、APP功能概述

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

三、所用技术

前端：Flutter。开发工具：VS Code。运行环境：Android。

后端：C#，WebSocket，mysql。开发工具：VS Studio 2017。运行环境：windows。

四、效果

APP最终效果

五、开发步骤

1，数据库设计

2，后端服务开发

3，前端APP开发

六、数据库设计

数据库使用mysql，只需简单创建一个表即可。

包括以下字段：id（int，自增），date（DateTime，日志的时间），title（varchar，标题)，

content（varchar，内容）。

1，创建数据库：数据库名DayLog，字符集gb2312，确定。

创建数据库

2，创建数据表，表名daylog。

创建数据表

到这里数据库就创建完成了，上述步骤比较简略，如有疑问，请在评论中回复。

七、后端服务开发

1，创建一个控制台应用程序，名称为websockerServerExample。

创建项目

2，从NuGet添加WebsocketSharp库引用。

添加Websocket引用

3，从NuGet添加WebsocketSharp库引用。

添加json库引用

4，编写webSocket服务启动代码

复制
/创建websocket服务
var server = new WebSocketServer("ws://192.168.1.19:7181");
//添加服务处理
server.AddWebSocketService<Log>( "/log" );
//启动
server.Start();
Console.WriteLine("WebSocket启动成功!");
while(true)
{
}

5，编写日志处理程序

复制
public class Log : WebSocketBehavior
{
    protected override void OnMessage(MessageEventArgs e)
    {
    //解析json字符串 
        dynamic obj = JsonConvert.DeserializeObject(e.Data);
        String method = obj.Method;
    //连接mysql 
        String connectStr = $"Server=127.0.0.1;Port=3306;" +
            $"User=root;Database=daylog;Password=123456;Min Pool Size=100;" +
            $"Pooling=false;SslMode=none;Charset=utf8;Allow User Variables = True";
        DayLog log = new DayLog()
        {
            ConnectionString = connectStr,
        };
        dynamic res=new ReturnObj();
        if(method=="Log.Add") //处理添加日志请求
        {
            String title = obj.Title;
            String content = obj.Content;
            dynamic r=log.Add(title, content);
            res.Result = r;
            Send(JsonConvert.SerializeObject(res));
        }
        else if (method == "Log.GetList") //处理获取日志列表请求
        {
            dynamic r = log.GetList();
            res.Result = r;
            res.Method = "Log.GetList";
            Send(JsonConvert.SerializeObject(res));
        }
    }
}

6，编写数据库交互代码

复制
//添加日志
public dynamic Add(string title,string content)
{
    if(title=="")
        return false;
    if (content == "")
        return false;
    String sql=" insert into DayLog(title,content,date)"+
    " values('"+title+"','"+content+"','"+DateTime.Now.ToString("yyyyMMddHHmmss")+"')";
    var table = MysqlHelper.ExecuteReader(sql, ConnectionString);
    if (table.RecordsAffected > 0)
    {
        table.Close();
        return true;
    }
    table.Close();
    return false;
}
/// <summary>
/// 获得日志列表
/// </summary>
/// <returns></returns>
public dynamic GetList()
{
    String sql="select * from DayLog order by date desc";
    var table = MysqlHelper.ExecuteReader(sql, ConnectionString);
    List<dynamic> list = new List<dynamic>();
    while (table.Read())
    {
        list.Add(new
        {
            Id=table.GetInt32(table.GetOrdinal("id")),
            Title = table["title"].ToString(),
            Content = table["content"].ToString(),
            Date = table["date"].ToString(),
        }) ;
    }
    table.Close();
    return list;
}

6，至此后端服务程序就可以正常启动了。App的开发过程将在下一篇文章中介绍，请关注。有任何疑问请在评论区回复！如需源码，请在评论区填写邮箱地址。

下篇地址:

https://www.toutiao.com/i6732366510750171656/