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

MySQL代码

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.写入代码

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

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

代码：

<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>