【小程序 | 黑马优选】tabBar、首页制作

news2024/9/20 22:37:18

文章目录

  • tabBar制作
  • 首页制作
    • 配置网络请求
    • 制作轮播图效果
      • 渲染轮播图的UI解构
      • 配置小程序分包
      • 点击轮播图跳转到商品详情页面
      • 封装 uni.$showMsg() 方法
    • 分类导航区制作
    • 楼层区域制作

tabBar制作

在 pages 目录中，创建首页(home)、分类(cate)、购物车(cart)、我的(my) 这 4 个 tabBar 页面。

然后我们将原本的index页面删除(包括文件夹以及page.json中的页面路径)，否则在我们测试的时候会发现页面上并没有我们制作的效果

默认是以pages配置项中的第一个页面作为首页

在pages.json 配置文件中，新增 tabBar 的配置节点，完整代码如下：

{
  "tabBar": {
    "selectedColor": "#C00000",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "static/tab_icons/home.png",
        "selectedIconPath": "static/tab_icons/home-active.png"
      },
      {
        "pagePath": "pages/cate/cate",
        "text": "分类",
        "iconPath": "static/tab_icons/cate.png",
        "selectedIconPath": "static/tab_icons/cate-active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/tab_icons/cart.png",
        "selectedIconPath": "static/tab_icons/cart-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "static/tab_icons/my.png",
        "selectedIconPath": "static/tab_icons/my-active.png"
      }
    ]
  }
}

selectedColor代表tab上的文字被选中时的颜色

首页制作

配置网络请求

由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。

@escook/request-miniprogram 的官方文档；
https://www.npmjs.com/package/@escook/request-miniprogram

在安装这个包之前，我们先使用如下命令初始化一个package.json配置文件，有了这个配置文件之后我们接下来就可以安装这个包了。

npm init -y

然后我们运行以下命令装包：

npm install @escook/request-miniprogram

将导入的对象挂载到uniapp项目的顶级对象uni上,方便我们发送请求

uni.$http = $http

接下来我们可以设置请求拦截器和响应拦截器来完成展示loading效果和隐藏loading效果：

//请求拦截器
$http.beforeRequest = function(options){
  // 显示loading提示框
  //	需主动调用 uni.hideLoading 才能关闭提示框。
  uni.showLoading({
    title:"数据加载中····"
  })
}

// 响应拦截器
$http.afterRequest = function(options){
  //隐藏loading提示框
  uni.hideLoading()
}

在原生小程序内部我们是使用wx去调用showLoading的，但是在uniapp项目里面我们不建议使用wx去掉调用那些api了，我们建议大家使用uni去调用那些小程序api

制作轮播图效果

首先我们去请求轮播图的数据；

请求URL：

  • https://api-ugo-web.itheima.net/api/public/v1/home/swiperdata

请求方式：

  • GET

参数： 无

返回示例

{
    "message": [
        {
            "image_src": "https://api-ugo-web.itheima.net/pyg/banner1.png",
            "open_type": "navigate",
            "goods_id": 129,
            "navigator_url": "/pages/goods_detail/index?goods_id=129"
        }
    ],
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}

返回参数说明

参数名类型说明
image_srcstring图片路径
open_typestring打开方式
goods_idnumber商品id
navigator_urlstring导航链接

备注

  • 更多返回错误代码请看首页的错误代码描述

记得先开启不校验合法域名：
在这里插入图片描述

记得在main.js文件里面设置一下请求的根路径；
在这里插入图片描述

我们先看一下我们发出请求之后返回来的数据结构：
在这里插入图片描述

在这里插入图片描述
发现我们要的数据在data之中，我们直接把他们解构出来使用：

	async getSwiperList() {
        const {data: res} = await uni.$http.get('/api/public/v1/home/swiperdata')
        this.swiperList = res.message
      }

但是这里res.message不一定会有值，比如说在请求失败的时候，所以说我们在赋值之前先要判断一下请求是否成功，完整代码如下：

<template>
  <view>
    这里是home页面
  </view>
