Vue显示数据：Vue+PHP+Mysql

最新推荐文章于 2024-04-22 19:48:33 发布

soosgo

最新推荐文章于 2024-04-22 19:48:33 发布

阅读量1.5k

点赞数 4

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Doulvme/article/details/125280014

版权

Vue 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

显示数据的前端界面如下：

项目代码结构层次：

前端代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#app{
				width: 820px;
				margin: auto;
				text-align: center;
			}
			.btn-add{
				background: limegreen;
				color: #fff;
				border: none;
				padding: 5px 10px;
				border-radius: 5px;
			}
			.btn-modi{
				padding: 5px 10px;
				border-radius: 5px;
				color: #fff;
				text-decoration: none;
				background: cornflowerblue;
			}
			.btn-del{
				padding: 5px ;
				border-radius: 5px;
				color: #fff;
				text-decoration: none;
				background: violet;
			}
			tr{height: 50px;}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="ipt-wrap">
				<form action="" method="post">
					<input type="text" placeholder="请输入id账号" v-model="uid" name="" id="" value="" />
					<input type="text" placeholder="请输入员工姓名" v-model="uname" name="" id="" value="" />
					<input type="text" placeholder="请输入员工年龄" v-model="age" name="" id="" value="" />
					<input type="date" name="" id="" value="" v-model="date" />
					<select name="bumen" v-model="jobid">
						<option v-for="item in jobs" :value="item.jobid">{{item.jobname}}</option>
					</select>
					<!--阻止默认提交-->
					<input v-on:click.prevent="add()" type="submit" class="btn-add" value="添加员工信息"/>
				</form>
			</div>
			<h3>员工信息</h3>
			<table width="800px" border="1" cellspacing="0" cellpadding="0">
				<tr>
					<th>序号</th>
					<th>员工姓名</th>
					<th>员工年龄</th>
					<th>员工入职时间</th>
					<th>所属部门</th>
					<th>当前状态</th>
					<th>操作</th>
				</tr>
				<tr v-for="item in personInfo">
					<td>{{item.uid}}</td>
					<td>{{item.uname}}</td>
					<td>{{item.uage}}</td>
					<td>{{item.utime}}</td>
					<td>{{item.jobname}}</td>
					<td>{{item.status}}</td>
					<td>
						<button @click="update(item.uid)" class="btn-modi">更改离职</button>
						<button @click="del(item.uid)" class="btn-del">删除信息</button>
					</td>
				</tr>
			</table>
		</div>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vw=new Vue({
				el:"#app",
				data:{
					personInfo:[],
					jobs:[],
					uid:'',
					uname:'',
					age:'',
					date:'',
					jobid:''
				},
				mounted:function(){
					var that=this;
					//显示用户数据信息
					this.getData();
					//显示部门信息
					axios.get("api/queryJob.php").then(function(res){
						that.jobs=res.data;
					}).catch(function(error){
						console.log(error);
					});
				},
				methods:{
					//获取用户数据信息
					getData(){
						var that=this;
						axios.get("api/queryInfo.php").then(function(res){
							that.personInfo=res.data;
						}).catch(function(error){
							console.log(error);
						});
					},
					//添加
					add(){
						var that=this;
						axios.get("api/add.php",{
							//params传参数 ，如果没有传参数{}也可不写
							params:{
								uid:that.uid,
								uname:that.uname,
								age:that.age,
								date:that.date,
								jobid:that.jobid,
							}
						}).then(function(res){
							that.getData();
						}).catch(function(error){
							console.log(error);
						});
					},
					//删除
					del(id){
						var that=this;
						//提示弹窗
						if(confirm("确定删除吗？")){
							axios.get("api/del.php?uid="+id).then(function(res){
								that.getData();
							}).catch(function(error){
								console.log(error);
							});	
						}
					},
					//修改
					update(id){
						var that=this;
						axios.get("api/update.php?uid="+id).then(function(res){
							that.getData();
						}).catch(function(error){
							console.log(error);
						});
					}
				}
			});
		</script>
	</body>
</html>

后端PHP请求员工信息数据代码：

<?php
//创建pdo对象
$pdo=new PDO("mysql:host=localhost;dbname=Manager;","root","123456");
//定义sql语句
$sql="select * from register ,Jobs where Jobs.jobid=register.jobid;";
//预处理  创建stmt对象
$stmt=$pdo->prepare($sql);
//执行操作
$r=$stmt->execute();
//获取数据
$rows=$stmt->fetchAll();
//转为json数据输出
echo json_encode($rows);
?>

后端PHP添加数据代码：

<?php
//获取数据
$uid=$_GET["uid"];
$uname=$_GET["uname"];
$age=$_GET["age"];
$date=$_GET["date"];
$jobid=$_GET["jobid"];

//创建pdo对象
$pdo=new PDO("mysql:host=localhost;dbname=Manager;","root","123456");
//定义sql语句
$sql="Insert into register VALUES(?,?,?,?,?,'在职');";
//预处理
$stmt=$pdo->prepare($sql);
//执行
$r=$stmt->execute([$uid,$uname,$age,$date,$jobid]);
//结果返回json
$response=[];
if($r){
	echo json_encode(["msg"=>"添加成功"]);
}else{
	echo json_encode(["msg"=>"添加失败"]);
}

?>

后端PHP删除数据代码：

<?php
$uid=$_GET['uid'];
$pdo=new PDO("mysql:host=localhost;dbname=Manager;","root","123456");
$sql="delete from register where uid=?";
$stmt=$pdo->prepare($sql);
//执行语句
$r=$stmt->execute([$uid]);
if($r){
	echo json_encode(["msg"=>"删除成功"]);
}else{
	echo json_encode(["msg"=>"删除失败"]);
}
?>

后端PHP修改数据代码：

<?php
$uid=$_GET["uid"];
//创建PDO
$pdo=new PDO("mysql:host=localhost;dbname=Manager;","root","123456");
//sql语句
$sql="UPDATE register set status='离职' where uid=?";
//预处理  生成stmt对象
$stmt=$pdo->prepare($sql);
//执行
$r=$stmt->execute([$uid]);
if($r){
	echo json_encode(["msg"=>"修改成功"]);
}else{
	echo json_encode(["msg"=>"修改失败"]);
}

?>

Mysql数据库设计：

drop DATABASE if EXISTS Manager;
CREATE DATABASE Manager;
use Manager;
drop TABLE if EXISTS Jobs;
CREATE TABLE Jobs(
jobid TINYINT PRIMARY KEY auto_increment,
jobname VARCHAR(10)
);
insert into Jobs VALUES(null,"技术部");
insert into Jobs VALUES(null,"财务部");
insert into Jobs VALUES(null,"市场部");
insert into Jobs VALUES(null,"后勤部");

drop TABLE if EXISTS register;
CREATE TABLE register(
uid int(11) PRIMARY key auto_increment,
uname VARCHAR(10) not null,
uage TINYINT(10) not null,
utime datetime not null,
jobid TINYINT REFERENCES Jobs(jobid),
status enum('在职','离职')
)auto_increment=0;

Insert into register VALUES(null,'张三','14',now(),3,'在职');
Insert into register VALUES(null,'李四','123',now(),3,'离职');

select * from register,Jobs where register.jobid=Jobs.jobid;
-- delete from register where uid=14
select * from Jobs;
-- UPDATE register set status='离职' where uid=11