Vue练手项目之仿京东到家主页

news2024/9/27 7:26:14

目录

  • 概述
  • 1.效果展示
  • 2.使用原始Html+CSS实现
  • 3.使用Vue.js进行组件化
    • 3.1 Header部分组件实现
      • 3.1.1图标的展示
      • 3.1.2 定义Vue调试的名称
      • 3.1.3 使用scoped隔离组件间的css影响
    • 3.2 附近店铺部分实现
    • 3.3 底部导航栏组件的实现
    • 3.4 将组件组成一个整体页面
  • 4.代码地址

概述

本人是一个从事Android开发5年的程序员，对各大优秀的编程语言都很感兴趣，Vue.js为啥会引起我的注意并且想学好它呢？一是因为Vue.js的理念和Android的Compose UI相似，可以对比学习，取长补短；其次，我想学习web应用的开发来做一些Web应用辅助Android的开发。实际上在Android开发中，多人开发的时候，不管是版本发布，还是自动打包，还是组件化，都离不开Maven仓库，打包服务器，还有邮件的折磨，在大公司里面，这一套都会有各种平台，比如京东的主站打包有一个专门的界面友好的Web页面,加上集成的CI/CD工具，程序员可以使用最少的沟通成本去完成自己组件的发布和打包。开发完的需求也可以通过一个web页面实时的提交到测试的系统，这些都离不开前端友好界面交互的支持。另外：本文适合有Vue基础的小伙伴学习，若是不熟悉Vue的小伙伴，看了本文后请先去学习基础知识，再来看一遍，然后下载源码动手实践一遍

以前因为前端页面都是Html5+CSS+JS开发，比较难维护，理念也和Android和IOS这类的大前端不太符合，以前的Html5+CSS+JS开发完成后，还需要交给后端去渲染数据，然后整个项目放到服务器上，每次我们打开浏览器，都是把整个页面加载到本地然后展示出来，这和Android，IOS这种拿到服务器端接口，自己渲染数据的方式不太相同。随着Vue.js的出现，我们发现好像Web的开发好像和Android,IOS 的开发比较相似了，前后端分离了，即我们可以用Vue.js编写一个前端的页面后，直接拿到服务器端提供的接口，自己进行渲染数据了。和Android，IOS一样，甚至可以共用接口了。而且Vue的设计理念和Android最近推崇的ComposeUI比较相似，可以对比学习，取长补短。下面我们就一起看下Vue.js有啥魔力吧。

1.效果展示

比如我们仿造一个京东到家的小程序页面,效果图如下
在这里插入图片描述
我们分别使用原始的Html+Css方式实现和用Vue.js的方式来实现，对比下Vue.js带来的好处。

2.使用原始Html+CSS实现

