[uni-app]小兔鲜-02项目首页

news2024/11/17 10:39:44

轮播图

轮播图组件需要在首页和分类页使用, 封装成通用组件

准备轮播图组件

<script setup lang="ts">
import type { BannerItem } from '@/types/home'
import { ref } from 'vue'
// 父组件的数据
defineProps<{
  list: BannerItem[]
}>()

// 高亮下标
const activeIndex = ref(0)
// 索引变化
const onChange: UniHelper.SwiperOnChange = (ev) => {
  // ! 非空断言,主观上排除空值的情况
  activeIndex.value = ev.detail!.current
}
</script>

<template>
  <view class="carousel">
    <swiper :circular="true" :autoplay="false" :interval="3000" @change="onChange">
      <swiper-item v-for="item in list" :key="item.id">
        <navigator url="/pages/index/index" hover-class="none" class="navigator">
          <image mode="aspectFill" class="image" :src="item.imgUrl"></image>
        </navigator>
      </swiper-item>
    </swiper>
    <!-- 指示点 -->
    <view class="indicator">
      <text
        v-for="(item, index) in list"
        :key="item.id"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>
  </view>
</template>

<style lang="scss">
/* 轮播图 */
@import '@/components/styles/XtxSwiper.scss';
</style>
  1. UniHelper 提供事件类型
  2. ? (可选链)允许前面表达式为空
  3. ! (非空断言)主观上排除掉空值情况
/** 首页-广告区域数据类型 */
export type BannerItem = {
    /** 跳转链接 */
    hrefUrl: string
    /** id */
    id: string
    /** 图片链接 */
    imgUrl: string
    /** 跳转类型 */
    type: number
}
  1. 统一管理项目需要使用的类型
import type { BannerItem } from '@/types/home'
import { http } from '@/utils/http'

// 首页广告区域
export const getHomeBannerAPI = (distributionSite = 1) => {
    return http<BannerItem[]>({
        method: 'GET',
        url: '/home/banner',
        data: {
            distributionSite,
        },
    })
}
  1. 为接口数据进行类型限制
<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import type { BannerItem } from '@/types/home'
import { getHomeBannerAPI } from '@/services/home'

// 获取轮播图数据
const bannerList = ref<BannerItem[]>([])
const getHomeBannerData = async () => {
  const res = await getHomeBannerAPI()
  bannerList.value = res.result
}

// 页面加载
onLoad(async () => {
 getHomeBannerData()
})
</script>

<template>
   <!-- 自定义轮播图组件 -->
   <XtxSwiper :list="bannerList" />
</template>
  1. 定义变量时要进行类型限制, 接口返回数据和定义的变量保持一致, 增强项目的健壮性
  2. 引入类型文件可以使用 ctrl + i 快捷键

配置全局组件的自动导入

{
	// 组件自动引入规则
	"easycom": {
		// 开启自动扫描
		"autoscan": true,
		// 以正则方式自定义组件匹配规则
		"custom": {
			// uni-ui 规则如下配置
			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
      // 自定义 规则如下配置
			"Xtx(.*)": "@/components/Xtx$1.vue"
		}
	},
 ... ...
}
  • 更改 easycom 配置需要重启服务

声明自定义组件的类型

import XtxSwiper from './components/XtxSwiper.vue'
import 'vue'
declare module 'vue' {
  export interface GlobalComponents {
    XtxSwiper: typeof XtxSwiper
  }
}
  • 通过 declare 指定 GlobalComponents 就可以定义全局组件的类型
  • 更多配置查看 Volar官网

分类导航

准备分类组件, 只有首页使用

<script setup lang="ts">
import type { CategoryItem } from '@/types/home'

defineProps<{
  list: CategoryItem[]
}>()
</script>

<template>
  <view class="category">
    <navigator
      class="category-item"
      hover-class="none"
      url="/pages/index/index"
      v-for="item in list"
      :key="item.id"
    >
      <image class="icon" :src="item.icon"></image>
      <text class="text">{{ item.name }}</text>
    </navigator>
  </view>
</template>

<style lang="scss">
/* 前台类目 */
@import '../styles/category.scss';
</style>

使用分类组件

