项目描述：
后台连接数据库实现增删改查等接口。
前台ajax调用接口将图书渲染到页面，并实现增删改查。
项目搭建
- 创建文件
1.1、 建立项目文件，并在文件中创建index.js入口文件
1.2 、public静态资源
1.3 、model数据库操作
1.4、 route路由逻辑处理
1.5、 views模板
1.6 、server业务逻辑处理 - 项目初始化
npm init -y
- 下载需要的第三方模块
3.1、下载express框架，命令：npm install express --save
3.2 、下载art-template模板引擎，命令：npm install art–templart
3.3 、下载express-art-template兼容express和art-template模板，命令：npm install express-art-template --save
3.4、下载body-parser HTTP请求体解析的中间件，命令：npm install body-parser --save
3.5、下载mysql 与mysql进行交互，命令：npm install mysql --save
//一键命令下载
npm install express mysql art-template express-art-template body-parser --save
- 各文件初始化
4.1主入口文件
const express = require('express');
const template = require('art-template');
const bodyPerser = require('body-parser');
const fs = require('fs');
const path = require('path');
const router = require('./router/router');
const app = express();
//挂载
app.use(bodyPerser.urlencoded({extended:false}));
//处理json参数
app.use(bodyPerser.json());
//静态文件托管
app.use(express.static('public'));
//设置模板路径
app.set('views',path.join(__dirname,'views'));
//设置模板引擎
app.set('view engine','art');
//express与art-template模板的兼容
app.engine('art',require('express-art-template'));
//设置路由
app.use(router);
//监听端口
app.listen(3000,() => {
console.log('runing...');
})
4.2路由
const express = require('express');
const router = express.Router();
const server = require('../server/server');
//路由处理......
module.exports = router;
4.3数据库连接工具
const mysql = require('mysql');
//连接数据库mysql的方法
exports.base = (sql,data,callback) => {
//创建连接数据库
const connection = mysql.createConnection({
host:'localhost',
user:'root',
password:'123456',
database:'test'
})
//执行链接
connection.connect();
//操作数据库
connection.query(sql,data,(error,resules,fields) => {
if(error) throw error;
callback(resules);
})
//关闭数据库
connection.end();
}
前后台业务分析
一、渲染首页面
后台
- 分配首页面渲染路由
router.get('/books',server.showInfo);
- 首页面渲染逻辑处理
连接数据库执行查询语句 => 接收到的数据为一个数组 => 将得到的数据以json数据格式返回
//首页面渲染
exports.showInfo = (req,res) => {
let sql = 'select * from book';
db.base(sql,null,(resules) => {
res.json(resules);
})
}
前台
当页面加载完成时 => 封装一个渲染页面的函数 => 函数中通过ajax调用渲染所有书籍接口 => 接口返回数据为一个数组，数组中每个对象为一本书 => 将所有书籍渲染到页面中
二、添加图书
后台
- 分配添加图书路由
router.post('/books/book',server.addbook);
- 添加图书逻辑处理
接受一个要添加的数据 => 连接数据库执行添加语句，将接收到的数据添加到数据库 => 根据数据库返回的对象中的属性affectedRows的值返回一个状态码 => 添加成功返回1、添加失败返回0
exports.addbook = (req,res) => {
let data = req.body;
let sql = 'insert into book set ?';
data.id = null;
db.base(sql,data,(resules) => {
if(resules.affectedRows == 1){
res.json({folt:1});
}else{
res.json({folt:0});
}
})
}
前台
页面中添加一个"添加图书"按钮 => 给按钮添加点击事件 => 当点击按钮时弹出表单可填写需要添加的书籍信息 => 表单中有提交按钮，给按钮添加点击事件 => 点击按钮通过ajax调用添加图书的接口 => 接口执行后返回一个状态码 => 添加成功返回1、添加失败返回0 => 这里执行一个判断操作，判断添加成功调用渲染页面的函数，若添加失败弹出一个弹窗提示添加失败
//添加图书
$('#addBookId').click(function(){
var form = $('#addBookForm');
form.get(0).reset();
form.find('input[type=hidden]').val(null);
var mark = new MarkBox(600, 400, '添加图书', form.get(0));
mark.init();
$('#button').click(function(){
$.ajax({
url:'/books/book',
type:'post',
dataType:'json',
data:form.serialize(),
success:function(data){
if (data.folt == 1) {
mark.close();
xuanran();
}else{
mark.close();
alert('添加失败');
}
}
})
})
})
三、删除图书
后台
- 分配删除图书路由
//修改图书路由处理
router.put('/edbook',server.edbook);
- 删除图书逻辑处理
接受一个id => 连接数据库根据id执行删除语句 => 根据返回的对象属性返回一个状态码 => 删除成功返回1、删除失败返回0
exports.deletebook = (req,res) => {
let data = [req.params.id];
console.log(data);
let sql = 'delete from book where id = ?';
db.base(sql,data,(resules) => {
console.log(resules);
if(resules.affectedRows == 1){
res.json({folt:1});
}else{
res.json({folt:0});
}
})
}
前台
页面中每本书后有一个删除按钮 => 给按钮添加点击事件 => 当点击按钮时ajax调用删除图书接口将要删除的数据的id传递过去 => 回调函数中返回一个状态码1为删除成功，0为删除失败 => 根据状态码判断删除成功调用渲染首页方法刷新页面
$('.sc').each(function(index,item){
$(item).click(function(){
var id = $(this).parent().siblings('td:eq(0)').text();
$.ajax({
url:'/deletebook/' + id,
type:'get',
dataType:'json',
success:function(data){
if (data.folt == 1) {
xuanran();
}else{
alert('删除失败');
}
}
})
})
})
四、修改图书
后台
- 分配修改图书路由
router.put('/edbook',server.edbook);
- 修改图书逻辑处理
接收前段传递的修改后的数据 => 连接数据库执行修改语句，根据传递过来数据中id将新数据修改数据库中原数据 => 返回状态码修改成功为1、修改失败为0
exports.edbook = (req,res) => {
let data = req.body;
let sql = 'update book set name = ?,author = ?,category = ?,description = ? where id = ?';
let book = [data.name,data.author,data.category,data.description,data.id];
db.base(sql,book,(resules) => {
if(resules.affectedRows == 1){
res.json({folt:1});
}else{
res.json({folt:0});
}
})
}
前台
页面中每本书后有一个编辑按钮 => 给按钮添加点击事件 => 点击按钮弹出编辑表单 => 遍历所有书籍根据id匹配要修改的书籍，将信息放入表单中，以方便客户看到需要修改的信息 => 提交数据时ajax调用修改图书接口将修改后的数据传递过去 => 回调函数中返回状态码1为修改成功，0为修改失败 => 判断修改成功刷新页面，修改失败弹窗提示修改失败。
注：前台传递的数据中id不会被修改
//修改图书
$('.bj').each(function(index,item){
$(item).click(function(){
var form = $('#addBookForm');
var mark = new MarkBox(600, 400, '修改图书', form.get(0));
var id = $(this).parent().siblings('td:eq(0)').text();
$(data).each(function(indexer,indexer){
if(this.id == id){
mark.init();
form.find('input[name=id]').val(this.id);
form.find('input[name=name]').val(this.name);
form.find('input[name=author]').val(this.author);
form.find('input[name=category]').val(this.category);
form.find('input[name=description]').val(this.description);
}
})
$('#button').click(function(){
var form = $('#addBookForm');
$.ajax({
url:'/edbook',
type:'put',
dataType:'json',
data:form.serialize(),
success:function(data){
if (data.folt == 1) {
mark.close();
xuanran();
}else{
mark.close();
alert('修改失败');
}
}
})
})
})
})
五、查询图书
前台
页面中有一个输入框后面有一个搜索按钮 => 当点击搜索按钮时判断搜索框中内容 => 若内容为空则展示所有书籍 => 若有内容则遍历判断所有书籍的名字中是否存在关键字 => 若存在则将存在的相关书籍存放入数组中 => 待遍历结束判断数组长度若为0则弹窗提示没有搜到此书籍，否则将数组中数据渲染到页面中。
注：查询书籍时是在渲染页面时返回的数据中查询，所以这里没有调用后台接口
//查找书籍
$('#btn').click(function(){
var bookName = $('#bookName').val();
if(bookName == ''){
xuanran ();
}else{
var books = [];
$(data).each(function(index,item){
if(item.name){
console.log(item.name.indexOf(bookName));
if(item.name){
if(item.name.indexOf(bookName) >= 0){
books.push(item);
}
}
}
})
if(books.length == 0){
alert('没有找到这本书');
}else{
var html = template('indexTpl', { list: books });
$('#dataList').html(html);
}
}
})
1208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