<div>
    <div class="wrapper">
      <div class="position">
        <span class="iconfont position__icon">&#xe7f1;</span>
        北京联合大学北四环东路97号
        <span class="iconfont position__notice">&#xe7c4;</span>
      </div>
      <div class="search">
        <span class="iconfont">&#xe741;</span>
        <span class="search__text">山姆会员商店优惠卷</span>
      </div>
      <div class="banner">
        <img
          class="banner__img"
          src="http://www.dell-lee.com/imgs/vue3/banner.jpg"
        />
      </div>
      <div class="icons">
        <div class="icons__item">
          <img
            src="http://www.dell-lee.com/imgs/vue3/超市.png"
            class="icons__item__img"
          />
          <p class="icons__item__desc">超市便利</p>
        </div>
        <div class="icons__item">
          <img
            src="http://www.dell-lee.com/imgs/vue3/菜市场.png"
            class="icons__item__img"
          />
          <p class="icons__item__desc">菜市场</p>
        </div>
        <div class="icons__item">
          <img
            src="http://www.dell-lee.com/imgs/vue3/水果店.png"
            class="icons__item__img"
          />
          <p class="icons__item__desc">水果店</p>
        </div>
        <div class="icons__item">
          <img
            src="http://www.dell-lee.com/imgs/vue3/家居.png"
            class="icons__item__img"
          />
          <p class="icons__item__desc">家居时尚</p>
        </div>
        <div class="icons__item">
          <img
            src="http://www.dell-lee.com/imgs/vue3/蛋糕.png"
            class="icons__item__img"
          />
          <p class="icons__item__desc">烘培蛋糕</p>
        </div>
        <div class="icons__item">
          <img
            src="http://www.dell-lee.com/imgs/vue3/签到.png"
            class="icons__item__img"
          />
          <p class="icons__item__desc">签到</p>
        </div>
        <div class="icons__item">
          <img
            src="http://www.dell-lee.com/imgs/vue3/鲜花.png"
            class="icons__item__img"
          />
          <p class="icons__item__desc">鲜花绿植</p>
        </div>
        <div class="icons__item">
          <img
            src="http://www.dell-lee.com/imgs/vue3/医药健康.png"
            class="icons__item__img"
          />
          <p class="icons__item__desc">医药健康</p>
        </div>
        <div class="icons__item">
          <img
            src="http://www.dell-lee.com/imgs/vue3/大牌免运.png"
            class="icons__item__img"
          />
          <p class="icons__item__desc">大牌免运</p>
        </div>
        <div class="icons__item">
          <img
            src="http://www.dell-lee.com/imgs/vue3/红包.png"
            class="icons__item__img"
          />
          <p class="icons__item__desc">红包套餐</p>
        </div>
      </div>
      <div class="gap"></div>
      <div class="nearby">
        <h3 class="nearby__title">附近店铺</h3>
        <div class="nearby__item">
          <img
            class="nearby__item__img"
            src="http://www.dell-lee.com/imgs/vue3/near.png"
          />
          <div class="nearby__content">
            <div class="nearby__content__title">沃尔玛</div>
            <div class="nearby__content__tags">
              <span class="nearby__content__tag">月售1万+</span>
              <span class="nearby__content__tag">月售1万+</span>
              <span class="nearby__content__tag">月售1万+</span>
            </div>
            <p class="nearby__content__highlight">
              VIP尊享满89元减4元运费卷(每月3张)
            </p>
          </div>
        </div>
        <div class="nearby__item">
          <img
            class="nearby__item__img"
            src="http://www.dell-lee.com/imgs/vue3/near.png"
          />
          <div class="nearby__content">
            <div class="nearby__content__title">沃尔玛</div>
            <div class="nearby__content__tags">
              <span class="nearby__content__tag">月售1万+</span>
              <span class="nearby__content__tag">月售1万+</span>
              <span class="nearby__content__tag">月售1万+</span>
            </div>
            <p class="nearby__content__highlight">
              VIP尊享满89元减4元运费卷(每月3张)
            </p>
          </div>
        </div>
  // 省略部分重复代码……
      </div>
      <div class="spacer"></div>
    </div>
    <div class="docker">
      <div class="docker__item docker__item--active">
        <div class="iconfont">&#xe6d2;</div>
        <div class="docker__title">首页</div>
      </div>
      <div class="docker__item">
        <div class="iconfont">&#xe6b1;</div>
        <div class="docker__title">购物车</div>
      </div>
      <div class="docker__item">
        <div class="iconfont">&#xe612;</div>
        <div class="docker__title">订单</div>
      </div>
      <div class="docker__item">
        <div class="iconfont">&#xe7bd;</div>
        <div class="docker__title">我的</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
//省略CSS部分代码
<style>
}

上面的代码就是使用Html+CSS实现的仿京东到家主页的代码，还特意把部分CSS代码和部分重复的代码删掉，因为太多了。而且这里的代码看起来就不想维护，因为很乱，我要修改底部导航栏就得找很久，而且假设哪一个div标签每注意给删了，整个界面都会乱套。

3.使用Vue.js进行组件化