</template>

<script>
  export default {
    data() {
      return {
        swiperList: [],
      };
    },
    onLoad() {
      this.getSwiperList()
    },
    methods: {
      async getSwiperList() {
        const {data: res} = await uni.$http.get('/api/public/v1/home/swiperdata')
        //如果数据请求失败
        if(res.meta.status !== 200){
          // 显示消息提示框
          return uni.showToast({
            title:"数据请求失败",
            duration:1500,
            icon:'none'
          })
        }
        //如果数据请求成功
        this.swiperList = res.message
        // uni.showToast({
        //   title:"数据请求成功",
        //   duration:1500,
        //   icon:'success'
        // })

      }
    }
  }
</script>

<style lang="scss">

</style>

uni.showToast(OBJECT)
显示消息提示框
duration:1500 定义弹框的时间 单位是ms
具体使用方法，直接看文档非常的清晰：
https://uniapp.dcloud.net.cn/api/ui/prompt.html#showtoast

渲染轮播图的UI解构

这里没什么注意点，就是一个for循环构建轮播图的item就行

<template>
  <view>
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
      <swiper-item v-for="item in swiperList" :key="item.goods_id">
        <img :src="item.image_src" alt="">  
      </swiper-item>
    </swiper>
  </view>
</template>

<style lang="scss">
  swiper {
    height: 330rpx;
    img {
      width: 100%;
    }
  }
  
</style>

效果：
在这里插入图片描述

配置小程序分包

分包可以减少小程序首次启动时的加载时间

我们在项目中，把 tabBar 相关的 4 个页面放到主包中，其它页面（例如：商品详情页、商品列表页）放到分包中。

在uni-app中配置分包的步骤如下：

首先我们在项目的根目录中创建一个分包的根目录，这里我们就把这个目录命名为subpkg；
在这里插入图片描述

然后我们在 pages.json 中，和 pages 节点平级的位置声明 subPackages 节点，用来定义分包相关的结构：

在这里插入图片描述

注意这里配置完之后一定要保存，否则你在分包中创建页面的时候不会出现选择分包选项。

最后我们在创建的分包目录中创建新页面即可：
在这里插入图片描述
这里我们先将商品详情页放进去，创建完毕之后，我们回看pages.json文件会发现其中帮我们配置好了相关信息：
在这里插入图片描述

点击轮播图跳转到商品详情页面

直接将img元素用navigator包裹起来就行，url使用字符串的拼接：

<template>
  <view>
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
      <swiper-item v-for="item in swiperList" :key="item.goods_id">
        <navigator :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">
          <img :src="item.image_src" alt="">  
        </navigator>
      </swiper-item>
    </swiper>
  </view>
</template>

封装 uni.$showMsg() 方法

我们封装uni.$showMsg()方法是因为每当数据请求失败之后，经常需要调用 uni.showToast({ /* 配置对象 */ }) 方法来提示用户：
在这里插入图片描述
我们干脆把这段代码给抽象出来单独挂载到uni身上，这样减少代码冗余的同时，还能简化开发。

方法如下：

在 main.js 中，为 uni 对象挂载自定义的 $showMsg() 方法：

uni.$showMsg = function(title = "数据请求失败",duration = 1500){
  uni.showToast({
    title,
    duration,
    icon:'none'
  })
}

这里我们使用了默认参数，如果我们没有传入参数，则title 默认为数据请求失败，duration 默认为1500

然后我们使用上述我们封装好了的代码：
在这里插入图片描述

分类导航区制作

分类导航栏也就是如下区域：
在这里插入图片描述

制作这个分类导航栏我们的基本步骤还是，先获取数据，再做页面的UI渲染

首先数据接口相关信息如下：

请求URL：

  • https://api-ugo-web.itheima.net/api/public/v1/home/catitems

请求方式：

  • GET

参数： 无

返回示例

