Vue小事例

Posted 2020-12-28 skzxcwebblogs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue小事例相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="ZH-cn">

var vm = new Vue({
el: "#container",
data: {
name: "",
password: "",
loginData: ‘‘
},
mounted: function() {
this.$nextTick(function() {
if(localStorage.loginUrseData) {
console.log(JSON.parse(localStorage.getItem(‘loginUrseData‘)));
}
})
},
methods: {
//获取json 数据
denglv: function() {
var url = "http://localhost:8080/pro_Servers/users/login/" + encodeURIComponent(vm.name) + "/" + encodeURIComponent(vm.password);
var obj = {
"Name": vm.name,
"Password": vm.password
}

if(!obj.Name) {
layer.msg(‘请填写昵称！‘);
return
} else if(!obj.Password) {
layer.msg(‘请填写密码！‘);
return
}
console.log(obj);

$.ajax({
type: "POST",
url: url,
data: obj,
success: function(res) {
if(res.status == ‘ok‘) {
layer.msg(‘登录成功！‘);
vm.loginData = res.t;
vm.saveUser();
setTimeout(function() {
window.open(‘index.html‘, ‘_self‘);
}, 1500);
} else {
layer.msg(‘登录失败！‘);
}
},
error: function() {
layer.msg(‘登录失败！‘);
}
});
},
saveUser: function() {
//本地存储数据
localStorage.setItem(‘loginUrseData‘, JSON.stringify(vm.loginData));
}
}
});
</script>
</body>

</html>

主页：

<!DOCTYPE html>
<html lang="ZH-cn">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>首页</title>
<link rel="stylesheet" href="Plugins/layui/css/layui.css">
<style type="text/css">
html,
body {
min-height: 100vh;
overflow: hidden;
}

.container {
min-height: 100vh;
position: relative;
left: 0;
top: 0;
box-sizing: border-box;
}

.container .indexContDiv {
min-height: 100vh;
/*CSS3弹性盒子*/
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}

.container .indexContBg {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: url(img/indexBG.jpg) no-repeat center center;
background-size: cover;
z-index: -1;
}

.container .indexTit {
font-size: 18px;
line-height: 18px;
color: #FFF;
position: absolute;
top: 20px;
left: 23px;
}

.container .indexP {
font-size: 18px;
line-height: 18px;
color: #FFF;
position: absolute;
top: 20px;
right: 23px;
}

.container .indexP>span {
margin-left: 15px;
cursor: pointer;
}

.container .indexP>span:last-child:hover {
color: #AAA;
}

.container .indexHead {
font-size: 75px;
font-family: ‘STHupo‘, ‘Hiragino Sans GB‘, ‘Microsoft Yahei UI‘, ‘Microsoft Yahei‘, ‘微软雅黑‘;
line-height: 75px;
color: #FFF;
letter-spacing: 5px;
position: relative;
top: -10px;
}

.container .indexSearch {
position: relative;
top: 70px;
}

.container .indexSearch>input {
float: left;
width: 626px;
height: 55px;
color: #333;
font-size: 24px;
padding-left: 20px;
border: none;
}
/*placeholder样式*/

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #CCCCCC;
font-size: 1.4rem;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
color: #CCCCCC;
font-size: 1.4rem;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
color: #CCCCCC;
font-size: 1.4rem;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #CCCCCC;
font-size: 1.4rem;
}

.container .indexSearch>span {
display: inline-block;
width: 127px;
height: 55px;
line-height: 55px;
font-size: 18px;
color: #FFF;
text-align: center;
background-color: #00b86b;
cursor: pointer;
}

.container .indexSearch>span:hover {
background-color: #00cc77;
}

.container .indexModel {
width: 1100px;
height: 250px;
position: relative;
top: 140px;
/*CSS3弹性盒子*/
display: -ms-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
-webkit-justify-content: space-around;
justify-content: space-around;
}

.container .indexModel div {
width: 200px;
height: 180px;
padding: 10px;
text-align: center;
border-radius: 6px;
background-color: #FFF;
opacity: 0.8;
cursor: pointer;
}

.container .indexModel div:hover {
box-shadow: 5px 5px 45px 2px #ccc;
}

