【腾讯云 Cloud studio 实战训练营】搭建Next框架博客——抛开电脑性能在云端编程(沉浸式体验)

文章目录

    • ⭐前言
    • ⭐进入cloud studio工作区指引
      • 💖 注册coding账号
      • 💖 选择cloud studio
      • 💖 cloud studio选择next.js
      • 💖 安装react的ui框架(tDesign)
      • 💖 安装axios
      • 💖 代理请求跨域
      • 💖 登录界面配置
      • 💖 注册界面配置
      • 💖 clone 仓库代码
      • 💖 运行效果
    • ⭐总结
    • ⭐结束

yma16-logo

⭐前言

大家好,我是yma16,本期给大家分享CloudStudio搭建Next框架博客_抛开电脑性能在云端编程。
next.js博客系列的往期文章如下:
博客搭建_初始化next项目
博客搭建_登录注册
博客搭建_react-markdown渲染内容
腾讯云 Cloud studio 简介

  • 接近本地 IDE 的开发体验

无需下载安装,随时随地打开浏览器就能写代码,支持代码高亮、自动补全、全功能终端、实时保存等功能。拥有和本地 IDE 一样流畅的编辑体验。

  • 多环境可选,或连接到云主机

内置 Node.js、Java、Python 等常见环境,为您省去复杂的配置工作,直接进入开发状态。或者您也可以将其连接到自己的云主机,来管理云主机中的资源。

  • 随时分享预览效果

在 Cloud Studio 中快速生成预览链接,无论是分享给别人来展示项目,还是将其作为调试接口,都极为方便。

  • 兼容 VSCode 插件

默认的配置无法满足需求?您还可以在线安装 VSCode 的插件来增强使用体验。目前 Cloud Studio 兼容绝大多数 VSCode 插件。

解决问题

  • 问题修复效率低

开发和运维是对立的,测试和安全活动总是在项目晚期才进行,这导致项目前松后紧,出现了问题也来不及修复。

  • 有效工作时间缩短

产品和服务交付中的关键活动都是靠手动操作和互相交接,团队成员经常要等待其他人的工作完成才能进行自己的工作。

  • 交付频频延期

特性交付的周期经常延迟,质量频频出现问题,特别是与生产环境部署相关的部分。对客户和业务造成了负面影响。

vscode的底层框架Electron

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

腾讯云cloud studio的在线vscode和客户端vscode底层的Electron框架写的ui界面有着异曲同工之妙。

⭐进入cloud studio工作区指引

链接直达:
https://coding.net/products/cloudstudio
版本记录内容清晰,开发生态良好
product-studio

💖 注册coding账号

首选腾讯云账号登录,便于后续的服务器绑定。
创建项目
create-project

💖 选择cloud studio

选择左侧菜单栏的cloud studio
nav-menu

💖 cloud studio选择next.js

进入cloud studio 云端ide环境选择模板——next.js
next-js

ui就是在线的vscode,因为vscode本身就是Electron前端框架写的,个人理解这里是部署在服务器的当成了前端的项目工程.

cloud-studio-ui

发现这个是next的js版本,ok,由于我之前的博客讲解的是react版本的,那么接下来我们再来走一遍搭建。

💖 安装react的ui框架(tDesign)

同理于之前的next博客搭建
这里使用腾讯出品的ui框架tdesing

$ npm i tdesign-react

npm-install

在next.js引入
next.config.js配置

/** @type {import('next').NextConfig} */
const nextConfig = {reactStrictMode: true,experimental: {transpilePackages: ['tdesign-react']}
}
module.exports = nextConfig

_app.tsx配置

import '@/styles/globals.css'
import 'tdesign-react/dist/tdesign.css'; // 全局引入tdesign所有组件样式代码
import type { AppProps } from 'next/app'export default function App({ Component, pageProps }: AppProps) {return <Component {...pageProps} />
}

💖 安装axios

安装axios库

npm install axios

定义service

import axois from 'axios'export function loginAction(params){return axois.post('/api-blog/user/login/',params)
}export function registerAction(params){return axois.post('/api-blog/user/register/',params)
}

💖 代理请求跨域

跨域配置
next.config.js

