登录接口
public function Login(){
$input = $this->getinput->json();
$result = $this->db->where('user_name', $input['user_name'])->where('user_pass', $input['user_pass'])->get('user')->first_row('array');
if ($result) {
echo json_encode(array(
'code' => 0,
'msg' => '登录成功',
'data' => $result
));
return;
}else{
echo json_encode(array(
'code' => -100,
'msg' => '登录失败'
));
return;
}
}
界面登录连接口,判断相关内容
login(user_name){
let self = this;
if (self.user_name === '') {
self.$message.error('请填写姓名');
} else if (self.user_pass === '') {
self.$message.error('请填写密码');
}else {
self.post_on = true;
axios.post('<?php echo base_url('Api/Login') ?>', {user_name:self.user_name,user_pass:self.user_pass}).then(function (response) {
console.log(response);
if (response.data.code === 0) {
self.$message.success('登录成功');
window.localStorage.setItem('is_login',1);
document.getElementById('close_btn').click();
window.location.reload();
window.location.href="<?= base_url('Center/?lang=' . $_SESSION['lang'] . '&id=') ?>" + user_name
} else {
self.$message.error('登录失败');
}
}).catch(function (error) {
console.log(error);
});
}
},
退出登录
logOut(){
window.localStorage.setItem('is_login',0);
window.location.reload();
window.location.href="<?= base_url('Index') ?>"
},
因为需要未登录是不能访问个人中心页面,登录后,登录和注册按钮隐藏,显示个人中心和注销以及首页,所以运用v-show显示
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="<?php echo site_url('index') ?>" style="text-align: center;"><?=lang('header1')?></a></li>
<li v-show="is_login==0"><a href="javascript:showDialog()" style="text-align: center;"><?=lang('header2')?></a></li>
<li v-show="is_login==0"><a href="<?php echo site_url('Reg') ?>" style="text-align: center;"><?=lang('header3')?></a></li>
<li v-show="is_login==1"><a @click="logOut(user_name)" style="text-align: center;"><?=lang('header5')?></a></li>
<li v-show="is_login==1"><a href="<?php echo site_url('Center') ?>" @click="center(user_name)" style="text-align: center;"><?=lang('header4')?></a></li>
</ul>
</div>
样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="aStar Fashion Template Project">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<title>钛合电影上传</title>
<link href="<?php echo base_url('resource/css/bootstrap.min.css') ?>"
rel="stylesheet" type="text/css">
<link href="<?php echo base_url('resource/css/swiper.min.css') ?>"
rel="stylesheet" type="text/css">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="<?php echo base_url('resource/js/jquery.js') ?>"></script>
<script src="<?php echo base_url('resource/js/bootstrap.min.js') ?>"></script>
<script src="<?php echo base_url('resource/js/swiper.min.js') ?>"></script>
<script src="http://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="<?php echo base_url('resource/js/axios.min.js') ?>"></script>
<style>
html body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: absolute;
}
a {
text-decoration: none;
}
ul li {
d list-style: none;
padding: 0;
margin: 0;
}
a:hover {
text-decoration: none;
}
.layout_head_box {
width: 100%;
position: absolute;
z-index: 6;
}
.layout_head_box /deep/ .navbar-collapse ul li a {
color: white;
}
.layout_head_box /deep/ .navbar-collapse ul li a:hover {
color: white;
font-weight: bold;
}
/*登陆样式*/
.ui-dialog {
width: 450px;
height: auto;
display: none;
position: absolute;
z-index: 9000;
top: 0px;
left: 0px;
pointer-events: auto;
/*background: url('*/<?php //echo base_url('resource/banner3.jpg') ?>/*') no-repeat center #fff;*/
background-size: cover;
border: 10px solid #3c82bd;
border-radius: 0.3rem;
outline: 0;
color: #fff;
}
.ui-dialog a {
text-decoration: none;
color: white
}
.ui-dialog a:hover {
color: wheat;
}
.ui-dialog-title {
height: 48px;
line-height: 48px;
padding: 0px 20px;
color: #fff;
font-size: 18px;
font-weight: 700;
background: #3c82bd;
cursor: move;
user-select: none;
}
.ui-dialog-closebutton {
width: 16px;
height: 16px;
display: block;
position: absolute;
top: 12px;
right: 20px;
background: url('<?php echo base_url('resource/close_def.png') ?>') no-repeat;
cursor: pointer;
}
.ui-dialog-closebutton:hover {
background: url('<?php echo base_url('resource/close_hov.png') ?>');
}
.ui-dialog-content {
padding: 15px 20px;
background: rgba(0, 0, 0, 0.46);
}
.ui-dialog-pt15 {
padding-top: 15px;
}
.ui-dialog-l40 {
height: 40px;
line-height: 40px;
text-align: right;
margin-top: 10px;
color: white;
font-weight: bold;
}
.ui-dialog-input {
width: 100%;
height: 40px;
margin: 0px;
/*padding:0px;*/
/*border: 1px solid #d5d5d5;*/
/*font-size: 16px;color: #c1c1c1;*/
text-indent: 25px;
outline: none;
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 14px;
line-height: 1.5;
color: #111;
background-color: #fff;
border: 1px solid #ced4da;
border-radius: 0.25rem;
}
/*.ui-dialog-input-username{*/
/* background:url('*/
<?php //echo base_url('resource/input_username.png') ?> /*') no-repeat 2px;;*/
/*}*/
/**/
/*.ui-dialog-input-password{*/
/* background:url('*/
<?php //echo base_url('resource/input_password.png') ?> /*') no-repeat 2px;;*/
/*}*/
.ui-dialog-submit {
width: 100%;
height: 50px;
background: #cd2029;
border: none;
font-size: 16px;
color: #fff;
outline: none;
text-decoration: none;
display: block;
text-align: center;
line-height: 50px;
font-weight: 600;
}
.ui-dialog-submit:hover {
background: #b01f28;
}
.ui-mask {
width: 100%;
height: 100%;
background: #000;
position: absolute;
top: 0px;
height: 0px;
z-index: 8000;
opacity: 0.4;
filter: Alpha(opacity=40);
}
@media (max-width: 768px) {
.ui-dialog{
width:96%;
margin:0 auto;
left:0;
}
.layout_head_box /deep/ .navbar-toggle {
float: left;
margin-left: 15px;
}
.layout_head_box /deep/ .navbar-collapse {
padding: 0;
background: white;
}
.layout_head_box /deep/ .navbar-collapse ul li a {
color: black;
}
.layout_head_box /deep/ .navbar-collapse ul li a:hover {
color: black;
font-weight: bold;
}
.layout_head_box /deep/ .navbar-nav {
margin: 7.5px;
}
}
</style>
</head>
<body>
<div id="layout">
<div class="layout_head_box">
<nav class="navbar navbar-default" role="navigation" style="background:rgba(0,0,0,0);border:none;">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="icon-bar" style="background:#fff"></span>
<span class="icon-bar" style="background:#fff"></span>
<span class="icon-bar" style="background:#fff"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="<?php echo site_url('index') ?>" style="text-align: center;"><?=lang('header1')?></a></li>
<li v-show="is_login==0"><a href="javascript:showDialog()" style="text-align: center;"><?=lang('header2')?></a></li>
<li v-show="is_login==0"><a href="<?php echo site_url('Reg') ?>" style="text-align: center;"><?=lang('header3')?></a></li>
<li v-show="is_login==1"><a @click="logOut(user_name)" style="text-align: center;"><?=lang('header5')?></a></li>
<li v-show="is_login==1"><a href="<?php echo site_url('Center') ?>" @click="center(user_name)" style="text-align: center;"><?=lang('header4')?></a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="ui-mask" id="mask" onselectstart="return false"></div>
<div class="ui-dialog" id="dialogMove" onselectstart='return false;'>
<div class="ui-dialog-title" id="dialogDrag" onselectstart="return false;">
<?=lang('login')?>
<a class="ui-dialog-closebutton" href="javascript:hideDialog();" id="close_btn"></a>
</div>
<div class="ui-dialog-content">
<div class="ui-dialog-l40 ui-dialog-pt15">
<input v-model="user_name" class="ui-dialog-input ui-dialog-input-username" type="input" placeholder="<?=lang('account')?>"/>
</div>
<div class="ui-dialog-l40 ui-dialog-pt15">
<input v-model="user_pass" class="ui-dialog-input ui-dialog-input-password" type="password" placeholder="<?=lang('password')?>"/>
</div>
<div class="ui-dialog-l40"></div>
<div>
<div class="ui-dialog-submit" @click="login(user_name)"><?=lang('login')?></div>
</div>
<div class="ui-dialog-l40"></div>
</div>
</div>
</div>
<script>
new Vue({
el: '#layout',
beforeCreate: function () {
},
data() {
return {
user_name:'',
user_pass:'',
is_login:window.localStorage.getItem('is_login')==undefined?0:window.localStorage.getItem('is_login')
}
},
created: function () {
},
mounted: function () {
},
methods: {
logOut(){
window.localStorage.setItem('is_login',0);
window.location.reload();
window.location.href="<?= base_url('Index') ?>"
},
//center(){
// window.location.href="<?//= base_url('Center/?lang=' . $_SESSION['lang'] . '&id=') ?>//" + user_name
//},
login(user_name){
let self = this;
if (self.user_name === '') {
self.$message.error('请填写姓名');
} else if (self.user_pass === '') {
self.$message.error('请填写密码');
}else {
self.post_on = true;
axios.post('<?php echo base_url('Api/Login') ?>', {user_name:self.user_name,user_pass:self.user_pass}).then(function (response) {
console.log(response);
if (response.data.code === 0) {
self.$message.success('登录成功');
window.localStorage.setItem('is_login',1);
document.getElementById('close_btn').click();
window.location.reload();
window.location.href="<?= base_url('Center/?lang=' . $_SESSION['lang'] . '&id=') ?>" + user_name
} else {
self.$message.error('登录失败');
}
}).catch(function (error) {
console.log(error);
});
}
},
}
})
</script>
<?= $content_for_layout ?>
<script>
// 登陆js
var dialogInstace, onMoveStartId; // 用于记录当前可拖拽的对象
// 获取元素对象
function g(id) {
return document.getElementById(id);
}
// 自动居中元素(el = Element)
function autoCenter(el) {
var bodyW = document.documentElement.clientWidth;
var bodyH = document.documentElement.clientHeight;
var elW = el.offsetWidth;
var elH = el.offsetHeight;
el.style.left = (bodyW - elW) / 2 + 'px';
el.style.top = (bodyH - elH) / 2 + 'px';
}
// 自动扩展元素到全部显示区域
function fillToBody(el) {
el.style.width = document.documentElement.clientWidth + 'px';
el.style.height = document.documentElement.clientHeight + 'px';
}
// Dialog实例化的方法
function Dialog(dragId, moveId) {
var instace = {};
instace.dragElement = g(dragId); // 允许执行 拖拽操作 的元素
instace.moveElement = g(moveId); // 拖拽操作时,移动的元素
instace.mouseOffsetLeft = 0; // 拖拽操作时,移动元素的起始 X 点
instace.mouseOffsetTop = 0; // 拖拽操作时,移动元素的起始 Y 点
instace.dragElement.addEventListener('mousedown', function (e) {
var e = e || window.event;
dialogInstace = instace;
instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft;
instace.mouseOffsetTop = e.pageY - instace.moveElement.offsetTop;
// instace.moveElement.style.zIndex = zIndex ++;
})
return instace;
}
// 在页面中侦听 鼠标弹起事件
document.onmouseup = function (e) {
dialogInstace = false;
clearInterval(onMoveStartId);
}
// 在页面中侦听 鼠标移动事件
document.onmousemove = function (e) {
var e = e || window.event;
var instace = dialogInstace;
if (instace) {
var maxX = document.documentElement.clientWidth - instace.moveElement.offsetWidth;
var maxY = document.documentElement.clientHeight - instace.moveElement.offsetHeight;
instace.moveElement.style.left = Math.min(Math.max((e.pageX - instace.mouseOffsetLeft), 0), maxX) + "px";
instace.moveElement.style.top = Math.min(Math.max((e.pageY - instace.mouseOffsetTop), 0), maxY) + "px";
}
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
};
// 拖拽对话框实例对象
Dialog('dialogDrag', 'dialogMove');
function onMoveStart() {
}
// 重新调整对话框的位置和遮罩,并且展现
function showDialog() {
g('dialogMove').style.display = 'block';
g('mask').style.display = 'block';
autoCenter(g('dialogMove'));
fillToBody(g('mask'));
}
// 关闭对话框
function hideDialog() {
g('dialogMove').style.display = 'none';
g('mask').style.display = 'none';
}
</script>
</body>
</html>