uniapp(uncloud) 使用生态开发接口详情3(新增产品分类,产品列表,新闻列表)

我的想法是有产品分类,产品列表,新闻咨询,新闻列表

  1. 项目中, uniCloud => database 目录下新建 sy_product_nav.schema.json
    在这里插入图片描述
// 代码如下
{
	"bsonType": "object",
	"required": ["classname"],
	"permission": {
		"read": false,
		"create": false,
		"update": false,
		"delete": false
	},
	"properties": {
		"_id": {
			"description": "ID,系统自动生成"
		},
		"classname":{
			"title": "名称",
			"description": "请输入产品名称",
			"bsonType": "string"
		},
		"orderid":{
			"title": "排序",
			"description": "产品排序",
			"bsonType": "int"
		},
		"icon":{
			"title": "图标",
			"bsonType": "file"
		},
		"state":{
			"title": "状态",
			"bsonType": "bool",
			"defaultValue": true
		},
		"createTime":{
			"title": "创建时间",
			"bsonType": "timestamp",
			"forceDefaultValue":{
				"$env": "now"
			}
		},
		"updateTime":{
			"title": "创建时间",
			"bsonType": "timestamp",
			"forceDefaultValue":{
				"$env": "now"
			}
		}
	}
}
  1. schema2code 生成页面, 运行项目,在浏览器中, http://localhost:8080/admin/#/pages/sy_product_nav/list, 点击新增

  2. 新建一个产品中心, 一级目录
    在这里插入图片描述

  3. 在产品中心新增子目录, 产品中分类
    在这里插入图片描述

  4. 刷新页面,就出现了

  5. 新增几个产品, 产品分类就完成了
    在这里插入图片描述

  6. 下面是产品列表了, database下面新建 sy_product_list
    在这里插入图片描述

// 文档教程: https://uniapp.dcloud.net.cn/uniCloud/schema
// 文档教程: https://uniapp.dcloud.net.cn/uniCloud/schema
{
	"bsonType": "object",
	"required": ["title"],
	"permission": {
		"read": false,
		"create": false,
		"update": false,
		"delete": false
	},
	"properties": {
		"_id": {
			"description": "ID,系统自动生成"
		},
		"title": {
			"title": "名称",
			"description": "请输入产品名称",
			"bsonType": "string"
		},
		"navid": {
			"title": "产品分类",
			"bsonType": "string",
			"description": "所属产品分类",
			"foreignKey": "sy_product_nav._id",
			"enum": {
				"collection": "sy_product_nav",
				"field": " classname as text, _id as value"
			}
		},
		"orderid": {
			"title": "排序",
			"trim": "both",
			"bsonType": "int"
		},
		"img": {
			"title": "产品图",
			"bsonType": "file"
		},
		"pirce": {
			"title": "价格",
			"trim": "both",
			"bsonType": "string"
		},
		"weight": {
			"title": "重量",
			"trim": "both",
			"bsonType": "string"
		},
		"describe": {
			"title": "描述",
			"trim": "both",
			"bsonType": "string"
		},
		"check": {
			"title": "状态",
			"bsonType": "bool",
			"defaultValue": true,
			"description": "显示状态, ture是显示,false是隐藏",
			"enum": [{
					"value": true,
					"text": "显示"
				},
				{
					"value": false,
					"text": "隐藏"
				}
			]
		},
		"createTime": {
			"title": "创建时间",
			"bsonType": "timestamp",
			"forceDefaultValue": {
				"$env": "now"
			}
		}
	}
}
  1. 同样是 schema2code 创建页面, 在浏览器, 产品中心新增子目录, 产品列表,创建之后,刷新页面,就出来了 在这里插入图片描述

  2. 然后新增几个产品,

  3. 创建新闻列表, 看一下文章schema,用系统的,稍微该改一改, schema2code 生产页面,
    在这里插入图片描述

