增加shiro层配置，增加springboot 可以post 获取静态资源功能

bigsys-auth/bigsys-auth-project/src/main/java/com/bigsys/auth/project/config/MyRealm.java

+package com.bigsys.auth.project.config;
+
+import org.apache.shiro.authc.AuthenticationException;
+import org.apache.shiro.authc.AuthenticationInfo;
+import org.apache.shiro.authc.AuthenticationToken;
+import org.apache.shiro.authc.SimpleAuthenticationInfo;
+import org.apache.shiro.authz.AuthorizationInfo;
+import org.apache.shiro.realm.AuthenticatingRealm;
+import org.apache.shiro.realm.AuthorizingRealm;
+import org.apache.shiro.subject.PrincipalCollection;
+import org.springframework.stereotype.Component;
+
+import javax.annotation.Resource;
+
+@Component("myRealm")
+public class MyRealm extends AuthorizingRealm{
+
+    @Override
+    protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principalCollection) {
+        return null;
+    }
+
+    @Override
+    protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken authenticationToken) throws AuthenticationException {
+        SimpleAuthenticationInfo info = new SimpleAuthenticationInfo(authenticationToken.getPrincipal(), authenticationToken.getCredentials(), this.getClass().getName());
+        return info;
+    }
+}

bigsys-auth/bigsys-auth-project/src/main/java/com/bigsys/auth/project/config/ShiroConfig.java

 package com.bigsys.auth.project.config;
 
+import org.apache.shiro.authc.AuthenticationToken;
 import org.apache.shiro.mgt.SecurityManager;
+import org.apache.shiro.realm.Realm;
 import org.apache.shiro.spring.web.ShiroFilterFactoryBean;
+import org.apache.shiro.subject.Subject;
+import org.apache.shiro.web.filter.authc.FormAuthenticationFilter;
 import org.apache.shiro.web.mgt.DefaultWebSecurityManager;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 
+import javax.annotation.Resource;
+import javax.servlet.ServletRequest;
+import javax.servlet.ServletResponse;
 import java.util.LinkedHashMap;
 import java.util.Map;
 
