这是一个全栈项目，运行在本地服务器的8080端口上，用express框架配合路由，后台写接口，采用mongoose数据库，写出增删改查接口。前端发送ajax请求获取到增删改查后的返回信息。整个项目的源码已经上传至本人博客资源，可免费下载：https://download.youkuaiyun.com/download/caipital/12800601
主页面展示：
文件目录：
目录说明：
mongoose：存放mongoose数据库相关文件
connect.js：连接数据库
node_modules：安装的第三方插件和框架，例如express、body-parser、mongoose 等,我上传的资源文件没有这个目录，需要自行在cmd下运行npm i / cnpm i下载。
public：公共资源目录（使用express框架的静态文件托管，让浏览器输入服务器地址可以访问的开放资源）
addBook.htm：添加图书页面
editBook.htm：修改图书页面
index.htm：图书列表首页面
route：存放路由文件
index.js：写增删改查路由接口
app.js：整个项目的启动文件
package.json：安装的插件和框架的配置文件
README.md： 接口说明文档
文章目录
后端接口
查询图书列表接口：(/index)
// index.js
const express = require('express');
const indexRouter = express.Router();
const base = require('../mongoose/connect');
// 查询图书列表接口
indexRouter.get('/index', async (req, res) => {
try {
let data = await base.find();
// 返回查询的数据
res.send({ status: 200, data: data })
} catch (error) {
// 返回失败信息
res.send({ status: 404, error: error.message })
}
})
删除图书接口：(/delete)
// index.js
const express = require('express');
const indexRouter = express.Router();
const base = require('../mongoose/connect');
// 删除图书接口
indexRouter.get('/delete', async (req, res) => {
try {
let data = await base.deleteOne({ _id: req.query.id });
if (data.ok === 1) {
// 删除成功返回数据
res.send({ status: 200, data: data })
}
} catch (error) {
// 返回失败信息
res.send({ status: 404, error: error.message })
}
})
注：删除图书使用的是href='./editBook.html?id={{$value._id}}'形式传id，所以使用req.query来拿id。
可参考：node中req.params、req.query与req.body的区别
添加图书接口：(/addBook)
// index.js
const express = require('express');
const indexRouter = express.Router();
const base = require('../mongoose/connect');
// 添加图书接口
indexRouter.post('/addBook', async (req, res) => {
// console.log(req.body)
try {
let data = await base.create(req.body);
// 添加成功返回数据
res.send({status:200,message:'添加成功'})
} catch (error) {
// 返回失败信息
res.send({status:404,message:error.message,msg:'添加失败'})
}
})
注：添加图书使用的是post请求，得使用第三方插件body-parser的req.body来获取表单元素的值。
可参考：node中req.params、req.query与req.body的区别
查询单个图书接口：(/queryCurrentBook)
// index.js
const express = require('express');
const indexRouter = express.Router();
const base = require('../mongoose/connect');
// 1.查询单个图书信息接口
indexRouter.post('/queryCurrentBook',async(req,res)=>{
try {
let data = await base.findOne({_id:req.body._id});
res.send({status:200,data:data});
} catch (error) {
res.send({status:404,message:error.message})
}
})
注：查询单个图书信息使用的是post请求，得使用第三方插件body-parser的req.body来获取表单元素的值。
可参考：node中req.params、req.query与req.body的区别
修改图书接口：(/editBook)
// index.js
const express = require('express');
const indexRouter = express.Router();
const base = require('../mongoose/connect');
// 2.修改图书信息
indexRouter.post('/editBook',async(req,res)=>{
//console.log(req.body)
try {
let data = await base.updateOne({_id:req.body._id},req.body);
res.send({status:200,data:data});
} catch (error) {
res.send({status:404,message:error.message})
}
})
注：查询单个图书信息使用的是post请求，得使用第三方插件body-parser的req.body来获取表单元素的值。
可参考：node中req.params、req.query与req.body的区别
前端页面请求
查询图书
使用ajax从后台获取数据，用art-template将数据动态添加到页面。
// 1.图书列表展示
function getList() {
$.ajax({
url: "/index",
type: 'get',
}).then(res => {
// console.log(res)
let obj = {
data: res.data
}
let dataHtml = template('tmp', obj)
$('#tbody').html(dataHtml)
}).catch(err => {
console.log(err)
})
}
getList();
删除图书
由于每条图书记录都是模板引擎动态添加的，所以给删除按钮动态绑定删除事件，再发送ajax请求通过id删除每条记录。
$('#tbody').on('click', ".del", function () {
//通过自定义属性获取当前图书id
let bookId = $(this).attr('data-id');
// console.log(bookId)
$.ajax({
url: '/delete',
type: 'get',
data: {
id: bookId
}
})
.then(res => {
// console.log(res)
if (res.status == 200) {
getList();
}
})
.catch(err => {
console.log(err)
})
})
添加图书
点击首页“添加图书”，跳转到添加图书页面。
页面展示：
给“添加图书”按钮绑定点击事件，再输入不为空时，发送ajax请求，向后台请求添加数据。
// 1 给添加 图书按钮绑定点击事件
// 2 判断input 不能为空
// 3 获取input的值
// 4 发送ajax 请求
$('#btn').on('click',function(e){
e.preventDefault();
let bookName = $('.name').val();
let author = $('.author').val();
let catagory = $('.catagory').val();
let desc = $('.desc').val();
if(bookName==''){
alert('书名不能为空');
return;
}
if(author==''){
alert('作者不能为空');
return;
}
if(catagory==''){
alert('分类不能为空');
return;
}
if(desc==''){
alert('描述不能为空');
return;
}
$.ajax({
url:'/addBook',
type:"post",
data:{
name:bookName,
author,
catagory,
desc
}
}).then(res=>{
if(res.status==200) {
location.href='./index.html';
}
}).catch(err=>{
console.log(err)
})
})
修改图书
这里分两步，先要获取修改之前的数据并展示到页面再将修改的内容发送给后台。
// 1 一进来的时候 获取当前这个编辑的数据 通过id 从数据库里面查询出来
// 2 把对应的数据展示到页面上
// 3 点击编辑按钮 判断input的值不能为空
// 4 修改完数据后 重新发送请求 到后端 数据库数据更新
// 5 成功后重新跳转到index.html
let _id = location.search.substring(1).split('=')[1];
$.ajax({
url:'/queryCurrentBook',
type:'post',
data:{
_id
}
}).then(res=>{
// console.log(res)
if(res.status==200) {
let dataHtml = template('tmp',res.data);
$('form').html(dataHtml);
}
}).catch(err=>{
console.log(err)
})
// 修改
$('form').on('click','#btn',function(e){
e.preventDefault();
let bookName = $('.name').val();
let author = $('.author').val();
let catagory = $('.catagory').val();
let desc = $('.desc').val();
if(bookName==''){
alert('书名不能为空');
return;
}
if(author==''){
alert('作者不能为空');
return;
}
if(catagory==''){
alert('分类不能为空');
return;
}
if(desc==''){
alert('描述不能为空');
return;
}
$.ajax({
url:'/editBook',
type:"post",
data:{
_id,
name:bookName,
author,
catagory,
desc
}
}).then(res=>{
// console.log(res)
if(res.status==200) {
location.href='./index.html';
}
}).catch(err=>{
console.log(err)
})
})
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
