AngularJS + Java---前台网页与后台数据库传递数据 基本结构
第一个关于这两种语言的项目,以下只是我自己的理解,欢迎指教:)
基本对应关系
1. controller
.jsp(.html) ng-controller="controllerTest"
.js angular.module('appTest',[]).controller('controllerTest',[])
/*ng-app="appTest" 指定angularJS的根元素*/
2.click
.jsp(.html) ng-click="functionTest()"
.js $rootScope.functionTest = function(){
$http.get("../loadData").success(function(data){
$rootScope.dataTest = data.
})
}
3.load/update
.js
$rootScope.functionLoad = function(){
$http.get("../loadData").success(function(data){ //与后台java中的路径对应
$rootScope.dataTest = data.data;
})
}
/*通过JSON传递数据*/
$rootScope.functionUpdate = function(){
var paraData = JSON.stringify({
name:$rootScope.name //ng-model="name" 写在<form></form>的控件中
})
$http.post("../updateData",paraData).success(function(data){
})
}
.jsp(.html)
显示数据在table中
<tbody>
<tr ng-repeat="data in dataTest">
<td ng-bind="data.name"></td>
</tr>
</tbody>
更新form中的数据
<form>
<div>
<label>Name:</label>
<div>
<input ng-model="name"/>
</div>
</div>
</form>
Java中需要创建的interface/class
1.controller(class)
这个controller本身与angularJS中的controller没有关系,两者是根据url来进行连接的。
所以只要在js和java中GET/POST的路径相同,就可以触发java中的代码。
2.service(interface/class)
interface: import model;
class: import model; import dao;
返回dao中的结果
3.dao(interface/class)
import model;
Criteria语句,这部分也可以用sql来写
4.model(class)
为数据库中的table创建对应的class,直接连接数据库
AngularJS + Java---前台网页与后台数据库传递数据 基本结构的更多相关文章
- java前台线程和后台线程
main()函数即主函数,是一个前台线程,前台进程是程序中必须执行完成的,而后台线程则是java中所有前台结束后结束,不管有没有完成,后台线程主要用与内存分配等方面. ...
- Javaweb项目-下拉列表显示后台数据库的数据
下面将演示前端下拉列表显示后台数据库中class表的说有班级的名称 环境: Tomcat-8.5.40 mysql-8.0.13 eclipse-4.9.0 springmvc框架 一.从mysql中 ...
- Java前台传值至后台中文乱码
记一次常见问题 今天导入了一个网上下载的项目,运行后发现,前台传值 到Servlet,Servlet保存至数据库,数据库保存的中文数据出现乱码,检查了一下表中的编码是utf8没错. 输出测试了一下 原 ...
- 关于那个.get .post .ajax ztree 还有后台servlet传递数据
servlet给前台传递data串 用的方法是 PrintWriter out = response.getWriter(); // response.sendRedirect("test. ...
- 前台js接收后台的json数据
后台返回的json数据,如php的: return json_encode($data); 在前台 js接收如下: function json2object(str){ var jsstr = str ...
- java POI导出Excel文件数据库的数据
在web开发中,有一个经典的功能,就是数据的导入导出.特别是数据的导出,在生产管理或者财务系统中用的非常普遍,因为这些系统经常要做一些报表打印的工作.这里我简单实现导出Excel文件. POI jar ...
- jsp中添加弹窗口并且实现向后台双向传递数据
思路:使用jquery-easyui框架实现弹出div,在jsp初始化时从后台获得数据初始化div中的form表单元素的value属性,从而获得后台数据.在点击确定按钮时使用ajax向后台发送数据. ...
- 用java实现操作两个数据库的数据
1.首先需要在jdbc的配置文件里面配置两个数据库的连接 数据库1的配置 driverClassName=com.mysql.jdbc.Driverurl=jdbc:mysql://地址:3306/数 ...
- java下载excel,excel从数据库获取数据
<!-- poi --> <dependency> <groupId>org.apache.poi</groupId> <artifactId&g ...
随机推荐
- 研二下学期做的第一个项目(主要关于datagridview的一些笔记)
首先是行标题列rowheader dataGridView1.TopLeftHeaderCell.Value = "details"; ______________________ ...
- jqzoom与scrollpic配合的问题
<script type="text/javascript"> //以下两个方法的执行顺序不能互换,否则zoom方法的单击缩略图事件会失效 if (document.a ...
- 跨域资源共享(CORS)问题解决方案
CORS:Cross-Origin Resource Sharing(跨域资源共享) CORS被浏览器支持的版本情况如下:Chrome 3+.IE 8+.Firefox 3.5+.Opera 12+. ...
- 将word文件快速转换成表格的技巧
最近烦心事还真是很多,世界买家网最近就遇到了很多烦心事. 从www.buyerinfo.biz网站中的数据导出为csv格式的文件,我导出了buyer的数据,那怎么把它制作成表格呢? 找了下,发现还是比 ...
- firefox,跨域ajax 调用方法
在A站点ajax 调用B站的页面(方法)时, 使用post,且dataType类型为jsonp 有时在IE会有No Transport的错误提示,请加 jQuery.support.cors = tr ...
- 修改(table的section与上一个section的间距)section header背景颜色
- (UIView *) tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { UIView * ...
- liunx 下 部署并运行java项目(非web)
1. 将这三个包上传到liunx上,之后写一个run.sh 的脚本文件,然后在lib包中上传包<sunjce-provider.jar>包. 2.启动run.sh( ./run.sh st ...
- 移动混合开发之android文件管理-->flexbox,webFont。
增加操作栏,使用felxbox居中,felx相关参考网址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 使用webFont添加图标, ...
- javascript语言精粹
内容选自:<javascript语言精粹> 1.6种值会为假(==false),分别是false,null,undefined,' ',0,NaN 2.typeof有6种值,分别是'num ...
- unix下输出重定向
> 为重定向符号 >> 重定向不覆盖原文件内容 example: 1. 标准输出重定向 echo "123" > /home/123.txt ---- 标准 ...