Javaweb学习之Vue实践小界面（四）

news2024/11/15 11:05:23

目录

前情回顾

本期介绍

效果图

第一步：前期工作

第二步：建立页眉

效果图 

第三步：建立导航栏

效果图 

第四步：主要内容放置

效果图

第五步：建立页脚

效果图

综合：将文字和背景更改成自己喜欢的样式

效果图

小彩蛋

安装 

前情回顾

Javaweb学习之Vue3初识（一）-CSDN博客

Javaweb学习之Vue项目的创建（二）-CSDN博客

Javaweb学习之Vue模板语法（三）-CSDN博客

本期介绍

效果图

注意：前期主要介绍网页的制作，所以对于文字的内容和样式（尺寸，颜色等）不太讲究，做出来的页面比较抽象。这张效果图的呈现是我介绍完初步网页制作后改变文字的内容和样式而制成的。大家也可以根据自己的喜好进行更改。

     

第一步：前期工作

快速建立一个vue项目，清理不需要的代码。

可以看一下这篇博客，里面讲述了vue文件所包含的三个主要组成部分。

  Javaweb学习之Vue模板语法（三）-CSDN博客

找到这个HelloWorld文件，打开之后可以清理一下里面我们不需要的东西。这是我清理之后的结果。接下来的代码将都会在这个vue文件书写。 

<template>
  <div class="hello"></div>
</template>

<script>
export default {
  name: "HelloWorld",
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

第二步：建立页眉

页眉（header）通常位于网站顶部（或顶部导航菜单的正下方）。它通常包含徽标（logo）或网站名称。（效果图可能不好看，目前只是讲方法，具体大小配色大家可以自己调整）

<template>
  <div class="hello">
    <body>
      <div class="header">
        <h1>标题</h1>
      </div>
    </body>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
  margin: 0;
  /*  这行代码的作用是将HTML文档中<body>元素的外边距（margin）设置为0。
  这意味着页面内容的边缘将紧贴浏览器窗口的边缘，没有任何默认的空白或外边距。 */
}

.header{
  background-color: aliceblue;
  /* 它将元素的背景颜色设置为浅灰色（#f1f1f1）。这是一个十六进制颜色代码，
  其中#f1f1f1代表了一种浅灰色调，常用于提供页面上的视觉分隔或作为背景色，以增加可读性。*/
  padding: 20px;
  /* 它为元素的内容区域添加了20像素的内边距。内边距是元素内容与其边框之间的空间。
  在这个例子中，所有四个方向（上、右、下、左）的内边距都被设置为20像素，
  这意味着元素的内容会与其边框保持20像素的距离。 */
  text-align: center;
  /*  它将元素内的文本内容居中对齐。这意味着无论元素内有多少文本或子元素，它们都将以中心线为基准进行对齐。 */
}
</style>

效果图 

第三步：建立导航栏

导航栏包含链接列表，以帮助访问者浏览您的网站

<template>
  <div class="hello">
    <body>
      <div class="header">
        <h1>标题</h1>
      </div>

      <div class="topnav">
        <a href="#">导航栏的名称</a>
        <a href="#">点击之后跳转界面</a>
        <a href="https://blog.csdn.net/2301_80841939?spm=1000.2115.3001.5343"
          >#替换成我们跳转界面的链接</a
        >
      </div>
    </body>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
  margin: 0;
 }

