【腾讯云 Cloud Studio 实战训练营】在cloud Studio上使用React实现学生管理系统

一、前言

为了提升办公效率,越来越多的人开始使用云工作站的方法进行"云办公"了,所谓云办公即把传统意义办公场所转移到网络浏览器中,这样做的好处有:

  1. 实现真正的移动化办公,不再受设备、时间、地点等的束缚,随时随地都能访问云工作站进行办公。
  2. 支持多人协同,大家都能在同一环境下进行工作,可对同文件进行修改。
  3. 更能保证数据的安全性,以往的本地(个人设备)办公因为网络、个人操作不当等原因容易让设备中病毒,可能会造成数据泄露、损害或丢失的风险。而云工作站都在统一的环境下进行,不好有这样的问题。
  4. 降低运维成本,以往的本地设备容易出现硬件上的问题,维修成本也是不容小觑的,而且同样存在数据损坏、丢失的风险。
  5. 对初创企业极其友好,云办公不需购买昂贵的硬件和软件,只需按使用量付费。这降低了企业的初始投资和运营成本。
  6. 扩展性更强,云办公可以根据企业的需求进行灵活扩展和升级,无需额外投资硬件和软件。

作为程序员来讲,也希望有一款云平台能让我们在"云"上开展项目开发的工作,最近了解到腾讯云推出的Cloud Studio云端工作站,它是一款在线IDE,用户无需安装,随时随地打开浏览器就能在线编程。它还包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能,同时支持实时调试、插件扩展等,可以帮助开发者快速完成各种应用的开发、编译与部署工作。

刚好腾讯云联合 CSDN 推出的系列开发者技术实践活动-"腾讯云 Cloud Studio 实战训练营",该活动旨在通过技术分享直播、动手实验项目、优秀代码评选、有奖征文活动等,让广大开发者沉浸式体验腾讯云开发者工具 Cloud Studio 的同时,实现技术实战能力提升。

我也跟着官方提供的实验手册做了一遍,了解了Cloud Studio的具体功能和用途。后面也使用它的React模板,开发了一款学生管理系统,接下来我将通过分享学生管理系统的开发过程,带大家了解一下这款云工作站。

二、React实现学生管理系统

该学生管理系统实现的功能有:班级管理、学生管理、及数据概览统计。技术栈采用的是react+antd,数据存储采用的是localstorage,项目源码已上传至**Gitee**

1)效果展示

数据概览页

系统数据的总览展示,通过学生、班级、性别多维度的展示学生数据情况:

学生管理

用于维护学生信息:

班级管理

用于维护班级信息:

登录

系统的登录入口,默认账号为:quniao 密码为:123456

2)使用过程分享

2.1 准备cloud Studio环境

首先,打开cloudstudio官网,进行注册登录后就会进入其工作台:

cloud studio提供了很多应用模板供我们使用,不需要我们手动去搭建一些环境,节约了我们不少的时间,这里我们选择React模板来建立项目:

建立完成后,它会自动的安装依赖并启动项目,然后我们就可以开始编写我们的代码了:

2.2 团队及代码管理

在cloud Studio中进行开发对比本地开发来说是不遑多让的,首先代码编写的实时性很高,并没用我想的会出现卡顿或延迟等情况,而且性能很强劲,项目编译启动比我本地快了很多,代码补全也很方便快捷:

Cloud Studio对团队及代码的管理也很方便,这里我用官方的Coding 一站式研发管理平台 来演示一下是如何操作的。

首先我们打开Coding 一站式研发管理平台 按照步骤指引创建我们的团队和项目:

然后在Cloud Studio 工作台界面,点击"头像-设置-关联账号-添加账号"来关联我们刚注册的CODING账号:

然后回到项目代码中,在终端执行命令 git init,然后输入commit内容并点击commit按钮:

再点击弹窗中的Yes:

如果出现如下提示,代表需要设置git的用户名称和邮箱:

这时在终端输入如下命令,再点击commit按钮:

arduino 复制代码
git config --global user.name "你的名称"
git config --global user.email "你的邮箱号"

再点击"Publish Branch" -> 选择"Publish to CODING":

点击"允许":

再选择账号:

再选择我们刚创建的项目就完成啦:

这个时候就可以在代码仓库看到我们刚提交的代码了:

3)项目地址

上面分享的项目代码我也发布到了我的gitee仓库中,代码仓库地址为:

gitee.com/qu-niao/qun...

该项目也参与了《腾讯云Cloud Studio 实战训练营》的优秀代码评选比赛,小伙伴们也快来参加吧,奖励可是很丰厚的!活动链接:点我访问

三、建议

这次体验下来总体还是非常满意的,但有一点认为可以优化的是,现在新建工作空间时的代码来源只能选择远程仓库,而不能通过上传本地文件的方式来添加代码,其实通过本地上传代码也是比较常见的,希望后期能够支持:

另外一点则是工作空间貌似只能同时开启一个,当我想启动多个工作空间时会有如下提示:

但往往实际情况是我们会有多个项目同时开发的情况,举个很常见的例子:现在正在开发A项目,但B项目发现了一个线上问题需要紧急修复,这时我们的操作通常都是再开一个IDE打开B项目进行修改,原来的A项目是不会关闭的,如果工作空间只能开启一个的话,会不太方便。 希望后期能够支持多开工作空间。

四、总结

经过这次的使用体验可以看到,Cloud Studio是一款很成熟、功能很强大的基于浏览器的集成式开发环境(IDE),是一款企业级的云端工作站,无论是在编写代码层面的代码高亮、代码补全,还是集成的git、插件扩展等,都是很智能且易用的。 对比下来,云端工作站的形式更能节约成本,对于团队协作开发,它是一种值得尝试的新选择。

对于有编程学习需求的小伙伴来讲也是有价值的,因为云平台上有各式各样热门、常见的模板,这样我们就不再需要手动的去搭建环境了:想学习Python,直接使用Python环境的模板、想学习Vue就使用Vue环境的模板就行了,并且还能使用多套模板达到多环境的目的,这也能节省我们不少的时间。另外,云IDE的出现让编程设备也不再局限于电脑了,我们完全可以在手机、平板上进行编程。

官方现在的活动也很给力,每月有3000分钟的工作空间免费时长给我们使用:

小伙伴们还在等什么,赶快来试试吧!

相关推荐
screct_demo1 小时前
詳細講一下在RN(ReactNative)中,6個比較常用的組件以及詳細的用法
javascript·react native·react.js
光头程序员10 小时前
grid 布局react组件可以循数据自定义渲染某个数据 ,或插入某些数据在某个索引下
javascript·react.js·ecmascript
limit for me10 小时前
react上增加错误边界 当存在错误时 不会显示白屏
前端·react.js·前端框架
浏览器爱好者10 小时前
如何构建一个简单的React应用?
前端·react.js·前端框架
VillanelleS13 小时前
React进阶之高阶组件HOC、react hooks、自定义hooks
前端·react.js·前端框架
傻小胖14 小时前
React 中hooks之useInsertionEffect用法总结
前端·javascript·react.js
flying robot1 天前
React的响应式
前端·javascript·react.js
GISer_Jing1 天前
React+AntDesign实现类似Chatgpt交互界面
前端·javascript·react.js·前端框架
智界工具库1 天前
【探索前端技术之 React Three.js—— 简单的人脸动捕与 3D 模型表情同步应用】
前端·javascript·react.js
我是前端小学生1 天前
我们应该在什么场景下使用 useMemo 和 useCallback ?
react.js