【腾讯云 Cloud Studio 实战训练营】从零开始搭建一个数据大屏

news2024/9/28 23:36:12

文章目录

  • 前言
  • 得到什么?
  • 使用Cloud Studio
    • 登录Cloud Studio
    • 登录方式
    • Cloud Studio 功能介绍
    • 项目创建
    • 配置描述
      • 新建工作空间
      • 绑定Coding
      • 创建仓库
      • 绑定coding
      • 创建项目
      • 项目空间
  • 项目搭建
    • nuxt 脚手架
      • Cloud Studio 安装插件
      • nuxt初始项目预览
        • 问题描述
      • 下载Datav 并体验
      • 页面结构展示
    • 获取基础数据
      • 编写py 脚本
      • 获取数据截图
      • 问题描述
    • 项目效果预览
    • 项目演示
  • 提交代码
  • 资源
    • 项目coding 地址
    • Cloud Studio 地址
  • 个人总结
    • 问题一:
    • 问题二:
    • 问题三:
    • 优点:

前言

欢迎来到本篇技术博客!今天我们将和大家一起探索搭建数据大屏的全过程。作为腾讯云 Cloud Studio 实战训练营的参与者,我们将从零开始构建一个令人惊叹的数据大屏的项目。
在这个项目中,我们主要使用了两项关键技术:nuxtjs 和 datav。

  1. Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,它提供了丰富的功能和优秀的开发体验,使我们能够快速构建出具有高度可扩展性的数据大屏应用。
  2. datav 是一款强大的数据可视化工具,它为我们呈现了绚丽多彩、直观易懂的数据展示效果。
    同时为了更加友好的展示该项目,我们还用到了 Python这门开发语言 。通过编写 Python 脚本, 从 CSDN上抓取博客数据。这些数据将成为我们数据大屏的基础,为我们展示数据的价值和意义提供支持。

在本篇博客中,我们将详细介绍 Cloud Studio 如和使用以及搭建数据大屏的步骤和流程。无论您是初学者还是有一定经验的开发者,我们相信本文都将为您提供有用的指导和启示。让我们一起开始这个令人兴奋的技术之旅吧!

得到什么?

通过阅读本篇博客你将学到如下内容

  1. 使用Cloud Studio进行项目开发
  2. Cloud Studio 是一个什么 如和使用
  3. 若要将 Cloud Studio 项目链接到 coding 作为项目的管理仓库
  4. 使用 Python 来爬取CSDN博客信息
  5. python 的基本使用
  6. Nuxt.js 的安装和基本配置
  7. DataV 的使用
  8. 使用Git等工具管理项目代码的版本以及版本迭代。
  9. UI/UX 设计 页面布局、交互设计、视觉设计等方面。
  10. 项目开箱即用哦!!!

使用Cloud Studio

登录Cloud Studio

首先我们先登录Cloud Studio 这个网站 Cloud Studio , 点击右上角的 登录注册 按钮
登录Cloud Studio

登录方式

Cloud Studio 贴心的准备了三种登录方式(Coding DevOps、微信、Github), 这里我们选择的是微信登录, 各位开发者可以根据自己的喜好选择登录方式哦!!
在这里插入图片描述

Cloud Studio 功能介绍

登录之后进入主界面,里面集成了很多模板,可以选择自己需要使用的模板直接初始化项目。
模板主要分为:常用模板 , 框架模板, 建站模板 , 云原生模板。常见的有Java、Python、Go、Nodejs、Net、主流的前端框架都可以快速创建使用。真的好齐全哦!!!

功能介绍
如果模板里没有你想要的还可以自己新建一个模板哦! 这个功能我们不做详细讲解, 感兴趣的同学可以 去体验一下哦 !

手动新建

项目创建

我们本次是使用Nuxt + datav 搭建一个数据大屏的项目, 这里我们直接新建工作空间,进行项目搭建
 项目创建

配置描述

新建工作空间

当我们点击新建工作空间 里面的配置中有 在弹出的创建工作空间窗口中,需要进行以下配置:

  • 空间名称
  • 空间描述
  • 工作类别
  • 代码来源
  • 选择仓库服务商
  • 开发环境
  • 规格配置
    注意 这里我选择的是coding 作为仓库服务商, 因此需要自己注册一个coding 账户, 这里不做详细讲解
    如图 输入coding的域名前缀就可以了
    在这里插入图片描述

