陈述
前端采用Vue进行数据显示 后端采用NodeJs进行逻辑处理,传递数据 数据库使用mysql
功能
- 实现了增加图书
- 修改图书
- 查询图书
- 删除图书
- 模糊查询
效果展示
可增加、可删除、可修改、可模糊查询...由于不能放视频，只能展示个页面
功能实现
前端
代码处都写了注释,我就不一一解释了...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图书管理</title>
<script src="./js/jquery-1.10.2.js"></script>
<script src="./js/vue@2.6.14.js"></script>
<style type="text/css">
.grid {
margin: auto;
width: 500px;
text-align: center;
}
.grid table {
width: 100%;
border-collapse: collapse;
}
.grid th,td {
padding: 10;
border: 1px dashed orange;
height: 35px;
line-height: 35px;
}
.grid th {
background-color: orange;
}
.grid .book{
padding-bottom: 10px;
padding-top: 5px;
background-color: aquamarine;
}
button{
background: rgb(6, 14, 131);
color: pink;
}
</style>
</head>
<body>
<div id="app">
<div class="grid">
<div>
<h1>图书管理</h1>
<div class="book">
<div>
<label for="id">
编号：
</label>
<input type="text" id="id" v-model.number='id'>
<label for="name">
名称：
</label>
<input type="text" id="name" v-model='name'>
<button @click='addbook'>提交</button>
</div>
</div>
</div>
查询:<input type="text" v-model="findname" @input='findbook'>
<table>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
<tr :key="shu.id" v-for="shu,i in findbooksbyName">
<td v-text="shu.id"></td>
<td v-text="shu.name"></td>
<td v-text="shu.date"></td>
<td><a href="#" @click.prevent="update(shu.id)">修改</a>|<a href="#" @click.prevent="delbyid(shu.id)">删除</a></td>
</tr>
</table>
</div>
</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
books:[],
findbooksbyName:[],
id:'',
name:'',
flag:false,//是否编辑
findname:''
},
methods:{
addbook(){
if(this.flag){ //修改
//根据当前id去更新对应的id数据
this.books.some(item=>{
if(item.id==this.id){
item.name=this.name;
return true;
}
});
$.ajax({
type:"GET",
url:"http://127.0.0.1:9090/updatebook",
data:{
id:this.id,
name:this.name
},
success:function(data){
alert('修改成功')
}
})
this.id='';
this.name='';
this.flag=false;
}else{
if(this.id==''||this.name==''){
alert("不能为空")
}else{
let book={
id:this.id,
name:this.name,
date:''
}
this.books.push(book);
$.ajax({
type:"GET",
url:"http://127.0.0.1:9090/addbook",
data:{
id:this.id,
name:this.name
},
success:function(data){
alert('添加成功');
location.reload();
}
})
this.id+=1;
this.name='';
}
}
},
update(id){
this.flag=true;//进入编辑
//数组新方法寻找元素-->filter
let book=this.books.filter(item=>{
return item.id==id;
})
console.log(book[0]);
this.id=book[0].id;
this.name=book[0].name;
},
//方案一(根据下标删)
/*
delbyindex(index){
this.books.splice(index,1);
}
*/
//方案二(根据id删)
delbyid(id){
let book=this.books.filter(item=>{
return item.id!=id; //返回除了要删除的id
});
$.ajax({
type:"GET",
url:"http://127.0.0.1:9090/delbook",
data:{
id:id
},
success:function(data){
alert('删除成功');
location.reload();
}
})
// this.books=book;
},
findbook(){
let findbooks=this.books.filter(item=>{
if(this.findname==''){
return item.id!=0;
}else{
return item.name.includes(this.findname);//includes包含
}
})
// console.log(findbooks);
this.findbooksbyName=[];
for(var i=0;i<findbooks.length;i++){
var obj={
id: findbooks[i].id,
name: findbooks[i].name,
date: findbooks[i].date
}
this.findbooksbyName.push(obj);
}
}
}
})
$(function(){
$.ajax({
type:"GET",
url:"http://127.0.0.1:9090/getbooks",
success:function(data){
for(var i=0;i<data.length;i++){
vm.books.push(data[i]);
vm.findbooksbyName.push(data[i]);
}
},
error:function(data){
alert("服务器异常....")
}
})
})
</script>
</html>
后端
项目结构:
router.js
var express=require('express');
var conn=require('../mysql.js');
//建立一个路由容器
var router=express.Router();
router.get("/getbooks",(req,res)=>{
var sql="select * from books";
conn.query(sql,(err,result,fields)=>{
if(err){
return "失败";
}
console.log(result);
res.send(result);
})
});
router.get("/updatebook",(req,res)=>{
let id=req.query.id;
let name=req.query.name;
console.log("id="+id);
console.log("name="+name);
conn.query("update books set name=? where id=?",[name,id],(err,result)=>{
if(err){
return "失败";
}
console.log(result);
res.send(result);
})
})
router.get("/delbook",(req,res)=>{
let id=req.query.id;
console.log("id="+id);
conn.query("delete from books where id=?",[id],(err,result)=>{
if(err){
return "失败";
}
console.log(result);
res.send(result);
})
})
router.get("/addbook",(req,res)=>{
let id=req.query.id;
let name=req.query.name;
console.log("id="+id);
conn.query("insert into books(id,name) values(?,?)",[id,name],(err,result)=>{
if(err){
return "失败";
}
console.log(result);
res.send(result);
})
})
//导出
module.exports=router;
mysql.js
var mysql=require("mysql");
//创建连接
var conn=mysql.createConnection({
host : 'localhost',
user : 'root',
password : 'root',
database: 'db8'//数据库名称
});
conn.connect();//开启连接
//导出
module.exports=conn;
app.js
var express=require('express');
var router=require('./router/router.js')
//2、创建web服务器 app接收
var app=express();
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",'3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();//执行下一个中间件
});
//路由已经放到routes.js中
app.use(router);//使用
//4、启动服务listen(端口号,回调函数)
app.listen(9090,()=>{
console.log('服务器开启 http://127.0.0.1:9090');
})
数据库
OK,这样就实现了...😄