/** @type {import('next').NextConfig} */const nextConfig = {reactStrictMode: true,experimental: {transpilePackages: ['tdesign-react']},async rewrites() {return [//代理重定向{ source: '/api-blog/:path*', destination: `https://yongma16.xyz/api/:path*/` },]},
}module.exports = nextConfig

💖 登录界面配置

login.tsx

import React from 'react';
import { Form, Input, Button, MessagePlugin,Link } from 'tdesign-react';
import { DesktopIcon, LockOnIcon } from 'tdesign-icons-react';
import {loginAction} from "../../service/user/userApi"
import { useRouter } from 'next/router'const { FormItem } = Form;export default function BaseForm() {const router = useRouter()const rules=[{ required: true, message: '不能为空', type: 'warning' }]const onSubmit = (e) => {console.log(e);if (e.validateResult === true) {loginAction({name:e.fields?.account,password:e.fields?.password}).then(res=>{console.log('res',res)MessagePlugin.info('登录成功');}).catch(r=>{MessagePlugin.error('登录失败\n'+JSON.stringify(r));})}};const jumpAction=()=>{router.push('/views/sys/register')}const onReset = (e) => {console.log(e);MessagePlugin.info('重置成功');};return (<div className={"login-box"}><div className={"login-container"}><div style={{width:'100%',textAlign:'center',marginBottom:'20px',fontWeight:'bold'}}>登录</div><div style={{ width: 350 }}><Form statusIcon={true} onSubmit={onSubmit} onReset={onReset} colon={true} labelWidth={0}><FormItem name="account" rules={rules}><Input clearable={true} prefixIcon={<DesktopIcon />} placeholder="请输入账户名" /></FormItem><FormItem name="password" rules={rules}><Input type="password" prefixIcon={<LockOnIcon />} clearable={true} placeholder="请输入密码"/></FormItem><FormItem><Button theme="primary" type="submit" block>登录</Button></FormItem></Form><div style={{width:'100%',textAlign:'center',marginTop:'10px'}} onClick={jumpAction}>没有账号?<Link theme="primary">前往注册</Link></div></div></div></div>);
}

💖 注册界面配置

register.tsx

import React from 'react';
import { Form, Input, Button, MessagePlugin,Link } from 'tdesign-react';
import { DesktopIcon, LockOnIcon } from 'tdesign-icons-react';
import {loginAction} from "../../service/user/userApi"
import { useRouter } from 'next/router'const { FormItem } = Form;export default function BaseForm() {const router = useRouter()const rules=[{ required: true, message: '不能为空', type: 'warning' }]const onSubmit = (e) => {console.log(e);if (e.validateResult === true) {loginAction({name:e.fields?.account,password:e.fields?.password}).then(res=>{console.log('res',res)MessagePlugin.info('登录成功');}).catch(r=>{MessagePlugin.error('登录失败\n'+JSON.stringify(r));})}};const jumpAction=()=>{router.push('/views/sys/register')}const onReset = (e) => {console.log(e);MessagePlugin.info('重置成功');};return (<div className={"login-box"}><div className={"login-container"}><div style={{width:'100%',textAlign:'center',marginBottom:'20px',fontWeight:'bold'}}>登录</div><div style={{ width: 350 }}><Form statusIcon={true} onSubmit={onSubmit} onReset={onReset} colon={true} labelWidth={0}><FormItem name="account" rules={rules}><Input clearable={true} prefixIcon={<DesktopIcon />} placeholder="请输入账户名" /></FormItem><FormItem name="password" rules={rules}><Input type="password" prefixIcon={<LockOnIcon />} clearable={true} placeholder="请输入密码"/></FormItem><FormItem><Button theme="primary" type="submit" block>登录</Button></FormItem></Form><div style={{width:'100%',textAlign:'center',marginTop:'10px'}} onClick={jumpAction}>没有账号?<Link theme="primary">前往注册</Link></div></div></div></div>);
}

💖 clone 仓库代码

这里原理已经讲的差不多了,然后克隆之前的仓库代码过来
git-clone
代码仓库:
https://gitcode.net/qq_38870145/next-blog.git

code-remote

💖 运行效果

登录样式
next-login-ui
注册样式
register-ui
登录成功!
login-success

⭐总结

Cloud Studio是一种云端编程工具,存在以下6种优势:

  1. 无需安装:Cloud Studio是一种基于云端的工具,无需安装任何软件或插件,只需要连接到互联网即可使用。

  2. 跨平台:Cloud Studio不仅可以在不同的操作系统上使用,而且还可以在不同的设备上使用,包括PC、平板电脑和手机等。

  3. 高效性:Cloud Studio可以提高工作效率,因为它能够自动保存代码,避免了代码丢失的风险。此外,Cloud Studio还可以与其他工具集成,例如Git和Jenkins等,更方便地进行开发和测试。

  4. 多语言支持:Cloud Studio支持多种编程语言,包括Java、Python、Ruby、PHP等,这使得它非常适合对不同语言进行开发的团队。

  5. 可视化:Cloud Studio提供了许多可视化工具,例如图形界面设计器和数据可视化工具,这使得开发过程更加直观和方便。

  6. 安全性:Cloud Studio采用先进的安全技术来保护用户数据和代码,保障了用户的隐私和安全。

个人的思考:
cloud studio的git仓库和云端ide 捆绑,类似于github的在线编辑代码,
不过cloud studio的功能更加丰富,多了绑定服务器和流水线构建等等。
对于未来的开发趋势,个人总结了以下4点:

  1. 远程租用算力,降低硬件要求,降低企业办公成本,降本增效的友好方案
  2. 开发效率提升,开发部署一站式,数据驱动流水线的构建部署
  3. 开发人员门槛降低,0基础的初学者可以快速入门
  4. 底层逻辑被封装,开发人员越来越多,但是开发能力参差不齐

⭐结束

本文分享到这结束,如有错误或者不足之处欢迎指出!
scene

👍 点赞,是我创作的动力!
⭐️ 收藏,是我努力的方向!
✏️ 评论,是我进步的财富!
💖 最后,感谢你的阅读!

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

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

相关文章

动态爬虫IP与反爬虫技术的博弈:揭秘真实反爬虫事例引发的思考

作为一名长期从事爬虫行业动态IP解决方案服务商&#xff0c;我们深知动态IP代理在抗击反爬虫方面的重要性。在当今数字化时代&#xff0c;互联网数据的爆炸性增长让数据采集变得前所未有的重要。然而&#xff0c;随着数据价值的不断提升&#xff0c;反爬虫技术也日益增强&#…

分库分表之基于Shardingjdbc+docker+mysql主从架构实现读写分离(一)

说明&#xff1a;请先自行安装好docker再来看本篇文章&#xff0c;本篇文章主要实现通过使用docker部署mysql实现读写分离&#xff0c;并连接数据库测试。第二篇将实现使用Shardingjdbc实现springboot的读写分离实现。 基于Docker去创建Mysql的主从架构 #创建主从数据库文件夹…

版本控制和团队协作:前端工程化的关键要素

文章目录 版本控制系统介绍&#xff08;如 Git&#xff09;1. 分布式系统2. 分支管理3. 版本控制4. 快速和高效5. 社区和生态系统 分支管理和团队协作流程1. 主分支2. 功能分支3. 开发工作4. 合并到develop5. 发布准备6. 发布 持续集成与持续部署实践持续集成&#xff08;CI&am…

【前端知识】React 基础巩固(三十七)——自定义connect高阶组件

React 基础巩固(三十七)——自定义connect高阶组件 一、手撸一个自定义connect高阶组件 import { PureComponent } from "react"; import store from "../store";/*** connect的参数&#xff1a;* 参数一&#xff1a; 函数* 参数二&#xff1a; 函数* 返…

lc1074.元素和为目标值的子矩阵数量

创建二维前缀和数组 两个for循环&#xff0c;外循环表示子矩阵的左上角&#xff08;x1,y1&#xff09;&#xff0c;内循环表示子矩阵的右下角&#xff08;x2,y2&#xff09; 两个for循环遍历&#xff0c;计算子矩阵的元素总和 四个变量&#xff0c;暴力破解的时间复杂度为O(…

ChatGPT安全技术

前言 近期&#xff0c;Twitter 博主 lauriewired 声称他发现了一种新的 ChatGPT"越狱"技术&#xff0c;可以绕过 OpenAI 的审查过滤系统&#xff0c;让 ChatGPT 干坏事&#xff0c;如生成勒索软件、键盘记录器等恶意软件。 他利用了人脑的一种"Typoglycemia&q…

Vue.js2+Cesium 四、模型对比

Vue.js2Cesium 四、模型对比 Cesium 版本 1.103.0&#xff0c;低版本 Cesium 不支持 Compare 对比功能。 Demo 同一区域的两套模型&#xff0c;实现对比功能 <template><div style"width: 100%; height: 100%;"><divid"cesium-container"…

MTK联发科安卓核心板MT8385(Genio 500)规格参数资料_性能介绍

简介 MT8385安卓核心板 是一个高度集成且功能强大的物联网平台&#xff0c;具有以下主要特性&#xff1a; l 四核 Arm Cortex-A73 处理器 l 四核Arm Cortex-A53处理器 l Arm Mali™-G72 MP3 3D 图形加速器 (GPU)&#xff0c;带有 Vulkan 1.0、OpenGL ES 3.2 和 OpenCL™ 2.x …

Linux中的file命令:查看文件类型

2023年8月1日&#xff0c;周二上午 目录 简要说明使用方法MIME类型举例说明 简要说明 在Linux中&#xff0c;file命令用于识别文件类型。 file命令可以识别各种类型的文件&#xff0c;包括普通文件、目录、符号链接、设备文件、压缩文件、二进制可执行文件等。 它是一个非常…

云原生势不可挡,如何跳离云原生深水区?

云原生是云计算领域一大热词&#xff0c;伴随云原生概念而来的是数字产业迎来井喷、数字变革来临、数字化得以破局以及新一波的技术红利等等。云原生即“云”原生&#xff0c;顾名思义是让“应用”最大程度地利用云的能力&#xff0c;发挥云价值的最佳路径。具体来说&#xff0…

抄写Linux源码(Day2:构建调试环境)

我们计划把操作系统运行在 qemu-system-x86_64 上&#xff0c;使用 gdb 调试 经过 RTFM&#xff0c;可以使用 qemu-system-x86_64 -s -S 让 qemu 在启动之后停住 接着在另一个窗口运行 gdb&#xff0c;输入命令 target remote localhost:1234&#xff0c;即可连接qemu并调试运…

Zookeeper笔记

为什么要使用Zookeeper dubbo需要一个注册中心&#xff0c;而Zookeeper是我们在使用Dubbo是官方推荐的注册中心 Zookeeper介绍 Zookeeper的集群机制 Zookeeper是为了其他分布式程序提供服务的&#xff0c;所以不能随便就挂了。Zookeeper的集群机制采取的是半数存活机制。也…

【MySQL】下载安装以及SQL介绍

1&#xff0c;数据库相关概念 以前我们做系统&#xff0c;数据持久化的存储采用的是文件存储。存储到文件中可以达到系统关闭数据不会丢失的效果&#xff0c;当然文件存储也有它的弊端。 假设在文件中存储以下的数据&#xff1a; 姓名 年龄 性别 住址 张三 23 男 北京…

mysql进阶-用户的创建_修改_删除

1. 使用mysql单次查询 [rootVM-4-6-centos /]# mysql -h localhost -P 3306 -p mytest -e "select * from book1"; Enter password: ------------------------------------------- | id | category_id | book_name | num | ----------------------------…

第17节 R语言分析:生物统计数据集 R 编码分析和绘图

生物统计数据集 R 编码分析和绘图 生物统计学,用于对给定文件 data.csv 中的医疗数据应用 R 编码,该文件是患者人口统计数据集,包含有关来自各种祖先谱系的个体的标准信息。 数据集特征解释 脚本 output= file("Output.txt") # File name of output log sink(o…

Spring-mybatis结合的底层原理

1.项目前期准备 1.1 导入maven jar包 <dependencies><!-- spring依赖 --><dependency><groupId>org.springframework</groupId><artifactId>spring-context</artifactId><version>5.2.5.RELEASE</version></depende…

js中的设计模式

设计模式 代码整体的结构会更加清楚&#xff0c;管理起来会更加方便&#xff0c;更好地维护 设计模式是一种思想 发布订阅 模块化开发 导入很多模块 容器即数组存储未来要执行的方法&#xff0c;同addEventListener 数组塌陷问题* 由于删除了元素&#xff0c;导致从删除元素的位…

easyui实用点

easyui实用点 1.下拉框&#xff08;input框只能选不能手动输入编辑&#xff09; data-options"editable:false"//不可编辑2.日期框&#xff0c;下拉框&#xff0c;文本框等class class"easyui-datebox"//不带时分秒 class"easyui-datetimebox"…

idea调节文字大小、日志颜色、git改动信息

idea调节菜单栏文字大小&#xff1a; 调节代码文字大小&#xff1a; 按住ctrl滚动滑轮可以调节代码文字大小&#xff1a; 单击文件即可在主窗口上打开显示&#xff1a; idea在控制台对不同级别的日志打印不同颜色 &#xff1a; “grep console”插件 点击某一行的时候&#x…

关于会议OA需求分析与开发功能设计

前言&#xff1a;现如今&#xff0c;企业在会议管理方面对OA系统的需求越来越高。因为会议是企业内部沟通和协作的重要环节&#xff0c;一个高效的会议管理系统可以帮助企业提升会议效率、降低成本&#xff0c;并且提高内部信息共享的效果。 目录 一&#xff0c;以下是OA系统在…