{
    "message": [
        {
            "name": "分类",
            "image_src": "https://api-ugo-web.itheima.net/pyg/icon_index_nav_4@2x.png",
            "open_type": "switchTab",
            "navigator_url": "/pages/category/index"
        },
        {
            "name": "秒杀拍",
            "image_src": "https://api-ugo-web.itheima.net/pyg/icon_index_nav_3@2x.png"
        },
        {
            "name": "超市购",
            "image_src": "https://api-ugo-web.itheima.net/pyg/icon_index_nav_2@2x.png"
        },
        {
            "name": "母婴品",
            "image_src": "https://api-ugo-web.itheima.net/pyg/icon_index_nav_1@2x.png"
        }
    ],
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}

返回参数说明

参数名类型说明
namestring标题名称
image_srcstring图片路径

备注

  • 更多返回错误代码请看首页的错误代码描述

然后编写请求数据的代码；

	async getNavList() {
        const {data:res} = await uni.$http.get("/api/public/v1/home/catitems")
        if(res.meta.status !== 200){
          uni.$showMssg()
        }
        this.NavList = res.message
      }

然后我们在onLoad方法中去调用它；

	onLoad() {
      this.getNavList()
    },

最后我们再去渲染一下界面：

.nav-list {
    display: flex;   
    view {
      width: 25%;
      text-align: center;
      margin: 15rpx 0;
      img {
        height: 140rpx;
        width: 128rpx;
        
      }
    }
  }

效果如下；
在这里插入图片描述

接下来我们还要实现一个功能就是点击第一项，切换到分类页面，效果如下图所示：
在这里插入图片描述
我们的基本思路就是给每一个导航栏绑定点击事件，当被点击的导航栏的name属性与‘分类’吻合，那么就进行跳转，代码实现如下；

	<view class="nav-list">
      <view v-for="(item,index) in NavList" :key="index" @click="navClickHandler(item)">
        <img :src="item.image_src">
      </view>
    </view>

点击事件的处理逻辑；

	navClickHandler(item){
        if(item.name === "分类") {
          uni.switchTab({
            url:"/pages/cate/cate"
          })
        }
      }

楼层区域制作

效果如下：
在这里插入图片描述
当前项目中的楼层区域有三个：

  • 时尚女装
  • 户外运动
  • 箱包配饰

首先我们还是先获取数据，楼层数据的接口文档如下：

请求URL：

  • https://api-ugo-web.itheima.net/api/public/v1/home/floordata

请求方式：

  • GET

参数： 无

返回示例

