一、个人简介
本人是机械工程专业研一在读学生,由于负责项目需要搭建一款软件信息平台,涉及到用户硬件设备的数据本地存储和数据上云,需要一款云服务器用于搭建完整稳定的数据流和系统服务。通过多方调研查找资料,选择阿里云ECS服务器用于搭建项目的云端环境,看到阿里云的飞天加速计划·高校学生在家实践活动,可以免费申领一段时间的云服务器使用权,本着学习的心态申领了一台,并使用了十天的时长,收获很大,在此做分享记录。
二、使用攻略
2.1申领方法:进入阿里云开发者社区,完成学生认证即可初次领用两周的ECS实例
2.2 使用方法:进入阿里云服务器管理控制台,我选择下载了Alibaba Cloud Client客户端,以便更方便的操作云服务器实例
成功添加服务器后,我进入了服务器安全组规则配置页面,因为项目需要在云服务器端安装MySQL、tomcat等服务,我在云服务器安全组入方向规则中添加了3306、8080两个端口.
随后进入云端服务器安装了MySQL服务,在本地电脑上使用navicat软件成功连接了云服务器的MySQL数据库,并通过本人开发的安卓APP与数据库进行数据通信,实现了较为稳定的数据流
我还在云服务器上安装了tomcat服务,并在本地的IDEA中将springmvc项目通过war包的形式打包上传到云服务器中的tomcat进行部署,由于项目运用到websocket服务实现服务器与客户端的数据交流,在通过war包部署时遇到了问题,无法在服务器上成功激活websocket服务,经过排查,重新编写了项目的xml配置方式,重新定义握手接口和拦截器,最终实现了基于websocket的跨局域网数据通信功能。
最终将war包安装在tomcat的webapps下,云服务器提供了公网ip,实现了公网访问我的javaweb项目。
三、 收获总结
在十天左右的使用时间里,我充分运用了云服务器的基础功能,为项目部署了云端服务环境,成功搭建出了一套“边云协同”系统框架。经过近段时间的摸索,愈发体会到阿里云服务器的功能强大、操作便利,能够为项目开发带来最大效能,收获颇丰。接下来的时间希望能够再次申领2个月的使用时长,以更好更深入的学习阿里云服务器,并为今后实现完善的软件系统、应用上线做好准备。
四、个人作品截图
采用websocket协议实现数据实时通讯,ajax轮询请求后台json数据并实现前端显示的部分代码:
//将配置项设置给echarts实例对象,使用刚指定的配置项和数据显示图表。mychart.setOption(option); functionshowECharts (userID){ //清空用户信息界面if (search!=null){ window.clearInterval(search); mychart.clear(); } //新建用户轮询search=window.setInterval(function (){ varch1= [] //Y坐标值varTM= []; // x坐标值:时间console.log(userID) console.log(user_json) // mychart.showLoading({ text: "图表数据正在努力加载..." });// 选择用户轮询if (userID=="id-wuzeji") { varuser="user1"; }elseif (userID=="id-yangrenpeng"){ varuser="user2"; } $.ajax({ type : "post", async : false, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)url: "/json/"+user,//todo:把这里的user1换成user变量// data : JSON.stringify(user_json),error:function (){ console.log("shibai") }, success:function (data){ if (data==null) { mychart.showLoading({ text: "未获取到数据,请选择正确的时间..." }); } varinfo=JSON.parse(data); if (data.length>1600){ varstart=data.length-800varend=data.length-1 }else { start=1end=data.length-1 } console.log(info); for (vari=0; i<info.ch1.length; i++) { TM.push(i); ch1.push(info.ch1[i]); } mychart.hideLoading(); //隐藏加载动画mychart.setOption({ dataZoom : [ { type: 'slider', startValue: start, endValue:end }, { type: 'inside' }, ], tooltip: { trigger: 'axis' }, toolbox: { show: false, feature: { saveAsImage: { show: false } } }, calculable: true, xAxis: { type: 'category', boundaryGap: false, data: TM }, yAxis: {},//注意一定不能丢了这个,不然图表Y轴不显示series: [ { name: seriesName, type: 'line', data: ch1, lineStyle: { // 设置线条的style等normal: { color: 'red', // 折线线条颜色:红色 }, }, itemStyle: { // 设置线条上点的颜色(和图例的颜色)normal: { color: 'red', }, }, } ] }); } }) },2000);