.container .indexModel div>img {
width: 100px;
height: 100px;
}

.container .indexModel div>p {
font-size: 20px;
line-height: 16px;
color: #000;
letter-spacing: 5px;
position: relative;
top: 30px;
}

.container .indexModel div:hover img {
position: relative;
top: -3px;
}

.container .indexModel div:hover p {
color: #00cc77;
}

.indexP .indexSpan01 {
color: #00CC77;
}

.indexP .indexSpan02 {
color: #00ff95;
}

.indexP .indexSpan03 {
color: #EA2000;
}

.echartsDiv {
width: 280px;
height: 342px;
border-radius: 6px;
background-color: #FFF;
opacity: 0.8;
position: absolute;
top: 50px;
left: 23px;
}

.echartsData {
width: 95%;
height: 100%;
margin: 0 auto;
}
</style>
</head>

<body>
<div id="container" class="container">
<div class="indexContBg"></div>
<div class="indexContDiv">
<span class="indexTit">小区物业后台管理系统</span>
<p class="indexP">
<span class="indexSpan01" v-if=‘loginData‘ v-text="‘欢迎管理员：‘+loginData.name"></span>
<span class="indexSpan02" v-if=‘!loginData‘ @click="login">登录</span>
<span class="indexSpan03" v-if=‘loginData‘ @click="tuichu">退出</span>
</p>

<div id="echartsDiv" class="echartsDiv">
<div id="echartsData" class="echartsData"></div>
</div>
<h1 class="indexHead">连接每个家的故事</h1>
<div class="indexSearch">
<input type="text" id="owner" maxlength="18" placeholder="按照准确的业主姓名查询" v-model="ownerName" />
<span @click="searchOwner">查询业主</span>
</div>
<div class="indexModel">
<a href="model/ownerData/ownerList.html">
<div class="modelDiv03">
<img src="img/userData.png" />
<p>业主信息</p>
</div>
</a>
<a href="model/propMoney/propMoneyList.html" v-if="propModel">
<div class="modelDiv01">
<img src="img/userPay.png" />
<p>物业缴费</p>
</div>
</a>
<a href="model/equRepair/equRepairList.html" v-if="repModel">
<div class="modelDiv02">
<img src="img/equRepair.png" />
<p>设备报修</p>
</div>
</a>
<a href="model/adminPerm/adminList.html" v-if="adminModel">
<div class="modelDiv04">
<img src="img/adminPerm.png" />
<p>权限管理</p>
</div>
</a>
</div>
</div>
</div>

if(vm.loginData.per[item].id == 10001) {
vm.repModel = true; //维修模块权限
}

if(vm.loginData.per[item].id == 10002) {
vm.adminModel = true; //管理模块权限
}
}
}
},
//获取缴费列表
propList: function() {
var url = "http://localhost:8080/pro_Servers/charge/";
$.ajax({
type: "GET",
url: url,
success: function(res) {
if(res.status == ‘ok‘) {
for(var i = 0; i < res.infos.length; i++) {
vm.propListData = vm.propListData + (res.infos[i].chargeMoney - 0);
}
if(vm.propListData != 0 && vm.repListData != 0) {
echarsData();
}
} else {
vm.propListData = [];
layer.msg(‘暂无数据！‘);
}
},
error: function() {
layer.msg(‘列表获取失败！‘);
}
});
},
//获取报修列表
repairList: function() {
var url = "http://localhost:8080/pro_Servers/repair/";
$.ajax({
type: "GET",
url: url,
success: function(res) {
console.log(res);
if(res.status == ‘ok‘) {
for(var i = 0; i < res.infos.length; i++) {
vm.repListData = vm.repListData + (res.infos[i].repairTime - 0);
}
if(vm.propListData != 0 && vm.repListData != 0) {
echarsData();
}
} else {
vm.repListData = ‘‘;
layer.msg(‘暂无数据！‘);
}
},
error: function() {
layer.msg(‘列表获取失败！‘);
}
});
},
//退出
tuichu: function() {
localStorage.setItem(‘loginUrseData‘, ‘‘);
vm.loginData = ‘‘;
vm.isLogin();
},
//登录
login: function() {
window.open(‘login.html‘, ‘_self‘);
},
//判断是否登录
isLogin: function() {
if(vm.loginData == ‘‘) {
window.open(‘login.html‘, ‘_self‘);
}
},
//查找业主
searchOwner: function() {
window.open(‘model/ownerData/ownerList.html?ownerName=‘ + vm.ownerName, ‘_self‘);
}
}
});