我们仔细观察京东到家的主页是可以给分块的，比如我们可以将主页划分成几个不同的组件，然后组合成一个页面，这里就要用到Vue中的组件相关的内容了。如下图：
在这里插入图片描述

3.1 Header部分组件实现

我们可以把图中标记出的组件1Header部分做成一个组件，代码如下所示：

<template>
  <div class="position">
    <span class="iconfont position__icon">&#xe7f1;</span>
    北京联合大学北四环东路97号
    <span class="iconfont position__notice">&#xe7c4;</span>
  </div>
  <div class="search">
    <span class="iconfont">&#xe741;</span>
    <span class="search__text">山姆会员商店优惠卷</span>
  </div>
  <div class="banner">
    <img
      class="banner__img"
      src="http://www.dell-lee.com/imgs/vue3/banner.jpg"
    />
  </div>
  <div class="icons">
    <div
    class="icons__item"
    v-for="item in iconList"
    :key="item.desc"
    >
      <img
        :src="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`"
        class="icons__item__img"
      />
      <p class="icons__item__desc">{{ item.desc }}</p>
    </div>
  </div>
  <div class="gap"></div>
</template>
<script>
export default {
  name: 'Header',
  setup () {
    const iconList = [
      { imgName: '超市', desc: '超市便利' },
      { imgName: '菜市场', desc: '菜市场' },
      { imgName: '水果店', desc: '水果店' },
      { imgName: '家居', desc: '家居时尚' },
      { imgName: '蛋糕', desc: '烘培蛋糕' },
      { imgName: '签到', desc: '签到' },
      { imgName: '鲜花', desc: '鲜花绿植' },
      { imgName: '医药健康', desc: '医药健康' },
      { imgName: '大牌免运', desc: '大牌免运' },
      { imgName: '红包', desc: '红包套餐' }]
    return { iconList }
  }
}
</script>
<style lang="scss" scoped>
@import "../../style/viriable.scss";
@import "../../style/mixins.scss";
.position {
    position: relative;
    @include ellipsis;
    padding: 0.16rem 0.24rem 0.16rem 0;
    line-height: 0.22rem;
    font-size: 0.16rem;
    color: $content-font-color;
    .position__icon {
        position: relative;
        top: 0.01rem;
        font-size: 0.2rem;
    }
    .position__notice {
        position: absolute;
        right: 0;
        top: 0.17rem;
        font-size: 0.2rem;
    }
}
.search {
    margin-bottom: 0.12rem;
    line-height: 0.32rem;
    background: #f5f5f5;
    color: #b7b7b7;
    border-radius: 0.16rem;
    font-size: 0.14rem;

    .iconfont {
        display: inline-block;
        padding: 0 0.1rem 0 0.16rem;
        font-size: 0.2rem;
    }
    &__text {
        display: inline-block;
    }
}
.banner {
    height: 0;
    overflow: hidden;
    padding-bottom: 25.4%; //计算图片的高度，
    &__img {
        width: 100%;
    }
}
.icons {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.16rem;
    &__item {
        width: 20%;
        padding: 0.05rem 0 0.05rem 0;
        &__img {
            display: block;
            width: 0.4rem;
            height: 0.4rem;
            margin: 0 auto;
        }
        &__desc {
            margin: 0.06rem 0 0.16rem 0;
            text-align: center;
            color: $content-font-color;
        }
    }
}
.gap {
    margin: 0 -0.18rem;
    height: 0.01rem;
    background: $content-bgColor;
}
</style>

上面的代码就是使用Vue.js抽取出来的Header部分代码，有几点需要解释下

3.1.1图标的展示

例如：<span class="iconfont position__icon">&#xe7f1;</span> &#xe7f1;是配置的阿里图标库里面对应的图标值。阿里图标库地址，创建一个项目后，想要的图标直接点击添加到购物车，然后添加到项目，进入你自己的项目中就会看到如下的内容：
在这里插入图片描述复制上面标记出的代码后，在项目的style目录下新建一个iconfont.css文件，粘贴上我们在阿里图标库中的配置就行了，如下所示：
在这里插入图片描述注意，新添加的图标会导致配置文件改变，所以每新添加一次图标，都需要重新复制粘贴下最新的配置