/* 设计页眉的样式 */
.header {
  background-color: aliceblue;
  padding: 20px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

/* 设置顶部导航栏的样式 */
.topnav {
  overflow: hidden;
  /* 这个属性通常用于防止子元素（如浮动元素）溢出容器。在这个场景中，
  如果导航链接宽度总和超过了容器的宽度，那么溢出的部分将被隐藏。
  但这更多是用于处理浮动元素造成的布局问题 */
  background-color: aquamarine;
  /* 设置导航栏的背景颜色为深灰色*/
}

/* 设置 topnav 链接的样式 */
.topnav a {
  float: left; /* 将链接向左浮动，使其水平排列。 */
  display: block; /* 虽然在这里使用float布局，但将链接的display属性设置为block通常是为了让它们独占一行 */
  color: #000; /* 设置链接文字颜色 */
  text-align: center; /* 由于链接是块级元素并设置了固定宽度或默认宽度（受padding影响），文本会在其中居中显示。 */
  padding: 14px 16px; /* 设置链接的内边距，使文字与链接边缘之间有一定的空间 */
  text-decoration: none; /* 移除链接的下划线 */
}

/* 改变鼠标悬停时的颜色 */
.topnav a:hover {
  background-color: #ddd; /* 鼠标悬停时，链接的背景色 */
  color: black; /* 鼠标悬停时，链接文字颜色。 */
}
</style>

效果图 

第四步：主要内容放置

主要内容（main content）是您网站上最大、最重要的部分。

列宽不相等的情况很常见，因为大部分空间都为主内容保留。附属内容（如果有）通常用作替代导航或指定与主要内容有关的信息。您可以随意更改宽度，只要记住它的总和应为 100％。

<template>
  <div class="hello">
    <body>
      <div class="header">
        <h1>标题</h1>
      </div>

      <div class="topnav">
        <a href="#">导航栏的名称</a>
        <a href="#">点击之后跳转界面</a>
        <a href="https://blog.csdn.net/2301_80841939?spm=1000.2115.3001.5343"
          >#替换成我们跳转界面的链接</a
        >
      </div>

      <div class="row">
        <div class="column side">
          <h2>标题1</h2>
          <p>
            这是一段长长长长长长的内容，这是一段长长长长长长的内容，这是一段长长长长长长的内容，这是一段长长长长长长的内容
            这是一段长长长长长长的内容，这是一段长长长长长长的内容
          </p>
        </div>

        <div class="column middle">
          <h2>主文段标题</h2>
          <p>
            这又是一段长长长长长长的内容，这是一段长长长长长长的内容，这是一段长长长长长长的内容，这是一段长长长长长长的内容
            这是一段长长长长长长的内容，这是一段长长长长长长的内容
          </p>
          <p>
            这又是一段长长长长长长的内容，这是一段长长长长长长的内容，这是一段长长长长长长的内容，这是一段长长长长长长的内容
            这是一段长长长长长长的内容，这是一段长长长长长长的内容
          </p>
        </div>

        <div class="column side">
          <h2>标题2</h2>
          <p>
            这还是一段长长长长长长的内容，这是一段长长长长长长的内容，这是一段长长长长长长的内容，这是一段长长长长长长的内容
            这是一段长长长长长长的内容，这是一段长长长长长长的内容
          </p>
        </div>
      </div>
    </body>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
  margin: 0;
}

