后台管理系统相关

walterrwu 发布于2019-06-28 13:43 / 1577人阅读

摘要：将数据经由写入到数据库中上两步的文件创建完毕之后，将其部署到服务器上。数据取回至通过上面的可以将数据拿回至，现在需要将数据经由，再将其发送到前端页面上，需要在中设置相关路由。

FE-Nodejs-PHP-database

本demo主要实现的功能是使用前端表格输入相关数据，将数据通过Ajax请求发送至nodejs中，在经由php发送至数据库中，然后在从数据库中通过php将数据取出，经由nodejs发送至页面中。nodejs起中间件的作用。
主要使用的技术有：

前端页面：html5、CSS3、JavaScript；

nodejs：express框架、swig模板；

php：封装类，查询、插入数据。

开始准备工作 创建项目文件夹-FEtoBE：

在命令行使用npm init 初始化项目文件夹，填写项目名称等一系列，或者一路enter，结束后项目文件会出现一个新文件package.json，就是刚才填写的或默认的数据。

前端-数据库 创建写入数据页面

在FEtoBE 文件夹下创建 views 和 public 文件夹，在views文件夹下创建add_data.html文件，作为写入数据的窗口，此处，创建了一个表格，模拟补习班四个课程每天新增报名人数，以及总的报名人数。总体效果如下图所示（未做兼容性及美化）：
表格文件在Github上。

数据传输经过nodejs 安装相应插件模板等

此步的总体流程为：给表格中的按钮“点击添加”添加事件，使其通过点击事件，发送Ajax请求，将表格中的数据通过get方法传输到Node某路由中。
所以此处需要创建node文件，并使用express 模板来创建相应路由（保证电脑中已安装node）。

在命令行中，安装express: npm install express --save;

安装swig模板：npm install express --save;

在FEtoBE文件夹下创建 app.js 文件，并引入express以及swig、path；

此时文件结构：

配置相应路由等

继续在app.js中书写，配置模板引擎，node模板引擎文件位置：

//配置模板引擎为 html，作用是告诉node模板引擎文件位置  
app.set("views","./views/");
app.set("view engine","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);//验证是否成功传输数据
})
//设置端口
var server = app.listen(3000, function() {
    var host = server.address().address;
    var port = server.address().port;
    console.log("Example app listening at http://%s:%s", host, port);
});

设置ajax发送表格数据

此时，需要的add_data.html文件中，使用ajax来发送数据：

当上两步完成之后，在命令行中启动：node app.js，在浏览器中输出之前设置的添加数据界面的路由，本例中为“ http://localhost:3000/adding ”，可以看到浏览器中已经展示了表格，输入数据之后，点击按钮，就可以在命令行中看到测试的数据显示出来。说明我们已经可以将数据从前端界面穿输入nodejs中，下一步即时从nodejs传输入php，在经php最终传入数据库。

PHP文件

通过封装一个数据库类，实现数据库的增加、查找等（此处在xampp中的默认路径创建database文件夹）。

创建封装类：

创建DB.php 文件，创建封装类。具体代码：在Github中查看。

创建写入数据的php文件

创建get.php文件。本文件的作用是将nodejs中传来的数据写入到数据库中。所以此时数据库中应该有相应接收数据的表格（此处为forfetobe数据库下的classData 数据表格）。

具体代码：在Github中查看。

将数据经由php写入到数据库中

上两步的php文件创建完毕之后，将其部署到服务器上。需要使用 request模块在nodejs中进行http请求。
首先进行安装：npm install request --save，在app.js中引入此模块：var request = require("request");
所以可以在接收数据的路由中addData中添加request请求，将数据发送到get.php中，再由其发送到相应数据库中：

// 设置路由，用来接受add_data.html传来的数据
app.get("/addData", function(req, res) {
    var responseData =
        "mathNum=" + req.query.mathNum + "&" +
        "等等。。。。。。";
    //此处注意传输的responseData应该为字符串形式，且格式与get请求在浏览器地址栏的格式相一致。  
        request("http://localhost/database/get.php?" + responseData, function(error, response, body) {

    });
})

具体代码在Github上查看。
此时，打开相应服务，表格中添加数据，即可以传输到数据库中的相应数据表里。

数据库-前端

上一节文章中，写到从前端写入的数据，经由Nodejs传给php，在由php写入到数据库中。本节文章主要写从数据库将数据拿出来展示到前端去（继续上一节的demo）。

php文件获取数据库数据

上一节中封装了一个PDO类，也就是DB.php文件。创建此类的一个实例，用来查询数据库中的数据。
依旧是在xampp中的默认路径创建database文件夹下，新建back.php，进行数据库相应数据表的查询，具体代码：在GitHub上查看。

数据取回至Nodejs

通过上面的php可以将数据拿回至php，现在需要将数据经由nodejs，再将其发送到前端页面上，需要在app.js中设置相关路由。

设置数据展示界面路由

//设置路由，用来将数据展示到页面中去
app.get("/showing", function(req, res) {
    res.render("show_data")
});

这个没啥说的，和上一篇中的设置数据写入界面路由相同。都是设置在views文件夹下新建相应的html文件，此处是show_data.html。

设置php发送到nodejs上的路由