@@ -14,6 +21,10 @@ import java.util.Map;
  */
 @Configuration
 public class ShiroConfig {
+
+    @Resource
+    private Realm myRealm;
+
     /**
      * ShiroFilterFactoryBean 处理拦截资源文件问题。
      * 注意：单独一个ShiroFilterFactoryBean配置是或报错的，以为在
@@ -33,12 +44,13 @@ public class ShiroConfig {
         // 如果不设置默认会自动寻找Web工程根目录下的"/login.jsp"页面
         shiroFilterFactoryBean.setLoginUrl("/login.html");
         // 登录成功后要跳转的链接
-        shiroFilterFactoryBean.setSuccessUrl("/index");
+        shiroFilterFactoryBean.setSuccessUrl("/loginRes");
         // 未授权界面;
         shiroFilterFactoryBean.setUnauthorizedUrl("/403");
 
         // 拦截器.
         Map<String, String> filterChainDefinitionMap = new LinkedHashMap<String, String>();
+        filterChainDefinitionMap.put("/hello", "anon");
         filterChainDefinitionMap.put("/**", "anon");
 //        // 配置不会被拦截的链接 顺序判断
 //        filterChainDefinitionMap.put("/static/**", "anon");
@@ -62,10 +74,20 @@ public class ShiroConfig {
     public SecurityManager securityManager() {
         DefaultWebSecurityManager securityManager = new DefaultWebSecurityManager();
         // 设置realm.
-//        securityManager.setRealm(myShiroRealm());
+        securityManager.setRealm(myRealm);
         return securityManager;
     }
 
+    @Bean
+    public FormAuthenticationFilter authc() {
+        return new FormAuthenticationFilter() {
+            @Override
+            protected boolean onLoginSuccess(AuthenticationToken token, Subject subject, ServletRequest request, ServletResponse response) throws Exception {
+                return false;
+            }
+        };
+    }
+
 //    /**
 //     * 身份认证realm; (这个需要自己写，账号密码校验；权限等)
 //     *

bigsys-auth/bigsys-auth-project/src/main/java/com/bigsys/auth/project/config/SpringInit.java

+package com.bigsys.auth.project.config;
+
+import org.springframework.beans.BeansException;
+import org.springframework.context.ApplicationContext;
+import org.springframework.context.ApplicationContextAware;
+import org.springframework.stereotype.Component;
+import org.springframework.web.HttpRequestHandler;
+import org.springframework.web.servlet.HandlerMapping;
+import org.springframework.web.servlet.handler.SimpleUrlHandlerMapping;
+import org.springframework.web.servlet.resource.ResourceHttpRequestHandler;
+
+import javax.annotation.PostConstruct;
+import javax.annotation.Resource;
+import java.util.Map;
+
+@Component
+public class SpringInit implements ApplicationContextAware{
+
+    @Resource
+    private ApplicationContext applicationContext;
+
+    @PostConstruct
+    public void addSupportType() {
+        SimpleUrlHandlerMapping handlerMapping = applicationContext.getBean("resourceHandlerMapping", SimpleUrlHandlerMapping.class);
+        Map<String, ResourceHttpRequestHandler> urlMap = (Map<String, ResourceHttpRequestHandler>) handlerMapping.getUrlMap();
+        for (Map.Entry<String, ResourceHttpRequestHandler> entry : urlMap.entrySet()) {
+            entry.getValue().setSupportedMethods("GET", "POST");
+        }
+
+    }
+
+    @Override
+    public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
+        this.applicationContext = applicationContext;
+    }
+}

bigsys-auth/bigsys-auth-project/src/main/java/com/bigsys/auth/project/controller/LoginController.java

+package com.bigsys.auth.project.controller;
+
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+@RestController
+public class LoginController {
+    @RequestMapping(value = "/loginRes")
+    public boolean loginRes () {
+        return true;
+    }
+}

bigsys-auth/bigsys-auth-project/src/main/java/com/bigsys/auth/project/controller/MenuController.java

+package com.bigsys.auth.project.controller;
+
+import com.bigsys.auth.project.model.Menu;
+import com.bigsys.auth.project.util.response.BSResponse;
+import com.fasterxml.jackson.databind.JavaType;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.io.IOException;
+import java.util.ArrayList;
+import java.util.List;
+
+@RestController
+@RequestMapping(value = "/menu")
+public class MenuController {
+
+    String menu = "[{\"name\":\"aa\",\"hasSub\":true,\"menus\":[{\"name\":\"bb\",\"link\":\"/index\",\"hasSub\":false}]},{\"name\":\"aa\",\"link\":\"/\",\"hasSub\":false},{\"name\":\"aa\",\"link\":\"/\",\"hasSub\":false},{\"name\":\"系统管理\",\"link\":\"/\",\"hasSub\":true,\"menus\":[{\"name\":\"角色管理\",\"link\":\"/role/index\",\"hasSub\":false},{\"name\":\"权限管理\",\"link\":\"/auth/index\",\"hasSub\":false},{\"name\":\"用户管理\",\"link\":\"/user/index\",\"hasSub\":false}]}]";
+
+    @RequestMapping(value = "/getMenus")
+    public BSResponse getMenus(String userId) {
+        JavaType javaType = new ObjectMapper().getTypeFactory().constructParametricType(ArrayList.class, Menu.class);
+        List<Menu> menus = null;
+        try {
+            menus = new ObjectMapper().readValue(menu, javaType);
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+        return BSResponse.ok(menus);
+    }
+
+}

bigsys-auth/bigsys-auth-project/src/main/java/com/bigsys/auth/project/controller/RoleController.java

+package com.bigsys.auth.project.controller;
+
+import org.springframework.web.bind.annotation.RestController;
+
+@RestController
+public class RoleController {
+}

bigsys-auth/bigsys-auth-project/src/main/java/com/bigsys/auth/project/controller/UserController.java

@@ -3,10 +3,15 @@ package com.bigsys.auth.project.controller;
 import com.bigsys.auth.project.db.model.User;
 import com.bigsys.auth.project.service.UserService;
 import com.bigsys.auth.project.util.response.BSResponse;
+import com.github.pagehelper.Page;
+import com.github.pagehelper.PageInfo;
+import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
+import org.thymeleaf.util.StringUtils;
 
 import javax.annotation.Resource;
+import javax.naming.Name;
 
 @RestController
 @RequestMapping(value = "/user")
@@ -15,8 +20,14 @@ public class UserController {
     @Resource
     private UserService userService;
 
-    @RequestMapping(value = "/addOrUpdateUser")
-    public BSResponse addOrUpdateUser(User model) {
+    @RequestMapping(value = "/delete")
+    public BSResponse delete(String id) {
+        userService.deleteByPrimaryKey(id);
+        return BSResponse.ok();
+    }
+
+    @RequestMapping(value = "/addOrUpdate")
+    public BSResponse addOrUpdateUser(@RequestBody User model) {
         userService.addOrUpdate(model);
         return BSResponse.ok();
     }
@@ -27,4 +38,17 @@ public class UserController {
         return BSResponse.ok(user);
     }
 
+    @RequestMapping(value = "/page")
+    public PageInfo<User> page (User model, PageInfo<User> page) {
+        return userService.selectByExampleAndPage(page, (example, criteria) -> {
+            if (!StringUtils.isEmpty(model.getName())) {
+                criteria.andNameLike("%" + model.getName() + "%");
+            }
+            if (!StringUtils.isEmpty(model.getPhone())) {
+                criteria.andPhoneLike("%" + model.getPhone() + "%");
+            }
+            example.setOrderByClause("updateTime desc");
+        });
+    }
+
 }

bigsys-auth/bigsys-auth-project/src/main/java/com/bigsys/auth/project/db/model/User.java

 package com.bigsys.auth.project.db.model;
 
+import com.fasterxml.jackson.annotation.JsonFormat;
+
 import java.util.Date;
 
 public class User {
@@ -11,8 +13,10 @@ public class User {
 
     private String phone;
 
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
     private Date createTime;
 
+    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
     private Date updateTime;
 
     public String getId() {

bigsys-auth/bigsys-auth-project/src/main/java/com/bigsys/auth/project/model/Menu.java

+package com.bigsys.auth.project.model;
+
+import java.util.List;
+
+public class Menu {
+    private String name;
+    private String link;
+    private boolean hasSub = false;
+    private List<Menu> menus;
+
+    public String getName() {
+        return name;
+    }
+
+    public void setName(String name) {
+        this.name = name;
+    }
+
+    public String getLink() {
+        return link;
+    }
+
+    public void setLink(String link) {
+        this.link = link;
+    }
+
+    public boolean isHasSub() {
+        return hasSub;
+    }
+
+    public void setHasSub(boolean hasSub) {
+        this.hasSub = hasSub;
+    }
+
+    public List<Menu> getMenus() {
+        return menus;
+    }
+
+    public void setMenus(List<Menu> menus) {
+        this.menus = menus;
+    }
+}

bigsys-auth/bigsys-auth-project/src/main/java/com/bigsys/auth/project/service/impl/UserServiceImpl.java

@@ -40,7 +40,7 @@ public class UserServiceImpl extends BaseServiceImpl<String, User, UserExample,
             model.setUpdateTime(new Date());
             userMapper.insert(model);
         } else {
-            userMapper.updateByPrimaryKey(model);
+            userMapper.updateByPrimaryKeySelective(model);
         }
     }
 

bigsys-auth/bigsys-auth-project/src/test/java/com/bigsys/auth/project/BigsysAuthSpringbootApplicationTests.java

@@ -20,7 +20,12 @@ public class BigsysAuthSpringbootApplicationTests {
 
 	@Test
 	public void contextLoads() {
-        System.out.println(userService.countByExample((example, criteria) -> {}));
+	    for (int i = 0; i < 100; i++) {
+	        User user = new User();
+	        user.setName("jkakdf");
+	        user.setPhone("faskdjfa");
+	        userService.addOrUpdate(user);
+        }
     }
 
 }

bigsys-auth/bigsys-auth-project/vue/config/index.js

@@ -31,7 +31,7 @@ module.exports = {
       "/api": {
         target: "http://localhost:9003",
         pathRewrite: {
-          "/api": "/bigsys-auth/api"
+          "/api": "/bigsys-auth"
         }
       }
     },

bigsys-auth/bigsys-auth-project/vue/package-lock.json

@@ -5209,8 +5209,7 @@
     "querystring": {
       "version": "0.2.0",
       "resolved": "http://registry.npm.taobao.org/querystring/download/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
-      "dev": true
+      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA="
     },
     "querystring-es3": {
       "version": "0.2.1",

bigsys-auth/bigsys-auth-project/vue/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "axios": "^0.16.2",
     "element-ui": "^1.4.3",
+    "querystring": "^0.2.0",
     "vue": "^2.4.2",
     "vue-router": "^2.7.0",
     "vuex": "^2.4.0"

bigsys-auth/bigsys-auth-project/vue/src/api/api.js

+/**
+ * @id=role
+ * @parentId=sys
+ * @icon=icon-list
+ * @name=角色管理
+ * @link=/auth/index
+ */
+export const USER_ADDORUPDATE = '/api/user/addOrUpdate'
+export const USER_PAGE = '/api/user/page'
+export const USER_DELETE = '/api/user/addUser'
+

bigsys-auth/bigsys-auth-project/vue/src/api/login.js

+import axios from 'axios'
+import querystring from 'querystring'
+
+export default {
+  login (data) {
+    return axios.post('/api/login.html', querystring.stringify(data))
+  }
+}

bigsys-auth/bigsys-auth-project/vue/src/api/user.js

+import axios from 'axios'
+import querystring from 'querystring'
+import {USER_ADDORUPDATE, USER_PAGE, USER_DELETE} from './api'
+
+export default {
+  addUser (data) {
+    return axios.post(USER_ADDORUPDATE, data)
+  },
+  page (filter) {
+    return axios.get(USER_PAGE + '?' + querystring.stringify(filter))
+  },
+  delete (id) {
+    return axios.get(USER_DELETE + '?id=' + id)
+  }
+}

bigsys-auth/bigsys-auth-project/vue/src/mock/menus.js

@@ -25,14 +25,19 @@ export default [
     link: '/',
     hasSub: true,
     menus: [
+      {
+        name: '角色管理',
+        link: '/sys/role',
+        hasSub: false
+      },
       {
         name: '权限管理',
-        link: '/auth/index',
+        link: '/sys/auth',
         hasSub: false
       },
       {
         name: '用户管理',
-        link: '/user/index',
+        link: '/sys/user',
         hasSub: false
       }
     ]

bigsys-auth/bigsys-auth-project/vue/src/mock/table.js

 export var thead = [{
-  prop: 'date',
-  label: '日期',
-  width: '180'
-}, {
   prop: 'name',
-  label: '名称',
+  label: '用户名',
   width: '180'
 }, {
-  prop: 'address',
-  label: '地址'
+  prop: 'phone',
+  label: '电话',
+  width: 'auto'
 }]
 export var inittdata = [{
-  date: '2016-05-04',
   name: '王小虎',
-  address: '上海市普陀区金沙江路 1517 弄'
+  phone: '上海市普陀区金沙江路 1517 弄'
 }, {
-  date: '2016-05-04',
   name: '王小虎',
-  address: '上海市普陀区金沙江路 1517 弄'
+  phone: '上海市普陀区金沙江路 1517 弄'
 }, {
-  date: '2016-05-01',
   name: '王小虎',
-  address: '上海市普陀区金沙江路 1519 弄'
+  phone: '上海市普陀区金沙江路 1519 弄'
 }, {
-  date: '2016-05-03',
   name: '王小虎',
-  address: '上海市普陀区金沙江路 1516 弄'
+  phone: '上海市普陀区金沙江路 1516 弄'
 }]

bigsys-auth/bigsys-auth-project/vue/src/router/index.js

@@ -9,6 +9,7 @@ import Layout from '../views/layout/Layout'
 import Login from '../views/Login'
 import MyTable from '../views/components/MyTable'
 import user from '../views/pages/user'
+import error404 from '../views/pages/404'
 
 /**
  * icon : the icon show in the sidebar
@@ -19,26 +20,41 @@ import user from '../views/pages/user'
  **/
 export const constantRouterMap = [
   {
-    path: '/auth',
+    path: '/sys',
     component: Layout,
     name: '权限管理',
+    redirect: '/404',
     children: [
-      {path: 'index', component: MyTable, name: '主页1'}
+      {path: 'auth', component: MyTable, name: '主页1'}
     ]
   }, {
-    path: '/user',
+    path: '/sys',
     component: Layout,
-    name: '权限',
+    redirect: '/404',
+    name: '用户管理',
     children: [
-      {path: 'index', component: user, name: '主页2'}
+      {path: 'user', component: user, name: '主页2'}
     ]
   }, {
     path: '/',
     component: Layout,
+    redirect: '/404',
     name: '主页',
     children: [
       {path: 'index', component: MyTable, name: '主页3'}
     ]
+  }, {
+    path: '/sys',
+    component: Layout,
+    redirect: '/404',
+    name: '角色',
+    children: [
+      {path: 'role', component: MyTable, name: '主页3'}
+    ]
+  }, {
+    path: '/404',
+    component: error404,
+    name: '404页面'
   }, {
     path: '/login',
     component: Login,

bigsys-auth/bigsys-auth-project/vue/src/store/index.js

@@ -3,13 +3,15 @@ import Vuex from 'vuex'
 import sidebar from './modules/sidebar'
 import users from './modules/users'
 import getters from './getter'
+import loginStore from './modules/login'
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
   modules: {
     sidebar,
-    users
+    users,
+    loginStore
   },
   getters
 })

bigsys-auth/bigsys-auth-project/vue/src/store/modules/login.js

+import loginapi from '../../api/login'
+
+const loginStore = {
+  state: {
+    isLogin: false
+  },
+  mutations: {
+    LOGIN (state, data) {
+      this.isLogin = true
+    }
+  },
+  actions: {
+    LOGIN ({ commit }, data) {
+      return new Promise((resolve, reject) => {
+        loginapi.login(data).then((response) => {
+          commit('LOGIN', response.data)
+          resolve()
+        }).catch((error) => {
+          reject(error)
+        })
+      })
+    }
+  }
+}
+
+export default loginStore

bigsys-auth/bigsys-auth-project/vue/src/store/modules/users.js

 import {inittdata} from '../../mock/table'
+import userapi from '../../api/user'
 
 const sidebar = {
   state: {
@@ -12,8 +13,29 @@ const sidebar = {
   actions: {
     ADD_USER ({ commit }, data) {
       return new Promise((resolve, reject) => {
-        commit('ADD_USER', data)
-        resolve()
+        userapi.addUser(data).then(function (response) {
+          resolve(response)
+        }).catch(function (error) {
+          reject(error)
+        })
+      })
+    },
+    GET_USER_PAGE ({ commit }, data) {
+      return new Promise((resolve, reject) => {
+        userapi.page(data).then(function (response) {
+          resolve(response.data)
+        }).catch(function (error) {
+          reject(error)
+        })
+      })
+    },
+    DELETE_USER ({ commit }, id) {
+      return new Promise((resolve, reject) => {
+        userapi.delete(id).then((response) => {
+          resolve(response.data)
+        }).catch((error) => {
+          reject(error)
+        })
       })
     }
   }

bigsys-auth/bigsys-auth-project/vue/src/views/Login.vue

@@ -57,14 +57,13 @@
         this.$refs.loginForm.validate(valid => {
           if (valid) {
             this.loading = true
-//            this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
-//              this.loading = false
-//              this.$router.push({ path: '/' })
-//              // this.showDialog = true
-//            }).catch(() => {
-//              this.loading = false
-//            })
-            this.$router.push({ path: '/' })
+            this.$store.dispatch('LOGIN', this.loginForm).then(() => {
+              this.loading = false
+              this.$router.push({ path: '/sys/user' })
+              // this.showDialog = true
+            }).catch(() => {
+              this.loading = false
+            })
           } else {
             console.log('error submit!!')
             return false

bigsys-auth/bigsys-auth-project/vue/src/views/components/MyTable.vue

 <template>
-  <el-table
-    :data="tdata"
-    stripe
-    style="width: 100%">
-    <el-table-column v-for="(item, index) in thead"
-      :prop="item.prop"
-      :label="item.label"
-      :width="item.width"
-      :key="index">
-    </el-table-column>
-  </el-table>
+  <div>
+    <div>
+      <div class="tb-filter">
+        <el-input placeholder="用户名" class="my-input" v-model="username">
+          <template slot="prepend">用户名:</template>
+        </el-input>
+        <el-input placeholder="电话" class="my-input" v-model="username">
+          <template slot="prepend">电话:</template>
+        </el-input>
+        <el-button type="primary" @click="search()">查询</el-button>
+        <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
+      </div>
+    </div>
+    <el-table
+      :data="tdata"
+      stripe
+      style="width: 100%">
+      <el-table-column prop="name"
+                       label="用户名"
+                       :width="180">
+      </el-table-column>
+      <el-table-column prop="phone"
+                       label="电话">
+      </el-table-column>
+    </el-table>
+    <div class="block" style="margin-top: 20px; text-align: center;">
+      <el-pagination
+        @size-change="change()"
+        @current-change="change()"
+        layout="prev, pager, next, total"
+        :page-size="pageSize"
+        :current-page.sync="pageNum"
+        :total="total">
+      </el-pagination>
+    </div>
+    <el-dialog title="新增用户" :visible.sync="dialogFormVisible">
+      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
+        <el-form-item label="用户名">
+          <el-input v-model="formLabelAlign.name"></el-input>
+        </el-form-item>
+        <el-form-item label="电话">
+          <el-input v-model="formLabelAlign.phone"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addUser()">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+
 </template>
 
+<style>
+  .tb-filter {
+    margin-bottom: 20px;
+  }
+  .my-input {
+    width: 200px;
+  }
+</style>
+
 <script>
   export default {
-    props: [
-      'thead',
-      'tdata'
-    ]
+    created () {
+      this.initData()
+    },
+    data () {
+      return {
+        pageNum: 1,
+        pageSize: 10,
+        total: 0,
+        tdata: [],
+        username: 'fds',
+        dialogFormVisible: false,
+        labelPosition: 'right',
+        formLabelAlign: {
+          name: '',
+          phone: ''
+        }
+      }
+    },
+    methods: {
+      initData () {
+        this.pageNum = 1
+        this.pageSize = 10
+        this.$store.dispatch('GET_USER_PAGE', {pageNum: this.pageNum, pageSize: this.pageSize}).then((data) => {
+          this.tdata = data.list
+          this.total = data.total
+        })
+      },
+      change () {
+        this.$store.dispatch('GET_USER_PAGE', {pageNum: this.pageNum, pageSize: this.pageSize}).then((data) => {
+          this.tdata = data.list
+          this.total = data.total
+        })
+      },
+      addUser: function () {
+        this.dialogFormVisible = false
+        this.$store.dispatch('ADD_USER', this.formLabelAlign).then(() => {
+          this.initData()
+        }).catch(() => {
+        })
+      }
+    }
   }
 </script>

bigsys-auth/bigsys-auth-project/vue/src/views/pages/404.vue

+<template>
+  <div>
+    <h1>对不起，没有该页面哦！^-^</h1>
+  </div>
+</template>

bigsys-auth/bigsys-auth-project/vue/src/views/pages/user.vue

@@ -2,35 +2,71 @@
   <div>
     <div>
       <div class="tb-filter">
-        <el-input placeholder="用户名" class="my-input" v-model="username">
+        <el-input placeholder="用户名" class="my-input" @blur="initData()" v-model="username">
           <template slot="prepend">用户名:</template>
         </el-input>
-        <el-input placeholder="电话" class="my-input" v-model="username">
+        <el-input placeholder="电话" class="my-input" @blur="initData()" v-model="phone">
           <template slot="prepend">电话:</template>
         </el-input>
-        <el-button type="primary" @click="search()">查询</el-button>
-        <el-button type="primary" @click="dialogFormVisible = true">新增</el-button>
+        <el-button type="primary" @click="initData()">查询</el-button>
+        <el-button type="primary" @click="addUser()">新增</el-button>
       </div>
     </div>
-    <my-table :thead="thead" :tdata="users"></my-table>
-    <el-dialog title="新增用户" :visible.sync="dialogFormVisible">
+    <el-table
+      :data="tdata"
+      stripe
+      style="width: 100%">
+      <el-table-column prop="name"
+                       label="用户名"
+                       :width="180">
+      </el-table-column>
+      <el-table-column prop="phone"
+                       label="电话"
+                       :width="180">
+      </el-table-column>
+      <el-table-column prop="createTime"
+                       label="创建时间"
+                       :width="180">
+      </el-table-column>
+      <el-table-column prop="updateTime"
+                       label="更新时间"
+                       :width="180">
+      </el-table-column>
+      <el-table-column prop="operate"
+                       label="操作">
+        <template scope="scope">
+          <el-button type="info" size="small" @click="modifyUser(scope.row)">编辑</el-button>
+          <el-button @click="deleteUser(scope.row.id)" type="danger" size="small">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="block" style="margin-top: 20px; text-align: center;">
+      <el-pagination
+        @size-change="change()"
+        @current-change="change()"
+        layout="prev, pager, next, total"
+        :page-size="pageSize"
+        :current-page.sync="pageNum"
+        :total="total">
+      </el-pagination>
+    </div>
+    <el-dialog :title="title" :visible.sync="dialogFormVisible">
       <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
-        <el-form-item label="日期">
-          <el-input v-model="formLabelAlign.date"></el-input>
-        </el-form-item>
-        <el-form-item label="名称">
+        <el-input v-model="formLabelAlign.id" type="hidden"></el-input>
+        <el-form-item label="用户名">
           <el-input v-model="formLabelAlign.name"></el-input>
         </el-form-item>
-        <el-form-item label="地址">
-          <el-input v-model="formLabelAlign.address" @key.enter="addUser()"></el-input>
+        <el-form-item label="电话">
+          <el-input v-model="formLabelAlign.phone" @keyup.enter.native="saveUser"></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取 消</el-button>
-        <el-button type="primary" @click="addUser()">确 定</el-button>
+        <el-button type="primary" @click="saveUser()">确 定</el-button>
       </div>
     </el-dialog>
   </div>
+
 </template>
 
 <style>
@@ -43,57 +79,78 @@
 </style>
 
 <script>
-  import MyTable from '../components/MyTable'
-  import {thead, inittdata} from '../../mock/table'
-  import { mapGetters } from 'vuex'
   export default {
-    components: {
-      MyTable
+    created () {
+      this.initData()
     },
     data () {
       return {
-        username: 'fds',
+        pageNum: 1,
+        pageSize: 10,
+        total: 0,
+        tdata: [],
+        username: '',
+        phone: '',
+        title: '新增用户',
         dialogFormVisible: false,
         labelPosition: 'right',
         formLabelAlign: {
-          date: '',
+          id: '',
           name: '',
-          address: ''
+          phone: ''
         }
       }
     },
-    computed: {
-      ...mapGetters(['users']),
-      thead () {
-        return thead
-      }
-    },
-    watch: {
-      username () {
-        var filterdata = []
-        if (!this.username) {
-          this.tdata = inittdata
-          return
-        }
-        inittdata.forEach((data, index) => {
-          if (data.name.indexOf(this.username) !== -1) {
-            filterdata.push(data)
-          }
-        })
-        this.tdata = filterdata
-      }
-    },
     methods: {
-      addUser: function () {
+      initData () {
+        console.log('初始化数据中。。。')
+        this.pageNum = 1
+        this.pageSize = 10
+        this.$store.dispatch('GET_USER_PAGE', {name: this.username, phone: this.phone, pageNum: this.pageNum, pageSize: this.pageSize}).then((data) => {
+          this.tdata = data.list
+          this.total = data.total
+        })
+      },
+      change () {
+        this.$store.dispatch('GET_USER_PAGE', {name: this.username, phone: this.phone, pageNum: this.pageNum, pageSize: this.pageSize}).then((data) => {
+          this.tdata = data.list
+          this.total = data.total
+        })
+      },
+      saveUser: function () {
         this.dialogFormVisible = false
         this.$store.dispatch('ADD_USER', this.formLabelAlign).then(() => {
+          this.initData()
+          this.formLabelAlign.id = ''
+          this.formLabelAlign.name = ''
+          this.formLabelAlign.phone = ''
         }).catch(() => {
         })
       },
-      search () {
-        alert('查询成功！')
+      addUser () {
+        this.title = '新增用户'
+        this.formLabelAlign.id = ''
+        this.formLabelAlign.name = ''
+        this.formLabelAlign.phone = ''
+        this.dialogFormVisible = true
+      },
+      modifyUser: function (user) {
+        this.title = '修改用户'
+        this.formLabelAlign.id = user.id
+        this.formLabelAlign.name = user.name
+        this.formLabelAlign.phone = user.phone
+        this.dialogFormVisible = true
+      },
+      deleteUser (id) {
+        this.$store.dispatch('DELETE_USER', id).then((response) => {
+          console.log('删除成功！')
+          this.initData()
+        })
+      },
+      handleClick (scope, id) {
+        console.log(scope)
+        console.log(id)
       }
     }
   }
-
 </script>