FE-Nodejs-PHP-database本demo主要功能是使用前端表单输入相关数据，通过Ajax请求将数据发送到nodejs，通过php发送到数据库，然后从数据库中将数据通过php取出，通过nodejs发送到页面。nodejs充当中间件。主要使用的技术有：前端页面：html5、CSS3、JavaScript；nodejs：express框架，swig模板；php：封装类，查询和插入数据。开始准备创建项目文件夹-FEtoBE：在命令行使用npminit初始化项目文件夹，填写一串项目名称，或者一路回车，项目文件结束后，新建一个文件package.json将出现，这是刚刚填充或默认数据。Front-end-databasecreationandwritingdatapage在FEtoBE文件夹下创建views和public文件夹，在views文件夹下创建add_data.html文件作为写入数据的窗口。这里创建一个表，模拟补习班四门课程每天新报的人数，以及报考总人数。整体效果如下图（未做兼容美化）：表格文件在Github上。数据传输的整体过程就是通过nodejs等安装相应的插件模板，这一步的整体过程是：给表单中的“点击添加”按钮添加一个事件，让它发送一个Ajax通过点击事件请求，通过get方法将表单中的数据传递给一个Node。路由。所以这里需要创建一个node文件，并使用express模板创建对应的路由（确保电脑上安装了node）。在命令行中，安装express：npminstallexpress--save；安装swig模板：npminstallexpress--save；在FEtoBE文件夹下创建app.js文件，引入express、swig、path；此时文件结构：配置对应的路由继续在app.js中编写，配置模板引擎，node模板引擎文件位置：//配置模板引擎为html，作用是告诉node模板引擎文件位置app.set('views','./views/');app.set('viewengine','html');app.engine('html',swig.renderFile);//设置静态文件路径app.use(express.static(path.join(__dirname,'public')));然后设置从add_data.html接受数据的路由和端口：//设置添加数据接口的路由app.get('/adding',function(req,res){res.render('add_data')});//设置路由，接收数据app.get('/addData',function(req,res){console.log(req.query.mathNum);//验证成功传输数据})//设置端口varserver=app.listen(3000,function(){varhost=server.address().address;varport=server.address().port;console.log('示例应用在http://%s监听：%s',主机,端口);});设置ajax发送表单数据此时，在需要的add_data.html文件中，使用ajax发送数据：当前面两步完成后，在命令行开始：nodeapp.js，在浏览器中输出之前设置的添加数据接口的路由，本例中为“http://localhost:3000/adding”，可以看到表单已经显示在浏览器中，之后输入数据，点击按钮，可以看到命令行显示的是测试数据，说明我们已经把数据从前端接口传入nodejs，接下来就是马上从nodejs传到php，最后通过php传入数据库。PHP文件中封装了一个数据库类，实现数据库的添加、查找等功能（xampp中的默认路径在这里创建数据库文件夹）。创建包类：创建一个DB.php文件，创建一个包类。具体代码：在Github中查看。创建一个写入数据的php文件创建一个get.php文件。该文件的作用是将nodejs中的数据写入数据库。所以这时候数据库中应该有一个接收数据的表（这里是forfetobe数据库下的classData数据表）。具体代码：在Github中查看。通过php向数据库写入数据前面两步的php文件创建完成后，部署到服务器上。在nodejs中需要使用request模块来发起http请求。首先安装：npminstallrequest--save，在app.js中引入这个模块：varrequest=require('request');所以可以在接收数据的路由中添加request到addData，发送数据获取。php，然后发送到对应的数据库：//设置路由接受来自add_data.html的数据app.get('/addData',function(req,res){varresponseData="mathNum="+req.query.mathNum+'&'+'Etc...';//这里注意传输的responseData应该是字符串形式，格式和浏览器地址栏get请求的格式一致.request('http://localhost/database/get.php?'+responseData,function(error,response,body){});})具体代码见Github。此时打开相应的服务，向表中添加数据，即可传输到数据库中相应的数据表中。Database-Frontend在上一篇文章中写到从前端写入的数据通过Nodejs传递给php，然后由php写入数据库。本节文章主要写的是从数据库中取出数据，展示给前端（继续上一节的demo）。php文件获取数据库数据上一节封装了一个PDO类，就是DB.php文件。创建此类的实例以查询数据库中的数据。还是在xampp默认路径下创建数据库文件夹，新建back.php，查询数据库对应的数据表。具体代码：在GitHub上查看。获取数据到Nodejs可以通过上面的php获取数据到php，现在需要通过nodejs传递数据，然后发送到前端页面，需要在app.js中设置相关路由。设置数据展示界面的路由//设置路由在页面展示数据app.get('/showing',function(req,res){res.render('show_data')});这个没什么好说的，和上一篇设置数据写入接口的路由是一样的。都设置成在views文件夹下创建对应的html文件，这里是show_data.html。settheroutephpsenttonodejs//设置路由，作用是从'show_data.html'发送ajax请求，将数据库中的数据发送到这个app.get('/showData',function(req,res){varresponseData="mathNum="+req.query.mathNum+'&'+//etcrequest('http://localhost/database/back.php?'+responseData,function(error,response,body){res.json(body);//必须.吐出数据。});});现在需要编写接收数据的show_data.html接口。这里需要在public文件夹下创建scripts、css、images等文件夹，用于存放对应的静态资源文件。将静态文件.css、.js、img放到public文件夹下对应路径下。此时项目文件结构为：导入路径为：//show_data.html文件中样式文件的导入路径显示。
