uni-app

写下博客主要用来分享知识内容，便于自我复习和总结。
如有错误之处，望各位指出。

网络请求

对于发送请求，在uni中可以调用uni.request方法进行请求网络请求。

发送请求演示：

<template>
	<view>
		<button @click="sendGet">发送请求</button>
	</view>
</template>
<script>
	export default {
		methods: {
			sendGet () {
				uni.request({
					url: 'http://localhost:8082/api/test',
					success(res) {
						console.log(res)
					}
				})
			}
		}
	}
</script>

相信各位简单一看就知道该怎么用了。如果各位对这部分已经很熟悉了，就可以忽略以下所有内容了。

对于笔者而言，之前在实习时，因为整个项目已经部署在服务器，或者是调用和我对接的后端同事的数据库，所以在工作中只需要去调用接口，专注于处理页面问题即可。但是，我们平常在学习中，也想模拟这些功能该怎么办？

如果各位能够学习spring相关内容，让自己有能力配置好相关内容，那就可以自己配置。

在这里提供一种解决方案：

首先，我们使用phpstudy软件，主要用来运行数据库。简单介绍一下：这个软件提供了Apache、MySQL、数据库等多种软件，而且也不需要我们再手动配置一些复杂内容，我们只需要下载即可，十分照顾小白程序员，比如我。
在这里插入图片描述
可以去官网下载：phpstudy官网

下载好了之后，按需下载软件。
在这里我们下载SQL_Front ， MySQL5.x版本（笔者亲测，使用8.x MySQL版本会报错）。
在这里插入图片描述
在这里友情提醒，如果在使用这个软件之前安装过MySQL服务，在软件里应该是打不开MySQL服务的，也就打不开数据库。笔者也遇到了这个问题，主要解决方法就是将本地之前的MySQL服务全部清除，并清除注册表。参考文章：解决phpstudy，mysql启动失败。如有其他问题，百度查阅~

数据库

如果各位没接触过数据库，有机会的话，建议学一下数据库 SQL的基本操作。（笔者也会考虑近期开始写数据库专栏）。那么在本文里，具体的一些使用和用法 就不赘述了，如果各位没有数据库基础，可以先根据步骤来做。

当我们一切准备就绪，就去启动MySQL。
在这里插入图片描述

然后打开数据库工具，选择SQL_Front，再直接选择localhost链接进入即可。
在这里插入图片描述
新建数据库：右键localhost -> 新建 -> 数据库
在这里插入图片描述
在这里插入图片描述
建好之后，进入数据库，在右侧空白处右键 -> 新建 -> 表格。
在这里插入图片描述
双击进入test（对象浏览器），右键字段空白处，可以新建字段。（大家可以随便建一些，注意修改名称、类型、字段长度 和 是否能为空值）

我这里将id作为主索引，并且根据新建内容递增。
在这里插入图片描述
建好之后，在数据浏览器中可以看到存在当前表格中的数据。我们可以直接修改已经创建出的数据。
在这里插入图片描述
如果想新建数据，一种办法是去SQL编辑器中新建即可。

insert into test
values(2,'男',18,'王五');

在这里插入图片描述
另一种办法就是手动新建：
在这里插入图片描述

存储好了之后，接下来的问题就是该如何写接口。

测试接口

在这里，如果没下载node.js的话，先去下载个node.js。推荐安装教程：node.js和npm的教程

然后 关注我并下载我上传的资源：用Vue测试接口，就可以测试接下来的内容了。

（这部分内容主要是用来测试，正常情况的项目中 大部分还是前后端分离，写接口大多用SpringBoot写API接口。不过通过以下内容的学习，我们只用前端知识也可以进行类似的工作了~）

首先，下载好资源后，打开命令行，使用npm i
在这里插入图片描述
然后 输入：node ./src/app.js
在这里插入图片描述
此时服务已经启动。其他提示是因为用法过时，不过暂时还是能用的。

在这里可能会出现错误，首先上述资源中已经设置数据库和表名均为test，如果名称不同则会因找不到数据库报错。其次，我设置的端口是3306，端口不同也会报错。端口的调整写在下面了。