</html>

<!DOCTYPE html>

<html>

<body>
<div id="container" class="kit-login">
<div class="kit-login-bg"></div>
<div class="kit-login-wapper">
<h1 class="kit-login-slogan">欢迎使用 <br>小区物业后台管理系统</h1>
<div class="kit-login-form">
<h4 class="kit-login-title">用户注册</h4>
<form class="layui-form">
<div class="kit-login-row">
<div class="kit-login-col">
<i class="layui-icon"></i>
<span class="kit-login-input">
<input type="text" maxlength="12" placeholder="请输入账号" v-model="name"/>
</span>
</div>
<div class="kit-login-col"></div>
</div>
<div class="kit-login-row">
<div class="kit-login-col">
<i class="layui-icon"></i>
<span class="kit-login-input">
<input type="tel" maxlength="11" placeholder="请输入手机号" v-model="phone"/>
</span>
</div>
<div class="kit-login-col"></div>
</div>
<div class="kit-login-row">
<div class="kit-login-col">
<i class="layui-icon"></i>
<span class="kit-login-input">
<input type="email" maxlength="18" placeholder="请输入邮箱" v-model="email"/>
</span>
</div>
<div class="kit-login-col"></div>
</div>
<div class="kit-login-row">
<div class="kit-login-col">
<i class="layui-icon"></i>
<span class="kit-login-input">
<input type="password" maxlength="12" placeholder="请输入密码" v-model="password"/>
</span>
</div>
<div class="kit-login-col"></div>
</div>
<div class="kit-login-row">
<button class="layui-btn kit-login-btn" lay-submit type="button" @click="zhuce">注册</button>
</div>
<div class="kit-login-row" style="margin-bottom:0;">
<a href="login.html" style="color: rgb(153, 153, 153); text-decoration: none; font-size: 13px;" id="login">已有账号去登录</a>
</div>
</form>
</div>
</div>
</div>
<script src="Plugins/jquery-2.1.0.js"></script>
<script src="Plugins/layui/layui.js"></script>
<script src="Plugins/vue.js"></script>
<script>
layui.use([‘form‘, ‘layedit‘, ‘laydate‘], function() {
var form = layui.form,
layer = layui.layer,
layedit = layui.layedit,
laydate = layui.laydate;
});

var vm = new Vue({
el: "#container",
data: {
name: "",
password: "",
email: "",
phone: ""
},
mounted: function() {
this.$nextTick(function() {
//
})
},
methods: {
//获取json 数据
zhuce: function() {
var url = "http://localhost:8080/pro_Servers/users/";
var obj = {
"Name": vm.name,
"Password": vm.password,
"Email": vm.email,
"Phone": vm.phone
}

if(!obj.Name) {
layer.msg(‘请填写昵称！‘);
return;
} else if(!obj.Password) {
layer.msg(‘请填写密码！‘);
return;
} else if(!obj.Phone) {
layer.msg(‘请填写手机号！‘);
return;
} else if(!obj.Email) {
layer.msg(‘请填写邮箱！‘);
return;
}
console.log(obj);

$.ajax({
type: "POST",
url: url,
data: obj,
success: function(res) {
if(res == ‘插入成功‘) {
layer.msg(‘注册成功！‘);
setTimeout(function() {
window.open(‘login.html‘, ‘_self‘);
}, 2000);
} else {
layer.msg(‘注册失败！‘);
}
}
});
}
}
});
</script>
</body>

</html>

以上是关于Vue小事例的主要内容，如果未能解决你的问题，请参考以下文章

「微信小程序」｜开发常用事例

Vue3.X的细碎小事（持续更新）

axios与vue的配合使用事例，实现缓存和重复加载的控制