朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 30549815a0098baad724c4320268cf136fac76fc 1 个父辈 89145e52

用户列表完成

内嵌 并排对比
正在显示 11 个修改的文件 包含 172 行增加 和 45 行删除
<template>
<div id="app">
<transition name="fade"
mode="out-in">
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</div>
... ...
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 }); };
... ...
... ... @@ -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, {
... ...
... ... @@ -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: '列表' },
]
... ...
... ... @@ -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';
}
}
... ...
<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;
... ...
... ... @@ -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);
... ...
不能预览此文件类型
不能预览此文件类型
不能预览此文件类型