uniapp 仿照黑马商城案例笔记-获取轮播图的数据

上一篇

创建mysql的uniapp_python数据库

create database uniapp_python;

可以参考菜鸟教程_python用pymysql连接数据库

pip3 install PyMySQL

import pymysql
 
# 打开数据库连接
db = pymysql.connect(host='localhost',
                     user='testuser',
                     password='test123',
                     database='TESTDB')
 
# 使用 cursor() 方法创建一个游标对象 cursor
cursor = db.cursor()
 
# 使用 execute()  方法执行 SQL 查询 
cursor.execute("SELECt VERSION()")
 
# 使用 fetchone() 方法获取单条数据.
data = cursor.fetchone()
 
print ("Database version : %s " % data)
 
# 关闭数据库连接
db.close()

为例方便我们还是直接的在MySQL里面添加:

create table photo(id int not null, photo varchar(255));

直接引入网络图片地址

再用SpringBoot去访问

接口地址(查看所有):

http://localhost:8085/getAllPhoto

接口地址(查看单个):

http://localhost:8085/id/getPhoto

进入页面就要获取轮播图的数据

参考:页面生命周期。发现在onLoad里面发送请求合适

onLoad() {
			this.getSwipers()
},
methods: {
	//获取轮播图的数据
	getSwipers(){
		console.log('获取轮播图的数据')

	}
}

getSwipers(){
	console.log('获取轮播图的数据')
	uni.request({
		url:'http://localhost:8085/getAllPhoto',
		success:(res)=>{
			console.log(res)
			console.log(this)//写成箭头函数的this是VueComponent,写成函数时this是undefined
		}
	})
}

把数据定义在data里面

export default {
	data() {
		return {
			swipers:[]
		}
	},
	onLoad() {
		this.getSwipers()
	},
	methods: {
		//获取轮播图的数据
		getSwipers(){
			console.log('获取轮播图的数据')
			uni.request({
				url:'http://localhost:8085/getAllPhoto',
				success:(res)=>{
					console.log(res)
					console.log(this)
                    
                    //将数据保存到data里的swipers
					this.swipers = res.data
				}
			})
		}
	}
}

交互反馈-uni.showToast(OBJECT)

可以使用公共的:

src(main.js在的文件) >创建一个util文件夹和util里面创建api.js文件

const base_URL = 'http://localhost:8085'
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)=>{
                resolve(res)
            },
            fail:(err)=>{
                uni.showToast({
                    title: '请求接口失败'
                })
                reject(err)
            }
        })
    })
}

直接在Vue的原型对象上添加

main.js

import {myRequest} from './util/api.js'//引入文件

//用Vue挂载到原型对象上，这样全部的方法就可以调用了
Vue.prototype.$myRequest = myRequest

index.vue 的 js 中的 methods(存储vue的方法)

async getSwipers(){
	const res = await this.$myRequest({
		url: '/getAllPhoto'
	})
	console.log(res)
	this.swipers = res.data
},

下一篇