【腾讯云 Cloud Studio 实战训练营】Cloud Studio实现健康上报小程序（代码开源）

左手的ㄟ右手 2024-04-20 22:25 30阅读 0赞

![在这里插入图片描述][9a05a964204347e386d43c7d30f00120.gif_pic_center]

#### 目录 ####

*  ?前言
 *  ?实验介绍
 *  ?产品介绍
 *  ?注册Cloud Stdio
 *  ?后端Spring服务
 *   *  ?创建项目
     *  上传项目
     *  数据库连接与导入
 *  ?Vue后台管理
 *   *  创建项目
     *  编辑模板信息
     *  选择环境镜像
     *  上传资源文件
 *  ?小程序
 *  ⭐总结

## ?前言 ##

Cloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器就能在线编程。 Cloud Studio 作为在线 IDE，包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能，同时支持实时调试、插件扩展等，可以帮助开发者快速完成各种应用的开发、编译与部署工作。  
本项目优先采用在线IDE-Cloud Studio进行开发，这个项目是年前做的，是一个小型的课设案例，一直未开源，项目有两个端（小程序和后台）一个服务端（spring）

项目素材：  
![在这里插入图片描述][70d553f1213746ea8a10533fbe89af17.png]

技术栈：

*  vue2
 *  Java

--------------------

## ?实验介绍 ##

通过本次项目，实现一个部署在云端的服务，可供学生健康上报，供管理员查看导出

--------------------

## ?产品介绍 ##

> Cloud Studio 是基于浏览器的集成式开发环境（IDE），为开发者提供了一个永不间断的云端工作站。用户在使用 Cloud Studio 时无需安装，随时随地打开浏览器就能在线编程。 Cloud Studio 作为在线 IDE，包含代码高亮、自动补全、Git 集成、终端等 IDE 的基础功能，同时支持实时调试、插件扩展等，可以帮助开发者快速完成各种应用的开发、编译与部署工作。

--------------------

## ?注册Cloud Stdio ##

[注册Cloud Studio][Cloud Studio]，这里注册和登录 Cloud Studio 非常方便，提供了下面三种注册方式：

*  使用 CODING 账号授权注册/登录
 *  使用微信授权注册/登录 （本文使用方式）
 *  使用 GitHub 授权注册/登录

coding可对代码进行托管，微信授权注册后可以在这里绑定  
![在这里插入图片描述][8eaa65f528eb434d971e4360c8e3def0.png]

## ?后端Spring服务 ##

### ?创建项目 ###

点击【空间模板】【框架模板】选择Spring boot  
![在这里插入图片描述][a660c2b2f6654681b6330492daaa026a.png]

### 上传项目 ###

打开后先等待安装服务  
![在这里插入图片描述][63a3fce414ee4d5f8355cd5236c14890.png]  
安装完成后，将资源文件进行替换  
![在这里插入图片描述][8d56814d19674b65b97ef9e125394c28.png]  
等待上传完成  
![在这里插入图片描述][08bc7734d2a24f5babcdc9055bc384ce.png]  
完成后，pom.xml文件需要修复替换

<dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <version>8.0.30</version>
            </dependency>
    
     <dependency>
                <groupId>com.google.code.gson</groupId>
                <artifactId>gson</artifactId>
                <version>2.10.1</version>
            </dependency>

### 数据库连接与导入 ###

这里没有使用IDE提供的数据库，因为我的navicat连接不上，所以就放弃了，这里用的是外网的服务器  
宝塔创建数据库  
![在这里插入图片描述][1ccf5f73d4a44309bee360cd4b56bdad.png]  
导入sql文件  
![在这里插入图片描述][590bd038b8ba49bea0011252ded56da9.png]

修改Spring配置  
![在这里插入图片描述][13a0da07ddeb452ba5e160affd3d33b8.png]  
点击启动  
![在这里插入图片描述][388ec0361d10435297e28aa7e8e30c3e.png]

接口测试  
点击【端口】再点击网络图标  
![在这里插入图片描述][0e8806b873b8494eb5821e63642151b5.png]

输入接口地址，进行访问，到这里说明spring后端服务已经全部跑通了  
![在这里插入图片描述][6cfc71cc7aa04ac4919934013680d1d9.png]  
或者通过HTTP测试工具  
![在这里插入图片描述][38019ed9b9f5435dba7e0eea71c12efa.png]

![在这里插入图片描述][58552d59d8e141ae8a7d1700aace2cea.png]

## ?Vue后台管理 ##

### 创建项目 ###

点击【空间模板】【新建模板】【手动新建】  
![在这里插入图片描述][66a26528dd9c4c2ca398adc2fb9c6a0b.png]

### 编辑模板信息 ###

