月份:2018年6月

Mybatis 表单封装成对象提交

当前端表单有很多参数需要传入的时候,我们一个个的传入显得就很多了,这样我们就需要将传入的参数封装成一个对象。

对象的构建也很简单,就是前端有哪些参数就定义哪些,当前端有复选框的时候,我们将其定义为List类型或者Array来接受。

下面例子只是为了记录。。。参数并不多,就那么个意思。

1、表单封装实体

import java.util.List;

/**
 * @author wjy329
 * @date 2018/6/27
 */
public class UserForm {
    /**
     * 用户名
     * @date 2018/6/27
     */
    private String userName;
    /**
     * 密码
     * @date 2018/6/27
     */
    private String passWord;
    /** 
    * 作业
    * @date 2018/6/27 
    */ 
    private List<String> job;
    
    ... 省略get、set方法   ...
}

2、实体类(与数据库对应)

/**
 * @author wjy329
 * @date 2018/6/27
 */
public class UserEntity {
    /**
     * 用户名
     * @date 2018/6/27
     */
    private String userName;
    /**
     * 密码
     * @date 2018/6/27
     */
    private String passWord;
    /** 
    * 作业,这里不是list
    * @date 2018/6/27 
    */ 
    private String job;
    
    ... 省略get、set方法   ...
}

3、UserDao.java 

public interface UserDao {

   /** 
    * @return 返回结果集
   * @date 
   */ 
   List<UserEntity> getValues(@Param("main") UserEntity userEntity, @Param("form") UserForm userForm);

4、UserDao.xml

<select id="getValues"   parameterType="com.wjy329.entity.UserEntity"   resultMap="BaseResultMap">
    select
    *
    from
    user
    where username=#{main.username}
    and job in
    <foreach collection="form.job" index="index" item="job" open="(" separator="," close=")">
        #{job}
    </foreach>
</select>

5、UserService.java

//业务层接收表单数据即可
JSONArray getValues(UserForm userForm);

6、UserServiceImpl.java

public JSONArray getValues(UserForm userForm) {
    UserEntity userEntity = new UserEntity();
    List<String> job = userForm.getJob();
    List<String> sdkVers = new ArrayList<>();
    //这个可以把userForm相同的参数的值传给entity
    BeanUtils.copyProperties(userForm, userEntity);
    List<UserEntity> valueList = userMapper.getValues(userEntity,userForm);
    JSONArray values = new JSONArray();
    for(UserEntity userEntity1 : valueList){
        values.add(userEntity1);
    }

    return values;
}

7、controller类就不写了。。。上面的是关键

慢慢学习吧。希望每天都有不一样的收获。

AngularJS 分页搜索

模糊查询加分页,动态的显示表格数据

先来看效果图:

2.gif

可以看到在输入的时候就可以搜索,而且还可以有分页,并不是假搜索不能加载非当前页的数据。

1、UserRepository.java   数据访问接口

public interface UserRepository extends JpaRepository<User, Long>{
    /**
    * 根据用户名模糊查询
    * @author wujianyu
    * @date 2018/6/26
    */
    @Query("select u from User u where u.username like %?1% ")
    Page<User> findSearch(String username, Pageable pageable);

}

这里需要注意@Query 中的User对应的是实体类的User,而不是数据库的表名。

2、UserService.java  实现类(我这里直接用service层做了业务实现)

/**
 * @author wjy329
 * @date 2018/6/21
 */
@Service
public class UserService {
    @Autowired
    UserRepository userRepository;
    