3.1.2 定义Vue调试的名称

在组件中我们还发现这样的代码

export default {
  name: 'Header',
  }

这个 name: 'Header'实际上是使用Vue调试工具时便于我们调试的，我们需要安装一个Vue dev tools扩展程序到chrome浏览器中，具体的安装方法大家可以自行去查，这里不多说了。我们看下最终的效果：
在这里插入图片描述

3.1.3 使用scoped隔离组件间的css影响

我们可以试想下，假设我们的两个组件间拥有相同的类名，任何一个组件修改了这个相同类名的CSS样式后，另一个组件具有相同类名的dom元素也会收到影响，所以为了解决这个问题，我们需要在样式的标签中添加一个scoped关键字，消除组件间的CSS相互影响，如下所示：

<style lang="scss" scoped>
//省略部分代码……
<style>

3.2 附近店铺部分实现

附近店铺，也就是图中标出的组件2部分，这里只贴代码：

<template>
  <div class="nearby">
    <h3 class="nearby__title">附近店铺</h3>
    <div class="nearby__item"
    v-for="item in nearByList"
    :key="item.id">
      <img class="nearby__item__img" :src="item.imgurl"/>
      <div class="nearby__content">
        <div class="nearby__content__title">{{ item.title }}</div>
        <div class="nearby__content__tags">
          <span
          class="nearby__content__tag"
          v-for="(innerItem,index) in item.tags"
          :key="index"
          >{{ innerItem }}</span>
        </div>
        <p class="nearby__content__highlight">
          {{ item.desc }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NearBy',
  setup () {
    const nearByList = [{
      id: 1,
      title: '沃尔玛',
      imgurl: 'http://www.dell-lee.com/imgs/vue3/near.png',
      tags: ['起送', '运费', '基础运费5￥'],
      desc: 'VIP尊享满89元减4元运费卷(每月3张)'
    },
    {
      id: 2,
      title: '京东',
      imgurl: 'http://www.dell-lee.com/imgs/vue3/near.png',
      tags: ['起送', '运费', '基础运费5￥'],
      desc: 'VIP尊享满89元减4元运费卷(每月6张)'
    }]
    return { nearByList }
  }
}
</script>

<style lang="scss" scoped>
@import "../../style/viriable.scss";
.nearby {
  &__title {
    margin: 0.16rem 0 0.02rem 0;
    font-size: 0.18rem;
    color: $content-font-color;
    font-weight: normal;
  }

  &__item {
    display: flex;
    padding-top: 0.12rem;

    &__img {
      width: 0.56rem;
      height: 0.56rem;
    }
  }

  &__content {
    padding-bottom: 0.12rem;
    border-bottom: 1px solid $content-font-color;
    margin-left: 0.16rem;
    flex: 1;

    &__title {
      line-height: 0.22rem;
      font-size: 0.16rem;
      color: $content-font-color;
    }

    &__tags {
      margin-top: 0.08rem;
      line-height: 0.18rem;
      font-size: 0.13rem;
      color: $content-font-color;
    }

    &__tag {
      margin-right: 0.16rem;
    }

    &__highlight {
      margin: 0.08rem 0 0 0;
      line-height: 0.18rem;
      font-size: 0.13rem;
      color: #e93b3b;
    }
  }
}
</style>

3.3 底部导航栏组件的实现

图中标出的组件3部分为底部导航栏，代码如下：