{
    "message": [
        {
            "floor_title": {
                "name": "时尚女装",
                "image_src": "https://api-ugo-web.itheima.net/pyg/pic_floor01_title.png"
            },
            "product_list": [
                {
                    "name": "优质服饰",
                    "image_src": "https://api-ugo-web.itheima.net/pyg/pic_floor01_1@2x.png",
                    "image_width": "232",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list/index?query=服饰"
                },
                {
                    "name": "春季热门",
                    "image_src": "https://api-ugo-web.itheima.net/pyg/pic_floor01_2@2x.png",
                    "image_width": "233",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list/index?query=热"
                },
                {
                    "name": "爆款清仓",
                    "image_src": "https://api-ugo-web.itheima.net/pyg/pic_floor01_3@2x.png",
                    "image_width": "233",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list/index?query=爆款"
                },
                {
                    "name": "倒春寒",
                    "image_src": "https://api-ugo-web.itheima.net/pyg/pic_floor01_4@2x.png",
                    "image_width": "233",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list/index?query=春季"
                },
                {
                    "name": "怦然心动",
                    "image_src": "https://api-ugo-web.itheima.net/pyg/pic_floor01_5@2x.png",
                    "image_width": "233",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list/index?query=心动"
                }
            ]
        },
        {
            "floor_title": {
                "name": "户外活动",
                "image_src": "https://api-ugo-web.itheima.net/pyg/pic_floor02_title.png"
            },
            "product_list": [
                {
                    "name": "勇往直前",
                    "image_src": "https://api-ugo-web.itheima.net/pyg/pic_floor02_1@2x.png",
                    "image_width": "232",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list/index?query=户外"
                },
                {
                    "name": "户外登山包",
                    "image_src": "https://api-ugo-web.itheima.net/pyg/pic_floor02_2@2x.png",
                    "image_width": "273",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list/index?query=登山包"
                },
                {
                    "name": "超强手套",
                    "image_src": "https://api-ugo-web.itheima.net/pyg/pic_floor02_3@2x.png",
                    "image_width": "193",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list/index?query=手套"
                },
                {
                    "name": "户外运动鞋",
                    "image_src": "https://api-ugo-web.itheima.net/pyg/pic_floor02_4@2x.png",
                    "image_width": "193",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list/index?query=运动鞋"
                },
                {
                    "name": "冲锋衣系列",
                    "image_src": "https://api-ugo-web.itheima.net/pyg/pic_floor02_5@2x.png",
                    "image_width": "273",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list/index?query=冲锋衣"
                }
            ]
        },
        {
            "floor_title": {
                "name": "箱包配饰",
                "image_src": "https://api-ugo-web.itheima.net/pyg/pic_floor03_title.png"
            },
            "product_list": [
                {
                    "name": "清新气质",
                    "image_src": "https://api-ugo-web.itheima.net/pyg/pic_floor03_1@2x.png",
                    "image_width": "232",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=饰品"
                },
                {
                    "name": "复古胸针",
                    "image_src": "https://api-ugo-web.itheima.net/pyg/pic_floor03_2@2x.png",
                    "image_width": "263",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=胸针"
                },
                {
                    "name": "韩版手链",
                    "image_src": "https://api-ugo-web.itheima.net/pyg/pic_floor03_3@2x.png",
                    "image_width": "203",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=手链"
                },
                {
                    "name": "水晶项链",
                    "image_src": "https://api-ugo-web.itheima.net/pyg/pic_floor03_4@2x.png",
                    "image_width": "193",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=水晶项链"
                },
                {
                    "name": "情侣表",
                    "image_src": "https://api-ugo-web.itheima.net/pyg/pic_floor03_5@2x.png",
                    "image_width": "273",
                    "open_type": "navigate",
                    "navigator_url": "/pages/goods_list?query=情侣表"
                }
            ]
        }
    ],
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}

返回参数说明

参数名类型说明
floor_titlestring一级分类标题
product_listarray一级分类内容
namestring名称
image_srcstring图片路径
image_widthstring图片宽度
open_typestring打开方式
navigator_urlstring跳转连接

备注

  • 更多返回错误代码请看首页的错误代码描述
export default {
  data() {
    return {
      // 1. 楼层的数据列表
      floorList: [],
    }
  },
  onLoad() {
    // 2. 在 onLoad 中调用获取楼层数据的方法
    this.getFloorList()
  },
  methods: {
    // 3. 定义获取楼层列表数据的方法
    async getFloorList() {
      const { data: res } = await uni.$http.get('/api/public/v1/home/floordata')
      if (res.meta.status !== 200) return uni.$showMsg()
      this.floorList = res.message
    },
  },
}

然后我们再进行UI的渲染，我们可以发现每一层楼中都是左边一张大图，右边四张小图的样式，这样的话我们可以分左、右两个盒子来装。
在这里插入图片描述

页面结构：

	<!-- 楼层区域 -->
    <view class="floor-list">
      <view class="floor-item" v-for="(item,index) in floorList" :key="index">
        <!-- 楼层标题 -->
        <img :src="item.floor_title.image_src" class="floor-title">
        <view class="img-box">
          <view class="left-img-box">
            <image :src="item.product_list[0].image_src" 
            mode="widthFix" 
            :style="{width:item.product_list[0].image_width + 'rpx'}">
            </image>
          </view>
          <view class="right-img-box">
            <view class="right-img-item" 
              v-for="(item2,index2) in item.product_list" 
              :key="index2" 
              v-if="index2 !== 0">
              <image :src="item2.image_src" mode="widthFix" :style="{width: item2.image_width + 'rpx'}"></image>
            </view>
          </view>
        </view>
      </view>

