【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio快速构建React完成点餐H5页面还原

文章目录

  • 一、前言
  • 二、Cloud Studio 功能介绍
  • 三、实验介绍
  • 四、实操指导
    • 打开官网
    • 注册 Cloud Studio
  • 五、开发一个简版的点餐系统
    • 安装 antd-mobile
    • 安装 Less
  • 六、发布仓库
  • 七、开发空间
  • 八、总结

一、前言

IDE(集成开发环境)是一种软件工具,旨在为开发者提供一个集成的开发平台,其中包含了各种用于编写、调试和部署应用程序的工具和功能。IDE通常提供代码编辑器、编译器、调试器、版本控制、构建工具等,可以帮助我们更高效地进行软件开发。

传统的IDE通常是安装在本地计算机上的软件,开发者需要在自己的设备上安装和配置对应的IDE,并手动管理项目文件和依赖项。传统IDE的好处包括让开发者能够直接在本地开发环境中进行代码编写、调试和运行,具有更高的自定义性和灵活性。

但是近期腾讯云推出了Cloud Studio工具,可以是我们不用下载需要的IDE,开箱即用,因此本篇文章主要通过介绍和构建一个项目来带大家了解它,并尝试去使用这么一款优秀的工具。

在这里插入图片描述

二、Cloud Studio 功能介绍

在这里插入图片描述

腾讯云的Cloud Studio 是一款基于Web的集成开发环境(IDE),它给我们提供了一系列的功能和特点,方便开发者进行云端开发、协作和部署。首先我们先罗列一下Cloud Studio 的主要功能和特点:

  • 丰富的语言支持:Cloud Studio 支持多种编程语言,包括Java、Python、Node.js、Golang等,可以满足我们不同项目的需求。

  • 强大的代码编辑器:Cloud Studio 内置了强大的代码编辑器,支持代码高亮、智能提示、代码重构、快捷键等功能,提供给我们流畅的编码体验。

  • 集成调试工具:Cloud Studio 提供了集成的调试工具,使得我们可以通过断点调试、变量查看、堆栈追踪等功能,帮助快速定位和解决代码中的问题。

  • 云端开发环境:最重要的一点是Cloud Studio 是基于云端的开发环境,使得我们无需在本地安装开发工具和配置开发环境,只需通过浏览器即可进行代码编写、运行和调试。

  • 灵活的协作能力:Cloud Studio 支持多人协同开发,多个开发者可以同时编辑同一个项目,并实时查看对方的修改内容,方便团队合作和代码审查。

  • 一键部署到腾讯云:Cloud Studio 提供了一键部署到腾讯云的功能,我们可以直接将代码部署到云上的服务器、容器或函数计算等服务中,简化了部署流程。

  • 集成腾讯云服务:Cloud Studio 集成了丰富的腾讯云服务,包括对象存储 COS、云数据库 CDB、云函数 SCF 等,可以方便地调用和管理这些服务,提高开发效率。

  • 安全可靠:Cloud Studio 提供了安全的开发环境,数据传输过程中进行了加密处理,同时对每个用户进行权限控制,保障代码和数据的安全。

三、实验介绍

我们经常会遇到远程办公的场景,下面我们打算用云 IDE Cloud Studio 快速搭建,并开发还原一个移动端 React H5 的简版点餐系统页面,从 0 到 1 体验云 IDE 给我们带来的优势,不需要装各种环境,简单易用,开箱即可上手。

在这里插入图片描述
点击进入原型图后,点击最下面的 点餐 页面

在这里插入图片描述

四、实操指导

打开官网

点击以下链接跳转到官网,并点击“注册/登录”。

Cloud Studio官网

注册 Cloud Studio

这里注册和登录 Cloud Studio 非常方便,提供了三种注册方式:

使用 CODING 账号授权注册/登录(本文使用方式)
使用微信授权注册/登录
使用 GitHub 授权注册/登录

备注:

