【腾讯云 Cloud Studio 实战训练营】基于Cloud Studio构建React完成点餐H5页面

      • 前言
  • 【腾讯云 Cloud Studio 实战训练营】基于Cloud Studio 构建React完成点餐H5页面
    • 一、Cloud Studio介绍
      • 1.1 Cloud Studio 是什么
      • 1.2 相关链接
      • 1.3 登录注册
    • 二、实战练习
      • 2.1 初始化工作空间
      • 2.2 开发一个简版的点餐系统页面
        • 1. 安装 antd-mobile
        • 2. 安装 less 和 less-loader
        • 3. 暴露 webpack 配置文件
        • 4. 安装 normalize
        • 5. 上传项目需要的素材
        • 6. 替换App.js主文件
        • 7.启动项目
    • 三、发布到仓库
    • 四、开发空间管理
  • 总结

在这里插入图片描述

前言

  • 最近也是有机会参与到了腾讯云举办的 腾讯云 Cloud Studio 实战训练营，借此了解了 腾讯云 Cloud Studio 产品。
  • 腾讯云 Cloud Studio 的出现是有一定创新性的，使用它进行开发免去了使用一些传统开发工具的成本。
  • 如下载一个开发工具就要进行基本的开发环境配置，以及下载、安装和占用本地存储等等成本。
  • 下面就来使用 腾讯云 Cloud Studio 做一个实战案例来深入了解该产品的优越性吧！

【腾讯云 Cloud Studio 实战训练营】基于Cloud Studio 构建React完成点餐H5页面

一、Cloud Studio介绍

1.1 Cloud Studio 是什么

Cloud Studio 是 基于浏览器的集成式开发环境（IDE），为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器就能在线编程。

Cloud Studio 作为 在线 IDE，包含 代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能，同时支持实时调试、插件扩展等，可以帮助开发者快速完成各种应用的开发、编译与部署工作。

此外，Cloud Studio还支持与其他开发者的协作，可以轻松地共享代码和项目，并进行实时的协同编辑。

目前Cloud Studio 团队基于老用户使用体验角度和新用户上手成本考虑，现实行每月赠送 3000 分钟的工作空间免费时长，所以我们可以来使用送的时长来认真体验下吧！

1.2 相关链接

  • Cloud Studio官网地址：https://www.cloudstudio.net/
  • Cloud Studio文档地址：https://cloudstudio.net/docs/

1.3 登录注册

（1）打开Cloud Studio官网，点击注册：https://www.cloudstudio.net/
在这里插入图片描述

然后大家按自己的情况选择一种账号进行注册登录就好。
在这里插入图片描述

注册登录后来到这个页面就算正常啦，可以看到Cloud Studio提供了众多开发环境及模板，下面就来看看到底怎样使用吧！
在这里插入图片描述

二、实战练习

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

2.1 初始化工作空间

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

此时选择创建一个React模板并等待云 IDE 初始化完毕。
在这里插入图片描述

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

等待初始化完毕之后，在我们的右侧，可以看到一个实时预览的预览界面，然后在下面的控制台输入以下指令。

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

这样我们就完成一个对 React 项目初始化的过程了，用一台新主机，只要有浏览器，就不需要准备任何环境，不需要安装任何软件，只需要能够联网，就能在几分种内初始化完成，这对新技术的学习是非常高效的。

2.2 开发一个简版的点餐系统页面

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

1. 安装 antd-mobile

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

yarn add antd-mobile@^5.32.0# 或者npm install --save antd-mobile@^5.32.0

在终端输入代码进行安装即可。
在这里插入图片描述

安装完成后在package.json中会有显示。
在这里插入图片描述

2. 安装 less 和 less-loader

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

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

这里注意不带版本安装为高版本，项目会启动失败，所以需要标注好版本后进行安装。

在这里插入图片描述
这样就安装好了，继续下一步。

3. 暴露 webpack 配置文件

在webpack.config.js中进行配置，这样进行配置需要暴露出React的config配置文件，警告：该操作不可逆

npm run eject

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

完成命令之后，项目根目录会出现一个config文件夹，找到 config/webpack.config.js 文件，按Ctrl + F 查找关键字 “style files” 。

这块是设置 css 相关的代码。
在这里插入图片描述

将上图的70行到73行代码改成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)$/;

继续在查找框中输入 “sassRegex” 能够找到以下代码。

在这里插入图片描述

这里和前面配置一样，仿照sass的配置，进行less的配置。

// less
{test: lessRegex,  // 有改动exclude: lessModuleRegex,  // 有改动use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,},'less-loader'  // 有改动),sideEffects: true,
},
{test: lessModuleRegex,  // 有改动use: getStyleLoaders({importLoaders: 3,sourceMap: isEnvProduction? shouldUseSourceMap: isEnvDevelopment,modules: {getLocalIdent: getCSSModuleLocalIdent,},},'less-loader'  // 有改动),
},

