用MySQL+node+vue做一个学生信息管理系统（五）：学生信息增删改的实现

st紫月2024-07-02 21:23

先实现增加信息：

post参数的获取：express中接受post请求参数需要借助第三方包 body-parser

下载npm install body-parser

javascript 复制代码 
//引入body-parser模块
const bodyParser = require('body-parser');
//拦截所有请求,配置body-parser模块
//extended:false 方法内部使用querystring模块处理请求参数的格式,并且把参数保存在req当中
//extended:true 方法内部使用第三方模块qs处理请求参数的格式
app.use(bodyParser.urlencoded({extended:false}));
//接收请求
app.post('/add',(req,res)=>{
	//接收请求参数
	console.log(req.body);
})

req.body可以拿到全部的post请求参数，是一个json对象，以键值对的形式保存，键是input的name，值就是表单输入的内容，接下来只需要获取到值并且保存在MySQL数据库当中就行

通过结构赋值把需要的值拿到，然后插入到数据库，最后重定向到主页面

javascript 复制代码 
//接收请求
app.post('/add',(req,res)=>{
	//接收请求参数
	const { id, name, sex,class1}= req.body;
	var  addSql = 'INSERT INTO student(id,name,sex,class) VALUES(?,?,?,?)';
	var  addSqlParams = [id,name,sex,class1];
	connection.query(addSql,addSqlParams,function (err, result) {
	        if(err){
	         console.log('[INSERT ERROR] - ',err.message);
	         return;
	        }        
	 
	       console.log('--------------------------INSERT----------------------------');
	       //console.log('INSERT ID:',result.insertId);        
	       console.log('INSERT ID:',result);        
	       console.log('-----------------------------------------------------------------\n\n');  
	});
	res.redirect('/index.html');
})

删除功能的实现：

思路：点击删除按钮的时候创建一个ajax对象，发送请求del，并且携带post学号的参数，post请求参数就是学号，在创建button按钮的时候把学号赋值给button按钮的id属性，点击button按钮时vue的e.target可以获取到触发事件的对象，e.target.id就可以获取到按钮的id属性,删除完之后如果使用node的redirect重定向因为是同一个页面而不会生效，我们需要在html文件中写location.href重定向才行

代码：

init.vue

javascript 复制代码 
<template>
	<div id="init">
		<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">
				<router-link to='/update'>更改</router-link>
			</div>
			<div class="div31">
				<button @click="del" :id="item.id">删除</button>
			</div>
		</div>
		<div class="div4">
			<router-link to='/add'>增加</router-link>
		</div>
	</div>
</template>

<script>


export default {
	data(){
		return{
			msg:'66',
			people:[
					
				]
		}
	},
	mounted:function(){
		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:{
		del:function(e){
			console.log('del'+e.target.id);
			var xhr = new XMLHttpRequest();
			xhr.open('POST','http://localhost:3000/del');
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			xhr.send('id='+e.target.id);
			location.href='http://localhost:3000/index.html'
		}
	}
}

	
</script>

<style scoped="scoped">
	
	#init{
		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>
javascript 复制代码 
const express = require('express');
const app = express();
const path = require('path');
//引入body-parser模块
const bodyParser = require('body-parser');
//拦截所有请求,配置body-parser模块
//extended:false 方法内部使用querystring模块处理请求参数的格式,并且把参数保存在req当中
//extended:true 方法内部使用第三方模块qs处理请求参数的格式
app.use(bodyParser.urlencoded({extended:false}));



//开放静态资源访问，只需要输入文件名即可，不需要输入文件夹
app.use(express.static(path.join(__dirname,'src')));

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();
});


//引入MySQL模块
var mysql      = require('mysql');
//创建MySQL的连接
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '1234',
  database : 'students'
});

//连接MySQL
connection.connect();


//接收请求
app.post('/add',(req,res)=>{
	//接收请求参数
	
	const { id, name, sex,class1}= req.body;
	
	var  addSql = 'INSERT INTO student(id,name,sex,class) VALUES(?,?,?,?)';
	var  addSqlParams = [id,name,sex,class1];
	connection.query(addSql,addSqlParams,function (err, result) {
	        if(err){
	         console.log('[INSERT ERROR] - ',err.message);
	         return;
	        }        
	 
	       console.log('--------------------------INSERT----------------------------');
	       //console.log('INSERT ID:',result.insertId);        
	       console.log('INSERT ID:',result);        
	       console.log('-----------------------------------------------------------------\n\n');  
	});
	res.redirect('/index.html');
})

app.post('/update',(req,res)=>{
	res.send('update');
})

app.post('/del',(req,res)=>{
	const {id}=req.body;
	var delSql = 'DELETE FROM student where id='+id;
	//删
	connection.query(delSql,function (err, result) {
	        if(err){
	          console.log('[DELETE ERROR] - ',err.message);
	          return;
	        }        
	 
	       console.log('--------------------------DELETE----------------------------');
	       console.log('DELETE affectedRows',result.affectedRows);
	       console.log('-----------------------------------------------------------------\n\n');  
	});
})