这里有几个注意点；

  • image和img是两个标签
  • 我们在image中可以使用mode属性，这个属性表示图片裁剪、缩放的方式，其中我们使用的widthFix表示宽度不变，高度自动变化，保持原图宽高比不变
  • v-if不需要: 进行动态绑定

然后我们进行样式的美化；

  .floor-title {
    height: 60rpx;
    width: 100%;
    display: flex;
  }
  
  .right-img-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  .img-box {
    display: flex;
    
    padding-left: 10rpx;
  }

接下来我们完善一下功能：点击楼层图片跳转到列表页

首先我们在子包subpkg中新建goods_list页面：
在这里插入图片描述
首先我们来看一下我们从数据接口请求到的数据：
在这里插入图片描述
我们发现提供的url与我们的项目并不一致，所以我们先要对这些地址进行处理，方法就是使用forEach进行双层for循环：

	async getFloorList() {
        const {data:res} = await uni.$http.get("/api/public/v1/home/floordata")
        if(res.meta.status !== 200){
          uni.$showMsg()
        }
        
        res.message.forEach((floor) => {
          floor.product_list.forEach((item) => {
            item.navigator_url = "/subpkg/goods_list/goods_list?" + item.navigator_url.split('?')[1]
          })
        })
        this.floorList = res.message
      }

接下来我们去调整一下页面的结构：

<!-- 楼层区域 -->
    <view class="floor-list">
      <view class="floor-item" v-for="(item,index) in floorList" :key="index">
        <!-- 楼层标题 -->
        <img :src="item.floor_title.image_src" class="floor-title">
        <view class="img-box">
          <navigator class="left-img-box" url="item.product_list[0].navigator_url">
            <image :src="item.product_list[0].image_src" 
            mode="widthFix" 
            :style="{width:item.product_list[0].image_width + 'rpx'}">
            </image>
          </navigator>
          <view class="right-img-box">
            <navigator class="right-img-item" 
              v-for="(item2,index2) in item.product_list" 
              :key="index2" 
              v-if="index2 !== 0"
              url="item2.navigator_url">
              <image :src="item2.image_src" mode="widthFix" :style="{width: item2.image_width + 'rpx'}"></image>
            </navigator>
          </view>
        </view>
      </view>
    </view>

主要修改就是把view换成navigator标签，然后添加url属性即可。

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

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

相关文章

windows下zookeeper搭建

windows下zookeeper搭建

程序包下载 官网下载地址 下载解压后如下&#xff01; 注意&#xff0c;zookeeper需要java环境&#xff0c;如果配置了JAVA_HOME那最好&#xff0c;如果没配置就会出现点击bin下的zkServer.cmd后CMD窗口一闪而过 修改配置 如果本地端口没有特别要求可以直接复制conf下的zo…
阅读更多...
多臂PEG衍生物8-Arm PEG-SAA,8-Arm PEG-Succinamide Acid,八臂PEG丁二酸酰胺

多臂PEG衍生物8-Arm PEG-SAA,8-Arm PEG-Succinamide Acid,八臂PEG丁二酸酰胺

一&#xff1a;产品描述 1、名称 英文&#xff1a;8-Arm PEG-SAA&#xff0c;8-Arm PEG-Succinamide Acid 中文&#xff1a;八臂-聚乙二醇-丁二酸酰胺 2、CAS编号&#xff1a;N/A 3、所属分类&#xff1a;Carboxylic acid PEG Multi-arm PEGs 4、分子量&#xff1a;可定制…
阅读更多...
IDEA新建js项目(hello)和执行js脚本

IDEA新建js项目(hello)和执行js脚本

一)、安装Node.js具体操作参考:https://blog.csdn.net/xijinno1/article/details/128774375二)、IDEA中新建js项目(hello world)1.按照下图&#xff0c;新建js项目2.选中示例代码文件后点击鼠标右键&#xff0c;选中菜单栏中的 运行* 栏目运行代码(第一次运行代码的方式)3.若是…
阅读更多...
【版本控制】Git快速上手

