【项目实战】nodejs 实战-图书管理系统

用了几天时间走了一趟沐风ol的实战教程，很感谢Up主，因为我怕学了忘，所以记录下来，以便后来进行观看记录，这几天，我彻底明白了前后端如何分离操作，如何连接数据库操作，如何在前台渲染数据，如何区分后台渲染和前台渲染。接下来，我还要把这个应用到我毕设上面，用Vue框架实现的工程和Node.js融合，最后，再次感谢Up主的实战视频。

第一步：新建js文件先安装这两个指令

npm install --save art-template
npm install --save express

第二步：渲染data数据，并展示出来

// node.js
// 模板引擎整合

const express = require('express');

const path = require('path');

const template = require('art-template');

const app = express();

//设置模板的路径

app.set('views',path.join(__dirname,'views'));

//设置模板引擎

app.set('view engine','art');

//使express兼容art-template模板引擎

app.engine('art',require('express-art-template'));

app.get('/list',(req,res)=>{
    let data = {
        title:'水果',
        list:['apple','orange','banana']
    }
    res.render('list',data);
});

app.listen(3000,()=>{
    console.log('runing....');
});

list.art

  
    
    
  
  
        
{
    {title}}
        

        

            {
    {each list}}
            
{
    {$value}}
            {
    {/each}}
        
        
  

第三步：实现json数据的业务模块、路由模块设置、以及json数据的渲染

// index.js

//图书馆管理系统入口文件

const express = require('express');
const router = require('./router.js');//第一步
const path = require('path');
const template = require('art-template');
const bodyParser = require('body-parser');
const app = express();

//设置模板的路径

app.set('views',path.join(__dirname,'views'));

//设置模板引擎

app.set('view engine','art');

//使express兼容art-template模板引擎

app.engine('art',require('express-art-template'));

//处理请求参数
//挂在参数处理中间件（post)
app.use(bodyParser.urlencoded({extended:false}));
//处理json格式的参数
app.use(bodyParser.json());


//启动服务器功能
//配置路由
app.use(router);//第二步
//监听端口
app.listen(3000,()=>{
    console.log('running...');
})

// router.js

// 路由模块
const express = require('express');
const router = express.Router();
const service = require('./service.js');

//路由处理
router.get('/',service.showIndex);

module.exports = router;

// service.js

// 业务模块

//加载所有数据
const data = require('./data.json');

//渲染主页面
exports.showIndex = (req,res)=>{
    res.render('index',{list:data});
}

index.art

  
     {
    {each list}}
     
         {
    {$value.id}}
         {
    {$value.name}}
         {
    {$value.author}}
         {
    {$value.category}}
         {
    {$value.desc}}
         修改|删除
     
     {
    {/each}}
 

运行node index.js，打开localhost:3000就可以看到效果了。

目录截图

第四步：样式单独抽取到静态资源里

目录

index.js

index.art

添加图书功能：

index.art 通过href跳转到toAddBook

router.js service.toAddBook是方法

service.js

addBook.art

data.json格式化快捷键Ctrl+K Ctrl+F

初始界面：通过action发起post请求

addBook.art

router.js 执行service的addBook方法

service.js

解释：
//第一步，执行方法，获取表单数据req.body
把info的内容赋值给book
//第二步，获取当前json数据的最大那个id，赋给新增的数据，所以需要执行自动生成图书编号的函数，把每一个item的id赋给新数组arr，并且返回arr数组的最大位置。
//第三步，把新增id赋给新的图书，把数据存入内存data里面。
//第四步，需要进行文件存取操作，引入path和fs模块
//第五步，fs.writeFile(写入路径，写入内容（把data转换成字符串，因为data是文本文件))

注意：
//会清除json文件的所有空格

//会格式化数据的时候，前面填充四个空格

注意：记得重启node服务

第五步：修改图书信息（删除请看第十步）

分两步实现：查询、修改

index.art

点击跳转到toEditBook，并且传输id值

router.js

跳转到toEditBook

执行方法：

执行完跳转到editBook.art模板里，同时渲染指定id的内容到表单里

以上为修改的第一步，查询渲染

editBook.art

红框内容告诉服务器编辑的id是哪一个，必须指定，否则无效果

执行到/editBook路由的post请求

router.js

service.js

获取内容的id，找到相同id的内容，新内容替换旧内容，return执行终止操作。然后执行保存文档操作。红框操作部分都是一样的。

第六步：数据库连接

注：新建表可以选择自动增长的id

initsql.js

注：生成sql脚本的js，执行node方法