点击【新建模板】【手动新建】填写模板信息  
![在这里插入图片描述][1a72402e9f0c4416833c2489d5fec6c7.png]

### 选择环境镜像 ###

之前用的是node16 这里不可选，暂时先用这个吧  
![在这里插入图片描述][89a008b95d1b4e56a20246371e07c253.png]

### 上传资源文件 ###

![在这里插入图片描述][f9f5f0ac03e946d69b1e5f6bc44a4073.png]

修改接口，将所有localhost:8088改成https://jdcgqk-eeswco-8081.app.myide.io/  
![在这里插入图片描述][1dd25da7c2ab4a10b8e66dfca283784a.png]  
编译运行

npm install

![在这里插入图片描述][9ffe9ffb78444a8799e4b56253ad40e9.png]

由于cloud stdio node环境版本太高，我这里版本用的是16的所以会有很多报错，尝试了不行，我们就不演示管理后台了  
![在这里插入图片描述][0a3a075d0e614009945f28f753cc7521.png]

## ?小程序 ##

打开微信开发者工具启动小程序  
![在这里插入图片描述][8a354a2c657f4b888c117bb331191ba4.png]

修改接口Host

> request.js

小程序登录测试  
![在这里插入图片描述][0c14e752f8ab4a8286cac7ebaba75b81.png]  
![在这里插入图片描述][9e24b34175d942bbaf061ea4cb1af399.png]  
![在这里插入图片描述][60884684e6e345daa554f1cb11eacdf3.png]

## ⭐总结 ##

本次项目用到了在线IDE：Cloud stdio，不得不说真的很方便，我经过这次体验总结出几个优缺点

<table> 
 <thead> 
  <tr> 
   <th>Cloud stdio</th> 
   <th>优点</th> 
   <th>缺点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>启动相关</td> 
   <td>方便快捷，有提示和各种插件</td> 
   <td>不能同时启动多个项目，像上面的多端就不适合</td> 
  </tr> 
  <tr> 
   <td><strong><code>环境版本</code></strong></td> 
   <td></td> 
   <td>缺少PHP等环境，另外Node版本能选择的太少等问题</td> 
  </tr> 
  <tr> 
   <td>界面</td> 
   <td>整洁清爽，容易快速上手，可选择基础框架快速开发</td> 
   <td>新建工作空间不能使用本地代码进行上传只能从仓库拉取</td> 
  </tr> 
  <tr> 
   <td>费用</td> 
   <td></td> 
   <td>标准版包月300有点贵</td> 
  </tr> 
 </tbody> 
</table>

**建议：**

> 添加多个环境，以及多版本选择  
> ![在这里插入图片描述][0b9aebdfe21e40b993d3a34e5998eff8.png]

?希望你能喜欢我的其他作品  
[《记一次云之家签到抓包》][Link 1]  
[《记一次视频抓包m3u8解密过程》][m3u8]  
[《抓包部分软件时无网络+过代理检测 解决办法 安卓黄鸟httpcanary+vmos》][_ _httpcanary_vmos]  
[《Python】记录抓包分析自动领取芝麻HTTP每日免费IP（成品+教程）》][Python_HTTP_IP]  
[《某课抓包视频 安卓手机：黄鸟+某课app+VirtualXposed虚拟框架》][_app_VirtualXposed]

推荐专栏：

[《Python爬虫脚本项目实战》][Python]

该专栏往期文章：  
[《【Python爬虫项目实战一】获取Chatgpt3.5免费接口文末付代码（过Authorization认证）》][Python_Chatgpt3.5_Authorization]

?如果感觉看完文章还不过瘾，欢迎查看我的其它专栏  
?作者对python有很大的兴趣，完成过很多独立的项目：例如滇医通等等脚本，但是由于版权的原因下架了，爬虫这一类审核比较严谨，稍有不慎就侵权违规了，所以在保证质量的同时会对文章进行筛选

如果您对爬虫感兴趣请收藏或者订阅该专栏哦[《Python爬虫脚本项目实战》][Python]，如果你有项目欢迎联系我，我会同步教程到本专栏！

[?**Python爬虫项目实战系列文章**][Python 1]！！  
⭐⭐欢迎订阅⭐⭐

[`【Python爬虫项目实战一】获取Chatgpt3.5免费接口文末付代码（过Authorization认证）`][Python_Chatgpt3.5_Authorization 1]  
[`【Python爬虫项目实战二】Chatgpt还原验证算法-解密某宝伪知网数据接口`][Python_Chatgpt_-]

⭐⭐欢迎订阅⭐⭐  
![在这里插入图片描述][818388c859c04a719ff9c282527b08e6.png]

**[Python爬虫脚本项目实战][Python 2]**  
![在这里插入图片描述][508ce3f3ee894fa7b33136db7bbecc7a.png]