/** 首页-前台类目数据类型 */
export type CategoryItem = {
    /** 图标路径 */
    icon: string
    /** id */
    id: string
    /** 分类名称 */
    name: string
}
import type { CategoryItem } from '@/types/home'
import { http } from '@/utils/http'

// 首页分类数据
export const getHomeCategoryAPI = () => {
    return http<CategoryItem[]>({
        method: 'GET',
        url: '/home/category/mutli',
    })
}
<script setup lang="ts">
import { ref } from 'vue'
import type { CategoryItem } from '@/types/home'
import { getHomeCategoryAPI } from '@/services/home'
import CategoryPanel from './components/CategoryPanel.vue'

// 获取分类数据
const categoryList = ref<CategoryItem[]>([])
const getCategoryData = async () => {
  const res = await getHomeCategoryAPI()
  categoryList.value = res.result
}

</script>

<template>
  <!-- 分类组件 -->
  <CategoryPanel :list="categoryList" />
</template>

<style lang="scss">
page {
  background-color: #f3f3f3;
}
</style>
  1. 小程序页面根标签是page, 类似于网页的body标签

效果展示

热门推荐

准备热门推荐组件, 只有首页使用

<script setup lang="ts">
import type { HotItem } from '@/types/home'

// 定义 props 接收数据
defineProps<{
  list: HotItem[]
}>()
</script>

<template>
  <!-- 推荐专区 -->
  <view class="panel hot">
    <view class="item" v-for="item in list" :key="item.id">
      <view class="title">
        <text class="title-text">{{ item.title }}</text>
        <text class="title-desc">{{ item.alt }}</text>
      </view>
      <navigator hover-class="none" :url="`/pages/hot/hot?type=${item.type}`" class="cards">
        <image
          v-for="src in item.pictures"
          :key="src"
          class="image"
          mode="aspectFit"
          :src="src"
        ></image>
      </navigator>
    </view>
  </view>
</template>

<style lang="scss">
/* 热门推荐 */
@import '../styles/hot.scss';
</style>

使用推荐组件

/**
 * 首页-热门推荐数据类型
 */
export type HotItem = {
    /** 说明 */
    alt: string
    /** id */
    id: string
    /** 图片集合[ 图片路径 ] */
    pictures: string[]
    /** 跳转地址 */
    target: string
    /** 标题 */
    title: string
    /** 推荐类型 */
    type: string
}
import type { HotItem } from '@/types/home'
import { http } from '@/utils/http'

// 热门推荐数据
export const getHomeHotAPI = () => {
    return http<HotItem[]>({
        method: 'GET',
        url: '/home/hot/mutli',
    })
}
<script setup lang="ts">
import { ref } from 'vue'
import type { HotItem } from '@/types/home'
import { getHomeHotAPI } from '@/services/home'
import HotPanel from './components/HotPanel.vue'

// 获取热门推荐数据
const HotPanelList = ref<HotItem[]>([])
const getHomeHotData = async () => {
  const res = await getHomeHotAPI()
  HotPanelList.value = res.result
}
</script>

<template>
    <!-- 热门推荐 -->
    <HotPanel :list="HotPanelList" />
</template>

<style lang="scss">
page {
  background-color: #f3f3f3;
}
</style>

效果展示

猜你喜欢

需求分析

准备猜你喜欢组件

  • 猜你喜欢多个页面会用到
  • 定义组件的类型

  • 准备 scroll-view 滚动容器

  • 设置page 和 sroll-view样式

获取猜你喜欢数据

  • 封装请求API

  • 组件挂载完毕调用API

数据类型定义和列表渲染

分页准备工作

数据分页加载

分页条件判断

代码实现

猜你喜欢组件

<script setup lang="ts">
import { getHomeGoodsGuessAPI } from '@/services/home'
import type { PageParams } from '@/types/global'
import type { GuessItem } from '@/types/home'
import { onMounted, ref, defineExpose } from 'vue'