<template>
  <div class="docker">
    <div
      v-for="(item, index) in dockerList"
      :class="{'docker__item':true,'docker__item--active': index === 0}"
      :key="item.icon"
    >
    <!--需要使用 v-html来展示图标，否则图标会被转义导致无法显示  -->
      <div class="iconfont" v-html="item.icon" />
      <div class="docker__title">{{ item.text }}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DockerPart',
  setup () {
    const dockerList = [
      { icon: '&#xe6d2;', text: '首页' },
      { icon: '&#xe6b1;', text: '购物车' },
      { icon: '&#xe612;', text: '订单' },
      { icon: '&#xe7bd;', text: '我的' }
    ]
    return { dockerList }
  }
}
</script>
<style lang="scss" scoped>
@import "../../style/viriable.scss";
.docker {
  display: flex;
  box-sizing: border-box;
  padding: 0 0.18rem;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  background: #f5f5f5;
  border-top: 0.01rem solid $content-bgColor;
  color: $content-font-color;

  // docer 下的item元素
  &__item {
    flex: 1;
    text-align: center;

    .iconfont {
      margin: 0.07rem 0 0.02rem 0;
      font-size: 0.18rem;
    }

    &--active {
      color: #1fa4fc;
    }
  }
  &__title {
    font-size: 0.2rem;
    transform: scale(0.5, 0.5);
    transform-origin: center top;
  }
}
</style>

3.4 将组件组成一个整体页面

上面就是拆分好的三个组件，我们要组成一个主页时，只需要拼接三个组件即可，如下：

<template>
  <div class="wrapper">
    <Header/> // 头部组件
    <NearBy /> // 附近店铺组件
    <div class="spacer"></div>
  </div>
  <DockerPart /> // 底部导航栏组件
</template>

<script>
import StaticPart from './Header.vue'
import NearBy from './NearBy.vue'
import DockerPart from './DockerPart.vue'
export default {
  name: 'HomeView',
  components: { Header, NearBy, DockerPart }
}
</script>

<style lang="scss" scoped>
.wrapper {
  overflow-y: scroll;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0.05rem;
  right: 0;
  padding: 0 0.18rem 0.3rem 0.18rem;
}
.spacer {
  height: 0.4rem;
  width: 100%;
}
</style>

上面描述的就是使用Vue去实现一个主页的过程，将主页拆成不同的组件不仅可以使代码更容易维护吗，而且还可以提高代码的可复用性，比如我们要再写一个新的其他项目，底部导航栏完全可以改下图标和标题就能使用了。是不是非常方便，上面的例子只是为了介绍Vue拆分组件的过程，不能直接运行，读者想要体验的可以在末尾拿到所有源码的地址

4.代码地址

为了更好的体验vue带来的便利性，建议读者下载完整源码跟着练习一遍，有条件的可以去买一节完整的课跟着学，很简单的。
源码地址

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

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

相关文章

【微信小程序开发】第 9 课 - 小程序的协同工作和发布

【微信小程序开发】第 9 课 - 小程序的协同工作和发布

欢迎来到博主 Apeiron 的博客&#xff0c;祝您旅程愉快 &#xff01; 时止则止&#xff0c;时行则行。动静不失其时&#xff0c;其道光明。 目录 1、协同工作 1.1、了解权限管理需求 1.2、了解项目成员的组织结构 1.3、小程序的开发流程 2、小程序成员管理 2.1、成员管…
阅读更多...
【Unity Shader】Special Effects（八）Wireframe 线框化（UI）

【Unity Shader】Special Effects（八）Wireframe 线框化（UI）

更新日期：2023年6月17日。 Github源码：[点我获取源码] 索引 Wireframe 线框化思路分析Sobel算子片元输入数据结构-定义片元输入数据结构-填充片元输入数据结构-传入属性定义求梯度值方法求边缘方法范围控制线框化渐变动画Wireframe 线框化 线框化效果可以将一张图像根据纹理…
阅读更多...
从618「技术暗战」，看乡村振兴的未来「赛点」

从618「技术暗战」，看乡村振兴的未来「赛点」

作者 | 曾响铃 文 | 响铃说 作为消费复苏后的首个消费节点&#xff0c;从“史上消费者福利最大的618”“史上投入最大的一届618”等口号&#xff0c;都能感觉到这届618的火药味比以往要浓得多。 有业内人士透露&#xff0c;这次的年中大促无论从商品种类、数量还是提供的服务…
阅读更多...
【自动化测试】是否有必要做自动化测试？

