相比大家已经看过我之前写的 嵌入式web服务器BOA+CGI+HTML+MySQL项目实战——Linux,因为当时也是刚接触,所以其实里面写的比较乱,现在打算直接上一个清爽点的小系统,以方便学习参考。(当然,这个小系统还有很多设计不合理,不安全的地方,所以大家就当个学习例程就好)
操作系统:CentOS7 (ubuntu的话 需要自行适配一下)
使用的技术和工具等:
- C
- HTML/CSS/JavaScript
- Ajax
- sqlite3
- CGI
- jQuery
- bootstrap
- echarts.js
cgi-bin 存放 .c .h
和编译好的 .cgi
文件
cloud 云端资源功能,存储云文件的文件夹
css 存放 .css
文件
file 存放 用户账号信息文件,数据库文件等
img 存放图片素材
js 存放 .js
文件
log 存放系统生成的 日志信息
session 存放用户登录生成的session_id
html文件置于根目录
应用资源管理系统 当时设计的主要功能对云服务器的应用资源(mysql、apache、gateone等)进行管理(开/关/重启);还能上传下载文件,当个简易云盘;当然基本的系统状态查看得有;然后就是基础的登录登出;日志管理;用户管理的功能。
默认用户名:admin 默认密码:123456
登录页面不填写会进行相应的前端提示,成功填写但密码或账号错误会提示相应错误信息。系统默认的初始用户名为admin,密码为123456。登录界面的效果如图5.2所示。登录流程如图5.3所示。
系统状态页面包含云服务器的基础信息以及CPU、内存、硬盘的占用情况。效果图如图5.4所示。
应用管理页面包含云服务器的应用,分别为MySQL、Apache等。对这些应用程序的开启/关闭/重启、运行状态、设置或关闭开机自启。此模块用户后期还可以DIY拓展,相应功能的基本代码流程大致类似、拓展十分方便。
云端资源页面进入后就会自动获取指定目录下的文件资源,并以表格的形式展示在页面上,页面提供了下载和删除的功能,另外还可以上传文件和搜索文件,可以算是比较齐全的资源管理模块了。效果图如图5.8所示。 这里的文件管理涉及到了Linux命令以及标准C语言的文件操作,文件名以json串的格式发回前端,JavaScript对json串进行相应的解析,为表格增加新的行。以下主要展示后端CGI程序的实现代码。
系统日志页面进入就可以获取所有的系统日志(如登录操作、登出操作、关闭开启重启相关的软件、上传了什么文件、删除了什么文件、修改账号和密码等),可以通过日历控件来检索对应时间的日志,方便相关问题的排查和记录、还能监控是否有不明人员进行了操作。可以在前面的代码中发现,相应的操作过后会对操作的类型、操作执行的时间还有相应的操作描述进行日志记录,这就是日志数据的来源。效果图如图5.9所示。 这里的日志查询涉及了Linux命令以及标准C语言的文件操作相关知识、当然还有必不可少的CGI,对应字段以json串的格式发回前端,JavaScript对收到的json串进行相应的解析,为前端的表格增加新的行。
用户管理页面进入可以看到修改用户名和修改密码两块内容,相互独立操作。修改用户名模块可以回显当前用户名信息,设计十分人性。取消按钮可以清空输入方便错误修改,效果图如图5.10所示。 用户信息修改同样也是文件操作,解析前端传来的数据,对数据进行校验后,将修改好的数据写入文件,实现信息的修改。
在之前的图中可以发现,这一版本系统的“退出系统”设置在右上角。实现session的清除和页面的跳转。
云服务器管理系统网站是基于Boa嵌入式WEB服务器,配合CGI公共网关接口结合C语言进行编写后端程序,配合jQuery和bootstrap前端框架实现前端优化,常见的B/S架构进行开发的。并结合网上的echarts.js插件制作饼图统计。
本项目搭建与云服务器,与以往的Boa服务器的常见用途不同,算是开拓新方向。当然本项目并不局限于云服务器,只要是Linux系统,都能够进行相应调整后移植。课题结束之后便会以开源项目的形式发布GitHub和码云上供大家学习和拓展。
应用管理模块因人而异,需要用户根据个人需求进行DIY设计,本人提供的几个例子也做为简单的参考,主要为了开拓用户的视野,发掘新功能。另外本系统的安全方面做的不是很充足,比如在登录页面的账号密码明文传输,在后续可进行相应的加密,如base64、MD5、RSA等,进一步加强系统安全。