// 分页参数
// Required工具函数: 把可选参数转为必选
const pageParams: Required<PageParams> = {
  page: 1,
  pageSize: 10,
}
// 枯竭标记
const finish = ref(false)
// 获取猜你喜欢数据
const guessList = ref<GuessItem[]>([])
const getHomeGoodsGuessLikeData = async () => {
  if (finish.value) {
    return uni.showToast({
      icon: 'none',
      title: '没有更多了...',
    })
  }

  const res = await getHomeGoodsGuessAPI(pageParams)
  // 数组累加
  guessList.value.push(...res.result.items)
  // 分页条件 (当前页面小于总页数)
  if (pageParams.page < res.result.pages) {
    // 页码累加
    pageParams.page++
  } else {
    finish.value = true
  }
}

// 重置数据
const resetData = () => {
  guessList.value = []
  pageParams.page = 1
  finish.value = false
}

// 组件挂载
onMounted(() => {
  getHomeGoodsGuessLikeData()
})

// 对外暴漏
defineExpose({
  getMore: getHomeGoodsGuessLikeData,
  resetData,
})
</script>

<template>
  <!-- 猜你喜欢 -->
  <view class="caption">
    <text class="text">猜你喜欢</text>
  </view>
  <view class="guess">
    <navigator
      class="guess-item"
      v-for="item in guessList"
      :key="item.id"
      :url="`/pages/goods/goods?id=4007498`"
    >
      <image class="image" mode="aspectFill" :src="item.picture"></image>
      <view class="name"> {{ item.name }} </view>
      <view class="price">
        <text class="small">¥</text>
        <text>{{ item.price }}</text>
      </view>
    </navigator>
  </view>
  <view class="loading-text">
    {{ finish ? '没有更多了...' : '正在加载...' }}
  </view>
</template>

<style lang="scss">
</style>
  1. 使用TS的 Required工具函数, 把可选参数转为必选

组件类型的声明

/**
 * declare module '@vue/runtime-core'
 *   现调整为
 * declare module 'vue'
 */
import XtxGuess from './component/XtxGuess.vue'
import 'vue'
declare module 'vue' {
  export interface GlobalComponents {
    XtxGuess: typeof XtxGuess
  }
}

// 组件实例类型
/**
 * InstanceType -> 获取组件实例的类型
 * typeof XtxGuess -> 获取组件的类型
 */
export type XtxGuessInstance = InstanceType<typeof XtxGuess>
  1. 使用TS提供的InstanceType工具方法, 可以获取组件的实例类型

请求接口封装

import type { PageParams, PageResult } from '@/types/global'
import type { GuessItem,  } from '@/types/home'
import { http } from '@/utils/http'

// 猜你喜欢数据
export const getHomeGoodsGuessAPI = (data?: PageParams) => {
    return http<PageResult<GuessItem>>({
        method: 'GET',
        url: '/home/goods/guessLike',
        data,
    })
}

数据类型的定义

/** 通用分页结果类型 */
export type PageResult<T> = {
    /** 列表数据 */
    items: T[]
    /** 总条数 */
    counts: number
    /** 当前页数 */
    page: number
    /** 总页数 */
    pages: number
    /** 每页条数 */
    pageSize: number
}

/** 通用分页参数类型 */
export type PageParams = {
    /** 页码：默认值为 1 */
    page?: number
    /** 页大小：默认值为 10 */
    pageSize?: number
}

/** 通用商品类型 */
export type GoodsItem = {
    /** 商品描述 */
    desc: string
    /** 商品折扣 */
    discount: number
    /** id */
    id: string
    /** 商品名称 */
    name: string
    /** 商品已下单数量 */
    orderNum: number
    /** 商品图片 */
    picture: string
    /** 商品价格 */
    price: number
}

import type { GoodsItem } from './global'

/** 猜你喜欢-商品类型 */
export type GuessItem = GoodsItem

使用组件

<script setup lang="ts">
import { ref } from 'vue'
import CustomNavbar from './components/CustomNavbar.vue'
import type { XtxGuessInstance } from '@/types/component'

// 猜你喜欢的组件实例
const guessRef = ref<XtxGuessInstance>()

// 滚动触底事件
const onScorlltolower = () => {
     guessRef.value.getMore()
}

</script>