【自动化测试】是否有必要做自动化测试？

‍目录 一、前言 二、自动化目的 三、自动化分类 四、自动化实现 一、前言 在一些测试交流群经常会看到有小伙伴在问&#xff0c;"怎么做自动化测试&#xff1f;学习自动化测试有什么资料吗&#xff1f;自动化测试是不是很牛逼&#xff1f;" &#xff0c;甚至有…
阅读更多...
Python之面向对象和继承

Python之面向对象和继承

一、关于None和判断的总结 1.1、None是什么&#xff1f; 与C和JAVA不同&#xff0c;python中是没有NULL的&#xff0c;取而代之的是None。None是一个特殊的常量&#xff0c;表示变量没有指向任何对象。在Python中&#xff0c;None本身实际上也是对象&#xff0c;有自己的类型N…
阅读更多...
浅谈自动化测试框架开发

浅谈自动化测试框架开发

在自动化测试项目中&#xff0c;为了实现更多功能&#xff0c;我们需要引入不同的库、框架。 首先&#xff0c;你需要将常用的这些库、框架都装上。 pip install requests pip install selenium pip install appium pip install pytest pip install pytest-rerunfailures pip …
阅读更多...
【深度学习】基于pytorch的FER2013人脸表情图像识别(ResNet/VGG/DenseNet)

【深度学习】基于pytorch的FER2013人脸表情图像识别(ResNet/VGG/DenseNet)

题目要求 1.1. 任务要求 数据集&#xff1a;Facial Expression Recognition Challenge&#xff0c;共有7类&#xff1a;生气、恶心、害怕、快乐、悲伤、惊讶、中性。 基本要求&#xff08;50%&#xff09;&#xff1a;构建ResNet分类模型18层。 改进&#xff08;30%&#x…
阅读更多...
Disruptor（1）：Disruptor简介

Disruptor（1）：Disruptor简介

1 什么是Disruptor Martin Fowler在自己网站上写了一篇LMAX架构的文章&#xff0c;在文章中他介绍了LMAX是一种新型零售金融交易平台&#xff0c;它能够以很低的延迟产生大量交易。这个系统是建立在JVM平台上&#xff0c;其核心是一个业务逻辑处理器&#xff0c;它能够在一个线…
阅读更多...
如何关闭电脑自动更新？一招教你永久关闭！

如何关闭电脑自动更新？一招教你永久关闭！

百度安全验证https://baijiahao.baidu.com/s?id1749271752443309717
阅读更多...
《微服务架构设计模式》第三章 微服务架构中的进程间通信

《微服务架构设计模式》第三章 微服务架构中的进程间通信

内容总结自《微服务架构设计模式》 微服务架构中的进程间通信 一、通信概述通信方式API定义消息格式 二、同步通信RESTgRPC断路器服务发现 三、异步通信消息消息通道消息代理消息问题 ) 一、通信概述 通信方式 有很多进程间通信技术可供开发者选择。服务可以使用基于同步请求…
阅读更多...
国产操作系统介绍和安装

国产操作系统介绍和安装

国产操作系统 分类 操作系统分类国产操作系统银河麒麟中科方德统信UOS红旗Linux深度系统优麒麟系统 具体介绍 麒麟操作系统 麒麟操作系统&#xff08;Kylin操作系统&#xff0c;简称麒麟OS&#xff09;&#xff0c;是一种国产操作系统&#xff0c;由国防科技大学研发&#x…
阅读更多...
【Pandas】pandas用法解析（二）

【Pandas】pandas用法解析（二）

一、生成数据表 二、数据表信息查看 三、数据表清洗 四、数据预处理 ———————————————— 目录 五、数据提取 1.按索引提取单行的数值 2.按索引提取区域行数值 3.重设索引 4.设置日期为索引 5.提取4日之前的所有数据 6.使用iloc按位置区域提取数据 7…
阅读更多...
Java线程生命周期详解

