angularjs java mysql_AngularJS通过HTTP与后台API进行数据交互

本文实现了独立前端通过angularJS的controller向后端发送数据和从后端获取数据

搭建基础前端架构

用NodeJS搭建服务器，基础教程看这里

1. 项目架构

Project Structure

node_modules:项目依赖的NodeJS libraries，通过npm下载，package.json和package-lock.json是其附属产物

pde_server.js:前端服务器

project_name/templates:页面源码

project_name/static:静态资源，JavaScript，CSS等

2. 添加依赖

如果没有，则在当前目录添加express library

$ cnpm install express --save

3. 修改之前的server.js成pde_server.js

1. 增加到不同文件夹的快捷路径

app.use('/js', express.static('Pennsylvania_Education/static/js'));

app.use('/css', express.static('Pennsylvania_Education/static/css'));

app.use可以用来重设静态资源的地址，当视图(html)中出现

服务器会自动查找向当前文件夹下的Pennsylvania_Education/static/css/dashboard.css

除了可以少打写字，这个功能还可以方便我们在不同的服务器下反复使用已经编写好的前端代码，比如现在这个project还可以被python的flask和SpringBoot的Thymeleaf无缝兼容，因为他们都默认进入templates文件夹查找视图，进入static文件夹查找静态资源

2. 增加到获得数据和展示数据的前台页面的路径

app.get('/applicationForm', function (req, res) {

res.sendFile( __dirname + "/Pennsylvania_Education/templates/" + "applicationForm.html" );

});

app.get('/dashBoard', function (req, res) {

res.sendFile( __dirname + "/Pennsylvania_Education/templates/" + "dashboard.html" );

});

4. 完整的pde_server.js放一份

var express = require('express');

function startServer() {

var app = express();

// use 'http://0.0.0.0:8081/static' points to local '/frontend/static'

// first parameter the same as the one include in html

app.use('/js', express.static('Pennsylvania_Education/static/js'));

app.use('/css', express.static('Pennsylvania_Education/static/css'));

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

app.get('/index', function (req, res) {

res.sendFile( __dirname + "/Pennsylvania_Education/templates/" + "index.html" );

});

app.get('/applicationForm', function (req, res) {

res.sendFile( __dirname + "/Pennsylvania_Education/templates/" + "applicationForm.html" );

});

app.get('/dashBoard', function (req, res) {

res.sendFile( __dirname + "/Pennsylvania_Education/templates/" + "dashboard.html" );

});

var server = app.listen(6060, '0.0.0.0', function () {

var host = server.address().address

var port = server.address().port

console.log("visit http://%s:%s", host, port)

});

};

startServer();

向后台传输数据

1. 创建页面

templates里新建一个输入数据的表单页面applicationForm.html

AngularJS的controller中目前实现了两个方法：

scope.submitForm目前将我们输入的值返回显示在页面上，之后我们将改变这个方法使其将值传入后端

scope.transform帮助我们将选择的日期返回显示在选择框内，单纯的时间戳并没有办法显示在input内

Application Form

Application Form