HTML中引入VUE,Mock模拟数据的axios网络请求

【JAVA】玩家

已于 2022-11-03 10:59:03 修改

阅读量1.1k

点赞数

分类专栏：前端VUE 文章标签： vue.js html javascript

于 2022-11-03 10:49:20 首次发布

本文链接：https://blog.csdn.net/qq_45399396/article/details/127665708

版权

前端VUE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML中引入VUE,Mock模拟数据的axios网络请求

注意，这里是在HTML页面中引入vue，简单了解一下。
首先需要引入的文件：vue.js, mock-min.js,axios.js以及自定义的mock.js(可以在mock目录下定义js,统一管理)
.
.
这里用到mock是方便在写前端页面的时候，暂时不依赖于后台服务器请求的数据，这样能够很快方便的编写前端尤其是交互的时候，很便捷，话不多说，直接上代码！！！
.
.
编写一个html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
		 <script src="./mock/mock.js" type="text/javascript"></script>
		  <script src="https://cdn.bootcss.com/Mock.js/1.0.0/mock-min.js"></script>
		 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id ="app">
			<ul>
				<li v-for="user in users">
					{{user.name}}--{{user.age}}--{{user.hobby}}
					<ul>
						<li v-for="(adr ,index) in user.port">
							已去城市【{{index+1}}】：{{adr.address}}
						</li>
					</ul>
				</li>
			</ul>
		</div>
		
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data(){
					return{
						users:{}
					}
				},
				created(){
					axios.get("/book/list",{
						responseType:'json'
					}).then(res=>{
						this.users = res.data;
					}).catch(err=>{
						alert("请求失败");
					})
				}
				
			})
		</script>
	</body>
</html>

.
.

编写mock.js文件，模拟网络请求数据

Mock.mock("/book/list","get",[
	{name:"刘泽",
	age:23,
	port:[{address:"北京"},{address:"上海"}],
	hobby:"打篮球"},
	{name:"罗杰",
	age:21,
	port:[{address:"长沙"},{address:"成都"}],
	hobby:"编程"},
	{name:"张菲",
	age:26,
	port:[{address:"广州"},{address:"武汉"}],
	hobby:"唱歌"}
])