用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>
相关推荐
vvilkim17 分钟前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim20 分钟前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心32 分钟前
vben 之 axios 封装
前端·javascript·学习
漫谈网络35 分钟前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
程序员岳焱1 小时前
Java 与 MySQL 性能优化:MySQL全文检索查询优化实践
后端·mysql·性能优化
喜欢敲代码的程序员1 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
钢铁男儿2 小时前
C# 委托(调用带引用参数的委托)
java·mysql·c#
叁沐2 小时前
MySQL 02 日志系统:一条SQL更新语句是如何执行的?
mysql
失落的多巴胺2 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear2 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化