{
	"bsonType": "object",
	"required": [
		"title",
		"content"
	],
	"permission": {
		"read": true,
		"create": "auth.uid != null",
		"update": "doc.user_id == auth.uid",
		"delete": "doc.user_id == auth.uid"
	},
	"properties": {
		"_id": {
			"description": "存储文档 ID(用户 ID),系统自动生成"
		},

		"title": {
			"bsonType": "string",
			"title": "标题",
			"description": "标题",
			"label": "标题",
			"trim": "both"
		},
		"author": {
			"bsonType": "string",
			"title": "作者",
			"label": "作者",
			"description": "请输入作者",
			"trim": "both"
		},
		"avatar": {
			"bsonType": "file",
			"title": "封面大图",
			"description": "缩略图地址",
			"label": "封面大图",
			"trim": "both"
		},
		"content": {
			"bsonType": "string",
			"title": "文章内容",
			"description": "文章内容",
			"label": "文章内容",
			"trim": "right"
		},

		"view_count": {
			"bsonType": "int",
			"title": "阅读数量",
			"description": "阅读数量",
			"defaultValue": 60
		},
		"is_essence": {
			"bsonType": "bool",
			"title": "推荐",
			"description": "是否推荐该篇文章"

		},
		"publish_date": {
			"bsonType": "timestamp",
			"title": "发表时间",
			"description": "发表时间",
			"defaultValue": {
				"$env": "now"
			}
		},

		"article_status": {
			"bsonType": "int",
			"title": "状态",
			"description": "文章状态:0 草稿箱 1 已发布",
			"defaultValue": 1,
			"enum": [{
					"value": 0,
					"text": "草稿箱"
				},
				{
					"value": 1,
					"text": "已发布"
				}
			]
		},
		"publish_ip": {
			"bsonType": "string",
			"title": "发布文章时IP地址",
			"description": "发表时 IP 地址",
			"forceDefaultValue": {
				"$env": "clientIP"
			}
		}

	},
	"version": "0.0.1"
}
  1. 浏览器中, 新增一级目录 新闻咨询, 同样加二级目录 新闻列表
    在这里插入图片描述
    在这里插入图片描述
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Uniapp 是一种跨平台开发框架,同时支持 iOS 和 Android 系统,以及 Web 与微信小程序等多平台应用。它的优点是代码重复利用性高、开发效率高、生态完整,因此备受开发人员欢迎。 在 Uniapp 中,新闻列表是非常常见的,我们可以采用基于组件化的方式来实现新闻列表。具体来说,我们可以使用 uni-list 组件或自定义组件来开发新闻列表。在列表内部,我们可以使用 uni-media-list 或 uni-card 让新闻列表更具可读性与美观性,并支持这些列表的排序、筛选以及异步加载等功能。 同时,在新闻列表开发中,我们需要合理使用前端技术,并结合后端数据来设计封装新闻信息的接口与模型层。通过利用 Vue.js 进行数据双向绑定,加上 Vuex 状态管理等技术实现数据请求与模型矫正。利用 Axios、Ajax 或 Fetch 等技术构建 API 数据请求接口,同时,可以结合使用 WebSocket 进行实时推送新闻数据,让新闻列表应用更具实时性。 总之,Uniapp 新闻列表需要结合多种技术来设计开发。如果开发人员能熟练掌握前端技术、后端技术以及组件、API 架构设计等方面,就能开发出更具实用性与好用性的新闻列表应用。 ### 回答2: uniapp 是一款优秀的开源跨平台应用开发框架,它能够帮助开发者快速地开发出高质量、强交互的应用程序。在 uniapp 中,开发者可以方便地实现新闻列表功能,这个功能可以让用户查看新闻并及时了解最新的资讯。 在 uniapp 中,实现新闻列表功能需要使用到 uni-list 组件,这个组件非常强大,并且能够支持多种形式和不同的排列方式。在使用 uni-list 这个组件时,开发者需要设置一些属性,例如设置数据源、设置渲染方式和设置交互效果等等。 开发者可以使用 native JavaScript 或者 Vue.js 语法来实现 uni-list 组件的功能,这需要根据个人的编程风格和习惯来决定。一般来说,使用 Vue.js 会更为方便,并且可以实现更高效的开发过程。 在实现新闻列表功能时,开发者可以使用 AJAX 技术来获取新闻数据,然后将这些数据通过 uni-list 组件来进行渲染。通过 uni-list 组件的强大功能,可以实现多种形式和不同排列方式的新闻列表,例如按时间排序、按热度排序、按地域排序等等。 总之,uniapp 是一个非常完善和强大的跨平台应用开发框架,它的新闻列表功能十分重要和实用,能够帮助开发者快速地构建出强交互的应用程序。只要掌握了 uniapp 的基本知识,就可以轻松地实现新闻列表功能。 ### 回答3: Uniapp 是一个基于 Vue.js 的跨平台开发框架,它可以帮助开发使用一份代码同时创建多个移动端应用的程序。在 Uniapp 中创建新闻列表也是一个非常常见的需求,下面我将从以下几个方面为大家介绍如何在 Uniapp 中创建一个新闻列表: 1.页面结构设计 新闻列表通常都是由多个列表项组成的,每个列表项一般都包括新闻的标题、简介和缩略图。因此,在设计页面结构时需要合理地布局每个列表项,并添加必要的样式。 2.数据绑定与处理 需要从服务器获取新闻的数据,并将其绑定到页面上。Uniapp 可以使用 Vue.js 的数据绑定方式来实现,而对于从服务器获取数据的部分,可以使用 Uniapp 封装的 Ajax 请求库来实现。在获取到数据后,应该对数据进行一些处理,比如截取标题和简介的长度,将时间戳转化为时间格式等。 3.列表项点击事件 当用户点击新闻列表项时,应该跳转到对应的新闻详情页,因此需要在列表项中添加点击事件,并在事件处理函数中做页面跳转处理。 4.下拉刷新和上拉加载更多 针对新闻列表数据较多的情况,需要支持下拉刷新和上拉加载更多功能。Uniapp 提供了下拉刷新和上拉加载更多的组件,开发者只需要在页面中添加这些组件,并在事件处理函数中实现数据的刷新和加载即可。 总体而言,在 Uniapp 中创建一个新闻列表需要合理地设计页面结构,实现数据的绑定和处理,添加列表项的点击事件,并支持下拉刷新和上拉加载更多功能。通过以上的步骤,就可以轻松地创建一个功能强大的新闻列表

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值