除此以外，笔者因为环境之类的早已配置好，所以不知道也不记得 这里还可能会出现什么错误，导致运行失败，所以如果遇到什么问题，各位百度查查看吧

具体文件的内容，我们等会再说，我们先来看看是不是已经成功了：

数据库内容：
（注意数据库名和表名，上述资源里设置的数据库名和表名都为test，之后再说怎么修改）
在这里插入图片描述

代码内容：

<template>
	<view>
		<view>详情页</view>
		<button @click="sendGet">发送请求</button>
	</view>
</template>

<script>
export default {
	methods:{
		sendGet(){
			uni.request({
				url: 'http://localhost:8082/api/test',
				success(res){
					console.log(res)
				}
			})
		}
	}
};
</script>

<style>
</style>

我们现在点击按钮：
在这里插入图片描述
至此，测试成功。

补充：如果使用微信小程序，有可能会失败。它可能是因为以下选项👇，我们把它打开即可。
在这里插入图片描述

server里的文件

接下来看看server里面的这几个文件。
在这里插入图片描述
app.js

只要是通过phpstudy安装的sql数据库，默认的帐号密码应该是 root 和 root 。

我们可以在这里调整和查看：
在这里插入图片描述
在这里插入图片描述
对于端口，笔者的端口是3306，不过应该也可以调整。
在这里插入图片描述
在这里插入图片描述
在app.js中，需要修改的也就是这部分内容👇（帐号，密码，端口号，数据库名）
在这里插入图片描述
对于其他的内容，笔者也不是太懂，暂不做修改。

需要提醒，路由规则主要是在这里配置的，包括我们服务的端口号：
在这里插入图片描述
apiRoute

apiRoute就是配置路由规则，我们在页面中如何配置路径，就是在这里决定的。

第二个参数是apiController中暴露出来的方法，也就是说在这里，我们通过这个路径去完成指定工作。
在这里插入图片描述
在这里插入图片描述
apiController

在apiController里，我们暴露出test方法，之后可以根据具体需求改变名称。（不要忘记也要修改apiRoute里的名称）
在这里插入图片描述
对于这里的resObj，它将用作接口在页面中显示的信息，从输出结果可以看到data里有message和status。
在这里插入图片描述
根据笔者经验，通常这部分内容会根据项目需求作一些规范，比如，在这里status的0和1表示接口返回成功或失败，在项目中也有可能直接指定true和false表示成功或失败，又或者直接返回404等错误信息，所以这部分也会按需改变。

所以下面的resObj的内容都可能会发生改变。

除此以外，最关键的修改部分就是sql语句了。在这里就不聊sql语句了。
在这里插入图片描述

get传参

以上内容就是简单的一种请求，如果我们要传参查询满足条件的数据，该怎么做？

route.get('/api/getnew/:newid', apiCtrl.getnew)

exports.getnew = (req, res) => {
  let resObj = { status: successState, message: '' }
  
  // 1.0 获取参数值
  let newid = req.params.newid

  // 2.0 执行查询操作
  let sql = 'select name,age,gender from test  where id=' + newid
  // let sql = `select name,age,gender from test  where id=${newid}`
  req.db.driver.execQuery(sql, (err, data) => {
    // 3.0 判断是否异常
    if (err) {
      resObj.status = fialState
      resObj.message = err.message
      res.end(JSON.stringify(resObj))
      return
    }

    // 4.0 获取数据成功
    resObj.message = data
    res.end(JSON.stringify(resObj))
  })
}

uni.request({
	url: 'http://localhost:8082/api/getnew/1',
	success(res){
		console.log(res)
	}
})

在这里插入图片描述

在这里插入图片描述
也可以这样：

data(){
	return{
		id: 1
	}
},
methods:{
	sendGet(){
		uni.request({
			url: 'http://localhost:8082/api/getnew/'+this.id,
			success(res){
				console.log(res)
			}
		})
	}
}

request请求 封装

因为我们在项目中，肯定不止要用一个接口，每次都反复写uni.request显然不方便，而且现在本地8082端口测试，如果后续真的需要改从服务器上获取，那可要找到并修改所有内容，显然不合适。