绑定Coding

点击 选择仓库服务商 这里我选的是coding 根据喜好来就行哦!
选择coding之后需要关联一下团队, 输入coding的团队域名前缀就好了
在这里插入图片描述
关联好团队之后点击继续, 跳转到绑定页面, 直接点击确定授权即可

在这里插入图片描述

创建仓库

coding中选择按需选择 点击选择

在这里插入图片描述

填写项目信息完成创建即可

在这里插入图片描述

在创建的项目中选择代码仓库 创建代码仓库即可

在这里插入图片描述

绑定coding

在仓库中选择在coding中创建的git 仓库即可, 因为要用到python 所以这里选择的开发环境All in One

在这里插入图片描述

创建项目

点击创建, 来创建项目
注意 项目加载需要一定时间哦!!

在这里插入图片描述

项目空间

当项目空间加载完成之后, 展现在我们面前的就是 工程环境喽!! 是不是和vscode 很像啊!!

在这里插入图片描述

项目搭建

如图 我们在工程目录中,创建两个项目文件pythonObjectwebObject

  • pythonObject : 用于编写一些获取数据的脚本
  • webObject: 用于编写nuxt 数据大屏的项目
    在这里插入图片描述

nuxt 脚手架

搭建项目的步骤如下:

  1. 使用指令cd webProject , 进入项目 webProject
  2. 使用 nvm 版本管理工具, 安装19.0.0 的node 环境, 指令 nvm install 19.0.0
  3. 终端输入npx create-nuxt-app webDatav , 创建 webDatav 项目
  4. 脚手架插件选择如下图
    在这里插入图片描述

脚手架插件选择

在这里插入图片描述

Cloud Studio 安装插件

为了更好的开发, 我们可以安装一些插件, 如图所示

在这里插入图片描述

设置适合自己的字体大小

步骤如下

  1. 点击左下角的设置
  2. 在列表中点击设置
  3. 常用设置中选择控制字体大小
  4. 设置字体大小

在这里插入图片描述

nuxt初始项目预览

问题描述

如果直接运行项目, 会发现,项目无法正常打开,如图

在这里插入图片描述
这里我们就需要进行config的配置了,在nuxt.config.js 中添加如下代码,再次运行

server: {
    port: 3000, // default: 3000
    host: '0.0.0.0' // default: localhost
  }

在这里插入图片描述

修改后运行如图

在这里插入图片描述

下载Datav 并体验

  1. 下载依赖
    在终端输入 npm install @jiaminghi/data-view 下载datav 的插件
  2. 配置plugins
    plugins文件中创建datav.js 文件中添加代码
import Vue from 'vue'

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'

Vue.use(dataV)
  1. nuxt.config.js 中配置

plugins中添加 { src: '@/plugins/datav.js', ssr: false } , bulid 中添加 '/^@jiaminghi/'

 plugins: [
    
    { src: '@/plugins/datav.js', ssr: false }
  ],
   build: {
    transpile: [/^element-ui/, '/^@jiaminghi/'],
  },
  1. 安装sass 用于样式编写
    输入命令 npm install sass-loader@7.3.1 sass@1.64.1 -D 安装sass

页面结构展示

在这里插入图片描述

获取基础数据

编写py 脚本

from selenium import webdriver
import json
from selenium.webdriver.common.by import By
from selenium.common.exceptions import NoSuchElementException
import time

# 设置ChromeDriver的路径
driver_path = ''

# 创建Chrome WebDriver对象
driver = webdriver.Chrome(driver_path)

# 打开网页
url = 'https://so.csdn.net/so/search?spm=1001.2100.3001.7499&q=%E8%85%BE%E8%AE%AF%E4%BA%91%20Cloud%20Studio%20%E5%AE%9E%E6%88%98%E8%AE%AD%E7%BB%83%E8%90%A5&t=blog&u=&utm_medium=distribute.pc_search_hot_word.none-task-hot_word-alirecmd-1-%E8%85%BE%E8%AE%AF%E4%BA%91%20Cloud%20Studio%20%E5%AE%9E%E6%88%98%E8%AE%AD%E7%BB%83%E8%90%A5-null-null.172%5Ev8%5Etag_flag&depth_1-utm_source=distribute.pc_search_hot_word.none-task-hot_word-alirecmd-1-%E8%85%BE%E8%AE%AF%E4%BA%91%20Cloud%20Studio%20%E5%AE%9E%E6%88%98%E8%AE%AD%E7%BB%83%E8%90%A5-null-null.172%5Ev8%5Etag_flag'
driver.get(url)
time.sleep(5)

