用户列表完成

朱兆平
src/App.vue
src/api/api.js
src/mock/mock.js
src/routes.js
src/views/Home.vue
src/views/Login.vue
src/views/nav1/Table.vue
static/login/New-jumbo.jpg
static/login/New-jumbo.mp4
static/login/New-jumbo.ogv
static/login/New-jumbo.webm
--- a/src/App.vue
查看文件 @3054981
+++ b/src/App.vue
查看文件 @3054981
 <template>
 	<div id="app">
-		<transition name="fade"
-		            mode="out-in">
+		<transition name="fade" mode="out-in">
 			<router-view></router-view>
 		</transition>
 	</div>
--- a/src/api/api.js
查看文件 @3054981
+++ b/src/api/api.js
查看文件 @3054981
 import axios from 'axios';
-let base = '';
-
-export const requestLogin = params => { return axios.post(`${base}/login`, params).then(res => res.data); };
+let base = 'http://127.0.0.1:7003';
+axios.defaults.baseURL = 'http://127.0.0.1:7003';
+
+export const requestLogin = params => {
+    return axios({
+        method: 'POST',
+        url: '/login',
+        data: params,
+        transformRequest: [function (data) {
+            // Do whatever you want to transform the data
+            let ret = ''
+            for (let it in data) {
+                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
+            }
+            console.log(ret)
+            return ret
+        }],
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+        }
+    })
+    // return axios.post(`${base}/login`, params).then(res => res.data);
+};
 export const getUserList = params => { return axios.get(`${base}/user/list`, { params: params }); };
-export const getUserListPage = params => { return axios.get(`${base}/user/listpage`, { params: params }); };
+export const getUserListPage = params => { return axios.get(`${base}/user/list`, { params: params }); };
 export const removeUser = params => { return axios.get(`${base}/user/remove`, { params: params }); };