<template>
  <!-- 自定义导航组件 -->
  <CustomNavbar />

  <scroll-view
    @scrolltolower="onScorlltolower"
    class="scroll_view"
    scroll-y
  >  
    <!-- 猜你喜欢 -->
    <XtxGuess ref="guessRef" />
  </scroll-view>
</template>

<style lang="scss">
page {
  background-color: #f3f3f3;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scroll_view {
  flex: 1;
}
</style>
  1. 让页面page的高度为100%, 通过弹性布局, 让滚动容器自动占满页面剩余高度

下拉刷新

需求分析

开启下拉刷新

完成刷新逻辑

代码实现

使用scroll-view滚动容器

<script setup lang="ts">
// 获取轮播图数据
const getHomeBannerData = async () => {}

// 获取分类数据
const getCategoryData = async () => {}

// 获取热门推荐数据
const getHomeHotData = async () => {}

// 下拉刷新
const isTriggered = ref(false)
const onRefresherrefresh = async () => {
  isTriggered.value = true
  guessRef.value?.resetData()
  // 等待三个方法执行完毕,且三个方法同时执行
  await Promise.all([
    getHomeBannerData(),
    getCategoryData(),
    getHomeHotData(),
    guessRef.value?.getMore(),
  ])
  isTriggered.value = false
}
</script>

<template>
  <!-- 自定义导航组件 -->
  <CustomNavbar />
  
  <scroll-view
    :refresher-enabled
    @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="isTriggered"
    scroll-y
    class="scroll_view"
    @scrolltolower="onScorlltolower"
  >
    <!-- 自定义轮播图组件 -->
    <XtxSwiper :list="bannerList" />
    <!-- 分类组件 -->
    <CategoryPanel :list="categoryList" />
    <!-- 热门推荐 -->
    <HotPanel :list="HotPanelList" />
    <!-- 猜你喜欢 -->
    <XtxGuess ref="guessRef" />
  </scroll-view>
</template>
  1. :refresher-enabled="true" // 开启下拉刷新
  2. @refresherrefresh="onRefresherrefresh" //绑定下拉事件
  3. :refresher-triggered="isTriggered" // 控制动画效果
  4. onScorlltolower // 触底加载更多
  5. Promise.all([]) // 把多个异步任务作为一组进行管理, 同时执行所有任务, 返回整组的执行情况

骨架屏

需求分析

准备骨架屏组件

  1. 小程序自动生成的骨架屏是整个页面的结构
  2. 骨架屏只需要填充动态加载的结构, 比如顶部的导航栏是固定结构, 我们按需一下

代码实现

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import PageSkeleton from './components/PageSkeleton.vue'


// 控制骨架屏
const isLoading = ref(false)
onLoad(async () => {
  isLoading.value = true
  await Promise.all([getHomeBannerData(), getCategoryData(), getHomeHotData()])
  isLoading.value = false
})
</script>

<template>
  <scroll-view>
    <!-- 骨架屏 -->
    <PageSkeleton v-if="isLoading" />
      
    <template v-else>
      <!-- 自定义轮播图组件 -->
      <XtxSwiper :list="bannerList" />
      <!-- 分类组件 -->
      <CategoryPanel :list="categoryList" />
      <!-- 热门推荐 -->
      <HotPanel :list="HotPanelList" />
      <!-- 猜你喜欢 -->
      <XtxGuess ref="guessRef" />
    </template>
  </scroll-view>
</template>

效果展示

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

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

相关文章

2000-2022年上市公司人工智能词频统计（年报词频统计）/上市公司人工智能水平

2000-2022年上市公司人工智能词频统计（年报词频统计）/上市公司人工智能水平

2000-2022年上市公司人工智能词频统计&#xff08;年报词频统计&#xff09;/上市公司人工智能水平 1、时间&#xff1a;2000-2022年 2、来源&#xff1a;上市公司年报 3、范围&#xff1a;A股上市公司 4、指标&#xff1a;股票代码、股票简称、年报标题、年份、行业名称、…
阅读更多...
火车票有电子发票吗？没纸质火车票怎么报销？

火车票有电子发票吗？没纸质火车票怎么报销？

