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

文章目录

  • 前言
  • 得到什么?
  • 使用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 很像啊!!

在这里插入图片描述

项目搭建

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

  • 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: 3000host: '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').textif "实战训练营】" in title:description = result.find_element(By.CLASS_NAME, "item-bd__cont").find_element(By.CLASS_NAME, "row2").texttry: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").textexcept NoSuchElementException:read = 0try: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").textexcept NoSuchElementException:zan = 0try: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").textexcept 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").textidx = 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.hqwc.cn/news/86223.html

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

相关文章

PostgreSQL命令行工具psql常用命令

PostgreSQL命令行工具psql常用命令

1. 概述 通常情况下操作数据库使用图形化客户端工具，在实际工作中，生产环境是不允许直接连接数据库主机，只能在跳板机上登录到Linux服务器才能连接数据库服务器，此时就需要使用到命令行工具。psql是PostgreSQL中的一个命令行交互…
阅读更多...
SSL证书申请

SSL证书申请

DV SSL证书申请需要多久？ DV SSL证书无需验证所有者资质资料，审核流程相对简单，因此可快速签发。但部分域名信息可能会触发不同等级的安全审查机制，必要时需要人工介入进行审查签发，因此，SSL证书签发时间可…
阅读更多...
LC-1267. 统计参与通信的服务器（枚举 + 计数）

LC-1267. 统计参与通信的服务器（枚举 + 计数）

1267. 统计参与通信的服务器 中等 这里有一幅服务器分布图，服务器的位置标识在 m * n 的整数矩阵网格 grid 中，1 表示单元格上有服务器，0 表示没有。 如果两台服务器位于同一行或者同一列，我们就认为它们之间可以进行通信。 请…
阅读更多...
基于PyTorch深度学习遥感影像地物分类与目标检测、分割及遥感影像问题深度学习优化

基于PyTorch深度学习遥感影像地物分类与目标检测、分割及遥感影像问题深度学习优化

我国高分辨率对地观测系统重大专项已全面启动，高空间、高光谱、高时间分辨率和宽地面覆盖于一体的全球天空地一体化立体对地观测网逐步形成，将成为保障国家安全的基础性和战略性资源。未来10年全球每天获取的观测数据将超过10PB，遥感大数据时…
阅读更多...
多图详解VSCode搭建Java开发环境

多图详解VSCode搭建Java开发环境

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…
阅读更多...
飞腾CPU如何使用PXE方式安装麒麟桌面系统？

飞腾CPU如何使用PXE方式安装麒麟桌面系统？

目前国产CPU（桌面级、服务器级）中，飞腾应用较为广泛，在飞腾CPU架构下，搭载以银河麒麟V10 SP1系统为主，下面我们从环境准备、环境搭建、UEFI PXE功能确认、x86笔记本软件环境配置四部分来介绍国产笔记本电脑飞腾CPU使用PXE方式安装银河麒麟V10 SP1系统的详细过程。 一、环…
阅读更多...
VScode 编辑器报错： ‘HelloWorld‘ is declared but its value is never read.

VScode 编辑器报错： ‘HelloWorld‘ is declared but its value is never read.

.vue文件被标识红色波浪线；提示： HelloWorld is declared but its value is never read. 问题原因： 因为vue3已经不支持vetur插件。 1、在扩展里面进行搜索Vetur插件，进行禁用或卸载； 2、在 VScode扩展里面搜索并下载…
阅读更多...
QQ六七年前的聊天记录怎么找？3招教你找回并恢复

QQ六七年前的聊天记录怎么找？3招教你找回并恢复

友友们，六七年前的QQ聊天记录还有办法恢复吗？我之前的手机还能用，但是登录QQ后没有找到我想要的聊天信息，有没有其他方法能够找回？ QQ聊天记录找不回来是一个非常困扰大家的问题。特别是好几年前的聊天记录&#xff0c…
阅读更多...
spring boot 项目整合 websocket

spring boot 项目整合 websocket

1.业务背景 负责的项目有一个搜索功能，搜索的范围几乎是全表扫，且数据源类型贼多。目前对搜索的数据量量级未知，但肯定不会太少，不仅需要搜索还得点击下载文件。 关于搜索这块类型 众多，未了避免有个别极大数据源影响整…
阅读更多...
wazuh环境配置和漏洞复现

wazuh环境配置和漏洞复现

1.wazuh配置 虚拟机 （OVA） - 替代安装 (wazuh.com)在官方网页安装ova文件 打开VMware选择打开虚拟机，把下载好的ova文件放入在设置网络改为NAT模式 账号:wazuh-user 密码:wazuh ip a 查看ip 启动小皮 远程连接 账号admin …
阅读更多...
Linux部署RocketMQ并使用SpringBoot创建生产、消费者

Linux部署RocketMQ并使用SpringBoot创建生产、消费者

😜作 者：是江迪呀✒️本文关键词：RocketMQ、消息队列☀️每日 一言：在你心灰意冷、心烦意乱时也不要停下你的脚步！ 一、前言 RocketMQ（Apache RocketMQ）是一种开源的分布式消息中间…
阅读更多...
使用Python爬虫采集网络热点

使用Python爬虫采集网络热点

在当今信息爆炸的时代，了解网络热搜词和热点事件对于我们保持时事敏感性和把握舆论动向非常重要。在本文中，我将与你分享使用Python爬虫采集网络热搜词和热点事件的方法，帮助你及时获取热门话题和热点新闻。 1. 网络热搜词采集 网络热搜词是人…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023