AngularJS、通用Mapper

文章目录

  • 1、angularJS入门
    • 达式
    • 控制器
    • 事件指令
    • 循环数组
    • 循环对象数组
    • **内置服务**
    • **使用分页插件**
    • **批量删除**
    • 点击按钮增加一输入框
    • 文件上传
  • 2、angularJS服主键盘锁住了怎么解锁务层
  • 3、controllerjava环境变量配置继承
  • 4、通用Mapper
    • 配置通用Mapper
    • 通用主键怎么设置Mapper常用注解
  • 5、Select2组件
    • 主键英文门demo(静态)

1、java模拟器angularJS入门

达式

  • 输出语法

首先引入angularJS的js,链接:https://pan.baidu.com/s/10RmUx5h7dXrg4G系统/运维JnGdaP_Q 提取码:5mv9
在想要使用angularJS的标签上添加ng-app属性
然后再使用{{ 想要输出的内容 }主键}

例:

    <div ng-app>
{{100+100}}
</div>
  • 双向绑定

ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上,而达式可以实时地输出变量。

例:

    <div ng-app>
<input ng-model="username"><br>
{{username}}
</div>
  • 初始化赋值

使用ng-init指令来对变量初始化

例:

<body ng-app ng-init="username='李四'">

控制器

ng-control分页查询ler用于指定所使用的控制器。

s
c
o
p
e

使


穿


A
n
g
u
l
a
r
J
S
A
p
p


,java语言
分页符和分节符的区别








,













.


scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了
scope使穿AngularJSApp,,.
scope 就在视图javascript和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新
s
c
o
p
e
,



scojavascript百炼成仙pe,同样的
scope,
scope 发生改主键变时也会立刻重新渲染视图.

    <script src="./js/angular.min.js"></script>
<script>
/*定义一个叫myApp的模块*/
var app = angular.module('myAPP',[]);
/*定义控制器*/
app.controller('myController',function($scope){
$scope.add = function () {
return parseInt($scope.x)+parseInt($scope.y);
}
})
</script>
</head>
<body ng-app = "myAPP" ng-controller="myController">
<div>
x:<input ng-model="x"><br>
y:<input ng-model="y"><br>
{{add()}}
</div>
</body>

事件指令

