一个TCP长连接设备管理后台工程(一)

qiuzhiqian · · 3168 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

概述

这个项目最初只是用来进行一个简单的协议测试用的,而且是一个纯粹的后端命令行工程。只是后面想着只有命令行,操作也不太方便,于是便有了添加一个ui的想法。

golang项目要配ui,最佳的还是配一个前端界面。而我本人并非前端出生,js功底太差,所以就想着用vue了。而且作为一个技术人员,ui界面设计也比较差,所以就打算找一个现成的ui框架来用,尝试了ant designer和iview后,决定使用iview来实现。

这个工程采用前后端分离设计:

后端采用golang语言,web框架采用gin,数据库采用postgresql,并使用xorm来简化数据库操作。使用jwt来进行权限控制。日志库采用logrus。

前端基本就是vue的生态环境,主体采用vue,ui采用iview,路由使用vur-router,状态管理使用vuex,js请求使用axios库。token存储在localstorage中,暂时没有存储到vuex中。由于前端需要绘制地图轨迹,所以用到了百度地图api和vue的地图库vue-baidu-map

因为页面为单页面,所以页面路由统一由前端来控制,后端只提供一个根路由用来加载静态数据,然后提供若干api供前端获取数据。

页面

目前页面只做了5个

  • 登录页面
  • 设备管理页面
  • 数据页面
  • 地图轨迹页面
  • 用户管理页面

5个页面均由路由控制,网页默认加载到登录页面。

预览

登录界面:

login

devices

monitor

map

users

项目地址


有疑问加站长微信联系(非本文作者)

本文来自:Segmentfault

感谢作者:qiuzhiqian

查看原文:一个TCP长连接设备管理后台工程(一)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

3168 次点击  
加入收藏 微博
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传