# 找到结果元素
results = driver.find_element(By.CLASS_NAME, "so-result-list").find_elements(By.CLASS_NAME, "list-item")

# 创建一个空列表用于存储数据
data = []

# 遍历结果元素并提取数据
for result in results:
    time.sleep(5)
    title = result.find_element(By.CLASS_NAME, "title").find_element(By.TAG_NAME, 'a').text
    if "实战训练营】" in title:
        description = result.find_element(By.CLASS_NAME, "item-bd__cont").find_element(By.CLASS_NAME, "row2").text
        try:
            read = result.find_element(By.CLASS_NAME, "item-bd__cont").find_element(By.CLASS_NAME,"item-ft").find_element(By.CLASS_NAME, "btm-view").find_element(By.CLASS_NAME, "num").text
        except NoSuchElementException:
            read = 0
        try:
            zan = result.find_element(By.CLASS_NAME, "item-bd__cont").find_element(By.CLASS_NAME,
                                                                                   "item-ft").find_element(
                By.CLASS_NAME, "btm-dig").find_element(By.CLASS_NAME, "num").text


        except NoSuchElementException:
            zan = 0

        try:
            comment = result.find_element(By.CLASS_NAME, "item-bd__cont").find_element(By.CLASS_NAME,
                                                                                       "item-ft").find_element(
                By.CLASS_NAME, "btm-comment").find_element(By.CLASS_NAME, "num").text
        except NoSuchElementException:
            comment = 0
        # read = result.find_element(By.CLASS_NAME, "item-bd__cont").find_element(By.CLASS_NAME, "item-ft").find_element(By.CLASS_NAME, "btm-view").find_element(By.CLASS_NAME, "num").text
        # zan = result.find_element(By.CLASS_NAME, "item-bd__cont").find_element(By.CLASS_NAME, "item-ft").find_element(By.CLASS_NAME, "btm-dig").find_element(By.CLASS_NAME, "num").text
        # comment = result.find_element(By.CLASS_NAME,"item-bd__cont").find_element(By.CLASS_NAME, "item-ft").find_element(By.CLASS_NAME, "btm-comment").find_element(By.CLASS_NAME, "num").text
        idx = result.get_attribute('i')
        # 将提取的数据存储为字典格式
        item = {
            'title': title,  # 标题
            'description': description, # 描述
            'read': read,  # 阅读数量
            'zan': zan,  # 点赞数量
            'comment': comment  # 评论数量
        }
        print(idx)
        # 将字典添加到数据列表中
        data.append(item)

    else:
        print(f'不是目标文章, 当前文章标题是:{title}')

# 保存数据为JSON文件

with open('data.json', 'w', encoding='utf-8') as f:
    json.dump(data, f, ensure_ascii=False, indent=4)

# 关闭WebDriver
driver.quit()

获取数据截图

在这里插入图片描述

问题描述

py 脚本是使用selenium 进行数据获取的, 但是脚本在Cloud Studio 中运行时,提示的是Chrome 版本不匹配, 这里找了好久也没有找到解决办法, 没办法在本地的pycharm 中运行后获取的数据

报错截图

在这里插入图片描述

项目效果预览

在这里插入图片描述

项目演示

8月1日

提交代码

选择提交项目的目录

执行命令

  1. 在我们的命令编辑器里初始化项目 git init
  2. git add .
  3. git commit -m ‘备注’
  4. git remote add origin git@gitee.com:shiqingqing/test.git
  5. git pull origin master
  6. 开始上传 输入git push -u origin master 这里可能会报错 所以建议不用这句 直接使用git push -u origin master -f 强制上传

资源

项目coding 地址

前端数据大屏地址
python脚本地址

Cloud Studio 地址

Cloud Studio 地址

个人总结

Cloud Studio 总体上说还是很优秀的, 解决了本地开发环境配置的烦恼, 其次Cloud Studio 还提供了许多模板 例如:常用模板 , 框架模板, 建站模板 , 云原生模板 可以说是开箱即用, 极大的方便了开发者, 但与此同时我在使用Cloud Studio 进行数据大屏开发的时候, 也遇见了一些小问题, 希望官方可以及时解决呦!!