火车票有电子发票吗&#xff1f; 火车票、高铁票目前没有电子发票&#xff0c;但是现在已经实行电子客票&#xff0c;车票即购票证件&#xff0c;乘车时&#xff0c;只需购票证件原件&#xff08;如身份证、护照、临时身份证等&#xff09;即可乘车。 没纸质火车票怎么报销&am…
阅读更多...
【视频讲解】非参数重采样bootstrap逻辑回归Logistic应用及模型差异Python实现

【视频讲解】非参数重采样bootstrap逻辑回归Logistic应用及模型差异Python实现

全文链接&#xff1a;https://tecdat.cn/?p37759 分析师&#xff1a;Anting Li 本文将深入探讨逻辑回归在心脏病预测中的应用与优化。通过对加州大学欧文分校提供的心脏病数据集进行分析&#xff0c;我们将揭示逻辑回归模型的原理、实现过程以及其在实际应用中的优势和不足…
阅读更多...
【JS】图片裁剪上传

【JS】图片裁剪上传

前言 流程如下&#xff1a;本地预览 > 裁剪 > 上传 实现 1. 本地预览 将数据读为 dataurl 赋值给 img 标签的 src <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" con…
阅读更多...
近两年ATECLOUD都更新过哪些功能模块？

近两年ATECLOUD都更新过哪些功能模块？

ATECLOUD作为一款智能化测试平台&#xff0c;不仅可以满足开关电源自动测试的需求&#xff0c;还可以基于平台搭建电源芯片、射频组件以及定制化测试方案&#xff0c;为了满足各类方案的测试需求&#xff0c;ATECLOUD平台也在不断功能更新迭代中&#xff0c;从2018年诞生以来&a…
阅读更多...
免费的MBTI职业测试工具小程序

免费的MBTI职业测试工具小程序

本人亲测有效
阅读更多...
Java抽象类与接口详解

Java抽象类与接口详解

目录 &#x1f54a;抽象类&#x1f4da;1.概念&#x1f4da;2.语法&#x1f4da;3.特性&#x1f4da;4.作用 &#x1f54a;接口&#x1f334;1.概念引入&#x1f334;2.语法规则&#x1f334;3.特性&#x1f334;4.使用&#x1f33b;5.实现多个接口&#x1f33b;6.接口间的继承…
阅读更多...
[数据集][目标检测]手机识别检测数据集VOC+YOLO格式9997张1类别

[数据集][目标检测]手机识别检测数据集VOC+YOLO格式9997张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;9997 标注数量(xml文件个数)&#xff1a;9997 标注数量(txt文件个数)&#xff1a;9997 标注…
阅读更多...
祝贺！这些学校新增测绘、遥感、地理、城乡规划硕博学位点！

祝贺！这些学校新增测绘、遥感、地理、城乡规划硕博学位点！

国务院学位委员会办公室近日公示2024年新增博士硕士学位授权审核专家核查及评议结果&#xff0c;其中涉及测绘科学与技术、遥感科学与技术、地理学、城乡规划、地理学、资源与环境专业院校名单如下&#xff1a; 新增硕士学位授权点审核结果 测绘科学与技术 南京林业大学 西南…
阅读更多...
【JavaEE初阶】深入解析死锁的产生和避免以及内存不可见问题

【JavaEE初阶】深入解析死锁的产生和避免以及内存不可见问题

前言&#xff1a; &#x1f308;上期博客&#xff1a;【后端开发】JavaEE初阶—线程安全问题与加锁原理&#xff08;超详解&#xff09;-CSDN博客 &#x1f525;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 ⭐️小编会在后端开发的学习中不断更新~~~ &#…
阅读更多...
进程的那些事--进程控制

进程的那些事--进程控制

目录 前言 一、创建进程 二、退出进程 void exit (int retval) 三、进程等待 四、进程替换 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 前面我们认识了进程&#xff0c;现在让我们认识几个进程的接口 提示&#xff1a;以下是本篇文章正文内容…
阅读更多...
MySQL_表_进阶(2/2)

MySQL_表_进阶(2/2)

