用MySQL+node+vue做一个学生信息管理系统（三）：用vue从后台获取数据再渲染到页面当中

先往数据库当中添加两条学生数据

INSERT INTO student 
VALUES(1,'张三','男','大数据');

INSERT INTO student 
VALUES(2,'李四','男','物联网');

SELECT * FROM student;

下载MySQL模块：
npm install mysql

先介绍一下vue的生命周期函数mounted，它会在vue页面一加载就执行里面的代码

思路：在加载页面的时候创建一个ajax对象，帮我们请求数据库，获取当中的数据，再渲染到页面当中，ajax对象需要开启允许跨域访问

app.all("*",function(req,res,next){
  //设置允许跨域的域名，*代表允许任意域名跨域
  res.header("Access-Control-Allow-Origin","*");
  //允许的header类型
  res.header("Access-Control-Allow-Headers","Origin,X-Requested-With,Accept,Content-type");
  res.header("Access-Control-Allow-Credentials",true);
  //跨域允许的请求方式
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("Content-Type","application/json;charset=utf-8")
  if (req.method.toLowerCase() == 'options')
    res.sendStatus(200);  //让options尝试请求快速结束
  else
    next();
});

再说一下vue的异步执行代码顺序：

<script>
console.log('开始');

export default {
	data(){
		return{
			msg:'66',
			people:[
				
			]
		}
    },
	mounted:function(){
		console.log('发送请求');
	    var xhr = new XMLHttpRequest();
	    xhr.open('POST','http://localhost:3000/ok');
	    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	    xhr.send();
	    xhr.onload = function(){
	    	console.log(xhr.responseText);
	    	//this.msg为vue的data当中的数据
			this.msg = xhr.responseText;
			console.log(this.msg);
	    }
	},
	methods:{
		update:function(){
			console.log('update');
			
		},
		del:function(){
			console.log('delete')
		},
		
	}
}
console.log('结束')
</script>

因为创建ajax对象需要时间，代码又是异步执行，所以当获取到返回的数据时页面已经加载完成了，这时候vue的data对象也已经创建好了，我们把数据给people

把请求的路径换成访问数据库的请求路径，发现已经获取到了数据，把这个数据给people数组

因为我们的页面渲染是根据people数组的，people数组要等到ajax访问完才有数据，当people数组改变的时候页面会自动重新渲染，因为我们定义在data当中的数组是json对象，而数据库返回的结果是string字符串，所以需要转化一下

代码：

<template>
	<div class="div1">
		<div class="div2">
			<div class="div21">{{msg}}</div>
			<div class="div21">姓名</div>
			<div class="div21">性别</div>
			<div class="div21">班级</div>
			<div class="div21"></div>
			<div class="div21"></div>
		</div>
		
		<div class="div3" v-for="item in people">
			<div class="div31">{{item.id}}</div>
			<div class="div31">{{item.name}}</div>
			<div class="div31">{{item.sex}}</div>
			<div class="div31">{{item.class}}</div>
			<div class="div31">
				<button type="button" @click="update">更改</button>
			</div>
			<div class="div31">
				<button type="button" @click="del">删除</button>
			</div>
		</div>
	</div>
  
  
</template>

<script>
	export default {
		data(){
			return{
				msg:'66',
				people:[
						
					]
			}
	    },
		mounted:function(){
			console.log('发送请求');
		    var xhr = new XMLHttpRequest();
		    xhr.open('POST','http://localhost:3000/init');
		    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		    xhr.send();
			var that = this;
		    xhr.onload = function(){
		    	
		    	that.people = JSON.parse(xhr.responseText);
		    }
		},
		methods:{
			update:function(){
				console.log('update');
				
			},
			del:function(){
				console.log('delete')
			},
			
		}
	}
	console.log('结束')
	</script>
</script>

<style scoped="scoped">
	
	.div1{
		width: 800px;
		margin: auto;
		border: 1px solid transparent;
		
	}
	.div2{
		width: 100%;
		height: 50px;
		display: flex;
		
	}
	.div21{
		text-align: center;
		line-height: 50px;
		border: 1px solid aqua;
		flex: 1;
	}
	.div3{
		width: 100%;
		height: 50px;
		
		display: flex;
	}
	.div31{
		border: 1px solid aqua;
		text-align: center;
		line-height: 50px;
		flex: 1;
	}
	
</style>

页面效果如下