app.post('/init',(req,res)=>{
	 //query操作可以对数据库进行操作
	connection.query('SELECT * from student', function (err, result, fields) {
			 if(err){
			 //err.message会返回错误的信息
			  console.log('[SELECT ERROR] - ',err.message);
			  return;
			}
		   console.log('--------------------------SELECT----------------------------');
		   console.log(result);
		   res.send(result);
		   console.log('------------------------------------------------------------\n\n');  
	});
	
	
})


app.listen(3000);

修改数据思路：更改替换为<button id="upd" @click="upd" :id="item.id">更改

当点击更改按钮时，把数据保存在本地，同时也把这个数据发送给后台，在update.vue组件当中提取本地数据，给location.hash='/update'赋值，也会造成路由的变化。但是由于路由的组件是一加载完页面就加载了全部的路由，所以保存数据之后update组件当中的数据还是空，所以需要使用location.reload();重新刷新页面读取数据

app.js代码

javascript 复制代码 
var id = 0;
app.post('/server',(req,res)=>{
	console.log('server');
	id=req.body.id;
	console.log(id);
})

app.post('/update',(req,res)=>{
	console.log('update');
	
	const {name,sex,class1}=req.body;
	var modSql = 'UPDATE student SET name = ?,sex = ?,class = ? WHERE Id = ?';
	var modSqlParams = [name,sex,class1,id];
	//改
	connection.query(modSql,modSqlParams,function (err, result) {
	   if(err){
	         console.log('[UPDATE ERROR] - ',err.message);
	         return;
	   }        
	  console.log('--------------------------UPDATE----------------------------');
	  console.log('UPDATE affectedRows',result.affectedRows);
	  console.log('-----------------------------------------------------------------\n\n');
	});
	
	res.redirect('/index.html');
})

init.vue代码

javascript 复制代码 
upd:function(e){
			console.log('upd');
			sessionStorage.setItem('id',e.target.id);
			var xhr = new XMLHttpRequest();
			xhr.open('POST','http://localhost:3000/server');
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			xhr.send('id='+e.target.id);
			location.hash='/update';
			location.reload();
		}

完整代码：

app.js：

javascript 复制代码 
const express = require('express');
const app = express();
const path = require('path');
//引入body-parser模块
const bodyParser = require('body-parser');
//拦截所有请求,配置body-parser模块
//extended:false 方法内部使用querystring模块处理请求参数的格式,并且把参数保存在req当中
//extended:true 方法内部使用第三方模块qs处理请求参数的格式
app.use(bodyParser.urlencoded({extended:false}));



//开放静态资源访问，只需要输入文件名即可，不需要输入文件夹
app.use(express.static(path.join(__dirname,'src')));

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();
});


//引入MySQL模块
var mysql      = require('mysql');
//创建MySQL的连接
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '1234',
  database : 'students'
});

//连接MySQL
connection.connect();


//接收请求
app.post('/add',(req,res)=>{
	//接收请求参数
	
	const { id, name, sex,class1}= req.body;
	
	var  addSql = 'INSERT INTO student(id,name,sex,class) VALUES(?,?,?,?)';
	var  addSqlParams = [id,name,sex,class1];
	connection.query(addSql,addSqlParams,function (err, result) {
	        if(err){
	         console.log('[INSERT ERROR] - ',err.message);
	         return;
	        }        
	 
	       console.log('--------------------------INSERT----------------------------');
	       //console.log('INSERT ID:',result.insertId);        
	       console.log('INSERT ID:',result);        
	       console.log('-----------------------------------------------------------------\n\n');  
	});
	res.redirect('/index.html');
})

var id = 0;
app.post('/server',(req,res)=>{
	console.log('server');
	id=req.body.id;
	console.log(id);
})

app.post('/update',(req,res)=>{
	console.log('update');
	
	const {name,sex,class1}=req.body;
	var modSql = 'UPDATE student SET name = ?,sex = ?,class = ? WHERE Id = ?';
	var modSqlParams = [name,sex,class1,id];
	//改
	connection.query(modSql,modSqlParams,function (err, result) {
	   if(err){
	         console.log('[UPDATE ERROR] - ',err.message);
	         return;
	   }        
	  console.log('--------------------------UPDATE----------------------------');
	  console.log('UPDATE affectedRows',result.affectedRows);
	  console.log('-----------------------------------------------------------------\n\n');
	});
	
	res.redirect('/index.html');
})
app.post('/del',(req,res)=>{
	console.log('del');
	const {id}=req.body;
	var delSql = 'DELETE FROM student where id='+id;
	//删
	connection.query(delSql,function (err, result) {
	        if(err){
	          console.log('[DELETE ERROR] - ',err.message);
	          return;
	        }        
	 
	       console.log('--------------------------DELETE----------------------------');
	       console.log('DELETE affectedRows',result.affectedRows);
	       console.log('-----------------------------------------------------------------\n\n');  
	});
})