CODING 是提供一站式研发管理平台及云原生开发工具,让软件研发如同工业生产般简单高效,助力企业提升研发管理效能。

因为我们公司正好使用的 CODING 做为代码管理平台,所以,这里选择 “CODING DevOps” 进行登录。
在这里插入图片描述
输入对应的团队域名前缀,点击登录,即可跳转到 CODING 平台进行相关授权。

在这里插入图片描述

找到对应登录的方式,进行登录。

授权成功后,可以跳转到 Cloud Studio 首页,可以看到 Cloud Studio 提供了很多模板(框架模板、云原生模板、建站模板),都是预装环境了,开箱即用的模板,可以快速搭建环境进行代码开发,同时 Cloud Studio 也对所有新老用户每月赠送 3000 分钟的工作空间免费时长。

在这里插入图片描述

即使从来没有学习过 React,只需要打开对应的 React 框架模板,即可开始初始化一个 React 的工作空间,在等待不到 10s 左右(与带宽网速差异有区别),云 IDE 就已经初始化完毕。

在这里插入图片描述

可以看到初始化左侧代码后,控制台会安装依赖及启动一个 React 简单的模板项目。

在这里插入图片描述

// 进入当前目录
cd ./ && 
// 设置port的环境变量
set port=3000 &&
// 导出port的环境变量
export PORT=3000 &&
// 相当于 yarn install,安装相关依赖
yarn &&
// 启动开发环境
yarn start --port=3000

到此,可以发现我们如果用一台新主机,只要有浏览器,就不需要准备任何环境,不需要安装任何软件,只需要能够联网,就能在几分种内初始化一个 React 项目,这对新技术的学习是非常高效的

在这里插入图片描述

五、开发一个简版的点餐系统

主旨是为了开发一个 React H5 的页面,为了快速开发,通常会使用到UI组件库,这里我们使用的是 antd-mobile UI库,antd-mobile 是 Ant Design 的移动规范的 React 实现。

安装 antd-mobile

antd-mobile 支持基于 Tree Shaking 的按需加载,大部分的构建工具(例如 webpack 4+ 和 rollup)都支持 Tree Shaking,所以绝大多数情况下你无需做额外的配置即可拥有较小的包体积。

$ yarn add antd-mobile@^5.32.0
# or
$ npm install --save antd-mobile@^5.32.0

在这里插入图片描述

安装 Less

平时我们在进行React项目开发的时,可能会使用到Less、Sass进行样式开发,默认 React 是集成Sass的,因此对于习惯书写Less的小伙伴十分不友好,所以我们需要在React项目中配置Less。

(1).安装 less 和 less-loader :

yarn add -D less@^3.12.2 less-loader@^7.0.1

这里注意不带版本安装为高版本,项目会启动失败。

在这里插入图片描述
(2).暴露 webpack 配置文件:
在webpack.config.js中进行配置,这样进行配置需要暴露出React的config配置文件,警告:该操作不可逆

在这里插入图片描述
输入 ‘y’ 后,项目会自动进行解构操作。

在这里插入图片描述
完成命令之后,项目根目录会出现一个config文件夹,里面是一些配置相关的脚本,也可以看到 package.json 中多了很多属性值,如 “dependencies”.

找到 config/webpack.config.js 文件,找到第70行左右,这块是设置 css 相关的代码。

在这里插入图片描述
复制一下sass的代码,改为less

// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
// 新增加 Less 代码
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;

在这里插入图片描述

继续向下搜索sass,位置在 475 行左右,能够找到以下代码。

在这里插入图片描述

和之前配置一样,仿照sass的配置,进行less的配置。

在这里插入图片描述

这样就完成了webpack.config.js配置less,可以在项目中使用less样式了。

(3).安装 normalize

Normalize.css 是CSS重置的现代替代方案,可以为默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。

yarn add -D normalize.css@^8.0.1