使用ng-click=(要绑定的方法javascript

    <script>
/*定义一个叫myApp的模块*/
var app = angular.module('myAPP',[]);
/*定义控制器*/
app.controller('myController',function($scope){
$scope.add = function () {
$scope.z = parseInt($scope.x)+parseInt($scope.y);
}
})
</script>
</head>
<body ng-app = "myAPP" ng-controller="myController">
<div>
x:<input ng-model="x"><br>
y:<input ng-model="y"><br>
<button ng-click="add()">计算</button>{{z}}
</div>

循环数组

使用标签主键只能有一个吗ng-repeat
在ng-repeat中使用$index可以获得当字段前的java环境变量配置索引

    <script>
var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
//定义控制器
app.controller('myController',function($scope){
$scope.list= [100,192,203,434 ];//定义数组
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div ng-repeat="y in list">
{{y}}
</div>

循环对象数组

<script>
var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
//定义控制器
app.controller('myController',function($scope){
$scope.list= [
{name:'张三',shuxue:100,yuwen:93},
{name:'李四',shuxue:88,yuwen:87},
{name:'王五',shuxue:77,yuwen:56}
];//定义数组			
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<table>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</table>

内置服务

使用内置对象http完成查询

    <script>
var app=angular.module('myApp',[]); //定义了一个叫myApp的模块
//定义控制器
app.controller('myController',function($scope,$http){
//查询的方法
$scope.getDate = function(){
$http.get('abc.json').success(function (response) {
$scope.list = response;
})
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="getDate()">
<div ng-repeat="y in list">
{{y.name}}
</div>

使用分页字段插件

  • 引入分页插件
    链接:https://pan.baidu字段值.com/s/1fcQkmjX0UbvrRbGENE8rpw
    提取码:rcwo
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
  • 构建app模块时引入pagination模块
var app=angular.module('pinyougou',['pagination']);//定义品优购模块
  • 页面的表格下放置分页组件
<tm-pagination conf="paginationConf"></tm-pagination>
  • 在controller中添加分页代码
  • 在页面的body元素上去掉ng-init指令的调用
/*定义控制器*/
myAPP.controller('brandController',function ($scope,$http) {
//重新加载列表 数据
$scope.reloadList=function(){
//切换页码
$scope.findPage( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
}
//分页控件配置
$scope.paginationConf = {
currentPage: 1,
totalItems: 10,
itemsPerPage: 10,
perPageOptions: [10, 20, 30, 40, 50],
onChange: function(){
$scope.reloadList();//重新加载
}
};
//分页
$scope.findPage=function(page,rows){
$http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(
function(response){
$scope.list=response.rows;
$scope.paginationConf.totalItems=response.total;//更新总记录
}
);
}
})

paginationConf 变量各属性的意义:
currentPage:当前页码
totalItems:总条数
itemsPerPage:当前页码显示linux是什么操作系统数量系统运维工资一般多少
perPageOptions系统运维工资一般多少:页码选项
onChange:更改页面时触javascript发事件

批量删除

  • 在js中加入以下代码字段英文
$scope.selectIds=[];//选中的ID集合
//更新复选
$scope.updateSelection = function($event,id) {
if($event.target.checked){//如果是被选中,则增加到数组
$scope.selectIds.push(id);
}else{
var idx = $scope.selectIds.indexOf(id);
$scope.selectIds.splice(idx, 1);//删除
}
}
//批量删除
$scope.dele=function(){
//获取选中的复选框
$http.get('../brand/delete.do?ids='+$scope.selectIds).success(
function(response){
if(response.success){
$scope.reloadList();//刷新列表
}
}
);
}
  • html中对复选按钮进行监控
<input  type="checkbox" ng-click="updateSelection($event,entity.id)">

点击按钮增加一行输入框

思路:在scope中存放一个数组属性,在想要循环添加的输入框div上添加ng-repeat,linux删除文件命令其中linux必学的60个命令循环就为刚才在scope中存放的数组属性。在新增系统运维包括哪些内容java培训钮上绑字段名定事件ng-click,事件就是往s主键英文cope数组属性中添加一个空值。
注意:属性需要事先声明

//此代码写在controller下
$scope.entity={specificationOption:[]}
$scope.addTableRow=function () {
$scope.entity.specificationOption.push({});
}
//以下代码为html中要循环的代码
<tr ng-repeat="pojo in entity.specificationOption">
//新增按钮绑定事件 省略
//以下为删除一行代码
$scope.deleTableRow=function (index) {
$scope.entity.specificationOption.splice(index,1);
}

文件上传

//文件上传服务层
app.service("uploadService",function($http){
this.uploadFile=function(){
var formData=new FormData();
formData.append("file",file.files[0]);
return $http({
method:'POST',
url:"../upload.do",
data: formData,
headers: {'Content-Type':undefined},
transformRequest: angular.identity
});
}
});
//控制层代码
$scope.uploadFile=function(){
uploadService.uploadFile().success(function(response) {
if(response.success){//如果上传成功,取出url
$scope.image_entity.url=response.message;//设置文件地址
}else{
alert(response.message);
}
}).error(function() {
alert("上传发生错误");
});
};

2、angul系统运维工程arJS服务层

  • 将控制层中关于涉及服务的代码抽取出来
    例如下面为控制层的分页功能
//分页
myAPP.controller('brandController',function ($scope,$http) {
$scope.findPage=function(page,rows){
$http.get('../brand/findPage.do?pageNum='+page+'&pageSize='+rows).success(
function(response){
$scope.list=response.rows;
$scope.paginationConf.totalItems=response.total;//更新总记录
}
);
}
});

现需要将$http.get('../br主键可以为空吗and/findPage.do?pageNum='+pa主键的作用ge+'&am分页p;pageS主键的作用ize='+rows)抽出

  • 定义一个服务层
/*定义服务层*/
myAPP.service("brandService",function ($http) {
}
})
  • 抽取代码
app.service("brandService",function ($http) {
this.findPage=function (page,rows) {
return $http.get('../brand/findPage.do?pageNum='+page+'&pageSize='+rows);
}
}
  • 在controller层使用的时候一定要提前主键盘锁住了怎么解锁注入

3、controller继承

    $controller('baseController',{$scope:$scope});//继承

4、通用Mapper

配置通用Mapper

  • 导入相关依赖
        <dependency>
<groupId>tk.mybatis</groupId>
<artifactId>mapper</artifactId>
<version>4.1.5</version>
</dependency>
  • 替换sprin分页查询g配置文件下的包扫描
	<!-- mybatis 通用 mapper 整合-->
<bean class="tk.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.example"/>
<property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" />
<property name="markerInterface" value="com.example.dao.BaseDao"/>
<!-- 通用Mapper通过属性注入进行配置,默认不配置时会注册Mapper<T>接口 -->
<property name="properties">
<value>
<!--配置参数-->
ORDER=BEFORE
</value>
</property>
</bean>
  • 创建DAO层:
    每个dao都必须继承BaseDao
package com.example.dao;
import com.example.entity.DemoUser;
public interface DemoUserMapper extends BaseDao<DemoUser> {
}
  • 创建BaseDao
import tk.mybatis.mapper.common.Mapper;
import tk.mybatis.mapper.common.ids.DeleteByIdsMapper;
import tk.mybatis.mapper.common.ids.SelectByIdsMapper;
import tk.mybatis.mapper.common.special.InsertListMapper;
public interface BaseDao<T> extends Mapper<T>, InsertListMapper<T>, SelectByIdsMapper<T>, DeleteByIdsMapper<T> {
}

Mapper接口:通用mlinux必学的60个命令apper,继承了BaseMapper, ExampleMapper, RowBoundsMapper三个组合接口。
InsertListMapper接口:批量插入,支持批量插入linux是什么操作系统的数据库可以使用系统/运维,另外该接口限制实体包含id属性并且必须为自增列。
SelectByIdsMapper接口:通过操作ids字符串进行查询,ids 如 “1,2,3” 这种形式的字符串。
DeleteByIdsMapper接口:根据主键字段进行删除,方法参数必须包含完整的主键属性,通过操作ids字符串进行操作,i主键的作用ds 如 “1,2,3” 这种形式的字符串

继承的Mapper就拥有了Mapper所有的通用方法:

/**
* 根据主键查询
*
*/
T selectByPrimaryKey(Object var1);
/**
* 根据实体中字段值进行查询
*/
List<T> select(T var1);
/**
* 通过id批量查询
* <p>
* 通过操作ids字符串进行操作,ids 如 "1,2,3" 这种形式的字符串,
* <p>
* 这个方法要求实体类中有且只有一个带有@Id注解的字段,否则会抛出异常。
*/
List<T> selectByIds(String var1);
/**
* 根据Example条件进行查询
*
* @param example 任意类型参数
*/
List<T> selectByExample(Object var1);
/**
* 保存一个实体,null的属性也会保存,不会使用数据库默认值
*/
int insert(T var1);
/**
* 保存一个实体,null的属性不会保存,会使用数据库默认值
*/
int insertSelective(T var1);
/**
* 批量插入,支持批量插入的数据库可以使用,
* 例如MySQL,H2等,
* 另外该接口限制实体包含id属性并且必须为自增列
*
*/
int insertList(List<T> var1);
/**
* 根据主键字段进行删除,方法参数必须包含完整的主键属性
*/
int deleteByPrimaryKey(Object var1);
/**
* 根据主键字段进行批量删除,方法参数必须包含完整的主键属性
* 通过操作ids字符串进行操作,ids 如 "1,2,3" 这种形式的字符串
*/
@Override
int deleteByIds(String var1);
/**
* 根据实体属性作为条件进行删除,查询条件使用等号
*/
int delete(T var1);
/**
* 根据主键更新实体全部字段,null值会被更新
* (对象中必须有主键id)
*/
int updateByPrimaryKey(T var1);
/**
* 根据主键更新属性不为null的值
* (对象中必须有主键id)
*/
int updateByPrimaryKeySelective(T var1);

通用Mapper常用注解

//设置表名
@Table(name = "tb_user")
//设置id
@Id
//设置为自增字段
@GeneratedValue(strategy = GenerationType.IDENTITY)
//将对象转为json时,不包含此字段,需要依赖jackson-annotations
@JsonIgnore
//设置字段名
@Column
//非数据库中字段
@Transient
//插入时返回id
@KeySql(useGeneratedKeys = true)

5、Select2组件

链接:https://pan.baidu.com/s/1735qA0Xl1dBh5LqfzllAqA
提取码:s9gl字段类型

入门demo(静态)

  • 在html中引入css与js
 <link rel="stylesheet" href="../plugins/select2/select2.css" />
<link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
<script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/angular-select2.js">  </script>
  • 在controller的方法里添加数据
$scope.brandList={data:[{id:1,text:'联想'},{id:2,text:'华为'},{id:3,text:'小米'}]};//品牌列表
  • 在html中加入以下代码即可
<input select2  select2-model="entity.brandIds" config="brandList" multiple placeholder="选择品牌(可多选)" class="form-control" type="text"/>

select2-model:绑定的数据
config:数据源
multiple:加上此属性系统运维工资一般多少才可实现多选