AngularJS、通用Mapper

最新推荐文章于 2021-05-12 18:40:10 发布

超人不会飞aa

最新推荐文章于 2021-05-12 18:40:10 发布

阅读量305

点赞数

分类专栏： javaEE

本文链接：https://blog.csdn.net/m_awdawdw/article/details/104403124

版权

javaEE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

1、angularJS入门
2、angularJS服务层
3、controller继承
4、通用Mapper
- 配置通用Mapper
- 通用Mapper常用注解
5、Select2组件
- 入门demo（静态）

1、angularJS入门

表达式

输出语法

首先引入angularJS的js，链接：https://pan.baidu.com/s/10RmUx5h7dXrg4GJnGdaP_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-controller用于指定所使用的控制器。
$s c o p e 的使用贯穿整个 A n g u l a r J S A p p 应用, 它与数据模型相关联, 同时也是表达式执行的上下文 . 有了$ scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $s c o p e, 同样的$ 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=（要绑定的方法）

    <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可以获得当前的索引

    <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:当前页码显示数量
perPageOptions：页码选项
onChange：更改页面时触发事件

批量删除

在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，其中循环就为刚才在scope中存放的数组属性。在新增按钮上绑定事件ng-click，事件就是往scope数组属性中添加一个空值。
注意：属性需要事先声明

//此代码写在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、angularJS服务层

将控制层中关于涉及服务的代码抽取出来
例如下面为控制层的分页功能

//分页
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('../brand/findPage.do?pageNum='+page+'&pageSize='+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>

替换spring配置文件下的包扫描

	<!-- 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接口：通用mapper，继承了BaseMapper, ExampleMapper, RowBoundsMapper三个组合接口。
InsertListMapper接口：批量插入，支持批量插入的数据库可以使用，另外该接口限制实体包含id属性并且必须为自增列。
SelectByIdsMapper接口：通过操作ids字符串进行查询，ids 如 “1,2,3” 这种形式的字符串。
DeleteByIdsMapper接口：根据主键字段进行删除，方法参数必须包含完整的主键属性，通过操作ids字符串进行操作，ids 如 “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：加上此属性才可实现多选

超人不会飞aa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
AngularJS、通用Mapper

文章目录1、angularJS入门表达式控制器事件指令循环数组循环对象数组**内置服务****使用分页插件****批量删除**点击按钮增加一行输入框文件上传2、angularJS服务层3、controller继承4、通用Mapper配置通用Mapper通用Mapper常用注解5、Select2组件入门demo（静态）1、angularJS入门表达式输出语法首先引入angularJS的...
复制链接

扫一扫