后台用户管理首页及数据展示

build.gradle

@@ -11,7 +11,7 @@ subprojects {
     sourceCompatibility = 1.8
 
     repositories {
-        mavenLocal()
+        /*mavenLocal()*/
 
         jcenter()
         maven { url "http://113.105.74.141:8081/artifactory/libs-release" }

sso-manage-console-web/src/components/user/UserHome.vue

@@ -1,15 +1,281 @@
 <template>
-  <div class="hello">
-    <h1>{{ msg }}123</h1>
+  <div>
+    <div class="x-container">
+      <div class="container">
+        <div class="row">
+          <div class="x-content-wrap clearfix">
+            <div class="col-sm-12 col-md-9 x-content">
+              <div class="nav nav-tabs x-nav-tabs hidden-xs">
+                <h2 class="btn-group">
+								<span class="btn btn-lg x-btn-search" @click="showSearch = !showSearch"><i class="fa fa-search"></i>
+									用户</span>
+                  <div class="dropdown-menu" id="searchlist" style="padding: 15px; width: 240px; display: block;" v-if="showSearch" @click.native="closeSearchDialog($event)">
+                    <form>
+                      <div class="form-group">
+                        <label>姓名</label>
+                        <input type="text" class="form-control" name="name" placeholder="输入姓名"
+                               v-model="pageParams.name">
+                      </div>
+                      <div class="form-group">
+                        <label>手机号</label>
+                        <input type="text" class="form-control" name="mobile" placeholder="输入手机号"
+                               v-model="pageParams.phone">
+                      </div>
+                      <div class="form-group">
+                        <div>
+                          <label>分页设置</label>
+                        </div>
+                        <label class="radio-inline">
+                          <input type="radio" name="pageSize" value="20" v-model.number="pageParams.size"> 20
+                        </label>
+                        <label class="radio-inline">
+                          <input type="radio" name="pageSize" value="50" v-model.number="pageParams.size"> 50
+                        </label>
+                        <label class="radio-inline">
+                          <input type="radio" name="pageSize" value="100" v-model.number="pageParams.size"> 100
+                        </label>
+                      </div>
+                      <button class="btn btn-default btn-block btn-search" type="button" @click="searchUserInfo()">搜索</button>
+                    </form>
+                  </div>
+                </h2>
+              </div>
+              <!-- 列表 start -->
+              <div class="x-mod x-list x-list-2x x-data-list-wrap">
+                <div class="x-mod-body">
+                  <div class="x-data-list" v-if="userList.length > 0">
+                    <div class="x-item" v-for="user in userList">
+                      <div class="x-icon"><i class="fa fa-user"></i></div>
+                      <p>
+                        <a class="x-title x-editor-trigger" href="javascript:void(0)"
+                           data-mobile="  0756-3610188  " data-email="headcon001@headcon.cn"
+                           v-text="user.realName || '姓名'">姓名</a>
+                      </p>
+                      <div class="x-text-muted" v-text="user.mobile">0756-3610188</div>
+                    </div>
+                  </div>
+                  <div class="x-empty" v-if="userList.length === 0">
+                    <i class="fa fa-coffee"></i>
+                    <p>这里很干净！</p>
+                  </div>
+                </div>
+                <!-- pagination start -->
+                <div class="x-mod-footer">
+                  <div class="text-center" v-if="userList.length > 0">
+                    <!-- 0 < page <= 8 -->
+                    <ul class="pagination pull-right" v-if="showFirstKindPageNumbersBar">
+                      <li v-if="pageParams.page > 1"><a @click="jumpPage(pageParams.page - 1)">上一页</a></li>
+                      <li :class="{active: 1 === pageParams.page}"><a role="page" @click="jumpPage(1)">1</a></li>
+                      <li v-for="num in numbersOnePage" :class="{active: num === pageParams.page}"><a role="page" @click="jumpPage(num)">{{num}}</a></li>
+                      <li v-if="totalPages > 8"><a>...</a></li>
+                      <li v-if="totalPages > 8"><a v-text="totalPages" @click="jumpPage(totalPages)"></a></li>
+                      <li v-if="pageParams.page < totalPages"><a @click="jumpPage(pageParams.page + 1)">下一页</a></li>
+                    </ul>
+                    <!-- 8 < page <= (totalPages - totalPages % 8) -->
+                    <ul class="pagination pull-right" v-if="showSecondKindPageNumbersBar">
+                      <li v-if="pageParams.page > 1"><a @click="jumpPage(pageParams.page - 1)">上一页</a></li>
+                      <li><a role="page" @click="jumpPage(1)">1</a></li>
+                      <li><a>...</a></li>
+                      <li v-for="num in numbersOnePage" :class="{active: num === pageParams.page}"><a role="page" @click="jumpPage(num)">{{num}}</a></li>
+                      <li><a>...</a></li>
+                      <li><a role="page" @click="jumpPage(totalPages)">{{totalPages}}</a></li>
+                      <li v-if="pageParams.page < totalPages"><a @click="jumpPage(pageParams.page + 1)">下一页</a></li>
+                    </ul>
+                    <!-- (totalPages - totalPages % 8) < page <= totalPages -->
+                    <ul class="pagination pull-right" v-if="showThirdKindPageNumbersBar">
+                      <li v-if="pageParams.page > 1"><a @click="jumpPage(pageParams.page - 1)">上一页</a></li>
+                      <li><a role="page" @click="jumpPage(1)">1</a></li>
+                      <li><a>...</a></li>
+                      <li v-for="num in numbersOnePage" :class="{active: num === pageParams.page}"><a role="page" @click="jumpPage(num)">{{num}}</a></li>
+                      <!--<li><a role="page">{{totalPages}}</a></li>-->
+                      <li v-if="pageParams.page < totalPages"><a @click="jumpPage(pageParams.page + 1)">下一页</a></li>
+                    </ul>
+                  </div>
+                </div>
+                <!-- pagination end -->
+              </div>
+              <!-- 列表 end -->
+            </div>
+
+            <!-- 侧边统计栏 start-->
+            <div class="col-sm-12 col-md-3 x-side-bar hidden-xs hidden-sm">
+              <!-- 开通应用统计 -->
+              <div class="x-mod text-justify" id="userAppCount">
+                <div class="x-mod-head">
+                  <h4>统计</h4>
+                </div>
+                <div class="x-mod-body">
+                  <div class="x-progress-wrap">
+                    <div class="x-progress-title">全部<span class="pull-right">12397</span></div>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-success" role="progressbar"
+                           aria-valuenow="12397" aria-valuemin="0" aria-valuemax="12397"
+                           style="width: 100%"><span class="sr-only"></span></div>
+                    </div>
+                  </div>
+                  <div class="x-progress-wrap">
+                    <div class="x-progress-title">优软平台<span class="pull-right">9287</span></div>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-info" role="progressbar"
+                           aria-valuenow="9287" aria-valuemin="0" aria-valuemax="12397"
+                           style="width: 75%"><span class="sr-only"></span></div>
+                    </div>
+                  </div>
+                  <div class="x-progress-wrap">
+                    <div class="x-progress-title">优软商城<span class="pull-right">9225</span></div>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-info" role="progressbar"
+                           aria-valuenow="9225" aria-valuemin="0" aria-valuemax="12397"
+                           style="width: 74%"><span class="sr-only"></span></div>
+                    </div>
+                  </div>
+                  <div class="x-progress-wrap">
+                    <div class="x-progress-title">UU互联<span class="pull-right">8192</span></div>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-info" role="progressbar"
+                           aria-valuenow="8192" aria-valuemin="0" aria-valuemax="12397"
+                           style="width: 66%"><span class="sr-only"></span></div>
+                    </div>
+                  </div>
+                  <div class="x-progress-wrap">
+                    <div class="x-progress-title">优软UAS<span class="pull-right">2257</span></div>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-danger" role="progressbar"
+                           aria-valuenow="2257" aria-valuemin="0" aria-valuemax="12397"
+                           style="width: 18%"><span class="sr-only"></span></div>
+                    </div>
+                  </div>
+                  <div class="x-progress-wrap">
+                    <div class="x-progress-title">SAAS服务<span class="pull-right">225</span></div>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-danger" role="progressbar"
+                           aria-valuenow="225" aria-valuemin="0" aria-valuemax="12397"
+                           style="width: 2%"><span class="sr-only"></span></div>
+                    </div>
+                  </div>
+                  <div class="x-progress-wrap">
+                    <div class="x-progress-title">优软众创<span class="pull-right">2</span></div>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-danger" role="progressbar"
+                           aria-valuenow="2" aria-valuemin="0" aria-valuemax="12397"
+                           style="width: 0%"><span class="sr-only"></span></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import _ from 'lodash'
+import axios from '@/assets/js/axios'
+
 export default {
   name: 'AppHome',
   data () {
     return {
-      msg: '用户管理'
+      pageParams: {
+        page: 1,
+        size: 20,
+        name: '',
+        phone: ''
+      },
+      showSearch: false,
+      userList: [],
+      totalPages: 1,
+      numberPage: 1
+    }
+  },
+  computed: {
+    lastPageNumber () {
+      return this.totalPages % 8 !== 0 ? this.totalPages - this.totalPages % 8 : this.totalPages - 8
+    },
+    showFirstKindPageNumbersBar () {
+      if (this.totalPages <= 8) {
+        return true
+      }
+      return this.pageParams.page > 0 && this.pageParams.page <= 8
+    },
+    showSecondKindPageNumbersBar () {
+      if (this.totalPages <= 16) {
+        return false
+      }
+      return this.pageParams.page > 8 && this.pageParams.page <= this.lastPageNumber
+    },
+    showThirdKindPageNumbersBar () {
+      if (this.totalPages <= 8) {
+        return false
+      }
+      return this.pageParams.page > this.lastPageNumber && this.pageParams.page <= this.totalPages
+    },
+    numbersOnePage () {
+      const page = this.pageParams.page - 1
+
+      if (this.pageParams.page > 0 && this.pageParams.page <= 8) {
+        const max = this.totalPages > 8 ? 9 : this.totalPages + 1
+        return _.range(2, max)
+      }
+      if (this.pageParams.page > 8 && this.pageParams.page <= this.lastPageNumber) {
+        const min = page - page % 8
+        return _.range(min + 1, min + 1 + 8)
+      }
+      if (this.pageParams.page > this.lastPageNumber && this.pageParams.page <= this.totalPages) {
+        const min = page - page % 8
+        return _.range(min + 1, this.totalPages + 1)
+      }
+    }
+  },
+  created () {
+    this.fetchData()
+  },
+  watch: {
+    '$route': 'fetchData'
+  },
+  methods: {
+    fetchData () {
+      this.loadUserList()
+    },
+    loadUserList () {
+      const params = _.defaultsDeep({}, this.pageParams)
+      params.page = params.page - 1
+
+      const success = page => {
+        this.userList = page.content || []
+        this.totalPages = page.totalPages
+      }
+      const error = response => {
+        console.log('error', response)
+      }
+
+      axios.get('/api/user//showUserByPagination', { params }).then(success).catch(
+        error)
+    },
+    closeSearchDialog (event) {
+      console.log(event)
+    },
+    searchUserInfo () {
+      this.loadUserList()
+
+      this.showSearch = false
+      this.pageParams.name = ''
+      this.pageParams.phone = ''
+    },
+    jumpPage (page) {
+      console.log('page', page)
+      if (!page || page <= 0) {
+        this.pageParams.page = 1
+      } else if (page > this.totalPages) {
+        this.pageParams.page = this.totalPages
+      } else {
+        this.pageParams.page = page
+      }
+
+      this.loadUserList()
     }
   }
 }
@@ -17,18 +283,5 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
+
 </style>

sso-manage-console/src/main/java/com/uas/sso/sso/backend/api/UserController.java

@@ -1,28 +0,0 @@
-package com.uas.sso.sso.backend.api;
-
-import com.uas.sso.entity.User;
-import com.uas.sso.sso.backend.service.UserService;
-import java.util.List;
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.http.MediaType;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RequestMethod;
-import org.springframework.web.bind.annotation.RestController;
-
-@RestController
-@RequestMapping(path = "/api/v1/user")
-public class UserController {
-
-    private final UserService userService;
-
-    @Autowired
-    public UserController(UserService userService) {
-        this.userService = userService;
-    }
-
-    @RequestMapping(method = RequestMethod.GET, path = "//showAllUser",
-            produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
-    public List<User> showAllUsers() {
-        return userService.showAllUsers();
-    }
-}

sso-manage-console/src/main/java/com/uas/sso/sso/backend/api/UserManageController.java

@@ -0,0 +1,38 @@
+package com.uas.sso.sso.backend.api;
+
+import com.uas.sso.entity.User;
+import com.uas.sso.sso.backend.service.UserService;
+import com.uas.sso.sso.backend.support.ResultBean;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.data.domain.Pageable;
+import org.springframework.http.MediaType;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestMethod;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.RestController;
+
+/**
+ * Api interface implementations for managing user.
+ *
+ * @author huxz
+ */
+@RestController
+@RequestMapping(path = "/api/user")
+public class UserManageController {
+
+    private final UserService userService;
+
+    @Autowired
+    public UserManageController(UserService userService) {
+        this.userService = userService;
+    }
+
+    @RequestMapping(method = RequestMethod.GET, path = "//showUserByPagination",
+            produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
+    public ResultBean<org.springframework.data.domain.Page<User>> showUserByPagination(Pageable page,
+            @RequestParam(required = false) String name,
+            @RequestParam(required = false) String phone) {
+        // Controller中的Pageable类型参数默认根据查询参数 page 和 size 注入并实例化
+        return new ResultBean<>(userService.showUserByPagination(page, name, phone));
+    }
+}

sso-manage-console/src/main/java/com/uas/sso/sso/backend/service/UserService.java

@@ -2,6 +2,8 @@ package com.uas.sso.sso.backend.service;
 
 import com.uas.sso.entity.User;
 import java.util.List;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
 
 /**
  * Abstract class for operations of user when admin operates.
@@ -11,4 +13,6 @@ import java.util.List;
 public interface UserService {
 
     List<User> showAllUsers();
+
+    Page<User> showUserByPagination(Pageable page, String name, String phone);
 }

sso-manage-console/src/main/java/com/uas/sso/sso/backend/service/impl/UserServiceImpl.java

@@ -3,11 +3,16 @@ package com.uas.sso.sso.backend.service.impl;
 import com.uas.sso.dao.UserDao;
 import com.uas.sso.entity.User;
 import com.uas.sso.sso.backend.service.UserService;
+import java.util.ArrayList;
 import java.util.Collections;
 import java.util.List;
+import javax.persistence.criteria.Predicate;
 import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.data.domain.Page;
+import org.springframework.data.domain.Pageable;
 import org.springframework.stereotype.Service;
 import org.springframework.util.CollectionUtils;
+import org.springframework.util.StringUtils;
 
 /**
  * An implementations of {@code UserService}.
@@ -33,4 +38,29 @@ public class UserServiceImpl implements UserService {
         }
         return all;
     }
+
+    @Override
+    public Page<User> showUserByPagination(final Pageable page, String name, String phone) {
+
+        return userDao.findAll((root, query, builder) -> {
+            List<Predicate> predicates = new ArrayList<>();
+            if (!StringUtils.isEmpty(name)) {
+                Predicate predicate = builder.like(root.get("realName"), "%" + name + "%");
+                predicates.add(predicate);
+            }
+
+            if (!StringUtils.isEmpty(phone)) {
+                Predicate predicate = builder.like(root.get("mobile"), phone + "%");
+                predicates.add(predicate);
+            }
+
+            predicates.removeAll(Collections.singletonList(null));
+
+            Predicate[] array = new Predicate[predicates.size()];
+            predicates.toArray(array);
+            Predicate predicate = builder.and(array);
+            query.where(predicate);
+            return null;
+        }, page);
+    }
 }

sso-manage-console/src/main/java/com/uas/sso/sso/backend/support/ResultBean.java

@@ -1,5 +1,8 @@
 package com.uas.sso.sso.backend.support;
 
+import com.fasterxml.jackson.annotation.JsonInclude;
+import com.fasterxml.jackson.annotation.JsonInclude.Include;
+
 /**
  * Unified Response Date format.
  *
@@ -7,6 +10,7 @@ package com.uas.sso.sso.backend.support;
  *   the type of response data
  * @author huxz
  */
+@JsonInclude(Include.NON_NULL)
 @SuppressWarnings("unused")
 public class ResultBean<T> {