【版本控制】Git快速上手

Do you know what Git is&#xff1f; 一.引入 (1) 作用 Git 是一个分布式版本控制系统&#xff0c;主要是用于管理开发过程中的源代码文件&#xff08;Java类&#xff0c;xml文件&#xff0c;html页面等&#xff09;。可用于代码回溯&#xff0c;版本切换&#xff0c;多人协作…
阅读更多...
AcWing 292. 炮兵阵地（状态压缩DP）

AcWing 292. 炮兵阵地（状态压缩DP）

AcWing 292. 炮兵阵地&#xff08;状态压缩DP&#xff09;一、题目二、思路1、分析2、状态表示3、状态转移4、循环设计5、初末状态三、代码一、题目 二、思路 1、分析 这道题的话和我们之前讲解的AcWing 327. 玉米田&#xff08;状态压缩DP&#xff09;和AcWing 1064. 小国王…
阅读更多...
Jenkins环境搭建与实战

Jenkins环境搭建与实战

Jenkins环境搭建与实战1、Jenkins2、GItLab的安装2.1、安装依赖2.1.1、CentOS8安装报错2.1.2、找不到对应包安装报错2.2、配置镜像2.3、安装gitlab3、安装Jenkins4、Maven安装4.1、出现报错 The JAVA_HOME environment variable is not defined correctly的错误5、Jenkins 通过…
阅读更多...
SWIFT Framework .NET 2023

SWIFT Framework .NET 2023

SWIFT Framework .NET 2023 Latest 2023 specification messages.Improves parsing..NET Framework 4.8 release.Performance updates.Improves handling of special characters. SWIFT Framework.NET是一个用于在组织信息系统基础架构中捕获、验证和处理SWIFT消息的系统。SWI…
阅读更多...
3.5主存储器与CPU的连接

3.5主存储器与CPU的连接

文章目录一、引子二、单块存储芯片与CPU的连接三、多块存储芯片与CPU的连接1.现代计算机2.命名3.增加主存的存储字长--位扩展&#xff08;1&#xff09;单块&#xff08;2&#xff09;多块4.增加主存的存储字数--字扩展&#xff08;1&#xff09;单块&#xff08;2&#xff09;…
阅读更多...
19行列式公式和代数余子式

19行列式公式和代数余子式

行列式公式 学习了关于行列式的这么多性质&#xff0c;现在我们有能力推导二阶行列式公式了&#xff1a; 观察上面的推导过程&#xff0c;不难发现&#xff0c;行列式的值等于使用性质3.b 分解后所得的那些非零行列式的和&#xff0c;所谓的非零行列式也即该行列式各行各列都…
阅读更多...
【算法基础】大整数加减乘除法（高精度）

【算法基础】大整数加减乘除法（高精度）

大整数的思想：用数组存储大整数（超长整数），比如存储1000位的整数只需要开辟一个长度为1000的数组（C++通常使用vector），今天将通过OJ例题来介绍高精度问题。（完全0基础的先建议自主学习一下，本博客默认已了解大致思想） 一、 大整数加法（大整数 + 大整数） （一）Qu…
阅读更多...
6 逻辑斯蒂回归

6 逻辑斯蒂回归

文章目录回归问题和分类问题问题提出逻辑回归二分类问题逻辑函数与线性回归方程的不同模型变化loss函数不同BCEloss函数的介绍课程代码课程来源&#xff1a; 链接课程文本来源借鉴&#xff1a; 链接以及&#xff08;强烈推荐&#xff09; Birandaの回归问题和分类问题 有监督学…
阅读更多...
Docker安装Tomcat服务器

Docker安装Tomcat服务器

Docker安装Tomcat服务器查看tomcat镜像下载 tomcat镜像启动tomcat容器浏览器访问容器中的tomcat1 查看ip2 查看容器是否启动3 进入容器重启容器浏览器访问查看tomcat镜像 docker search tomcat下载 tomcat镜像 咱直接下载最近版本的tomcat镜像 docker pull tomcat查看一下本…
阅读更多...
芯片验证系列——激励(stimulus)