/* 设计页眉的样式 */
.header {
  background-color: aliceblue;
  padding: 20px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

/* 设置顶部导航栏的样式 */
.topnav {
  overflow: hidden;
  background-color: aquamarine;
}

/* 设置 topnav 链接的样式 */
.topnav a {
  float: left; 
  display: block; 
  color: #000; 
  text-align: center; 
  padding: 14px 16px;
  text-decoration: none;
}

/* 改变鼠标悬停时的颜色 */
.topnav a:hover {
  background-color: #ddd; 
  color: black; 
}

/* 创建并排的三个不相等的列 */
/* 这是一个通用的类，用于所有列的基础样式。使用浮动（float: left;）使列能够并排显示。 */
.column {
  float: left; /* 使元素向左浮动，从而并排显示 */
  padding: 10px; /* 为列内部的内容提供10px的内边距 */
}

/* 左右列 */
/* 这两个类为左右两侧的列提供特定的宽度，占总宽度的25% */
.column.side {
  width: 25%; /* 设置列的宽度为父元素的25% */
}

/* 中间列 */
/* 这个类为中间的列提供特定的宽度，占总宽度的50% */
.column.middle {
  width: 50%; /* 设置列的宽度为父元素的50% */
}

/* 清除列之后的浮动 */
/* 这是一个用于清除浮动影响的技巧，确保后续元素不会受到前面浮动元素的影响 */
.row:after {
  content: ""; /* 创建一个伪元素，并设置其内容为空 */
  display: table; /* 将伪元素设置为表格显示，以便触发清除浮动 */
  clear: both; /* 清除左右两边的浮动 */
}

/* 响应式布局 - 创建堆叠而非并排的三列 */
/* 当屏幕宽度小于或等于600px时，下面的规则会生效，将三列堆叠显示 */
@media screen and (max-width: 600px) {
  .column.side,
  .column.middle {
    width: 100%; /* 在小屏幕上，左右列和中间列的宽度都设置为100%，使它们堆叠显示 */
  }
}
</style>

效果图

第五步：建立页脚

页脚位于页面底部。它通常包含诸如版权和联系方式之类的信息

<template>
  <div class="hello">
    <body>
      <div class="header">
        <h1>标题</h1>
      </div>

      <div class="topnav">
        <a href="#">导航栏的名称</a>
        <a href="#">点击之后跳转界面</a>
        <a href="https://blog.csdn.net/2301_80841939?spm=1000.2115.3001.5343"
          >#替换成我们跳转界面的链接</a
        >
      </div>

      <div class="row">
        <div class="column side">
          <h2>标题1</h2>
          <p>
            这是一段长长长长长长的内容，这是一段长长长长长长的内容，这是一段长长长长长长的内容，这是一段长长长长长长的内容
            这是一段长长长长长长的内容，这是一段长长长长长长的内容
          </p>
        </div>

        <div class="column middle">
          <h2>主文段标题</h2>
          <p>
            这又是一段长长长长长长的内容，这是一段长长长长长长的内容，这是一段长长长长长长的内容，这是一段长长长长长长的内容
            这是一段长长长长长长的内容，这是一段长长长长长长的内容
          </p>
          <p>
            这又是一段长长长长长长的内容，这是一段长长长长长长的内容，这是一段长长长长长长的内容，这是一段长长长长长长的内容
            这是一段长长长长长长的内容，这是一段长长长长长长的内容
          </p>
        </div>

        <div class="column side">
          <h2>标题2</h2>
          <p>
            这还是一段长长长长长长的内容，这是一段长长长长长长的内容，这是一段长长长长长长的内容，这是一段长长长长长长的内容
            这是一段长长长长长长的内容，这是一段长长长长长长的内容
          </p>
        </div>
      </div>
      <div class="footer">
        <p>Footer</p>
      </div>
    </body>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
  margin: 0;
}

/* 设计页眉的样式 */
.header {
  background-color: aliceblue;
  padding: 20px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

/* 设置顶部导航栏的样式 */
.topnav {
  overflow: hidden;
  background-color: aquamarine;
}

/* 设置 topnav 链接的样式 */
.topnav a {
  float: left; 
  display: block; 
  color: #000; 
  text-align: center; 
  padding: 14px 16px; 
  text-decoration: none;
}

/* 改变鼠标悬停时的颜色 */
.topnav a:hover {
  background-color: #ddd; 
  color: black; 
}

/* 创建并排的三个不相等的列 */
.column {
  float: left; 
  padding: 10px; 
}

/* 左右列 */
.column.side {
  width: 25%; 
}

/* 中间列 */
.column.middle {
  width: 50%;
}

/* 清除列之后的浮动 */
.row:after {
  content: ""; 
  display: table; 
  clear: both; 
}

/* 响应式布局 - 创建堆叠而非并排的三列 */
@media screen and (max-width: 600px) {
  .column.side,
  .column.middle {
    width: 100%; 
  }
}

/* 设置页脚的样式 */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}
</style>

效果图

综合：将文字和背景更改成自己喜欢的样式

<template>
  <div class="hello">
    <body>
      <div class="header">
        <h1>Learning makes people happy</h1>
        <p>我爱学习</p>
      </div>

      <div class="topnav">
        <a href="https://blog.csdn.net/2301_80841939?spm=1000.2115.3001.5343"
          >模拟首页</a
        >
        <a href="https://www.w3school.com.cn/css/css_website_layout.asp"
          >学习网站</a
        >
        <a href="#">待定</a>
      </div>

      <div class="row">
        <div class="column side">
          <h2>名言警句</h2>
          <p>
            在寻求真理的长征中，唯有学习，不断地学习，勤奋地学习，有创造性地学习，才能越重山，跨峻岭。
          </p>
        </div>

        <div class="column middle">
          <h2>Main Content</h2>
          <p>这里我放了图片，下一个环节介绍图片</p>
         
        </div>

        <div class="column side">
          <h2>快乐心得</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
        </div>
      </div>

      <div class="footer">
        <p>学习使人进步</p>
      </div>
    </body>
    
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
};
</script>


<style scoped>
img{
  width:100%;

}
</style>


