用MySQL+node+vue做一个学生信息管理系统（二）：创建MySQL数据表、创建HTML用户列表页面

MySQL代码

sql 复制代码

CREATE DATABASE students;

USE students;

CREATE TABLE student(
id INT COMMENT '学号',
`name` VARCHAR(32) COMMENT '姓名',
sex VARCHAR(8) COMMENT '性别',
class VARCHAR(64) COMMENT '班级'
)

SHOW TABLES;

下面介绍一下Vue框架的element-ui的使用方法，这里就不使用了，用原生的html做学生信息管理页面

1.安装依赖包： npm install element-ui -S

2.写入代码

javascript 复制代码

//导入组件库
import ElementUI from 'element-ui'
//导入组件相关资源
import 'element-ui/lib/theme-chalk/index.css'
//配置Vue插件
Vue.use(ElementUI)

页面效果:现在页面的数据是固定死的，先看看效果，之后就需要往数据库获取数据然后渲染到页面当中

代码：

javascript 复制代码

<template>
	<div class="div1">
		<div class="div2">
			<div class="div21">学号</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:[
				{
					id:1,
					name:'张三',
					sex:'男',
					class:'大数据'
				},
				{
					id:2,
					name:'李四',
					sex:'男',
					class:'物联网'
				}
			]
				
			
		}
    },
	methods:{
		update:function(){
			console.log('update')
		},
		del:function(){
			console.log('delete')
		}
	}
}
</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>