    /**
    * 分页搜索
    * @author wujianyu
    * @date 2018/6/26
    */
    public Page<User> searchUserByPage(String username,Integer page, Integer size){
        Pageable pageable = new PageRequest(page - 1, size, Sort.Direction.ASC, "id");
        Page<User> users = userRepository.findSearch(username,pageable);
        return users;
    }
}

page-1 是因为前端传来的分页默认从1开始,而sql需要从0开始分页。

3、UserController.java

/**
 * @author wjy329
 * @date 2018/6/13
 */
@Controller
@RequestMapping("/user")
public class UserController {
    @Autowired
    UserService userService;
    /**
     * 搜索用户
     * @author wujianyu
     * @date 2018/6/26
     */
    @RequestMapping("/search")
    @ResponseBody
    public Map<String, Object> userListByName(String username,Integer page,Integer size) {
        Page<User> userList = userService.searchUserByPage(username,page,size);
        List<User> users = userList.getContent();
        Long total = userList.getTotalElements();
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("count",total);
        map.put("data",users);
        return map;
    }
}

total是数据总条数,可以直接从分页的结果获取,很方便。

4、user.html

<!-- 搜索框 -->
<div class="input-group">
    <input type="text" id="keyUsers" class="form-control" ng-model="search" name="keyUsers">
</div>

<table class="table table-bordered table-striped table-hover">
    <thead>
    <tr>
        <th>用户ID</th>
        <th>
            全名称
        </th>
        <th>
            用户名
        </th>
        <th>
            邮箱
        </th>
        <th>
            管理员
        </th>
        <th>
            操作
        </th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="x in names">
        <td width="8%" class="text-center">
            {{ x.id }}
        </td>
        <td width="10%" class="text-center" >
            {{ x.cname }}
        </td>
        <td width="15%" class="text-center" >
            {{ x.username }}
        </td>
        <td width="20%" class="text-center" >
            {{ x.email }}
        </td>
        <td width="15%" class="text-center" >
            {{getAdmin(x.isadmin)}}
            <!--{{ x.isadmin }}-->
        </td>

        <td width="8%" class="text-center" id="toolTD">
            <img src="/img/edit.png" class="i-20 cursor-pointer"
                 data-tooltip="tooltip" data-placement="bottom" title="修改"
                 onclick="updUser($(this).parents('tr').find('td'))"
                 style="width: 25px">
            <img style="margin-left: 5px;width: 25px" src="/img/cancel.png" class="i-20 cursor-pointer"
                 data-tooltip="tooltip" data-placement="bottom" title="删除"
                 onclick="delUser($(this).parents('tr').find('td').eq(0).text().trim())"
            >
        </td>
    </tr>
    </tbody>
</table>

<!-- 分页 -->
<ul class="pagination" style="margin: 0px;" >
    <li ng-class="{true:'disabled'}[p_current==1]"><a href="javascript:void(0);" ng-click="p_index()">首页</a></li>
    <li ng-repeat="page in pages" ng-class="{true:'active'}[p_current==page]"><a href="javascript:void(0);" ng-click="load_page(page)">{{ page }}</a></li>
    <li ng-class="{true:'disabled'}[p_current==p_all_page]"><a href="javascript:void(0);" ng-click="p_last()">尾页</a></li>
</ul>
<span style="vertical-align: 12px;">  共:{{count}} 条</span>

5、user.js

//加载表格数据
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    //配置
    $scope.count = 0;
    $scope.p_pernum = 10;
    //变量
    $scope.p_current = 1;
    $scope.p_all_page =0;
    $scope.pages = [];
    //搜索
    $scope.searchUser = function(keywords,page,size,callback){
        $http.get("/user/search?username="+keywords+"&page="+page+"&size="+size).then(function(res){
            $scope.count=res.data.count;
            $scope.names=res.data.data;
            $scope.p_current = page;
            $scope.p_all_page =Math.ceil($scope.count/$scope.p_pernum);
            reloadPno();
            callback();
        });
    };
    //首页
    $scope.p_index = function(){
        $scope.load_page(1);
    };
    //尾页
    $scope.p_last = function(){
        $scope.load_page($scope.p_all_page);
    };
    //加载某一页
    $scope.load_page = function(page){
        $scope._get(page,$scope.p_pernum,function(){ });
    };
    //初始化页码
    var reloadPno = function(){
        $scope.pages=calculateIndexes($scope.p_current,$scope.p_all_page,8);
    };
    //分页算法
    var calculateIndexes = function (current, length, displayLength) {
        var indexes = [];
        var start = Math.round(current - displayLength / 2);
        var end = Math.round(current + displayLength / 2);
        if (start <= 1) {
            start = 1;
            end = start + displayLength - 1;
            if (end >= length - 1) {
                end = length - 1;
            }
        }
        if (end >= length - 1) {
            end = length;
            start = end - displayLength + 1;
            if (start <= 1) {
                start = 1;
            }
        }
        for (var i = start; i <= end; i++) {
            indexes.push(i);
        }
        return indexes;
    };
    //搜索
    $('#keyUsers').bind('input propertychange', function() {
        var keywords = $('#keyUsers').val();
        $scope.searchUser(keywords,$scope.p_current,$scope.p_pernum,function(){});
    });
});

