【腾讯云 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,一经查实,立即删除!

相关文章

Mybatis引出的一系列问题-动态 SQL

动态 SQL 是 MyBatis 的强大特性之一。如果你使用过 JDBC 或其它类似的框架&#xff0c;你应该能理解根据不同条件拼接 SQL 语句有多痛苦&#xff0c;例如拼接时要确保不能忘记添加必要的空格&#xff0c;还要注意去掉列表最后一个列名的逗号。利用动态 SQL&#xff0c;可以彻底…

IDEA Go语言开发环境无法debug调试

现象描述 使用idea 搭建go开发环境后如果debug调试可能会遇到错误&#xff1a; could not launch process: decoding dwarf section info at offset 0x0: too short。 解决方法 有些回答go get -u github.com/derekparker/delve/cmd/dlv 。现在如果使用go mod方式的话这个是…

c++转换构造,拷贝构造,operator=

c转换构造&#xff0c;拷贝构造&#xff0c;operator 一.转换构造 定义一个类 class CTest { public:int m_a;CTest(int m_a):m_a(0){} };在主函数中定义对象 CTest tes1(1); CTest tes2 5;//我们发现这种定义对象的方式不符合常理&#xff0c;这里其实是发生了隐式类型转…

【Android】Retrofit2和RxJava2新手快速上手

写这篇博客的目的 网上关于Retrofit2和RxJava2的博客特别多&#xff0c;但是内容特别复杂&#xff0c;一上来就讲解很高级的用法 其实我们没必要像高考做题家一样&#xff0c;把每个API都背的滚瓜烂熟 熟悉基本用法&#xff0c;高阶用法需要的时候再逐个了解就行了 因为博客…

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;为外…

【算法第十六天7.31】654.最大二叉树 617.合并二叉树 700.二叉搜索树中的搜索 98.验证二叉搜索树

链接力扣654-最大二叉树 思路 class Solution {public TreeNode constructMaximumBinaryTree(int[] nums) {return getRoot(nums,0,nums.length);}public TreeNode getRoot(int[] nums,int leftIndex,int rightIndex){// 已经没有节点if(rightIndex - leftIndex < 1) ret…

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

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

layui中渲染table表格

页面布局 可直接根据文档要求去写 table 组件&#xff08;这个不重要&#xff09; <table lay-filter"SyDictTable" id"SyDictTable" lay-data"{id: SyDictTable}"></table>Js 重要的是去修改JS里面的东西&#xff0c;比如&#…

LeetCode 0822. 翻转卡片游戏:双O(n)的做法

【LetMeFly】822.翻转卡片游戏&#xff1a;双O(n)的做法 力扣题目链接&#xff1a;https://leetcode.cn/problems/card-flipping-game/ 在桌子上有 N 张卡片&#xff0c;每张卡片的正面和背面都写着一个正数&#xff08;正面与背面上的数有可能不一样&#xff09;。 我们可以…

动态开点线段树

防止原来的区间太大(比如n的范围为1e9&#xff0c;询问的个数为1e5)&#xff0c;此时我们就可以动态开点&#xff0c;防止普通线段树的空间过大导致MLE。 题目链接&#xff1a;E. Physical Education Lessons 区间查询&#xff0c;区间修改&#xff1a; #include <bits/s…

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

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

Opencv C++实现yolov5部署onnx模型完成目标检测

代码分析&#xff1a; 头文件 #include <fstream> //文件 #include <sstream> //流 #include <iostream> #include <opencv2/dnn.hpp> //深度学习模块-仅提供推理功能 #include <opencv2/imgproc.hpp> //图像处理模块 #include &l…

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…

HTML 元素的属性有哪些?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ class⭐ id⭐ style⭐ src⭐ href⭐ alt⭐ width和height⭐ disabled⭐ value⭐ required⭐ placeholder⭐ checked⭐ selected⭐ target⭐ colspan和rowspan⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得…

争夺年度智能汽车「中间件」方案提供商TOP10,谁率先入围

进入2023年&#xff0c;整车电子架构升级进入新周期&#xff0c;无论是智能驾驶、智能座舱、车身控制还是信息网络安全&#xff0c;软件赋能仍是行业的主旋律。 作为智能汽车赛道的第三方研究咨询机构&#xff0c;高工智能汽车研究院持续帮助车企、投资机构挖掘具备核心竞争力…

C#实现多线程局域网扫描器的思路与具体代码

C#实现多线程局域网扫描器的思路与具体代码 思路&#xff1a; 获取局域网内所有 IP 地址遍历所有 IP 地址&#xff0c;使用 Ping 命令测试主机是否在线如果主机在线&#xff0c;则扫描主机上的所有端口&#xff0c;确定哪些端口是开放的输出扫描结果 在上述过程中&#xff0…