--- a/src/mock/mock.js
查看文件 @3054981
+++ b/src/mock/mock.js
查看文件 @3054981
@@ -8,7 +8,7 @@ export default {
    * mock bootstrap
    */
   bootstrap() {
-    let mock = new MockAdapter(axios);
+    let mock = new MockAdapter();
     // mock success request
     mock.onGet('/success').reply(200, {
--- a/src/routes.js
查看文件 @3054981
+++ b/src/routes.js
查看文件 @3054981
@@ -31,7 +31,7 @@ let routes = [
         iconCls: 'el-icon-message',//图标样式class
         children: [
             { path: '/main', component: Main, name: '主页', hidden: false },
-            { path: '/table', component: Table, name: 'Table' },
+            { path: '/table', component: Table, name: '用户管理' },
             { path: '/form', component: Form, name: 'Form' },
             { path: '/user', component: user, name: '列表' },
         ]
--- a/src/views/Home.vue
查看文件 @3054981
+++ b/src/views/Home.vue
查看文件 @3054981
@@ -129,8 +129,8 @@
 			var user = sessionStorage.getItem('user');
 			if (user) {
 				user = JSON.parse(user);
-				this.sysUserName = user.name || '';
-				this.sysUserAvatar = user.avatar || '';
+				this.sysUserName = user.username || '';
+				this.sysUserAvatar = user.userface || '/static/images/faceDefault.jpg';
 			}
 		}
--- a/src/views/Login.vue
查看文件 @3054981
+++ b/src/views/Login.vue
查看文件 @3054981
 <template>
-  <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
+  <div>
+    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container" id="loginForm">
       <h3 class="title">系统登录</h3>
       <el-form-item prop="account">
         <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
@@ -9,10 +10,25 @@
       </el-form-item>
       <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
       <el-form-item style="width:100%;">
-      <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
+        <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining" :plain="true">登录</el-button>
         <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
       </el-form-item>
     </el-form>
+  <div class="homepage-hero-module">
+    <div class="video-container">
+      <div :style="fixStyle" class="filter"></div>
+      <video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay">
+        <source src="/static/login/New-jumbo.mp4" type="video/mp4"/>
+        浏览器不支持 video 标签，建议升级浏览器。
+        <!--<source src="/static/login/New-jumbo.webm" type="video/webm"/>-->
+        <!--浏览器不支持 video 标签，建议升级浏览器。-->
+      </video>
+      <div class="poster hidden" v-if="!vedioCanPlay">
+        <img :style="fixStyle" src="https://s2.best-wallpaper.net/wallpaper/2560x1600/1511/Airplane-passenger-airliner-flight-sea-lights-airport-evening_2560x1600.jpg" alt="">
+      </div>
+    </div>
+  </div>
+  </div>
 </template>
 <script>
@@ -21,6 +37,8 @@
   export default {
     data() {
       return {
+          vedioCanPlay: true,
+          fixStyle: '',
         logining: false,
         ruleForm2: {
           account: 'admin',
@@ -40,30 +58,45 @@
       };
     },
     methods: {
+        canplay() {
+            this.vedioCanPlay = true
+        },
       handleReset2() {
         this.$refs.ruleForm2.resetFields();
       },
-      handleSubmit2(ev) {
+        handleSubmit2: function (ev) {
             var _this = this;
             this.$refs.ruleForm2.validate((valid) => {
                 if (valid) {
                     //_this.$router.replace('/table');
                     this.logining = true;
                     //NProgress.start();
-            var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };
-            requestLogin(loginParams).then(data => {
+                    var loginParams = {username: this.ruleForm2.account, password: this.ruleForm2.checkPass};
+                    requestLogin(loginParams).then(res => {
                         this.logining = false;
                         //NProgress.done();
-              let { msg, code, user } = data;
-              if (code !== 200) {
+                        let status = res.status;
+                        let user = res.data.principal;
+                        let loginSuccess = res.data.authenticated;
+
+                        if (status !== 200) {
+                            let msg = "登录错误";
                             this.$message({
                                 message: msg,
-                  type: 'error'
+                                type: "error"
                             });
-              } else {
+                        } else if (loginSuccess) {
                             sessionStorage.setItem('user', JSON.stringify(user));
-                this.$router.push({ path: '/table' });
+                            this.$router.push({path: '/table'});
                         }
+                    }).catch(error => {
+                        let msg = error.message;
+                        this.$message({
+                            message: msg,
+                            type: "error"
+                        });
+                        this.logining = false;
+                        console.log(_this);
                     });
                 } else {
                     console.log('error submit!!');
@@ -71,12 +104,67 @@
                 }
             });
         }
+    },
+      mounted:function () {
+          window.onresize = () => {
+              const windowWidth = document.body.clientWidth
+              const windowHeight = document.body.clientHeight
+              const windowAspectRatio = windowHeight / windowWidth
+              let videoWidth
+              let videoHeight
+              if (windowAspectRatio < 0.5625) {
+                  videoWidth = windowWidth
+                  videoHeight = videoWidth * 0.5625
+                  this.fixStyle = {
+                      height: windowWidth * 0.5625 + 'px',
+                      width: windowWidth + 'px',
+                      'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
+                      'margin-left': 'initial'
+                  }
+              } else {
+                  videoHeight = windowHeight
+                  videoWidth = videoHeight / 0.5625
+                  this.fixStyle = {
+                      height: windowHeight + 'px',
+                      width: windowHeight / 0.5625 + 'px',
+                      'margin-left': (windowWidth - videoWidth) / 2 + 'px',
+                      'margin-bottom': 'initial'
+                  }
+              }
+          }
+          window.onresize()
       }
   }
 </script>
 <style lang="scss" scoped>
+  #loginForm{
+    filter:alpha(Opacity=90);
+    -moz-opacity:0.9;
+    opacity: 0.9;
+  }
+  .homepage-hero-module,
+  .video-container {
+    height: 100vh;
+    /*overflow: hidden;*/
+    position: absolute;
+    top:0px;
+    left: 0;
+    z-index: -1;
+  }
+
+  .video-container .poster img,
+  .video-container video {
+    z-index: 0;
+    position: absolute;
+  }
+
+  .video-container .filter {
+    z-index: 1;
+    position: absolute;
+    background: rgba(0, 0, 0, 0.4);
+  }
   .login-container {
     /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
     -webkit-border-radius: 5px;
--- a/src/views/nav1/Table.vue
查看文件 @3054981
+++ b/src/views/nav1/Table.vue
查看文件 @3054981
@@ -4,7 +4,10 @@
 		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
 			<el-form :inline="true" :model="filters">
 				<el-form-item>
-					<el-input v-model="filters.name" placeholder="姓名"></el-input>
+					<el-input v-model="filters.ext1" placeholder="姓名"></el-input>
+				</el-form-item>
+				<el-form-item>
+					<el-input v-model="filters.username" placeholder="账号"></el-input>
 				</el-form-item>
 				<el-form-item>
 					<el-button type="primary" v-on:click="getUsers">查询</el-button>
@@ -21,18 +24,24 @@
 			</el-table-column>
 			<el-table-column type="index" width="60">
 			</el-table-column>
-			<el-table-column prop="name" label="姓名" width="120" sortable>
+			<el-table-column prop="userId" label="ID" width="100" sortable>
+			</el-table-column>
+			<el-table-column prop="username" label="账号" width="120" sortable>
+			</el-table-column>
+			<el-table-column prop="ext1" label="姓名" width="120" sortable>
 			</el-table-column>
 			<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
 			</el-table-column>
-			<el-table-column prop="age" label="年龄" width="100" sortable>
+			<el-table-column prop="mobilephone" label="电话" width="125" sortable>
 			</el-table-column>
-			<el-table-column prop="birth" label="生日" width="120" sortable>
+			<el-table-column prop="creattime" label="创建时间" width="170" sortable>
 			</el-table-column>
-			<el-table-column prop="addr" label="地址" min-width="180" sortable>
+			<el-table-column prop="updatetime" label="更新时间" width="170" sortable>
+			</el-table-column>
+			<el-table-column prop="address" label="地址" min-width="180" sortable>
 			</el-table-column>
 			<el-table-column label="操作" width="150">
-				<template scope="scope">
+				<template slot-scope="scope">
 					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
 					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
 				</template>
@@ -42,30 +51,36 @@
 		<!--工具条-->
 		<el-col :span="24" class="toolbar">
 			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
-			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="20" :total="total" style="float:right;">
+			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="5" :total="total" style="float:right;">
 			</el-pagination>
 		</el-col>
 		<!--编辑界面-->
 		<el-dialog title="编辑" v-model="editFormVisible" :close-on-click-modal="false">
 			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
-				<el-form-item label="姓名" prop="name">
-					<el-input v-model="editForm.name" auto-complete="off"></el-input>
+				<el-form-item label="ID">
+					<span>{{editForm.userId}}</span>
+				</el-form-item>
+				<el-form-item label="姓名" prop="username">
+					<el-input v-model="editForm.username" auto-complete="off"></el-input>
+				</el-form-item>
+				<el-form-item label="密码" prop="password">
+					<el-input v-model="editForm.password" auto-complete="off" type="password"></el-input>
 				</el-form-item>
 				<el-form-item label="性别">
 					<el-radio-group v-model="editForm.sex">
-						<el-radio class="radio" :label="1">男</el-radio>
-						<el-radio class="radio" :label="0">女</el-radio>
+						<el-radio class="radio" label="1" >男</el-radio>
+						<el-radio class="radio" label="0" >女</el-radio>
 					</el-radio-group>
 				</el-form-item>
 				<el-form-item label="年龄">
 					<el-input-number v-model="editForm.age" :min="0" :max="200"></el-input-number>
 				</el-form-item>
 				<el-form-item label="生日">
-					<el-date-picker type="date" placeholder="选择日期" v-model="editForm.birth"></el-date-picker>
+					<el-date-picker type="date" placeholder="选择日期" v-model="editForm.creattime"></el-date-picker>
 				</el-form-item>
 				<el-form-item label="地址">
-					<el-input type="textarea" v-model="editForm.addr"></el-input>
+					<el-input type="textarea" v-model="editForm.address"></el-input>
 				</el-form-item>
 			</el-form>
 			<div slot="footer" class="dialog-footer">
@@ -117,11 +132,11 @@
 				},
 				users: [],
 				total: 0,
-				page: 1,
+                pageNum: 1,
 				listLoading: false,
 				sels: [],//列表选中列
-
-				editFormVisible: false,//编辑界面是否显示
+				//编辑界面是否显示
+				editFormVisible: false,
 				editLoading: false,
 				editFormRules: {
 					name: [
@@ -130,12 +145,13 @@
 				},
 				//编辑界面数据
 				editForm: {
-					id: 0,
-					name: '',
-					sex: -1,
+                    userId: 1,
+                    username: '',
+					password: '',
+                    sex: 1,
 					age: 0,
-					birth: '',
-					addr: ''
+                    creattime: '',
+                    address: ''
 				},
 				addFormVisible: false,//新增界面是否显示
@@ -162,20 +178,20 @@
 				return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
 			},
 			handleCurrentChange(val) {
-				this.page = val;
+				this.pageNum = val;
 				this.getUsers();
 			},
 			//获取用户列表
 			getUsers() {
 				let para = {
-					page: this.page,
+                    pageNum: this.pageNum,
 					name: this.filters.name
 				};
 				this.listLoading = true;
 				//NProgress.start();
 				getUserListPage(para).then((res) => {
 					this.total = res.data.total;
-					this.users = res.data.users;
+					this.users = res.data.list;
 					this.listLoading = false;
 					//NProgress.done();
 				});
@@ -201,7 +217,11 @@
 				});
 			},
-			//显示编辑界面
+            /**
+			 * 显示编辑界面
+             * @param index
+             * @param row 为这行的数据对象
+             */
 			handleEdit: function (index, row) {
 				this.editFormVisible = true;
 				this.editForm = Object.assign({}, row);
--- a/static/login/New-jumbo.jpg 0 → 100644
查看文件 @3054981
+++ b/static/login/New-jumbo.jpg 0 → 100644
查看文件 @3054981
--- a/static/login/New-jumbo.mp4 0 → 100644
查看文件 @3054981
+++ b/static/login/New-jumbo.mp4 0 → 100644
查看文件 @3054981
--- a/static/login/New-jumbo.ogv 0 → 100644
查看文件 @3054981
+++ b/static/login/New-jumbo.ogv 0 → 100644
查看文件 @3054981
--- a/static/login/New-jumbo.webm 0 → 100644
查看文件 @3054981
+++ b/static/login/New-jumbo.webm 0 → 100644
查看文件 @3054981