这样就完成了一个简单的分页。。。分页算法来自网络。。。 

ECharts 图表数据重叠

一开始是这样写的:

 var names = [];    //类别数组(实际用来盛放X轴坐标值)
 var series1 = [];
 var series2 = [];
 var series3 = [];
 var series4 = [];
 var series5 = [];
 var series6 = [];
 var series7 = [];
function getUpdate() {
    myChart.showLoading();
    $.ajax({
        type: 'post',
        url: '/xxx/getMainValues',//请求数据的地址
        dataType: "json",        //返回数据形式为json
        data: $('#form').serialize(),
        cache: false,
        success: function (result) {
            myChart.hideLoading();
            //请求成功时执行该函数内容,result即为服务器返回的json对象
            $.each(result, function (index, item) {
                //挨个取出类别并填入类别数组
                names.push(item.datetime);
                series1.push(item.pvValues);
                series2.push(item.uvValues);
                series3.push(item.ipValues);
                series4.push(item.pvImeiValues);
                series5.push(item.ipImeiValues);
                series6.push(item.uvPvValues);
                series7.push(item.uvIpValues);
            });
            myChart.setOption({        //加载数据图表
                xAxis: {
                    data: names
                },
                series: [{
                    data: series1
                },
                    {
                        data: series2
                    },
                    {
                        data: series3
                    },
                    {
                        data: series4
                    },
                    {
                        data: series5
                    },
                    {
                        data: series6
                    },
                    {
                        data: series7
                    }]
            });
        },
        error: function () {
            //请求失败时执行该函数
            // alert("图表请求数据失败!");
            layer.open({
                title: '错误提示'
                ,content: '图表请求数据失败!检查是否有未选中项'
            });
            myChart.hideLoading();
        }
    });
    // 使用刚指定的配置项和数据显示图表,true表示不融合数据,每次点击后都显示新的图表。
    myChart.setOption(option, true);
}

注意末尾的 myChart.setOption(option,true);  这个是必须的,但是,数据还是重叠了。

最后发现是定义存放数据的数组不应该定义为全局的。

就是把names 和 各个series放在方法中。

function getUpdate() {
    myChart.showLoading();
    $.ajax({
        type: 'post',
        url: '/xxx/getMainValues',//请求数据的地址
        dataType: "json",        //返回数据形式为json
        data: $('#form').serialize(),
        cache: false,
        success: function (result) {
            myChart.hideLoading();
             var names = [];    //类别数组(实际用来盛放X轴坐标值)
             var series1 = [];
             var series2 = [];
             var series3 = [];
             var series4 = [];
             var series5 = [];
             var series6 = [];
             var series7 = [];
            //请求成功时执行该函数内容,result即为服务器返回的json对象
            $.each(result, function (index, item) {
                //挨个取出类别并填入类别数组
                names.push(item.datetime);
                series1.push(item.pvValues);
                series2.push(item.uvValues);
                series3.push(item.ipValues);
                series4.push(item.pvImeiValues);
                series5.push(item.ipImeiValues);
                series6.push(item.uvPvValues);
                series7.push(item.uvIpValues);
            });
            myChart.setOption({        //加载数据图表
                xAxis: {
                    data: names
                },
                series: [{
                    data: series1
                },
                    {
                        data: series2
                    },
                    {
                        data: series3
                    },
                    {
                        data: series4
                    },
                    {
                        data: series5
                    },
                    {
                        data: series6
                    },
                    {
                        data: series7
                    }]
            });
        },
        error: function () {
            //请求失败时执行该函数
            // alert("图表请求数据失败!");
            layer.open({
                title: '错误提示'
                ,content: '图表请求数据失败!检查是否有未选中项'
            });
            myChart.hideLoading();
        }
    });
    // 使用刚指定的配置项和数据显示图表,true表示不融合数据,每次点击后都显示新的图表。
    myChart.setOption(option, true);
}

