vue.js node+express+mysql 简单的数据请求渲染到页面上，vue.js vue-resource 插件数据渲染

最新推荐文章于 2024-07-18 23:30:24 发布

能c能v

最新推荐文章于 2024-07-18 23:30:24 发布

阅读量1k

点赞数 4

分类专栏： vue.js nodejs 原创

本文链接：https://blog.csdn.net/qq_43391160/article/details/102869714

版权

原创同时被 3 个专栏收录

51 篇文章 0 订阅

订阅专栏

vue.js

18 篇文章 0 订阅

订阅专栏

nodejs

3 篇文章 0 订阅

订阅专栏

1.vue-resource请求数据

vue-resource请求数据方式是官方提供的一个插件,通过npm install vue-resource --save或者cnpm install vue-resource --save进行安装，也可以通过在线引入的方式使用vue-resource，引用方式如下。

示例：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<title>Vue</title>
		<style type="text/css">
			li {
				list-style: none;
			}
			#demo{
				width: 600px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="demo">
			<table class="table table-bordered">
				<tr>
					<th>id</th>
					<th>姓名</th>
					<th>密码</th>
					<th>邮箱</th>
				</tr>
				<tbody v-for="item in list">
					<tr>
						<td>{{item.id}}</td>
						<td>{{item.userName}}</td>
						<td>{{item.pwd}}</td>
						<td>{{item.email}}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>
<script src="../static/js/jquery-3.4.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script>
	let app = new Vue({
		el: '#demo',
		data: {
			list: []
		},
		created() {
			this.getlist()
		},
		methods: {
			// 数据请求
			getlist() {
				this.$http.get('http://127.0.0.1:3000/getList').then(function(res) {
					// console.log(res.data.data)
					this.$data.list = res.data.data
				})
			}
		}
	})
</script>

！：这部分就能在mysql返回数据，前提是自己的后台服务要写好，我的后台的服务是node+express+mysql。

methods: {
			// 数据请求
			getlist() {
				this.$http.get('http://127.0.0.1:3000/getList').then(function(res) {
					// console.log(res.data.data)
					this.$data.list = res.data.data
				})
			}
		}

！：created是vue.js 的一个钩子函数，具体我也解释不清楚，可以自己去看看vue 的生命周期讲解，我们暂时可以理解为dom挂载完成时，getlist()会被调用将数据渲染到页面。