uni-app+Laravel实现前端点击跳转传参

---

前言

前端uni-app，后端框架Laravel+php，数据库Mysql 实现了前端点击上传的图片跳转到特定页面并能显示上传图片的相关信息，将图片存在数据库中一行的信息全部找到并能够将需要的信息返回给前端界面。

---

一、前端编写

1.点击图片页面

<template>		
		<view>上传图片显示：(点击图片可进入图片详情页面)</view>
		<view v-for="(item,index) in itemList" :key=index>
			<image :src="'http://127.0.0.1:8000'+item.image_url" mode="aspectFit" @click="go(item.image_id)"></image><!--url根据情况设定，这里是使用本地服务器进行通讯,go函数后面携带的参数是传递给跳转页面的参数-->
			<!-- 带参数点击传递，该参数为图片的主码 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [],
			}
		},
		onLoad() {
			this.refresh();//下拉刷新
			this.getList();
		},
		methods: {
			refresh() {
				setTimeout(function() {
					console.log('start pulldown');
				}, 1000);
				uni.startPullDownRefresh({
					success: function(res) {
						console.log(res); //success 返回参数说明
					}
				}); 
			},
			onPullDownRefresh() {
				//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
				console.log('refresh');
				setTimeout(function() {
					uni.stopPullDownRefresh(); //停止下拉刷新动画
				}, 1000);
			},
			change(e) {
				this.current = e.detail.current
			},
			getList() {
				var that = this
				var header = {
					'content-type': 'application/x-www-form-urlencoded'
				};
				uni.request({
					header: header,
					url: 'http://127.0.0.1:8000/api/list', //这里改成自己用的api就行了,这里是请求数据库中所有数据的信息
					success: (res) => {
						console.log(res);
						this.itemList = res.data.data //这里的数据存到上一级直接显示（多表的情况下找分量），单表就不用了
					}
				});
			},

			go(image_id) {//go函数的具体实现
				console.log(image_id); //验证参数是否正确
				uni.navigateTo({
					url: '../image_detail/image_detail?id=' + image_id //这是跳转到的页面路径，?id=image_id为传递给页面的参数
				});
			}

		}
	}
</script>

2.点击图片后跳转到的页面为image_detail

<template>
	<view>
				<view>显示原图</view>
				<image :src="'http://127.0.0.1:8000'+item.image_url" mode="aspectFit"></image>
				<view>显示着色图</view>
				<image :src="'http://127.0.0.1:8000'+item.image_color_url"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemList: []
			}
		},
		methods: { //这里可以直接get到上一个页面的参数
			onLoad(option) { //option为object类型，会序列化上个页面传递的参数上面传过去的参数
				console.log(option.id); //打印出上个页面传递的参数。option.id作为图片的主码需要传递给后端返回这个主码一行对应的东西
				uni.request({
					url: 'http://127.0.0.1:8000/api/image', //接口地址。https://127.0.0.1:8000/api/image?id=
					method: 'GET',
					data: { //传递的参数
						id: option.id //这个是图片的主码以找到图片一行的信息
					},
					header: {
						'custom-header': 'hello', //自定义请求头信息
					},
					success: (res) => {
						console.log(res);
						this.itemList = res.data.data;
					}
				});
			}
		}
	}
</script>

<style>

</style>

二、Laravel框架后端编写

这里我需要得到前端页面传过来的id信息，因此利用Laravel的Request方法接收前段传过来的参数

<?php


namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class ImageController
{
    public function image(Request $request)
    {
        $id =$request->input('id');//这里是接收url地址中?id那一串结果
        $data = DB::table('image_info')->where('image_id', $id)->get();//利用这个结果去数据库里面查询
        return ['data'=>$data];返回结果
    }
}