Java线程生命周期详解

前言一、线程的生命周期二、线程状态转换三、线程生命周期示例结束语 前言 Java中的线程生命周期是多线程开发的核心概念。了解线程的生命周期以及它们如何进行状态转换对于编写有效且无错误的多线程程序至关重要。 一、线程的生命周期 Java线程主要有以下几个状态&#xff…
阅读更多...
离散数学题目收集整理练习（期末过关进度80%~100%）完结撒花

离散数学题目收集整理练习（期末过关进度80%~100%）完结撒花

✨博主&#xff1a;命运之光 &#x1f984;专栏&#xff1a;离散数学考前复习&#xff08;知识点题&#xff09; &#x1f353;专栏&#xff1a;概率论期末速成&#xff08;一套卷&#xff09; &#x1f433;专栏&#xff1a;数字电路考前复习 &#x1f31f;博主的其他文章&…
阅读更多...
UG NX二次开发（C#）-外部模式-导出dwg格式文件

UG NX二次开发（C#）-外部模式-导出dwg格式文件

文章目录 1、前言2、在UG NX界面中导出DWG的操作2.1 打开三维模型2.2 创建二维工程制图2.3 导出工程图纸3、采用NXOpen(C#)二次开发实现1、前言 在我们实际使用过程中，经常会用到不同软件之间的数据转换，数据转换是通过通用标准文件来实现的。当然，在三维转二维过程中，dwg…
阅读更多...
4.部署Placement服务

4.部署Placement服务

Placement服务是从nova服务中拆分出来的组件&#xff0c;Placement组件应该在 Nova之前安装&#xff1b; Placement服务用于跟踪节点资源&#xff08;比如计算节点&#xff0c;存储资源池&#xff0c;网络资源池等&#xff09;的使用情况&#xff0c;提供自定义资源的能力&…
阅读更多...
CSS基础学习--14 Position(定位)

CSS基础学习--14 Position(定位)

一、定义 position属性指定了元素的定位类型 position 属性的五个值&#xff1a; staticrelativefixedabsolutesticky 元素可以使用的顶部&#xff0c;底部&#xff0c;左侧和右侧属性定位。然而&#xff0c;这些属性无法工作&#xff0c;除非是先设定position属性。他们也有…
阅读更多...
scratch lenet(1): 读写 pgm 图像文件

scratch lenet(1): 读写 pgm 图像文件

scratch lenet(1): 读写 pgm 图像文件 文章目录 scratch lenet(1): 读写 pgm 图像文件1. 目的2. pgm 格式介绍2.1 概要2.2 meta 信息2.3 像素内容 3. 创建 .pgm 文件4. 使用C语言读取 .pgm 灰度图文件4.1 实现4.2 解释 5. 使用C语言保存 .pgm 灰度图文件 1. 目的 最近在 githu…
阅读更多...
车载软件架构 —— 闲聊几句AUTOSAR OS（四）

车载软件架构 —— 闲聊几句AUTOSAR OS（四）

我是穿拖鞋的汉子，魔都中坚持长期主义的工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 没有人关注你。也无需有人关注你。你必须承认自己的价值，你不能站在他人的角度来反对自己。人生在世，最怕的就是把别人的眼光当成自己生活的唯一标准。到最…
阅读更多...
初识Telegraf、InfluxDB和Grafana铁三角形成的监控可视化解决方案

初识Telegraf、InfluxDB和Grafana铁三角形成的监控可视化解决方案

文章目录 前言原始的监控靠人盯进化的监控靠批处理脚本高端的监控靠完整的可视化解决方案Telegraf、InfluxDB和Grafana铁三角TelegrafInfluxDBGrafana Grafana仪表板展示服务器资源总览负载和内存使用网络带宽磁盘IOIO延迟其他指标进程信息 总结 前言 数据监控目前用于各行各业…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023