用了几天时间走了一趟沐风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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模板</title>
</head>
<body>
<div>{{title}}</div>
<div>
<ul>
{{each list}}
<li>{{$value}}</li>
{{/each}}
</ul>
</div>
</body>
</html>
第三步：实现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
<tbody>
{{each list}}
<tr>
<td>{{$value.id}}</td>
<td>{{$value.name}}</td>
<td>{{$value.author}}</td>
<td>{{$value.category}}</td>
<td>{{$value.desc}}</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
{{/each}}
</tbody>
运行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
扫一扫
1787
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
