显示数据的前端界面如下:
项目代码结构层次:
前端代码:
<!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