上一章我们谈了排序子句&#xff0c;使用ORDER BY 字段 DESC/ASC。以及左右连接的多关系查询。 今天&#xff0c;没错&#xff0c;四张表最后两个需求 ✨涉及聚合函数查询与指定别名 四张表&#xff1a; 学院表&#xff1a;(testdb.dept) 课程表&#xff1a;(testdb.course) 选…
阅读更多...
MT5016A-ASEMI三相整流桥MT5016A

MT5016A-ASEMI三相整流桥MT5016A

编辑&#xff1a;ll MT5016A-ASEMI三相整流桥MT5016A 型号&#xff1a;MT5016A 品牌&#xff1a;ASEMI 封装&#xff1a;D-63 批号&#xff1a;2024 类型&#xff1a;三相整流桥 电流&#xff08;ID&#xff09;&#xff1a;50A 电压(VF)&#xff1a;1600V 安装方式&a…
阅读更多...
示例说明：elasticsearch实战应用

示例说明：elasticsearch实战应用

Elasticsearch 是一个基于 Lucene 的分布式搜索和分析引擎&#xff0c;广泛应用于日志分析、全文搜索、数据可视化等领域。以下是 Elasticsearch 实战应用的一些关键点和步骤&#xff1a; 1. 环境搭建 首先&#xff0c;你需要在你的环境中安装和配置 Elasticsearch。 安装 E…
阅读更多...
K8S精进之路-控制器StatefulSet有状态控制 -(2)

K8S精进之路-控制器StatefulSet有状态控制 -(2)

状态说明 在进行StatefulSet部署之前&#xff0c;我们首先可能要了解一下&#xff0c;什么是"有状态应用"和"无状态应用"。无状态应用就是pod无论部署在哪里&#xff0c;在哪台服务器上提供服务&#xff0c;都是一样的结果&#xff0c;比如经常用的nginx。…
阅读更多...
Django5 使用pyinstaller打包成 exe服务

Django5 使用pyinstaller打包成 exe服务

首先&#xff1a;确保当前的django项目可以完美运行&#xff0c;再进行后续操作 python manage.py runserver第一步 安装 pyinstaller pip install pyinstaller第二步 创建spec 文件 pyinstaller --name manage --onefile manage.pypyinstaller&#xff1a;这是调用 PyInsta…
阅读更多...
SpringBoot 流式输出时，正常输出后为何突然报错？

SpringBoot 流式输出时，正常输出后为何突然报错？

一个 SpringBoot 项目同时使用了 Tomcat 的过滤器和 Spring 的拦截器&#xff0c;一些线程变量在过滤器中初始化并在拦截器中使用。 该项目需要调用大语言模型进行流式输出。 项目中&#xff0c;笔者使用 SpringBoot 的 ResponseEntity<StreamingResponseBody> 将流式输…
阅读更多...
【YOLO目标检测马铃薯叶病害数据集】共1912张、已标注txt格式、有训练好的yolov5的模型

【YOLO目标检测马铃薯叶病害数据集】共1912张、已标注txt格式、有训练好的yolov5的模型

目录 说明图片示例 说明 数据集格式&#xff1a;YOLO格式 图片数量&#xff1a;1912 标注数量(txt文件个数)&#xff1a;1912 标注类别数&#xff1a;5 标注类别名称&#xff1a; health General early blight Severe early blight General late blight Severe late bligh…
阅读更多...
Vue3使用vue-quill富文本编辑器实现图片大小调整

Vue3使用vue-quill富文本编辑器实现图片大小调整

安装uill-image-resize npm install quill-image-resize --save在项目中导入并注册插件 import { QuillEditor, Quill } from vueup/vue-quill; import ImageUploader from quill-image-uploader; import ImageResize from quill-image-resize; //导入插件 import vueup/vue-…
阅读更多...
webservice xfire升级为cxf cxf常用注解 cxf技术点 qualified如何设置

webservice xfire升级为cxf cxf常用注解 cxf技术点 qualified如何设置

关键点 确保参数名称保持一致确保参数命名空间保持一致确保接口命名空间保持一致确保请求头设置正确确保用soapui工具解析的参数结构一致 cxf常用注解 定义接口用到的注解 定义接口名称&#xff0c;和接口命名空间 WebService(name“ams” ,targetNamespace “http://ifac…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023