node.js+mysql+html实现简易数据库管理系统

程序入口是app.js。通过signin.js与mysql数据库取得连接。controller.js的作用是扫描controller目录下的各个js文件,并将这些文件处理过的URL记录到map里面,这个map是映射的意思,可以简单理解为哈希表,浏览器在工作时遇到post或get请求可以迅速在这个映射表中找到相应文件的url并执行。在本proj中我们只要用到post和get两种请求就可以(实际上还有put和delete两种请求,只不过我们没用到)。以上是程序的最外层。

controller目录下的所有js模块都是URL处理函数的集合。每个模块处理相应的URL,生成对应的post和get请求,在module.export中暴露出来,以便addmapping处理。get请求是浏览器的主动获取,当我们在浏览器上输入get请求的url“代号”,浏览器会主动抓取这个代号所指向的url,获取文件的所有内容。我们这次程序中,每个get请求的url代号都指向一个html文件,于是浏览器就执行html文件。唯一不同的就是image.js文件,这个文件是用来处理两张背景图的url,也是生成get请求。

views目录下是html+css+js,主要用于页面效果的展示。css文件就是样式表,没什么可讲的。每个html文件中都包括一个处理该页面数据的script脚本链接。我们这里用的是最流行也是最好用的jquery,于是要接入jquery的js模块。同时,我们是通过views目录下的各个与html同名的js文件来做中介处理前端和后台之间的联系。于是html文件中还要加上这个js模块的脚本链接。

还是在views目录下。讲完了html,我们来讲讲views目录下的各个js模块。这个js模块是为了响应与它同名的html文件中的事件,处理html中用户输入的数据。模块用到了.ajax方法。解释一下ajax各个参数的意义。data是发送到服务器(不是浏览器)的数据。datatype是预期服务器会返回的数据类型,(不指定的话似乎好像也会自动判断?)我们这里设置成json格式,因为这是轻量级数据交互格式,后面会讲到。async参数是true或false,我们这里是同步请求,所以设置成false,这样一来,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。success参数是请求成功后的回调函数,它的参数是由服务器根据datatype参数进行处理过并返回的数据。url参数是发送请求的地址。type参数是请求的方式。

接下来就是最重要的前端数据处理了。controller目录下的各个js文件里除了生成get请求的url地址,还有一个重要的工作就是将各个处理数据的模块各自生成post请求的url地址。通过views目录下的js文件将前端数据调用post请求对应的url进行处理,处理的数据再发送到前端。交互过程主要是再上文所述的views目录下的各个js文件,不再赘述。

整个程序实现的核心在于async函数。这个函数需要node.js 7.6及以上的版本才能支持(我目前用的是7.8)。这个函数专门用于处理异步请求,函数有两个参数(ctx,next)。函数是以中间件的形式实现。(然而我还不是很理解这个概念orz)。ctx对象可以访问前台的数据,通过ctx.request,也可以将处理完的数据返回到前台,通过ctx.response。尤其要注意的是async要配合await使用,一个async里面一定要出现await才能将这个函数加入到中间件里面,否则程序运行到这里后会中断,无法再访问后续的中间件成员。async函数其实是高度格式化的一个东西,使用时遵循这些格式,就不会发生奇怪的错误。

从三月下旬开始学习js和html,今天下午通过了春学期数据库proj验收,这次proj我受到了黄雨生大佬在git上的项目很大的启发,前后台交互的一些东西是学习他的,后台的实现则是自己写的,html和css是队友们调的。这里一并感谢他们。

原文地址:https://www.cnblogs.com/KRCheung/p/6703012.html