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

news2024/9/23 5:30:03

一、前言

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

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

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

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

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

目录

一、前言

二、React实现学生管理系统

1)效果展示

2)使用过程分享

2.1 准备cloud Studio环境

2.2 团队及代码管理

3)项目地址

三、建议

四、总结


二、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按钮:

git config --global user.name "你的名称"
git config --global user.email "你的邮箱号"

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

点击“允许”:

再选择账号:

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

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

3)项目地址

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

https://gitee.com/qu-niao/quniaoStudentManage

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

三、建议

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

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

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

四、总结

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/814767.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

最近写了10篇Java技术博客【SQL和画图组件】

(1)Java获取SQL语句中的表名 (2)Java SQL 解析器实践 (3)Java SQL 格式化实践 (4)Java 画图 画图组件jgraphx项目整体介绍(一) 画图组件jgraphx项目导出…

Java版知识付费 Spring Cloud+Spring Boot+Mybatis+uniapp+前后端分离实现知识付费平台免费搭建

提供职业教育、企业培训、知识付费系统搭建服务。系统功能包含:录播课、直播课、题库、营销、公司组织架构、员工入职培训等。 提供私有化部署,免费售后,专业技术指导,支持PC、APP、H5、小程序多终端同步,支持二次开发…

VsCode与Idea编辑器更换背景图

目录 VsCode Idea VsCode 需要安装background插件 安装完成后,打开设置,搜索background 然后就可以在json文件进行图片设置,透明度等等 Idea 打开File -> Settings 然后找到Appearance , 往下滑,找到BackGround …

Android studio实现Button界面跳转

本教程以界面MainActivity跳转到TwoActivity为例 MainActivity对应layout:R.layout.activity_main TwoActivity*对应layout:R.layout.twolayout 1. 建立MainActivity的java文件 package com.example.myapplication;//界面跳转 所需头文件 import andro…

在人工智能的浪潮下,汽车自动驾驶的新发展新可能

原创 | 文 BFT机器人 相信生活在21世纪的人们,没有人会不知道什么是人工智能。如果你不知道,那么你就是被现社会甩在了身后。人工智能从出现到现在,经历了60年的发展,而如今人工智能更如一股大浪潮,席卷了全国各地&am…

Keil5芯片pack包官网下载与安装

1.进入官网 ARM Keil官网链接:https://www.keil.arm.com/ 2.进入CMSIS Packs中选择需要的pack包 输入需要的芯片型号后回车能显示出所有相关型号,或者在输入栏下方列表中查找: 3.下载所需的安装包 找到所需安装包后,右键在…

kernel32.dll如何修复,快速解决kernel32.dll缺失的方法

Kernel32.dll是Windows操作系统中一个重要的系统文件,对于系统的正常运行至关重要。然而,由于各种原因,用户可能会遇到kernel32.dll文件的缺失问题。今天小编就来给大家详细的介绍一下kernel32.dll这个文件,并且详细的介绍一下ker…

[计算机入门] 回收站

2.10 回收站 回收站是Windows 操作系统中一个特殊的文件夹,通常在桌面上以图标的形式表示。 回收站主要作用是为了保护用户的数据免于被意外删除。使用回收站后用户可以避免错误地彻底删除文件,也可以从回收站中恢复它们。如果没有回收站,在…

vue2.x通过指令实现v-debounce和v-throttle防抖节流的实现,亲测可用。

在vue2.x中,防抖和节流一般是通过引入防抖函数debounce和节流函数throtte,对事件回调进行一层包裹,然后在模板中绑定包裹后的事件回调,这样每个需要用的地方都需要进行防抖,节流函数的导入,事件回调的包裹&…

集成kisso框架springboot解决登录不了问题

前端使用 VUE 框架,要求请求头中传入 token值,获取设置token使用cookie操作 import Cookies from js-cookieconst TokenKey token-c export function getToken() {return Cookies.get(TokenKey) } export function setToken(token) {Cookies.set(Token…

【计算机网络】第四章 网络层(一)

文章目录 第四章 网络层4.1 网络层概述4.2 网络层提供的两种服务4.2.1 小结 第四章 网络层 网络层是计算机网络体系结构中的一个关键层,位于传输层上方、数据链路层下方。它负责将传输层提供的数据分割成适当大小的数据包,并在不同网络之间进行路由选择和…

Segment anything(图片分割大模型)

目录 1.Segment anything 2.补充图像分割和目标检测的区别 1.Segment anything 定义:图像分割通用大模型 延深:可以预计视觉检测大模型,也快了。 进一步理解:传统图像分割对于下图处理时,识别房子的是识别房子的模型…

QtC++ 技术分析4 - 流、d-pointer隐式共享以及容器迭代器

目录 QT 中的流文件系统与底层文件操作文件系统类 QFile QTextStreamQDataStreamQLocale 隐式共享与 d-pointer隐式共享d-pointer 在隐式共享中的应用二进制代码兼容d-pointer 模式实现 Qt 容器及迭代器QTL 概述几种常见的迭代器及其对应类型QTL 容器对应迭代器通用算法函子&am…

特性快闪:使用 Databend 玩转 Iceberg

作者:尚卓燃(PsiACE)澳门科技大学在读硕士,Databend 研发工程师实习生 Apache OpenDAL(Incubating) Committer https://github.com/PsiACE 几周前,Databricks 和 Snowflake 召开了各自的年度大会,除了今年一…

线程池的使用、工作原理和优势

关于作者:CSDN内容合伙人、技术专家, 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 ,擅长java后端、移动开发、人工智能等,希望大家多多支持。 目录 一、导读二、线程池概览2.1 为什么创建和销毁线程开销较大2.2 为什…

tinkerCAD案例:26. Making the Amplifier Body 制作放大器主体(1)

tinkerCAD案例:26. Making the Amplifier Body 制作放大器主体 Project Overview: 项目概况: Music is the universal language! And who doesn’t love jamming out to some sweet tunes with friends? But it’s such a bummer when there are more…

【腾讯云Cloud Studio实战训练营】Cloud Studio 快速搭建学习分享

文章目录 零、前言一、Cloud Studio1.1、Cloud Studio是什么1.2、Cloud Studio的优势 二、实战:快速构建React完成点餐H5页面还原2.1、打开官网2.2、选择React 框架模板2.3、编码部分安装 antd-mobile安装 Less安装 normalize上传项目需要的素材替换App.js主文件 2.…

ChatGPT结合知识图谱构建医疗问答应用 (二) - 构建问答流程

一、ChatGPT结合知识图谱 上篇文章对医疗数据集进行了整理,并写入了知识图谱中,本篇文章将结合 ChatGPT 构建基于知识图谱的问答应用。 下面是上篇文章的地址: ChatGPT结合知识图谱构建医疗问答应用 (一) - 构建知识图谱 这里实现问答的流程…

无涯教程-jQuery - Tabs组件函数

窗口小部件选项卡函数可与JqueryUI中的窗口小部件一起使用。选项卡用于在分成逻辑部分的内容之间交换。 Tabs - 语法 $( "#tabs" ).tabs(); Tabs - 示例 以下是显示Tab用法的简单示例- <!doctype html> <html lang"en"><head><m…

选择排序算法

选择排序 算法说明与代码实现&#xff1a; 以下是使用Go语言实现的选择排序算法示例代码&#xff1a; package mainimport "fmt"func selectionSort(arr []int) {n : len(arr)for i : 0; i < n-1; i {minIndex : ifor j : i 1; j < n; j {if arr[j] < a…