AngularJS 分页


1、添加分页布局

 <!-- 分页 -->
                <ul class="pagination" style="margin: 0px;" >
                    <li ng-class="{true:'disabled'}[p_current==1]"><a href="javascript:void(0);" ng-click="p_index()">首页</a></li>
                    <li ng-repeat="page in pages" ng-class="{true:'active'}[p_current==page]"><a href="javascript:void(0);" ng-click="load_page(page)">{{ page }}</a></li>
                    <li ng-class="{true:'disabled'}[p_current==p_all_page]"><a href="javascript:void(0);" ng-click="p_last()">尾页</a></li>
                </ul>
                <span style="vertical-align: 12px;">  共:{{count}} 条</span>

2、分页实现

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    //配置
    //初始size
    $scope.count = 0;
    //与后台的size对应,每页显示条数
    $scope.p_pernum = 10;
    //变量
    //与后台的page对应,从第一页开始,后台需要减1
    $scope.p_current = 1;
    $scope.p_all_page =0;
    $scope.pages = [];
    $scope._get = function(page,size,callback){
        $http.get("/xxx/userpage?page="+page+"&size="+size).then(function(res){
            $scope.count=res.data.count;
            $scope.names=res.data.data;
            $scope.p_current = page;
            $scope.p_all_page =Math.ceil($scope.count/$scope.p_pernum);
            reloadPno();
            callback();
        },function errorCallback(result) {
            toastr.error(result.status+",您没有足够的权限!");
            window.location='/';
        });
    };
    //初始化数据显示
    $scope._get($scope.p_current,$scope.p_pernum,function(){});
    //首页
    $scope.p_index = function(){
        $scope.load_page(1);
    };
    //尾页
    $scope.p_last = function(){
        $scope.load_page($scope.p_all_page);
    };
    //加载某一页
    $scope.load_page = function(page){
        $scope._get(page,$scope.p_pernum,function(){ });
    };
    //初始化页码
    var reloadPno = function(){
        $scope.pages=calculateIndexes($scope.p_current,$scope.p_all_page,8);
    };
    //分页算法
    var calculateIndexes = function (current, length, displayLength) {
        var indexes = [];
        var start = Math.round(current - displayLength / 2);
        var end = Math.round(current + displayLength / 2);
        if (start <= 1) {
            start = 1;
            end = start + displayLength - 1;
            if (end >= length - 1) {
                end = length - 1;
            }
        }
        if (end >= length - 1) {
            end = length;
            start = end - displayLength + 1;
            if (start <= 1) {
                start = 1;
            }
        }
        for (var i = start; i <= end; i++) {
            indexes.push(i);
        }
        return indexes;
    };
});
转自网络,地址忘了copy了,sorry

AngularJS controller外部调用$scope更新数据源

这个其实很简单,还是年轻吧,吭呲了一下午,也算弄出来了。

//加载表格数据
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("/teddyuser/list")
        .then(function (result) {
            //数据源
            $scope.names = result.data.data;
        },function errorCallback(result) {
            toastr.error(result.status+",您没有足够的权限!");
            window.location='/';
        });

    //新增按钮事件
    $('#addUser').click(function () {
        $("#addUserLabel").text("新增用户");
        $('#addUserModal').modal();
        //先解绑点击事件,避免多次提交
        $('#userBtn').unbind('click').click(function () {
            var data=$('#userform').serialize();
            var jsonData = fromToJson("userform");
            if(verifyFun(jsonData)){
                $.ajax({
                    type : "get",  //使用提交的方法 post、get
                    url : "/xxx/xxx",   //提交的地址
                    data:data,
                    async : false,   //配置是否异步操作
                    dataType:"json",//返回数据类型的格式
                    success:function (result) {
                        console.log(result);
                        if(teddy.requestOk(result)){
                            $('#addUserModal').modal('hide');
                            $http.get("/xxx/list").then(function (resultData) {
                                //更新数据源,这下表格会自动刷新
                                $scope.names = resultData.data.data;
                            });
                                toastr.success(result.info);
                        }else{
                            toastr.warning(result.info);
                        }
                    },
                    error:function (result) {
                        toastr.error(result.status+",您没有足够的权限!");
                    }
                });
            }
        });

    });

});