在这里插入图片描述
(3).上传项目需要的素材:
以前上传服务器代码,需要使用 Scp 命令或者装 Remote SSH 插件支持,Cloud Studio 可以很方便默认支持文件上传与下载等常规的操作,与本地 IDE 体验一致:

可以直接拖动文件到 IDE 编辑区域(本文使用方式)
右击 IDE 编辑区域"上传"
直接将 img 文件夹拖动到src目录下即可。(点击下载img压缩包)

在这里插入图片描述

(4).替换App.js主文件

下面是点餐系统的主要业务代码,复制到src/App.js直接替换即可。

import './App.css';
import React, { useState } from 'react'
import { NavBar, Toast, Swiper, SideBar, TabBar, Badge } from 'antd-mobile'
import {AppOutline,ExclamationShieldOutline,UnorderedListOutline,UserOutline,
} from 'antd-mobile-icons'
import BannerImg from './img/banner.png'
import HotImg from './img/hot.png'
import Food1Img from './img/food1.png'
import Food2Img from './img/food2.png'
import CartImg from './img/cart.png'
import './index.less'
import "normalize.css"function App() {const [activeKey, setActiveKey] = useState('1')const tabbars = [{key: 'home',title: '点餐',icon: <AppOutline />,},{key: 'todo',title: '购物车',icon: <UnorderedListOutline />,badge: '5',},{key: 'sale',title: '餐牌预告',icon: <ExclamationShieldOutline />,},{key: '我的',title: '我的',icon: <UserOutline />,badge: Badge.dot,},]const back = () =>Toast.show({content: '欢迎进入点餐系统',duration: 1000,})const items = ['', '', '', ''].map((color, index) => (<Swiper.Item key={index}><img style={{width: '100%'}} src={ BannerImg }></img></Swiper.Item>))const tabs =  [{ key: '1', title: '热销' },{ key: '2', title: '套餐' },{ key: '3', title: '米饭' },{ key: '4', title: '烧菜' },{ key: '5', title: '汤' },{ key: '6', title: '主食' },{ key: '7', title: '饮料' },]const productName = ['小炒黄牛肉','芹菜肉丝炒香干','番茄炒鸡蛋','鸡汤','酸菜鱼','水煮肉片','土豆炒肉片','孜然肉片','宫保鸡丁','麻辣豆腐','香椿炒鸡蛋','豆角炒肉']const productList = productName.map((item, key) => {return {name: item,img: key % 2 === 1 ? Food1Img : Food2Img}})return (<div className="App"><NavBar onBack={back} style={{background: '#F0F0F0',fontWeight: 'bold'}}>点餐</NavBar><div className='head-card'><Swiperstyle={{'--border-radius': '8px',}}autoplaydefaultIndex={1}>{items}</Swiper></div><div className='product-box'><SideBar activeKey={activeKey} onChange={setActiveKey}>{tabs.map(item => (<SideBar.Item key={item.key} title={item.key === '1' ? <div><div className='flex-center'><img style={{display: 'block',width: '16px',marginRight: '5px'}} src={ HotImg }></img><div>{ item.title }</div></div></div> : item.title} />))}</SideBar><div className='product-right'><div className='product-title'>热销</div><div className='product-list'>{productList.map((item, key) => {return (<div className='product-item'><div className='product-item-left'><img style={{display: 'block',width: '76px',marginRight: '5px'}} src={ item.img }></img><div className='product-item-left-info'><div><div className='product-item-left-info-name'>{ item.name }</div><div className='product-item-left-info-number'>月售{key + 1}0{key * 5}</div></div><div className='product-item-left-info-price'>¥10</div></div></div><div className="cart"><img style={{display: 'block',width: '30px',marginRight: '5px'}} src={ CartImg } onClick = { () =>Toast.show({content: '添加购物车成功'}) }></img></div></div>)})}</div></div></div><TabBar>{tabbars.map(item => (<TabBar.Itemkey={item.key}icon={item.icon}title={item.title}badge={item.badge}/>))}</TabBar></div>);
}export default App;