问题一:

Cloud Studio 偶现问题, 在运行代码的时候,会出现闪退现象.

问题二:

在执行py 脚本时, 由于我使用的是 selenium , 对浏览器版本有要求, 我无法判断从哪里更新内置的 Chrome 版本 , 会出现如下的问题
请添加图片描述

问题三:

git 提交时, 如果默认选择 zsh 尽心git push 无法提交, 但是 切换 bash 时就可以提交成功了.

优点:

对于上述三个小问题并不影响Cloud Studio 的优秀, 希望Cloud Studio 越来越强大, 给予开发者更多的便利.

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

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

相关文章

【项目 线程2】3.5 线程的分离 3.6线程取消 3.7线程属性

3.5 线程的分离 #include <stdio.h> #include <pthread.h> #include <string.h> #include <unistd.h>void * callback(void * arg) {printf("chid thread id : %ld\n", pthread_self());return NULL; }int main() {// 创建一个子线程pthread…

Vue3基础_响应式数据

setup是组合式API 选项式API&#xff0c;是data,methods,computed&#xff0c;watch等等全都是分开的&#xff0c;但是组合式API是把这些东西全都写在一起了。 1 vue2的缺点 (1)使用vue2 Vue2版本对数据的拦截用的是Object.defineProperty, 可以监测到对象的变化。因为o…

Spring源码篇(九)自动配置扫描class的原理

文章目录 前言ClassLoader如何加载jar包里的class自动配置扫描class的原理spring中的加载方式源码总结 前言 spring是怎样通过ComponentScan&#xff0c;或者自动配置扫描到了依赖包里class的&#xff1f; ClassLoader 这里涉及到了class Loader的机制&#xff0c;有些复杂&…

信必优行业服务能力-中国头部综合性证券公司

近期召开的国家高层会议提出 “要活跃资本市场&#xff0c;提振投资者信心”&#xff0c;明确了下一阶段资本市场发展新任务、新要求&#xff0c;资本市场有望呈现新气象、新风貌。各证券公司积极响应&#xff0c;全力推进资本市场回暖&#xff1b;同时各公司也借此东风修炼内功…

【科普知识】了解电机T型速度曲线和S型速度曲线的区别!

当电机从静止状态启动并加速到额定转速时&#xff0c;其速度变化并非线性的&#xff0c;而是呈现出不同的曲线特征。T型速度曲线和S型速度曲线是两种典型的电机加速曲线类型。那它们之间有什么区别呢&#xff1f;今天&#xff0c;就让我们来深入探讨电机加速曲线的奥秘。 电机速…

国内是不是很缺音视频的开发人员,想学习音视频开发

第一、音视频开发人员的培养是一个长期投入&#xff0c;见效慢的过程&#xff0c;不像有些培训机构&#xff0c;半年培训就可以出去找工作了。同时培训机构最终的目的是快速培训&#xff0c;推荐工作然后挣钱。而音视频开发见效太慢&#xff0c;没有一定时间的锻炼和项目喂养&a…

骨传导耳机什么牌子好?盘点最受欢迎的几款骨传导耳机

骨传导耳机最近一两年越来越受欢迎&#xff0c;市场上不同形态的非入耳式耳机都有&#xff0c;从骨传导&#xff0c;夹耳式到气传导等等都有。骨传导耳机的好处有很多&#xff0c;非入耳式&#xff0c;不伤耳朵&#xff0c;佩戴更舒适更安全。但是一直以来&#xff0c;骨传导耳…

如何把非1024的采样数放入aac编码器

一. aac对数据规格要求 二、代码实现 1.初始化 2.填入数据 3.取数据 三.图解 一. aac对放入的采样数要求 我们知道aac每次接受的字节数是固定的&#xff0c;在之前的文章里有介绍libfdk_aac音频采样数和编码字节数注意 它支持的采样数和编码字节数分别是&#xff1a; fdk_aac …