//外部更新数据
function updUser(data) {
    //这些是将数据赋值给弹出的modal
    var id = data.eq(0).text().trim();
    var cname = data.eq(1).text().trim();
    var username = data.eq(2).text().trim();
    var email = data.eq(3).text().trim();
    var isadmin = data.eq(4).text().trim();
    //外部获取的关键代码
    var appElement = document.querySelector('[ng-controller=customersCtrl]');//获得绑定controllerdom节点
    var $scope = angular.element(appElement).scope(); //获得$scope对象
    $('#updUserModal').modal();
    $('#updUserModal').on('shown.bs.modal', function () {
        var modal = $(this);  //get modal itself
        modal.find('#id').val(id);
        modal.find('#updcname').val(cname);
        modal.find('#updusername').val(username);
        modal.find('#updemail').val(email);
        if (isadmin == "是") {
            document.getElementById('isad').checked = true;
        } else {
            document.getElementById('notad').checked = true;
        }
    });
    $('#updUserBtn').unbind('click').click(function () {
        var data=$('#form_user').serialize();
        var jsonData = fromToJson("form_user");
        if(verifyFun(jsonData)){
            $.ajax({
                type : "get",  //使用提交的方法 post、get
                url : "/teddyuser/updateuser",   //提交的地址
                data:data,
                async : false,   //配置是否异步操作
                dataType:"json",//返回数据类型的格式
                success:function (result) {
                    if(teddy.requestOk(result)){
                        $('#updUserModal').modal('hide');
                        toastr.success(result.info);
                        //成功后,用jQuery的get方法来返回数据,注意数据返回的格式,更新数据源,这里需要添加                                 $scope.$apply(); 来执行数据源的刷新,表格自动刷新。。。
                        $.getJSON("/teddyuser/list",function (resultData){
                            $scope.names = resultData.data;
                            $scope.$apply();
                        });
                    }else{
                        toastr.error(result.info);
                    }
                },
                error:function (result) {
                    toastr.error(result.status+",您没有足够的权限!");
                }
            });
        }

    });


}

//删除部门
function delUser(id) {
    console.log(id);
    $('#id').val(id);//给会话中的隐藏属性URL赋值
    $('#delUserModel').modal();
    var appElement = document.querySelector('[ng-controller=customersCtrl]');//获得绑定controllerdom节点
    var $scope = angular.element(appElement).scope(); //获得$scope对象
    $('#confirmModal').unbind('click').click(function () {
        $.ajax({
            type : "get",  //使用提交的方法 post、get
            url : "/teddyuser/deleteUser/"+id,   //提交的地址
            async : false,   //配置是否异步操作
            dataType:"json",//返回数据类型的格式
            success:function (result) {
                if(teddy.requestOk(result)){
                    $('#delUserModel').modal('hide');
                    toastr.success(result.info);
                    $.getJSON("/teddyuser/list",function (resultData){
                        $scope.names = resultData.data;
                        $scope.$apply();
                    });
                }else{
                    toastr.warning(result.info);
                }
            },
            error:function (result) {
                toastr.error(result.status+",您没有足够的权限!");
            }
        });
    });
}

也不知道这样的方法是否是正确的,但也是吭吭吭一下午弄出来的,记录一下。

AngularJS 表格异步加载数据

我这里使用的是bootstrap modal弹出添加框。
其实只需让数据源变化,然后再获取一下数据源就可以了。