在 src 目录下,创建一个 index.less 文件,将以下 less 相关的代码复制到该文件中即可。

.head-card {padding: 10px 20px;box-sizing: border-box;
}.flex-center {display: flex;align-items: center;
}.product-box {display: flex;align-items: center;width: 100%;height: calc(100vh - 45px - 130px - 50px);
}.product-right {flex: 1;height: 100%;
}.product-title {font-family: PingFangSC-Regular;font-size: 14px;color: #000000;text-align: left;padding-bottom: 10px;
}.product-list {height: calc(100% - 24px);overflow-y: auto;
}.product-item {position: relative;width: 100%;display: flex;align-items: center;justify-content: space-between;padding-left: 10px;box-sizing: border-box;margin-bottom: 10px;&-left {display: flex;&-info {padding-left: 3px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-between;&-name {font-family: PingFangSC-Regular;font-size: 14px;color: #000000;text-align: left;}&-number {padding-top: 3px;font-family: PingFangSC-Regular;font-size: 11px;color: #787878;text-align: left;}&-price {font-family: PingFangSC-Regular;font-size: 18px;color: #FF1800;text-align: left;}}}
}.cart {position: absolute;right: 10px;bottom: 0;
}

复制完成后,在控制台中输入 yarn dev即可启动该项目。

  • Cloud Studio 内置预览插件,可以实时显示网页应用,当代码发生改变之后,预览窗口会自动刷新,即可在 Cloud Studio 内实时开发调试网页了
  • 因为本项目是移动端H5的项目,所以需要打开“toggle device”按钮查看样式。
  • 提供了二唯码在手机端进行调试。

复制内置 Chrome 浏览器窗口的地址栏,分享给团队的其它成员,免去了部署 nginx 的繁琐配置。

六、发布仓库

# 项目说明这是一个用 IDE [Cloud Studio](https://www.cloudstudio.net/?utm=csdn) 快速搭建,并开发还原一个移动端 React H5 的简版点餐系统页面,从 01 体验云 IDE 给我们带来的优势,不需要装各种环境,简单易用,开箱即可上手。## 相关技术栈React + less + webpack## 项目运行yarn install
yarn start

在这里插入图片描述
左边功能菜单区找到“源代码管理”
在这里插入图片描述

使用 git init 进行仓库初始化。

在这里插入图片描述
输入需要提交的message信息,再点击"Commit"进行仓库提交。

在这里插入图片描述
因为代码现在托管到 Coding 上,演示如何发布到 Coding 仓库中,点击"Publish Branch" -> 选择"Publish to CODING"

在这里插入图片描述
选择第二个,接着选择我们自己创建的项目

在这里插入图片描述
可以登陆到 Coding 平台进行查看仓库代码。

在这里插入图片描述

七、开发空间

查看正在使用的开发空间,可以看到我们使用的模板是基于 create-react-app脚手架创建的模板,还可以在“近期删除”的空间,进行回滚。

在这里插入图片描述

如果觉得“标准版本”不符合要求,还可以进行配置升级,不过,修改需要下次重启后才能生效。

在这里插入图片描述

在这里插入图片描述

停止该项目。

在这里插入图片描述

删除该项目,即可销毁这个工作空间。

在这里插入图片描述

八、总结

本次实验主要是引导大家如何使用 Cloud Studio 进行云编程,并且动手使用云 IDE Cloud Studio 快速搭建,并开发还原一个移动端 React H5 的简版点餐系统页面。

在一台新的机器设备上,从 0 到 1 体验云 IDE 给我们带来的优势,不需要装各种环境,简单易用,开箱即可上手。

同时,也欢迎大家一起探索 Cloud Studio 更多的功能,为工作中进行赋能!

在这里插入图片描述

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

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

相关文章

R语言linkET包绘制相关性组合网络热图

热图就是使用颜色来表示数据相关性的图。能绘制热图的R包很多&#xff0c;既往我们已经介绍了《R语言pheatmap包绘制热图》&#xff0c;今天咱们来介绍一下R语言linkET包绘制相关性组合网络热图。相关性热图的意思热图和其他数据的关联性&#xff0c;比较的是多数据间的内在关系…

【宝藏系列】Linux 常用磁盘管理命令详解

【宝藏系列】Linux 常用磁盘管理命令详解 文章目录 【宝藏系列】Linux 常用磁盘管理命令详解前言1️⃣ df2️⃣du3️⃣fdisk&#x1f4df;磁盘格式化&#x1f4e0;磁盘检验⌨️磁盘挂载与卸除&#x1f4c0;卸载/dev/hdc6 前言 Linux磁盘管理常用三个命令为df、du和fdisk。 df…

Stable Diffusion教程(6) - 扩展安装

打开stable diffusion webUI界面 加载插件列表 依次点击扩展->可用->加载自 搜索插件 首先在搜索框输入你要安装的插件&#xff0c;然后点击插件后面的安装按钮 如果你需要的插件这里面没有找到&#xff0c;可通过通网址安装的方式安装。 在git仓库网址输入框输入的你插件…

招投标系统简介 企业电子招投标采购系统源码之电子招投标系统 —降低企业采购成本 tbms

​功能模块&#xff1a; 待办消息&#xff0c;招标公告&#xff0c;中标公告&#xff0c;信息发布 描述&#xff1a; 全过程数字化采购管理&#xff0c;打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力&#xff0c;为外…

强化学习分享(一) DQN算法原理及实现

摘要&#xff1a;主要讲解DQN算法的原理&#xff0c;伪代码解读&#xff0c;基于pytorch版本的DQN小游戏编程&#xff0c;同时对该代码进行详细标注&#xff0c;以及奉上原码。 &#xff08;一&#xff09;强化学习算法介绍 DQN&#xff0c;顾名思义&#xff0c;Deep Q Learni…

飞凌嵌入式「国产」平台大盘点(二)全志系列

在上篇文章中&#xff0c;小编带大家一起盘点了飞凌嵌入式国产平台中的瑞芯微系列核心板。本篇文章&#xff0c;将继续为大家介绍的是全志系列核心板&#xff0c;话不多说&#xff0c;上干货&#xff01; 全志科技 飞凌嵌入式 飞凌嵌入式与全志科技的合作始于2019年&#xff…

AI 绘画Stable Diffusion 研究(四)sd文生图功能详解(上)

大家好&#xff0c;我是风雨无阻。 通过前面几篇AI 绘画Stable Diffusion 研究系列的介绍&#xff0c;我们完成了Stable Diffusion整合包的安装、模型ControlNet1.1 安装、模型种类介绍与安装&#xff0c;相信看过教程的朋友们&#xff0c;手上已经有可以操作实践的Stable Diff…

论文阅读-BotPercent: Estimating Twitter Bot Populations from Groups to Crowds

目录 摘要 引言 方法 数据集 BotPercent架构 实验结果 活跃用户中的Bot数量 Bot Population among Comment Sections Bot Participation in Content Moderation Votes Bot Population in Different Countries’ Politics 论文链接&#xff1a;https://arxiv.org/pdf/23…

实例030 窗口颜色的渐变

实例说明 在程序设计时&#xff0c;可以通过设置窗体的BackColor属性来改变窗口的背景颜色。但是这个属性改变后整个窗体的客户区都会变成这种颜色&#xff0c;并且非常单调。如果窗体的客户区可以向标题栏一样能够体现颜色的渐变效果&#xff0c;那么窗体风格将会另有一番风味…

2024年浙财MBA项目招生信息全面了解

2024年全国管理类硕士联考备考已经到了最火热的阶段&#xff0c;不少考生开始持续将注意力集中在备考的规划中&#xff01;杭州达立易考教育整合浙江省内的MBA项目信息&#xff0c;为大家详细梳理了相关报考参考内容&#xff0c;方便大家更好完成择校以及针对性的备考工作。本期…

京东开源的、高效的企业级表格可视化搭建解决方案:DripTable

DripTable 是京东零售推出的一款用于企业级中后台的动态列表解决方案&#xff0c;项目基于 React 和 JSON Schema&#xff0c;旨在通过简单配置快速生成页面动态列表来降低列表开发难度、提高工作效率。 DripTable 目前包含以下子项目&#xff1a;drip-table、drip-table-gene…

静态网页加速器:优化性能和交付速度的 Node.js 最佳实践

如何使用 Node.js 发布静态网页 在本文中&#xff0c;我们将介绍如何使用 Node.js 来发布静态网页。我们将创建一个简单的 Node.js 服务器&#xff0c;将 HTML 文件作为响应发送给客户端。这是一个简单而灵活的方法&#xff0c;适用于本地开发和轻量级应用。 1、创建静态网页…

Linux中提示No such file or directory解决方法

说明&#xff1a; 在linux下&#xff0c;./xxx.sh执行shell脚本时会提示No such file or directory。但shell明明存在&#xff0c;为什么就是会提示这个呢&#xff1f; 这种其实是因为编码方式不对&#xff0c;如你在win下编辑sh&#xff0c;然后直接复制到linux下面 实现&…

机器学习笔记之优化算法(九)收敛速度的简单认识

机器学习笔记之优化算法——收敛速度的简单认识 引言收敛速度的判别标准 Q \mathcal Q Q-收敛速度 R \mathcal R R-收敛速度关于算法复杂度与收敛速度 引言 本节对收敛速度简单介绍。 收敛速度的判别标准 我们之前几节介绍了线搜索方法 ( Line Search Method ) (\text{Line …

【Linux命令200例】awk文本处理工具的系统与实战讲述(常用)

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f3c6;本文已…

美团基础架构面经总结汇总

美团基础架构的面经。 问的全是基础,一个编程语言的问都没有。 问题记录 MySQL-MVCC InooDB是通过 MVCC 实现可重复读的隔离级别的,MVCC 就是多版本并发控制,它其实记录了历史版本的数据,解决了读写并发冲突问题。有一个版本编码,然后它进入了各种操作下的数据状态,能…

redis数据未到过期时间被删除

1. 问题描述 使用了jeecgboot开发后端代码&#xff0c;代码设置的redis过期时间为24小时&#xff0c;部署使用的宝塔面板&#xff0c;在redis中看到的过期时间也是为24小时&#xff0c;但是并未到过期时间&#xff0c;数据就被删除。 2. 解决办法 观察了一下redis中的数据&a…

DataGrip实时模板的配置

DataGrip实时模板的配置 File→Setting→Editor→Live Templates→点击“”→Live Template 即可新写入一条模板语句 写入新模板 缩写&#xff1a;seld select $END$ from dual; 注意:一开始都是默认无应用的&#xff0c;需要手动配置应用于所有SQL 点击difine&#xff08;…

【计算机网络】NAT技术

文章目录 1. NAT技术简介2. 使用NAT技术转换IP的过程3. NAPT4. NAT技术的缺陷5. NAT和代理服务器 1. NAT技术简介 NAT&#xff08;Network Address Translation&#xff0c;网络地址转换&#xff09;技术&#xff0c;是解决IP地址不足的主要手段&#xff0c;并且能够有效避免外…

Linux下安装配置Redis

文章目录 安装依赖库上传安装包并解压 启动默认启动指定配置启动开机自启 安装 依赖库 Redis是基于C语言编写的&#xff0c;因此首先需要安装Redis所需要的gcc依赖&#xff1a; yum install -y gcc tcl上传安装包并解压 将Redis安装包上传到服务器的任意目录&#xff0c;例…