中规院:2023年黄河流域主要城市人居环境气象评估报告(附下载

关于报告的所有内容&#xff0c;公众【营销人星球】获取下载查看 核心观点 黄河流域年均高温天数呈上升趋势&#xff0c;近五年达到历史高位。 黄河流域年均高温天数由1978年的11日升至2022年的17日&#xff0c;整体呈上升趋势。1978-2022年间&#xff0c;2018年年均高温天数…

AutoCAD项目外包开发流程

进行AutoCAD的二次开发&#xff0c;一般常用的开发工具是AutoCAD的官方开发工具--ObjectARX。这是一个面向对象的C的开发环境&#xff0c;通过ObjectARX&#xff0c;我们可以直接获取AutoCAD的内核级别的信息&#xff0c;可以大幅度的开发出高效的程序。今天和大家分享这方面的…

【Leetcode刷题】位运算

本篇文章为 LeetCode 位运算模块的刷题笔记&#xff0c;仅供参考。 位运算的常用性质如下&#xff1a; a ^ a 0 a ^ 0 a a ^ 0xFFFFFFFF ~a目录 一. 基本位运算Leetcode29.两数相除Leetcode89.格雷编码 二. 位运算的性质Leetcode136.只出现一次的数字Leetcode137.只出现一…

Python(六十一)字典元素的获取

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…

如何在IDEA使用数据库(新手教程)

第一步:将数据库服务器打开 进入你下载好的数据库路径到bin目录下cmd打开命令提示符界面 确认启动数据库 第二步&#xff1a;打开IDEA&#xff0c;找到IDEA数据库 第三步&#xff1a;选择要连接数据库 第四步&#xff1a;根据数据库信息连接数据库 连接之前的页面 输入我们要的…

2022年江西省职业院校技能大赛网络搭建与应用赛项正式赛卷

2022年江西省职业院校技能大赛网络搭建与应用赛项正式赛卷 操作题总分900分&#xff0c;竞赛时长3.5小时 竞赛说明&#xff1a; 1.禁止携带和使用移动存储设备、计算器、通信工具及参考资料。 2.请根据大赛所提供的比赛环境&#xff0c;检查所列的硬件设备、软件及文档清单、…

Java使用POI读取Excel名称管理器

文章目的 本文主要介绍如何使用poi读取到Excel的名称管理器中的内容。并且定位到单元格。 在企业的开发中可能需要通过名称管理器定位到某个单元格&#xff0c;然后在单元格上生成签名。 环境配置 Java&#xff1a;Jdk1.8 poi&#xff1a;5.2.3 maven依赖(pom.xml)&#x…

C语言案例 不重复数字输出--01

题目&#xff1a;有 1、2、3、4 四个数字&#xff0c;能组成多少个互不相同且无重复数字的三位数&#xff1f;都是多少&#xff1f; 步骤一&#xff1a;定义程序目标 编写一个C程序&#xff0c;使用1、2、3、4四个数字组成不相同且不重复的三位数&#xff0c;分别显示出来…

从web漏洞到linux权限提升

从web漏洞到linux权限提升 一、Linux系统介绍与使用二、Linux权限说明2.1、文件权限2.2、linux文件、目录权限说明 三、权限提升 一、Linux系统介绍与使用 linux-全称GNU/Linux&#xff0c;是一种免费使用和自由传播的类UNIX操作系统&#xff0c;是基于POSIXI的多用户、多任务…

关于Monkey稳定性测试,这是我看到最详细的文章

通过随机点击屏幕一段时间&#xff0c;看看app会不会崩溃&#xff0c;能不能维持正常运行&#xff0c;这就是稳定性测试。 01、Monkey是什么 Monkey测试是Android平台自动化测试的一种手段&#xff0c;通过Monkey程序模拟用户触摸屏幕、滑动Trackball、按键等操作来对设备上的…

8.4 作业

1.思维导图 2.判断家目录下&#xff0c;普通文件的个数和目录文件的个数 #!/bin/bash count10 count20 cd ~ for i in $(ls) doif [ -f "$i" ]thencount1$((count11))elif [ -d "$i" ]then count2$((count21))fi done echo $count1 echo $count2 3.输入一…

MySQL数据库免安装版

MySQL数据库免安装 1.安装配置启动 MySQL现在的版本主要分为: 5.x 版本,现在互联网企业中的主流版本,包括:头条、美图、百度、腾讯等互联网公司主流的版本。8.x 版本,新增了一些了窗口函数、持久化配置、隐藏索引等其他功能。所以,我们课程会以常用大版本中最新的版本为…