在这里插入图片描述
这样就完成了webpack.config.js配置less，可以在项目中使用less样式了。

4. 安装 normalize

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

5. 上传项目需要的素材

以前上传服务器代码，需要使用 Scp 命令或者装 Remote SSH 插件支持，Cloud Studio 可以很方便默认支持文件上传与下载等常规的操作，与本地 IDE 体验一致：

  1. 可以直接拖动文件到 IDE 编辑区域
  2. 右击 IDE 编辑区域"上传"

直接将 img 文件夹拖动到src目录下即可。

在这里插入图片描述
img下载方式：img

6. 替换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;
}

7.启动项目

完成上述操作后，在控制台中输入 yarn start 即可启动该项目。
在这里插入图片描述

Cloud Studio 内置预览插件，可以实时显示网页应用，当代码发生改变之后，预览窗口会自动刷新，即可在 Cloud Studio 内实时开发调试网页了

复制内置 Chrome 浏览器窗口的地址栏，分享给团队的其它成员，免去了部署 nginx 的繁琐配置。
在这里插入图片描述
这样我们的项目就算完成了，只需要安装几个库就可以快速的构建一个项目。

三、发布到仓库

项目完成后可以快速发布到git仓库中，首先需要填写README.md文件。

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

在左边功能菜单区找到“源代码管理”，使用 git init 进行仓库初始化。
在这里插入图片描述
在这里插入图片描述

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

如果提示没有关联账号的话就去设置里面关联一下即可。
在这里插入图片描述

如果登录时使用的是coding,所以就直接推送到coding仓库了，当然也可以推送到github，需要绑定对应的账号进行提交即可。

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

四、开发空间管理

在我们的控制台这里可以管理所有使用的工作空间，其中右侧的按钮可以进行升级配置、设置、删除、开始\停止操作。
在这里插入图片描述

总结

在使用过Cloud Studio做一次实战练习之后，让我对Cloud Studio有了更深刻的认识，下面来简单谈一下Cloud Studio的优势以及优化建议。

Cloud Studio的优势很明显，大致可以分为一下几点。

  1. 节约开发成本。可以帮助用户减少安装 IDE 的成本，提供在线代码开发、编译、运行、存储的一站式服务。
  2. 便捷性。Cloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器就能在线编程。
  3. 云端开发。Cloud Studio 不需要任何本地安装，只需使用支持的浏览器，即可轻松登录并开始编码开发，实现 Coding everywhere。同时加速开发流程配置化，用配置定义云端开发环境，提升开发效率，拥有更弹性的云上开发资源。
  4. 多种预制环境可选。内置 Node.js、Java、Python 等常见环境，直接进入开发状态。
  5. metawork 开发协作。通过代码协作，多光标高亮显示和跟随，让协作变的清晰有序。包括但不限于代码协同、多光标协作、实时预览、终端协作。
  6. 众多模板可用。在使用时一个很明显的感受就是Cloud Studio提供了众多的模板，有些功能我们可以从模板库中直接拿出来改一下就可以满足自己的需求快速使用，甚至于不会写代码的人都可以上去操作两手。

Cloud Studio优化建议

  1. 文档全面详细化。希望增加更多编程语言的文档介绍，目前文档里面只有几个主流的编程语言操作文档，对于一些刚开始使用Cloud Studio的用户来说，能够看到自己平时使用的编程语言的详细文档可以更快的上手Cloud Studio。
  2. 提供更多的编程语言和框架。当前网站支持的编程语言和框架不能够满足所有用户的需求。可以考虑支持更多的编程语言和框架，提高平台的适用性和可扩展性。
  3. 提供更高的稳定性。目前网站的性能和稳定性还有进一步提升的空间，有时候可能会出现一些卡顿和崩溃等问题。为了提高用户的使用体验，建议考虑优化平台的性能和稳定性。

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

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

相关文章

电力系统电流三段式保护MATLAB仿真模型

电力系统电流三段式保护MATLAB仿真模型

整体模型如下&#xff1a; Matlab/Simulink搭建的电力系统电流保护模型采用辐射型单电源供电的运行方式 Ⅰ段保护的搭建 Ⅰ段保护为瞬时速断保护&#xff0c;根据Ⅰ段整定原则确定整定值。线路发生短路故障时&#xff0c;短路电流急剧增大&#xff1b;超过设置的整定值时&…
阅读更多...
【C# 基础精讲】为什么选择C# ?

【C# 基础精讲】为什么选择C# ?

C#&#xff08;C Sharp&#xff09;是由微软开发的一种通用、面向对象的编程语言。它最初于2000年发布&#xff0c;自那时以来逐渐成为开发者的首选之一。C#的设计目标是提供一种简单、现代、可靠且安全的编程语言&#xff0c;使开发者能够轻松构建各种类型的应用程序。 为什么…
阅读更多...
南大实验pa0：安装环境