新建目录，用npm init -y生成package.json，新建Index.js用来连接数据库：

mydb/index.js

注：connection.query里面的语句执行查询数据,可以通过百度npm>搜索mysql>install找到这些代码，
 cnpm install mysqljs/mysql

第七步：数据库的增删改查（测试）

目录

总共有4个文件，分别是增删改查的js

4个js文件，基础内容都是：

红框部分就是主要不同的地方：

insert.js

let sql = 'insert into book set ?'

let data = {
    name:'明朝那些事',
    author:'当年明月',
    category:'文学',
    description:'明朝的历史'
}

update.js

let sql = 'update book set name=?,author=?,category=?,description=? where id=?';
//这里的where是限定只修改一个数据，如果不设置就会更新所有数据

let data =['浪潮','浪潮','浪潮','浪潮',36];
  //操作数据库

delete.js

let sql = 'delete from book where id=?';
//这里的where是限定只修改一个数据，如果不设置就会更新所有数据
let data =[36];//也要数组的符号，这是格式要求

select.js

let sql = 'select * from book where id = ?';
//这里的where是限定只修改一个数据，如果不设置就会更新所有数据
let data =[1];

注：返回的参数都是以results体现。

第八步：封装操作数据库的通用API

db.js

基础内容不变，通过exports暴露出去，方法为base()，同时，数据库操作是异步的，需要使用回调函数返回结果。

测试文件dbtest.js

通过传输参数，执行db.base()方法就可以完美地进行数据库的各项操作了。

第九步：登录验证（前端+后端+数据库）

目录

新建上图三个文件，package.json用cnpm init -y创建，并安装express,和body-parser模块

login.js

注：引入db.js数据库通用API

login.html

在浏览器端打开localhost:3000/login.html访问，填写内容后点击提交post请求，打开check路由执行方法会查询数据库并且返回结果。

第十步：图书馆管理系统的增删改查（去掉json，更新为数据库动态操作）

主要更新了service.js的内容：

（一）渲染模块

（二）添加图书模块

（三）更新图书模块

（四）删除图书模块

由于前面没有写，所以这里多加一些描述：

index.art

router.js

service.js

注：查询操作体现在渲染界面以及更新操作上，
另外，所有的.art文件里面的desc全部替换为了description,避免进行数据库操作，“desc”为排序所用。

第十一步：后台接口开发

（一）JSON

目录

注：新建文件夹api和文件index.js，package.json等，安装express,mysql模块

返回数据结果为：

（二）JSONP（需要传递一个回调函数的名称）

其实是把json数据作为参数传给回调函数

判断是不是函数

自定义回调函数参数名称

（三）Restful (是从URL的格式来表述的）

效果图：

第十二步：Restful后台接口全面接入图书馆管理系统

其实是json接口和restful接口的混合使用

新建文件目录和文件

index.js

router.js

service.js

没有页面要借助postman工具进行测试

添加

删除

更新注意：指定更新的id

第十三步：前后端分离之前端渲染、增删查改

（一）渲染

目录

index.html

public/js/index.js

js文件夹引入三个文件：

以下的增加、更新都采用模态框弹出来显示信息，可参考bootstrap的模态框样式。

addBook(); //用以重新给添加数据绑定事件。每一次渲染都会触发该函数。
表单重置分为隐藏模块和非隐藏模块的不同操作。

（二）增加

（三）更新

（四）删除

注：1.使用同一个弹窗需要解绑click事件，采用unbind('click').click();
    2.渲染函数需要单独拎出来设为initList();
    3.解绑click事件，再次启动会没有效果，所以要单独拎出来，在渲染界面的时候，重新赋予添加数据函数click的方法。
    4.

以上都为public/js/index.js的内容
以下为index.html的渲染内容和模态框的表单请求

第十四步：服务器主动发送请求

新建一个index.js文件（测试文件）

//可替代postman来测试端口

（一）查询

注：需要先打开node到resful文件夹的index.js服务，才能打开另一个服务请求到数据

01jquery.js

03queryid.js //根据指定id查询

（二）增加

02addBook.js

（三）更新

04editBook.js

注：更新数据是不在url处写入id的

（四）删除

05delete.js

第十五步：调用第三方接口获取数据

06.js

第十六步：封装通用第三方api接口

新建weather.js

注：封装weather.js，用于查询天气的通用接口，使用exports暴露该方法，方法名为queryWeather，可以在其他地方传递参数调用该API

最终封装形式：

注：port：80为请求第三方接口的默认远端端口号

创建07.js测试该通用接口weather.js