uniapp(uncloud) 使用生态开发接口详情4(wangeditor 富文本, 云对象, postman 网络请求)

wangeditor 官网: https://www.wangeditor.com/v4/pages/01-开始使用/01-基本使用.html

这里用vue2版本,用wangeditor 4

终端命令: npm i wangeditor --save

  1. 开始使用
    在项目pages => sy_news => add.vue 页面中
javascript 复制代码
<template>
//...
	<uni-forms-item name="content" label="文章内容" required>
		<div id="div1"></div>
	</uni-forms-item>
// ...
</template>
<script>
import E from 'wangeditor'
let editor = null
// ...
onReady() {
	this.onWangEdit()
},
methods:{
	onWangEdit() {
		editor = new E("#div1")
		editor.config.zIndex = 0
		// 失焦时触发的回调函数
		editor.config.onblur = (newHtml) => {
	
			this.formData.content = newHtml
		}
		// 将图片保存本地服务器
		editor.config.customUploadImg = function(resultFiles, insertImgFn) {
			resultFiles.forEach(item => {
				let path = URL.createObjectURL(item)
				let name = item.name
				uniCloud.uploadFile({
					filePath: path,
					cloudPath: name
				}).then(res => {
					console.log("res", res);
					insertImgFn(res.fileID)
				})
			})
		}
		editor.create()
	},
	// 提交表格
	submitForm(value) {
		// 修复(鼠标在富文本内,直接提交)
		value.content = editor.txt.html();
		//...
	}	
	// ...
	}
	// ...
</script>
  1. 运行项目,浏览器中刷新页面,新增页面, 内容变成我们需要的富文本了,
  2. 修改(edit)界面同样的代码, 不过不同是
javascript 复制代码
<uni-forms-item name="content" label="文章内容" required>
	<div id="div1">
		<div v-html="formData.content"></div>
	</div>
</uni-forms-item>
  1. 上面都是添加数据,接下来进入写接口了,
    项目 => uniCloud-aliyun => 新建函数或者云对象
javascript 复制代码
// index.obj.js
const db = uniCloud.database()
module.exports = {
	_before: function() { // 通用预处理器

	},

	async getList() {
		const res = await db.collection("sy_news").get()
		let result = {
			errCode: 0,
			errMsg: "查询成功",
			data: res.data
		}
		return result
	},

}

4.1 点击demoObj 目录, 右键, 运行本地云对象, 目录下面多一个demoObj.param.js 文件,

javascript 复制代码
getList()

4.2 保存一下, 点击demoObj 目录, 右键, 运行本地云对象, 终端打印的

  1. 如果带参数怎么弄?
javascript 复制代码
// index.obj.js
const db = uniCloud.database()
module.exports = {
	_before: function() { // 通用预处理器
		this.params = this.getParams()[0]
		this.startTime = Date.now()
	},
	async getList() {
		const res = await db.collection("sy_news").get()
		let result = {
			errCode: 0,
			errMsg: "查询成功",
			data: res.data
		}
		return result
	},
	
	async get() {
		console.log('this.params', this.params);
		let {
			num
		} = this.params
		const res = await db.collection("sy_product_nav").limit(num).get()
		let result = {
			errCode: 0,
			errMsg: "查询成功",
			data: res.data
		}
		return result
	},

	_after(error, result) {
		if (error) {
			throw error
		}
		result.timeCode = Date.now() - this.startTime

		return result
	}

}
javascript 复制代码
// demoObj.param.js
get({
	num: 2
})

在运行ok, 这都是本地运行的,

  1. 接下来将 demoObj 右键 , 上传部署, 用postman请求数据

6.1 打开 uniCloud Web 控制台

6.2 云函数/云对象 => 函数/对象列表 (找到demoObj, 点击详情)

6.3 点击编辑, 输入 /demoObj

6.4 确定, 在点击(复制路径),到postman里面,改为post请求,

  1. 如在postman 里面带参数, uniCloud 中 云对象 一个 getHttpInfo 的API
javascript 复制代码
const db = uniCloud.database()
module.exports = {
	_before: function() { // 通用预处理器
		this.params = JSON.parse(this.getHttpInfo().body)
		// this.httpInfo = JSON.parse(this.getHttpInfo().body)
		this.startTime = Date.now()
	},

	async getList() {
		const res = await db.collection("sy_news").get()
		let result = {
			errCode: 0,
			errMsg: "查询成功",
			data: res.data
		}
		return result
	},


	async get() {

		let {
			num
		} = this.params
		const res = await db.collection("sy_product_nav").limit(num).get()
		let result = {
			errCode: 0,
			errMsg: "查询成功",
			data: res.data
		}
		return result
	},

	_after(error, result) {
		if (error) {
			throw error
		}
		result.timeCode = Date.now() - this.startTime

		return result
	}

}
相关推荐
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
awonw6 小时前
[java][框架]springMVC(1/2)
测试工具·postman
钱钱钱端9 小时前
【压力测试】如何确定系统最大并发用户数?
自动化测试·软件测试·python·职场和发展·压力测试·postman
尚学教辅学习资料11 小时前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie23411 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
迃幵chen11 小时前
wireshark-网络分析工具
网络·测试工具·wireshark
孤蓬&听雨12 小时前
RabbitMQ自动发送消息工具(自动化测试RabbitMQ)
分布式·测试工具·自动化·rabbitmq·自动发送消息
土小帽软件测试12 小时前
jmeter基础01-2_环境准备-Mac系统安装jdk
java·测试工具·jmeter·macos·软件测试学习
qq_4337169515 小时前
测试分层:减少对全链路回归依赖的探索!
自动化测试·软件测试·功能测试·测试工具·回归·pytest·postman
qq_4337169516 小时前
Postman断言与依赖接口测试详解!
自动化测试·软件测试·功能测试·测试工具·mysql·接口测试·postman