南大实验pa0：安装环境

安装untubu没问题&#xff0c;但是切到清华软件园之后&#xff0c;问题百出。记录一下 问题1 如上图所示&#xff0c;在安装build-essential的时候出现了问题 The following packages have unmet dependencies:g-11 : Depends: gcc-11-base ( 11.2.0-19ubuntu1) but 11.4.0-1…
阅读更多...
程序员到底有多“幸福”？

程序员到底有多“幸福”？

作为一个幸福&#xff08;辛苦的发福&#xff09;的程序员&#xff0c;一边苦哈哈地加班&#xff0c;一边也知道自己享受着互联网时代的红利&#xff0c;一边又感到随时会被优化的焦虑…… 相信很多程序员都和我一样&#xff0c;对“码农”这一身份又爱又恨&#xff0c;那么你认…
阅读更多...
企业服务器被devos勒索病毒攻击后怎么处理，devos勒索病毒如何攻击的

企业服务器被devos勒索病毒攻击后怎么处理，devos勒索病毒如何攻击的

众所周知&#xff0c;科学技术是第一生产力&#xff0c;科学技术的发展给企业与人们的生活带来了极大变化&#xff0c;但随之而来的网络安全威胁也不断增加。最近&#xff0c;我们收到很多企业的求助&#xff0c;企业的计算机服务器遭到了devos勒索病毒的攻击&#xff0c;导致企…
阅读更多...
跨境电商线上店铺智能装修系统源码开发

跨境电商线上店铺智能装修系统源码开发

搭建一个跨境电商线上店铺智能装修系统源码开发需要以下步骤&#xff1a; 1. 确定需求&#xff1a;首先&#xff0c;需要明确线上店铺智能装修系统的具体需求。 2. 选择开发语言和框架&#xff1a;根据需求&#xff0c;选择合适的开发语言和框架进行开发&#xff0c;可以提高…
阅读更多...
深入JVM - JIT分层编译技术与日志详解

深入JVM - JIT分层编译技术与日志详解

深入JVM - JIT分层编译技术与日志详解 文章目录 深入JVM - JIT分层编译技术与日志详解1. 背景简介2. JIT 编译器2.1. 客户端版本的编译器: C12.2. 服务端版本的编译器: C22.3. Graal JIT 编译器 3. 分层编译技术(Tiered Compilation)3.1. 汇聚两种编译器的优点3.2. 精准优化(Ac…
阅读更多...
Profibus-DP转modbus RTU网关modbus rtu和tcp的区别

Profibus-DP转modbus RTU网关modbus rtu和tcp的区别

捷米JM-DPM-RTU网关在Profibus总线侧实现主站功能&#xff0c;在Modbus串口侧实现从站功能。可将ProfibusDP协议的设备&#xff08;如&#xff1a;EH流量计、倍福编码器等&#xff09;接入到Modbus网络中&#xff1b;通过增加DP/PA耦合器&#xff0c;也可将Profibus PA从站接入…
阅读更多...
makefile include 使用介绍

makefile include 使用介绍

文章目录 前言一、include 关键字1. 语法介绍2. 处理方式示例&#xff1a; 二、- include 操作总结 前言 一、include 关键字 1. 语法介绍 在 Makefile 中&#xff0c;include 指令&#xff1a; 类似于 C 语言中的 include 。将其他文件的内容原封不动的搬入当前文件。 当 …
阅读更多...
手机便签中可以打勾的圆圈或小方块怎么弄？

手机便签中可以打勾的圆圈或小方块怎么弄？

在日常的生活和工作中&#xff0c;很多网友除了使用手机便签来记录灵感想法、读书笔记、各种琐事、工作事项外&#xff0c;还会用它来记录一些清单&#xff0c;例如待办事项清单、读书清单、购物清单、旅行必备物品清单等。 在按照记录的清单内容来执行的时候&#xff0c;为了…
阅读更多...
企业权限管理（六）-订单详情

企业权限管理（六）-订单详情

订单详情查询 跳转到订单详情页面orders-show.jsp <button type"button" class"btn bg-olive btn-xs" onclick"location.href${pageContext.request.contextPath}/orders/findById.do?id${orders.id}">详情</button>OrdersControl…
阅读更多...
利用MS-SAMR协议修改用户密码

利用MS-SAMR协议修改用户密码

本文为Windows RPC利用系列文章的第一篇&#xff0c;主要介绍关于MS-SAMR的部分利用&#xff0c;在后续的文章中将继续介绍RPC在渗透测试中的应用 在渗透测试过程中&#xff0c;经常遇到拿到用户的NTLM哈希但无法解密出明文密码的情况。本文介绍并分析一种在仅知道域用户密码哈…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023