所以我们需要自己封装request请求，并能够适配传参数或者修改 get post。

我们可以这么做，在项目根目录下，建立utils文件夹，存放api.js：
在这里插入图片描述
api.js：

const BASE_URL = 'http://localhost:8082'
export const myRequest = (options)=>{
	return new Promise((resolve,reject)=>{
		uni.request({
			url: BASE_URL+options.url,
			method: options.method || 'GET',
			data: options.data || {},
			success: (res) => {
				if(res.data.status !== 0){
					return uni.showToast({
						title: '获取数据失败'
					})
				}
				resolve(res)
			},
			fail: (err)=>{
				uni.showToast({
					title: '请求接口失败'
				})
				reject(err)
			}
		})
	})
}

因为很多组件都会用它，那我们就在main.js中为它全局注册：

import { myRequest } from './utils/api.js'
Vue.prototype.$myRequest = myRequest

使用：

methods:{
	async sendGet(){
		const res = await this.$myRequest({
			url: '/api/test'
		})
		console.log(res);
	}
}

效果：依然可以获取信息
在这里插入图片描述

基础：增删改

在这里简单介绍一下增删改，更多的sql查询就不在这里赘述了。

增

在这里我们用POST请求，可以传更多参数。

methods:{
	async sendGet(){
		const res = await this.$myRequest({
			url: '/api/choice',
			method: 'POST',
			data: {
				name: '测试',
				age: 18
			}
		})
		console.log(res);
	}
}

在apiRoute里添加路径

route.post('/api/choice', apiCtrl.choice)

在apiController里

exports.choice = (req, res) => {
	let resObj = { status: successState, message: '' }
	// 提交过来的数据
	var info = req.body;
	var sql = "insert into test (name, age) values(?,?)"
	req.db.driver.execQuery(sql, [info.name,info.age], (err, data) => {
    if (err) {
      resObj.status = fialState
      resObj.message = err.message
      res.end(JSON.stringify(resObj))
    } else {
      resObj.message = '成功！'
      res.end(JSON.stringify(resObj))
    }
  });
}

在这里插入图片描述

删

methods:{
	async sendGet(){
		const res = await this.$myRequest({
			url: '/api/delPerson/6',
		})
		console.log(res);
	}
}

route.get('/api/delPerson/:id', apiCtrl.delPerson)

exports.delPerson = (req, res) => {
  // 代表返回的数据结构
  let resObj = { status: successState, message: '' }

  var id = req.params.id;

  var sql = 'delete from test where id=' + id;
  req.db.driver.execQuery(sql, (err, data) => {
    if (err) {
      resObj.status = fialState
      resObj.message = err.message
      res.end(JSON.stringify(resObj))
    } else {
      resObj.message = '删除成功'
      res.end(JSON.stringify(resObj))
    }
  });
}

刚才新建的id为6的测试，已经被删除
在这里插入图片描述

改

methods:{
	async sendGet(){
		const res = await this.$myRequest({
			url: '/api/updatePerson',
			method: 'POST',
			data:{
				name: '测试',
				id: 1
			}
		})
		console.log(res);
	}
}

route.post('/api/updatePerson', apiCtrl.updatePerson)

exports.updatePerson = (req, res) => {
	// 代表返回的数据结构
	let resObj = { status: successState, message: '' }
	var info = req.body;
	var sql = `update test set name = ? where id = ?`
	req.db.driver.execQuery(sql, [info.name,info.id], (err, data) => {
		if (err) {
		  resObj.status = fialState
		  resObj.message = err.message
		  res.end(JSON.stringify(resObj))
		} else {
		  resObj.message = '成功！'
		  res.end(JSON.stringify(resObj))
		}
	});
}

在这里插入图片描述

以上就是所有的基本内容，更复杂的查询条件只需要修改SQL语句即可。

# uni-app
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

MySQL全文索引源码剖析之Insert语句执行过程

avatar 华为云开发者联盟
cover

openGauss - 向量化执行引擎 - distinct分组聚合的实现

avatar 华为云开发者联盟
cover

【酷哥说库|GaussDB微动画】GaussDB数据库透明数据加密

avatar 华为云开发者联盟