芯片验证系列——激励(stimulus)

对于芯片验证&#xff0c;主要的挑战在于&#xff1a;1.如何打出所有可能的激励灌给DUT&#xff1b;2.如何在各种可能得激励情况下&#xff0c;判断出不符合硬件描述的行为。本文单单聚焦于一些关于构造stimulus方面的想法吧&#xff0c;结合了红皮书, writing testbench和项目…
阅读更多...
储殷黄日涵教授《丁香花》唐磊推荐杨语莲，意味拜师赵本山有望吗

储殷黄日涵教授《丁香花》唐磊推荐杨语莲，意味拜师赵本山有望吗

熟悉娱乐圈的人都知道&#xff0c;这个圈子包含有很多潜规则&#xff0c;尤其是一些女艺人&#xff0c;想要有所成就&#xff0c;不是有才华就可以的。就拿音乐人杨语莲来说&#xff0c;她是一个非常有才华的歌手&#xff0c;然而就因为不接受潜规则&#xff0c;至今仍是歌红人…
阅读更多...
设计模式：单例模式

设计模式：单例模式

1、单例模式 单例模式是指在整个系统生命周期内&#xff0c;保证一个类只能产生一个实例&#xff0c;确保该类的唯一性。 为什么需要单例模式 单例模式是为了保证程序的线程安全。 线程安全&#xff1a; 在拥有共享数据的多条线程并行执行的程序中&#xff0c;线程安全的代…
阅读更多...
cuda和pytarch的安装-参考官网的安装-较为通用

cuda和pytarch的安装-参考官网的安装-较为通用

文章目录cuda 安装PyTorch 1.x版本安装cuda 安装 官网&#xff1a;cuda各个版本安装教程 选择相应版本点击版本前方链接就可以进入安装教程页面 例如&#xff1a;我想要为ubuntu系统安装一个11.7版本的cuda&#xff0c;则选择11.7版本的连接&#xff0c;然后进入安装教程页面…
阅读更多...
深度学习之优化算法

深度学习之优化算法

入门小菜鸟&#xff0c;希望像做笔记记录自己学的东西&#xff0c;也希望能帮助到同样入门的人&#xff0c;更希望大佬们帮忙纠错啦~侵权立删。 目录 一、优化算法与深度学习 1、优化算法对于深度学习的意义 2、优化算法与深度学习的关系 3、优化算法在深度学习中的主要挑…
阅读更多...
如何用Spring整合MyBatis和Junit

如何用Spring整合MyBatis和Junit

Spring整合MyBatis和Junit一. 整合MyBatis1. 目录&#xff1a;2. pom.xml&#xff1a;3. domain层&#xff1a;4. dao层&#xff1a;5. service层&#xff1a;AccountService接口类&#xff1a;AccountServiceImpl实现类&#xff1a;6. jdbc.properties配置文件&#xff1a;7. …
阅读更多...
HBase基于HDFS上是如何完成增删改查功能的

HBase基于HDFS上是如何完成增删改查功能的

HDFS只支持文件append操作, 而依赖HDFS的HBase如何完成增删改查功能&#xff1f; 1.如何理解? 1.这句话有个更专业的说法&#xff1a;HDFS 采用数据流方式来访问文件&#xff0c;只支持单个客户端向一个文件追加数据. 2 上半句话&#xff0c;访问文件不外乎读和写&#xff0…
阅读更多...
SecureCRT for mac的坑

SecureCRT for mac的坑

最新macOS升级到13&#xff08;原来是11&#xff0c;一直没升&#xff09;&#xff0c;升级之后输入法和SecureCRT挂了。 记录一下SecureCRT&#xff0c;备忘 1、第一个坑居然是下载 网上找破解版&#xff0c;想找个新一点的版本&#xff0c;发现都是收费的 收费也就罢了&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023