app.controller('customersCtrl', function($scope, $http) {
    $http.get("/xxx/list")  //请求地址
        .then(function (result) {
            //数据源
            $scope.names = result.data.data;
        });
    //新增按钮事件
    $('#addUser').click(function () {
        $("#addUserLabel").text("新增用户");
        $('#addUserModal').modal();
        //这里用unbind现解绑事件
        $('#userBtn').unbind('click').click(function () {
            var data=$('#userform').serialize();
                $.ajax({
                    type : "get",  //使用提交的方法 post、get
                    url : "/teddyuser/addUser",   //提交的地址
                    data:data,
                    async : false,   //配置是否异步操作
                    dataType:"json",//返回数据类型的格式
                    success:function (result) {
                        console.log(result);
                        if(teddy.requestOk(result)){
                            $('#addUserModal').modal('hide');
                            //再次请求数据
                            $http.get("/xxx/list").then(function (resultData) {
                                //使数据源发生改变,这时表格会自动重新加载
                                $scope.names = resultData.data.data;
                            }),
                                toastr.success(result.info);
                        }else{
                            toastr.warning(result.info);
                        }
                    }
                });
        });

AngularJS数字转为对应的中文(0、1转男、女等等)

//加载表格数据

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $http.get("/user/list") //数据接口
        .then(function (result) {
            console.log(result);
            $scope.names = result.data.data;
            //关键代码,定义对应的文字
            $scope.getAdmin = function(isadmin) {
                if (isadmin == 0)
                    return "否";
                if (isadmin == 1)
                    return "是";
            };
        });
});

Html 中的表格数据显示

   <td width="15%" class="text-center" >
       {{getAdmin(x.isadmin)}}
   </td>

CentOS7-mysql 5.7 安装

1、配置YUM源

# 下载mysql源安装包shell> wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm
# 安装mysql源shell> yum localinstall mysql57-community-release-el7-8.noarch.rpm

2、安装MySQL

shell> yum install mysql-community-server

3、启动MySQL服务

shell> systemctl start mysqld

查看MySQL的启动状态
shell> systemctl status mysqld

4、开机启动

shell> systemctl enable mysqld
shell> systemctl daemon-reload

5、修改root默认密码

shell> grep 'temporary password' /var/log/mysqld.log

这个可以看到初始的密码,我们需要修改为自己想要的。

shell> mysql -uroot -p

然后输入上面的密码,连接上mysql

mysql> set password for 'root'@'localhost'=password('MyNewPass4!'); 

注意: mysql5.7默认安装了密码安全检查插件(validate_password),默认密码检查策略要求密码必须包含:大小写字母、数字和特殊符号,并且长度不能少于8位。

修改密码策略

在/etc/my.cnf文件添加validate_password_policy配置,指定密码策略

选择0(LOW),1(MEDIUM),2(STRONG)
validate_password_policy=0

如果不需要密码策略,添加my.cnf文件中添加如下配置禁用即可:

validate_password = off

重新启动mysql服务使配置生效:

systemctl restart mysqld

6、添加远程登录用户

mysql> GRANT ALL PRIVILEGES ON . TO ‘用户名’@’%’ IDENTIFIED BY ‘密码’ WITH GRANT OPTION;

    mysql> GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '123456' WITH GRANT OPTION;

mac VMware Fusion 设置cent os7 静态ip

1、物理机(mac)

终端输入:
vi /Library/Preferences/VMware\ Fusion/vmnet8/dhcpd.conf

记录相关信息
range 172.16.106.128 172.16.106.254 为虚拟机可设置的ip端
netmask 255.255.255.0 子网掩码
option routers 172.16.106.2 网关

2、虚拟机设置


用VMware 设置网络适配器的模式为NAT模式
接下来在虚拟机中设置,先用ifconfig查看当前的信息

主要记住ens33这个东西,你的可能不一样。
然后 vi /etc/sysconfig/network-scripts/ifcfg-ens33
记住将ens33修改成你的

按照图中配置后
Esc : wq 保存后
执行service network restart重启网络即可完成设置。
这时就可以ping通物理机了,也可以用相关的shell工具连接虚拟机。

centos7 初次设置ip

第一次安装后我们输入 ifconfig 命令,ens33中的 inet 就是ip值,现在发现ip的值并不存在

接下来,我们输入

vi /etc/sysconfig/network-scripts/ifcfg-ens33


我们将最后一行的 ONBOOT=no 修改为 ONBOOT=yes,按i 插入修改


改完之后,esc ,然后:qw 保存退出
重启网络

sudo service network restart


然后再次输入ifconfig 查看IP

这时就有了,哈哈哈