Coding项目：https://e.coding.net/coding-damowang/healthyspringboot/workspace.git

[9a05a964204347e386d43c7d30f00120.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/67dfa59b261348fb849259caeec34eec.gif
[70d553f1213746ea8a10533fbe89af17.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/953b8346ecaa4231a2bd0f707351dd12.png
[Cloud Studio]: https://ide.cloud.tencent.com/
[8eaa65f528eb434d971e4360c8e3def0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/07bdc9aaf4174775b672096a83cc5b70.png
[a660c2b2f6654681b6330492daaa026a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/436876a82a05402796142a9c4e32b300.png
[63a3fce414ee4d5f8355cd5236c14890.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/043f001701e94effbf85e09115877f95.png
[8d56814d19674b65b97ef9e125394c28.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/c2bd85e82cc24f3dad2bb780436e89ed.png
[08bc7734d2a24f5babcdc9055bc384ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/637e5ee4da9e4c889d6699dd38d70dfc.png
[1ccf5f73d4a44309bee360cd4b56bdad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/adadfc6a73dd4e08990eee3649023a99.png
[590bd038b8ba49bea0011252ded56da9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/f906361a5d964319b95545cbba19f381.png
[13a0da07ddeb452ba5e160affd3d33b8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/11934bae800a40859efecb85a0bc78b2.png
[388ec0361d10435297e28aa7e8e30c3e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/46ecfbe40a4a47b4b6b13a0617ff3b13.png
[0e8806b873b8494eb5821e63642151b5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/ebf2365a813d48cc82c84cb6f7e1d994.png
[6cfc71cc7aa04ac4919934013680d1d9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/dcb475c303d8490797bf561379fa4d34.png
[38019ed9b9f5435dba7e0eea71c12efa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/faaa4cf0fea84697bf044b0d1419327b.png
[58552d59d8e141ae8a7d1700aace2cea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/3285885464bf4baea02e2ffe9b2e9659.png
[66a26528dd9c4c2ca398adc2fb9c6a0b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/c2b4f8d49d9e4467af8f183eb6bfd32e.png
[1a72402e9f0c4416833c2489d5fec6c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/e3f7b2ca76924ff6b06872cb278be706.png
[89a008b95d1b4e56a20246371e07c253.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/879cc8cf3cb1433e8657e23e7a362d8b.png
[f9f5f0ac03e946d69b1e5f6bc44a4073.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/250630524d6e49d0a2659a223cd80f78.png
[1dd25da7c2ab4a10b8e66dfca283784a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/5b17e646fdeb47b6a0f699e79a8d2a21.png
[9ffe9ffb78444a8799e4b56253ad40e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/f99e2a45f1cd4677b4a53450d23014a9.png
[0a3a075d0e614009945f28f753cc7521.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/80582ed051eb45b5baa874e34c0a4d79.png
[8a354a2c657f4b888c117bb331191ba4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/1d0d5fe2eee3479aa299ad105ff76ab5.png
[0c14e752f8ab4a8286cac7ebaba75b81.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/93db5262994d4d2f9992ba7b033becc5.png
[9e24b34175d942bbaf061ea4cb1af399.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/97e87cd29fbc4ed1835c264973e2b8f9.png
[60884684e6e345daa554f1cb11eacdf3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/72d21dd333dd4eb6a5909064f90863c7.png
[0b9aebdfe21e40b993d3a34e5998eff8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/01daca13e6dc4a7a819ad298cd91d9a4.png
[Link 1]: https://blog.csdn.net/qq_35230125/article/details/113903423
[m3u8]: https://blog.csdn.net/qq_35230125/article/details/121647199
[_ _httpcanary_vmos]: https://blog.csdn.net/qq_35230125/article/details/121696563
[Python_HTTP_IP]: https://blog.csdn.net/qq_35230125/article/details/122890424
[_app_VirtualXposed]: https://blog.csdn.net/qq_35230125/article/details/121643395
[Python]: http://t.csdn.cn/gGn4P
[Python_Chatgpt3.5_Authorization]: https://blog.csdn.net/qq_35230125/article/details/130199605
[Python 1]: http://t.csdn.cn/iv7Xl
[Python_Chatgpt3.5_Authorization 1]: https://taila.blog.csdn.net/article/details/130199605
[Python_Chatgpt_-]: https://taila.blog.csdn.net/article/details/130240841
[818388c859c04a719ff9c282527b08e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/953a3a304e104efcbd4b7ec366ce354a.png
[Python 2]: http://t.csdn.cn/aUa9g
[508ce3f3ee894fa7b33136db7bbecc7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/58cc25019058473795f23ffa95f5af26.png