<style scoped>
h1 {
  color: #a98080;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
/* 设置页眉样式 */
.header {
  background-color: #bd868663;
  padding: 17px;
  text-align: center;
}
/* 设置顶部导航栏的样式 */
.topnav {
  font-weight: 555;
  font-size: 17px;
  overflow: hidden;
  background-color: #b68383dc;
}
/* 设置 topnav 链接的样式 */
.topnav a {
  float: left;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 改变鼠标悬停时的颜色 */
.topnav a:hover {
  background-color: #ffffff;
  color: #b68383dc;
}
/* 创建并排的三个非等列 */
.column {
  float: left;
  padding: 10px;
}
/* 左和右列 */
.column.side {
  width: 25%;
}
/* 中间列 */
.column.middle {
  width: 50%;
}
/* 清除列之后的浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* 响应式布局 - 创建堆叠而非并排的三列 */
@media screen and (max-width: 600px) {
  .column.side,
  .column.middle {
    width: 100%;
  }
}
/* 设置页脚的样式 */
.footer {
  background-color: #e0c4c4bc;
  padding: 1px;
  text-align: center;
}
</style>

效果图

到此处，简易版网页就算是成功做出来了。 

小彩蛋

想要实现开头图片切换的效果图吗，这是使用第三方工具（Swiper）轮播图之后的效果。以下是Swiper官网，这里有使用教程文档。

Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

安装 

首先，在刚刚已经完成的简易版网页之下，打开文档终端。输入指令安装Swiper的包。这里我使用指定版本8.1.6。注意：如果大家需要最新版可以不用输入@版本号。

cnpm install --save swiper@8.1.6

在package.json打开，可以看见swiper就说明安装成功了。

接下来再使用指令让vue项目运行起来。

在需要轮播图的结构区间内使用<Swiper>标签。这里的<SwiperSlide>标签有几个，图片就有几张。

 <div class="column middle">
          <h2>Main Content</h2>
          <p>这里我放了图片，下一个环节介绍图片</p>
          <Swiper :modules="modules" :pagination="{clickable:true}">
            <SwiperSlide>
              <img src="../assets/fj1.jpg"  width="700px" height="270px"/>
            </SwiperSlide>
            <SwiperSlide>
              <img src="../assets/fj1.jpg"  width="700px" height="270px"/>
            </SwiperSlide>
            <SwiperSlide>
              <img src="../assets/fj1.jpg"  width="700px" height="270px"/>
            </SwiperSlide>
          </Swiper>
        </div>

在<script>标签内输入swiper模板。 

<script>
// 导入 Swiper 的 Vue 组件和相关模块  
import { Swiper, SwiperSlide } from "swiper/vue"; // 确保路径正确，这取决于你的项目配置  
import { Pagination } from "swiper"; // 导入分页指示器模块  
import "swiper/css"; // 导入 Swiper 的基础样式  
import "swiper/css/pagination"; // 导入分页指示器的样式  
  
export default {  
  name: "HelloWorld",  
  data() {  
    return {  
      modules: [Pagination], 
    };  
  },  
  components: {  
    // 注册 Swiper 组件及其子组件  
    Swiper,  
    SwiperSlide,  
  },  
  
};  
</script>

好啦，轮播图就建成了。

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

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

相关文章

PEM燃料电池启停控制策略优化的simulink建模与仿真

PEM燃料电池启停控制策略优化的simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 PEM燃料电池启停控制策略优化的simulink建模与仿真。 1.燃料电池提供是燃料转换为电能和热能的装置。 2.功率的输出的改变通过很多因素&#xff0c;如温度&#xff0c;压力…
阅读更多...
谷歌、火狐及Edge等浏览器如何使用allWebPlugin中间件响应ActiveX插件事件

谷歌、火狐及Edge等浏览器如何使用allWebPlugin中间件响应ActiveX插件事件

allWebPlugin简介 allWebPlugin中间件是一款为用户提供安全、可靠、便捷的浏览器插件服务的中间件产品&#xff0c;致力于将浏览器插件重新应用到所有浏览器。它将现有ActiveX控件直接嵌入浏览器&#xff0c;实现插件加载、界面显示、接口调用、事件回调等。支持Chrome、Firefo…
阅读更多...
模型 OGSM(战略规划)

模型 OGSM(战略规划)

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。目标引领&#xff0c;策略驱动&#xff0c;量化衡量。 1 OGSM模型的应用 1.1 电商企业年度增长战略 某电商企业面临激烈的市场竞争&#xff0c;决定运用OGSM模型来规划其年度战略&#xff0c;以实现…
阅读更多...
代码随想录Day 25|回溯篇完结，题目：491.递增子序列、46、全排列、47.全排列Ⅱ

代码随想录Day 25|回溯篇完结，题目：491.递增子序列、46、全排列、47.全排列Ⅱ

提示&#xff1a;DDU&#xff0c;供自己复习使用。欢迎大家前来讨论~ 文章目录 第七章 回溯算法part05一、题目题目一&#xff1a;491.递增子序列解题思路&#xff1a;回溯三部曲优化 题目二&#xff1a;46.全排列[46. 全排列](https://leetcode.cn/problems/permutations/)解…
阅读更多...
日撸Java三百行（day34：图的深度优先遍历）

日撸Java三百行（day34：图的深度优先遍历）

目录 一、深度优先搜索 二、图的深度优先遍历 三、代码实现 总结 一、深度优先搜索 深度优先搜索&#xff08;Depth First Search&#xff1a;DFS&#xff09;是一种用于遍历树或图的算法&#xff0c;具体来说就是从起始节点开始&#xff0c;沿某一分支路径不断深入&#…
阅读更多...
Linux内核定时器、阻塞_非阻塞IO

Linux内核定时器、阻塞_非阻塞IO

一.内核时间管理 Linux 内核中有大量的函数需要时间管理,比如周期性的调度程序、延时程序、对于我们驱动编写者来说最常用的定时器。硬件定时器提供时钟源,时钟源的频率可以设置, 设置好以后就周期性的产生定时中断,系统使用定时中断来计时。中断周期性产生的频率就是系统频率…
阅读更多...
吴恩达谈AI未来：Agentic Workflow、推理成本下降与开源的优势

吴恩达谈AI未来：Agentic Workflow、推理成本下降与开源的优势

近年来&#xff0c;人工智能&#xff08;AI&#xff09;领域的发展势如破竹&#xff0c;然而随着技术的普及&#xff0c;市场也开始出现对AI泡沫的质疑声。2024年8月&#xff0c;AI领域的权威专家吴恩达&#xff08;Andrew Ng&#xff09;在与ARK Invest的对谈中&#xff0c;分…
阅读更多...
利用Matlab求解高阶微分方程（ode45）

利用Matlab求解高阶微分方程（ode45）

1、高阶微分方程的基本概念 二阶以及二阶以上的微分方程称之为高阶微分方程&#xff0c;一般来说&#xff0c;微分方程的阶数越高&#xff0c;求解的难度也就越大。求高阶方程的一个常用方法就是降低阶数。对二阶方程 &#xff0c;如果能用变量代换把它化成一阶方程&#xff0c…
阅读更多...
【Tesla FSD V12的前世今生】从模块化设计到端到端自动驾驶技术的跃迁

【Tesla FSD V12的前世今生】从模块化设计到端到端自动驾驶技术的跃迁

自动驾驶技术的发展一直是全球汽车行业的焦点&#xff0c;Tesla的Full-Self Driving&#xff08;FSD&#xff09;系统凭借其持续的技术革新和强大的数据支持&#xff0c;在这个领域独占鳌头。本文将深入介绍Tesla FSD V12的演进历史&#xff0c;从自动驾驶的基础概念入手&#…
阅读更多...
【XML详解】

【XML详解】

XML基本概念 XML&#xff08;全称EXtensible Markup Language&#xff0c;可扩展标记语言&#xff09;&#xff1a;是一种用于存储和传输数据的标记语言&#xff0c;通过标签&#xff08;tags&#xff09;来定义数据的结构和含义。数据格式&#xff1a;XML本质上是一种数据的格…
阅读更多...
【异常错误】pycharm可以在terminal中运行，但是无法在run中运行（没有输出错误就停止了）

【异常错误】pycharm可以在terminal中运行，但是无法在run中运行（没有输出错误就停止了）

问题&#xff1a; pycharm的命令可以在terminal中运行&#xff0c;但是复制到无法在run中运行&#xff08;没有输出错误就停止了&#xff09; run中运行后什么错误提示都没有 搞不懂为什么 解决&#xff1a; 降低run中batch-size的大小&#xff0c;即可以运行 我并没有观察到…
阅读更多...
视频在线去水印解析相册怎么弄,轻松掌握五大技巧

视频在线去水印解析相册怎么弄,轻松掌握五大技巧

在当前短视频流行的时代&#xff0c;我们常常需要下载一些短视频来进行剪辑或分享&#xff0c;但视频中的水印却成了一个不小的烦恼。为了帮助大家解决这个问题&#xff0c;本文将介绍五款高效的短视频去水印免费软件&#xff0c;让你轻松告别水印烦恼。 工具一&#xff1a;奈…
阅读更多...
在VB.net中，LINQ有什么方法与属性

在VB.net中，LINQ有什么方法与属性

标题 在VB.net中&#xff0c;LINQ有什么方法与属性 正文 在VB.NET中使用LINQ&#xff08;Language Integrated Query&#xff09;&#xff0c;你可以利用一系列的方法和属性来查询和操作内存中的集合&#xff08;如数组、列表等&#xff09;以及数据库等数据源。LINQ提供了丰富…
阅读更多...
Python相关系数导图

Python相关系数导图

&#x1f3af;要点 量化变量和特征关联绘图对比皮尔逊相关系数、斯皮尔曼氏秩和肯德尔秩汽车性价比相关性矩阵热图大流行病与资产波动城镇化模型预测交通量宝可梦类别特征非线性依赖性捕捉向量加权皮尔逊相关系数量化图像相似性 Python皮尔逊-斯皮尔曼-肯德尔 皮尔逊相关系…
阅读更多...
QcomboBox 组件

QcomboBox 组件

在记事本项目中&#xff0c;有一个问题&#xff0c;字体的编码格式是写死的。我们要建一个 组件提供这样的功能&#xff1a;通过点击&#xff0c;获得 不同的格式编码 定义它的槽 首先 把ui里面的comboBox组件与槽关联起来 connect(ui->comboBox,SIGNAL(currentIndexChange…
阅读更多...
cesium加载矢量切片数据（mvt）全网方案总结

cesium加载矢量切片数据（mvt）全网方案总结

引言：Cesium是一款开源的3D地球可视化引擎，支持全球范围的数据展示，包括高分辨率地形、卫星图像和建筑模型等，允许用户创建交互式的3D地图，并提供了一系列的工具和API来处理地理空间数据。 Cesium支持加载多数据源的栅格切片数据，例如ArcGIS、BingMaps、WMTS、WMS等等。栅…
阅读更多...
Qt 线程与窗体之间的传值

Qt 线程与窗体之间的传值

QThread 和窗口之间的通信通常通过信号和槽机制来实现 也可以直接通过调用线程中的值 效果图(Dialog To hello; TextLabel To hello) 在主窗口类中创建线程实例&#xff0c;并连接线程发出的信号到主窗口的槽函数。 .h #ifndef TESTAPP_H #define TESTAPP_H#include <QD…
阅读更多...
Threejs学习-Stats 性能监控器、抗锯齿

Threejs学习-Stats 性能监控器、抗锯齿

stats性能监控器 import Stats from three/addons/libs/stats.module.js //引入包//添加性能监视器&#xff0c;查看帧率 const stats new Stats(); document.body.appendChild(stats.domElement); // //渲染 function animate() {requestAnimationFrame(animate);stats.upda…
阅读更多...
GraphRAG论文解读

GraphRAG论文解读

欢迎一起讨论 论文地址综述介绍部分核心翻译翻译解释重要的信息元素和实体的关系&#xff08;包含和被包含&#xff0c;而非相等&#xff09;Graph Index&#xff08;图索引&#xff09;Community Detection&#xff08;社区检测&#xff09;Query-Focused Summarization&#…
阅读更多...
Qt+FFmpeg开发视频播放器笔记(二)：界面UI搭建

Qt+FFmpeg开发视频播放器笔记(二)：界面UI搭建

效果图 主要使用无边框窗体搭建,实现窗体的拖动和缩放&#xff0c;播放列表、文件打开等。 主要代码 manwindow设计类 #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include <QMutex> #include "framelesshelper.h"QT_BEGIN_NA…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023