//设置路由，作用是将来自‘show_data.html’的ajax请求，并将数据库中的数据通过PHP发送至此
app.get("/showData", function(req, res) {
        var responseData =
            "mathNum=" + req.query.mathNum + "&" +
            //等等
request("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文件内的样式文件引入路径展示。

在书写完整体的展示界面后，（详细代码在：GitHub上查看），就需要将数据传输到页面中去。

数据展示到页面中去：

在相应的位置书写ajax请求，将showData 路由上的数据发送到页面：

$(function() {
  $.ajax({
    url: "http://localhost:3000/showData",
    dataType: "json",
    success: function(point) {
      var jsondata = JSON.parse(point);
      var datalength = jsondata.length;
      //提取数据库里最近七天内的数据
      var nowAll = Number(jsondata[datalength - 1]["atotalnum"]);
      var nowIncrease = Number(jsondata[datalength - 1]["aincreasenum"]);
         //。。。
      var sevenAll = Number(jsondata[datalength - 7]["atotalnum"]);
      var sevenIncrease = Number(jsondata[datalength - 7]["aincreasenum"]);
      //以下是使用highcharts 创建表格。
      //具体代码在Github上查看。
})

至此，一个完整的将前端数据通过ajax的get方式发送到Nodejs中，在经由php发送到数据库中，然后再从数据库中拿取最新的数据，展示到界面中。
整个的展示流程为：

进入登录界面：

其中输入错误的密码或未注册的用户名均会得到提示：

查看展示界面：

查看展示界面，没门课程均有多带带的展示界面 以及相应的数据。且是响应式，适合在手机端浏览。还可以在左侧的功能栏找到添加数据接口。

添加数据：

添加成功后点击确认 添加按钮，即可在展示界面查看最新数据。

整个的流程就是：

idc机房托管混合云 linux磁盘管理相关命令后台客户管理系统客户后台管理系统后台系统

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/25830.html

基于vue模块化开发后台系统——构建项目

摘要：构建完成，那么就开始撸代码了文章项目效果预览地址项目开源代码基于模块化开发后台系统准备工作基于模块化开发后台系统构建项目基于模块化开发后台系统权限控制文章目录如下：项目效果预览地址项目开源代码基于vue模块化开发后台系统——准备工作基于vue模块化开发后台系统——构建项目基于vue模块化开发后台系统——权限控制前言在熟悉上一篇说到准备工具之后，现在开始构建属于自己的项目，这是一个...

joyqi 2019-08-30 14:18 评论0 收藏0
基于vue模块化开发后台系统——构建项目

摘要：构建完成，那么就开始撸代码了文章项目效果预览地址项目开源代码基于模块化开发后台系统准备工作基于模块化开发后台系统构建项目基于模块化开发后台系统权限控制文章目录如下：项目效果预览地址项目开源代码基于vue模块化开发后台系统——准备工作基于vue模块化开发后台系统——构建项目基于vue模块化开发后台系统——权限控制前言在熟悉上一篇说到准备工具之后，现在开始构建属于自己的项目，这是一个...

zqhxuyuan 2019-08-22 15:52 评论0 收藏0
基于vue模块化开发后台系统——构建项目

摘要：构建完成，那么就开始撸代码了文章项目效果预览地址项目开源代码基于模块化开发后台系统准备工作基于模块化开发后台系统构建项目基于模块化开发后台系统权限控制文章目录如下：项目效果预览地址项目开源代码基于vue模块化开发后台系统——准备工作基于vue模块化开发后台系统——构建项目基于vue模块化开发后台系统——权限控制前言在熟悉上一篇说到准备工具之后，现在开始构建属于自己的项目，这是一个...

notebin 2019-08-05 13:24 评论0 收藏0
基于vue模块化开发后台系统——构建项目

摘要：构建完成，那么就开始撸代码了文章项目效果预览地址项目开源代码基于模块化开发后台系统准备工作基于模块化开发后台系统构建项目基于模块化开发后台系统权限控制文章目录如下：项目效果预览地址项目开源代码基于vue模块化开发后台系统——准备工作基于vue模块化开发后台系统——构建项目基于vue模块化开发后台系统——权限控制前言在熟悉上一篇说到准备工具之后，现在开始构建属于自己的项目，这是一个...

YanceyOfficial 2019-08-02 10:03 评论0 收藏0
vue2+element 管理后台集成解决方案没有没做的，只要想不到的！

摘要：目前的技术栈主要的采用由于是个人项目，所以数据请求都是用了代替。后续会出一系列的教程配套文章，如如何从零构建后台项目框架，如何做完整的用户系统如权限验证，二次登录等，如何二次开发组件如富文本，如何整合七牛等等文章，各种后台开发经验等等。完整项目地址：vue-element-admin系类文章一：手摸手，带你用vue撸后台系列一（基础篇）系类文章二：手摸手，带你用vue撸后台系列二...

sanyang 2019-08-20 16:03 评论0 收藏0
后端开发 - 收藏集 - 掘金

摘要：环境初始化开源一个的后台管理系统前端掘金实现代码自动部署后端掘金在我的中有两个关于代码自动部署的项目，一个是版本的，另外一个是版本的。 FFmpeg 总结（十二）用 ffmpeg 与 nginx 实现直播多路流并发播放 - Android - 掘金图：撒哈拉沙漠下载 nginx 和 nginx-rtmp源码： http://nginx.org/download/ngi... http...

neu 2019-07-16 16:26 评论0 收藏0