app.post('/init',(req,res)=>{
	console.log('init');
	 //query操作可以对数据库进行操作
	connection.query('SELECT * from student', function (err, result, fields) {
			 if(err){
			 //err.message会返回错误的信息
			  console.log('[SELECT ERROR] - ',err.message);
			  return;
			}
		   console.log('--------------------------SELECT----------------------------');
		   console.log(result);
		   
		   console.log('------------------------------------------------------------\n\n');
		   res.send(result);
	});

})


app.listen(3000);

index.html：

javascript 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		
		<div id="app">
			
		</div>
		<script src="./bundle.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

app.vue

javascript 复制代码 
<template>
	<div id="app">
		<router-view></router-view>
	</div>
</template>

<script>
	
</script>

<style scoped="scoped">
	
</style>

init.vue：

javascript 复制代码 
<template>
	<div id="init">
		<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 id="upd" @click="upd" :id="item.id">更改</button>
			</div>
			<div class="div31">
				<button @click="del" :id="item.id">删除</button>
			</div>
		</div>
		<div class="div4">
			<router-link to='/add'>增加</router-link>
		</div>
		
	</div>
</template>

<script>


export default {
	data(){
		return{
			msg:'66',
			people:[
					
				]
		}
	},
	mounted:function(){
		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:{
		del:function(e){
			console.log('del'+e.target.id);
			var xhr = new XMLHttpRequest();
			xhr.open('POST','http://localhost:3000/del');
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			xhr.send('id='+e.target.id);
			location.href='http://localhost:3000/index.html'
		},
		upd:function(e){
			console.log('upd');
			sessionStorage.setItem('id',e.target.id);
			var xhr = new XMLHttpRequest();
			xhr.open('POST','http://localhost:3000/server');
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			xhr.send('id='+e.target.id);
			location.hash='/update';
			location.reload();
		}
	}
}

	
</script>

<style scoped="scoped">
	
	#init{
		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>

router.js：

javascript 复制代码 
import Vue from 'vue'
import Router from 'vue-router/dist/vue-router.js'
import init from '../components/init.vue'
import app from '../components/app.vue'
import add from '../components/add.vue'
import del from '../components/del.vue'
import update from '../components/update.vue'
Vue.use(Router);

export default new Router({
	routes: [
		{
			path: '/',
			redirect:'/init'
		},
		{
			path: '/init',
			component: init
		},
		{
			path: '/add',
			name:'add',
			component: add
		},
		{
			path: '/del',
			name:'del',
			component: del
		},
		{
			path: '/update',
			name:'update',
			component: update
		},
	]
})

update.vue：

javascript 复制代码 
<template>
	<div id="update">
		<form action="http://localhost:3000/update" method="post">
			<div class="div1">
				<div class="div11">
					学号
				</div>
				<div class="div12">
					<input type="text" name="id" placeholder="请输入学号" id="num" disabled="disabled">
				</div>
			</div>
			<div class="div1">
				<div class="div11">
					姓名
				</div>
				<div class="div12">
					<input type="text" name="name" placeholder="请输入姓名">
				</div>
			</div>
			<div class="div1">
				<div class="div11">
					性别
				</div>
				<div class="div12">
					<input type="text" name="sex" placeholder="请输入性别">
				</div>
			</div>
			<div class="div1">
				<div class="div11">
					班级
				</div>
				<div class="div12">
					<input type="text" name="class1" placeholder="请输入班级">
				</div>
			</div>
			<br>
			<button type="submit">更改</button>
			
		</form>
	</div>
</template>

<script>

window.onload=function(){
	var k = sessionStorage.getItem('id');
	console.log(k);
	if(k){
		var num = document.querySelector('#num');
		num.value=k;
	}
}

</script>

<style>
	#update{
		width: 60%;
		height: 600px;
		margin: auto;
		border: 1px solid royalblue;
	}
	.div1{
		margin-top: 10px;
		margin-left: 10px;
	}
</style>
相关推荐
zhang-zan7 分钟前
nodejs操作selenium-webdriver
前端·javascript·selenium
ZBY5203112 分钟前
【Vue】 npm install amap-js-api-loader指南
javascript·vue.js·npm
计算机毕设指导628 分钟前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea
前端拾光者1 小时前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
木子02042 小时前
前端VUE项目启动方式
前端·javascript·vue.js
endingCode2 小时前
45.坑王驾到第九期：Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
打鱼又晒网2 小时前
【MySQL】数据库精细化讲解：内置函数知识穿透与深度学习解析
数据库·mysql
运维-大白同学3 小时前
将django+vue项目发布部署到服务器
服务器·vue.js·django
Myli_ing3 小时前
HTML的自动定义倒计时，这个配色存一下
前端·javascript·html
tatasix3 小时前
MySQL UPDATE语句执行链路解析
数据库·mysql
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作