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

文章目录

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

⭐前言

大家好，我是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

关于next框架

Next.js是一个 React 开发框架。
特性：

直观的、基于页面的路由系统（并支持动态路由）预渲染。支持在页面级的静态生成 (SSG) 和服务器端渲染 (SSR)
自动代码拆分，提升页面加载速度具有经过优化的预取功能的客户端路由内置 CSS 和 Sass 的支持，并支持任何 CSS-in-JS 库
开发环境支持快速刷新利用 Serverless Functions 及 API 路由构建 API 功能完全可扩展

React 函数组件是一个简单的 React 组件，是一个纯 JavaScript 函数，用于定义组件的结构和行为。相比于 Class 组件，函数组件的代码量更少，结构更清晰，也更易于测试和维护。下面是一些函数组件的风格介绍：

使用箭头函数定义函数组件：

const MyComponent = () => {
  return <div>Hello World</div>;
}

使用 props 传递数据：

const MyComponent = (props) => {
  return <div>Hello {props.name}</div>;
}

// 使用组件时传递 props
<MyComponent name="World" />

使用解构赋值获取 props：

const MyComponent = ({ name }) => {
  return <div>Hello {name}</div>;
}

// 使用组件时传递 props
<MyComponent name="World" />

通过 useState Hook 管理组件状态：

import React, { useState } from "react";

const MyComponent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

使用 useEffect Hook 处理副作用：

import React, { useState, useEffect } from "react";

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

这些风格可以帮助您更加简洁和有效地编写 React 函数组件。

进入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

💖 登录界面配置

页面元素：

登录的表单包括账号和密码
没有账号可以跳转到注册页面的按钮
表单校验

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>
    );
}

💖 注册界面配置

思路分解

页面元素：

注册的表单包括账号、密码和确认密码
有账号可以跳转到登录页面
表单校验
registerAction注册对接后端的接口，jumpAction跳转到登录的方法，reset重置表单的方法。
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种优势：

无需安装：Cloud Studio是一种基于云端的工具，无需安装任何软件或插件，只需要连接到互联网即可使用。
跨平台：Cloud Studio不仅可以在不同的操作系统上使用，而且还可以在不同的设备上使用，包括PC、平板电脑和手机等。
高效性：Cloud Studio可以提高工作效率，因为它能够自动保存代码，避免了代码丢失的风险。此外，Cloud Studio还可以与其他工具集成，例如Git和Jenkins等，更方便地进行开发和测试。
多语言支持：Cloud Studio支持多种编程语言，包括Java、Python、Ruby、PHP等，这使得它非常适合对不同语言进行开发的团队。
可视化：Cloud Studio提供了许多可视化工具，例如图形界面设计器和数据可视化工具，这使得开发过程更加直观和方便。
安全性：Cloud Studio采用先进的安全技术来保护用户数据和代码，保障了用户的隐私和安全。

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