Vue.js从数据库取图片

Vue.js从数据库取图片

要求:将表中的内容(图片、文字)在页面渲染出来

表内容:
在这里插入图片描述

最终效果:
在这里插入图片描述在这里插入图片描述

  1. VUE

  2. 数据库

1-1:HTML
PS:[item.”表:字段名”]

<!-- 主体图片/文字开始 -->
	<div class="content_imgText">
		<h3>皮蛋瘦肉粥</h3>
		<ul class="content_imgText_ul">
			<!-- 使用for语句将内容渲染出来 -->
			<li v-for="(item,key) in list" @touchstart.stop.prevent="_this($event)">
				<div class="content_imgText_ul_img">
					<img :src="url+item.img" alt="图片不存在">
				</div>
				<p>{{item.name}}</p>
				<p>¥{{item.Price}}</p>
			</li>
		</ul>
	</div>
<!-- 主体图片/文字结束 -->

1-2: CSS
略…

1-3: JS
data(){ return{ url:'http://localhost:8005/', list:[], //保存数据 },

// 生命周期函数:在渲染成HTML或者模版编译进路由前调用created
created(){
	this.fetchData()
},
methods:{
	fetchData(){
		//通过get方式获取数据
		this.$http.get(this.url+"phpvue/take.php").then((response)=>{
			this.list=response.body;
		},(err)=>{
			console.log(err);
		})
	}
}

2-1:XAMPP
在这里插入图片描述

2-2:设置站点
PS:最后获取到的图片就是图片中的images文件中的图片
在这里插入图片描述
在这里插入图片描述

2-3:建立表
PS:新建表存储数据。图片的数据类型是varchar
在这里插入图片描述
2-4:新建php文件连接数据库
在这里插入图片描述
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 岁月 设计师:pinMode 返回首页