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小事例的更多相关文章

Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
一个基于ES6+webpack的vue小demo
上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...
一个基于ES5的vue小demo
由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...
Vue小项目二手书商城：（四）详情页和购物车（emit、prop、computed）
实现效果: 点击对应商品,对应的商品详情页出现,详情页里面还有“Add to cart”按钮和“×”退出按钮. 点击“Add to cart”可以将商品加入购物车,每件商品只能添加一次,如果把购物车的 ...
Vue小项目二手书商城：（三）前端渲染数据
实现内容: axios取到的数据在前端使用(父子组件各自应该怎么使用) 一.简单使用(在哪取在哪用) 1.在App.vue中script中加上data(data专属于当前组件,父子组件传参通过prop ...
Vue小项目二手书商城：（二）axios前后端数据交互
实现内容: 写路由接口(express) axios取数据一.写接口 1.我们要在前端取到后端的数据(之前写的data.json)可以用vue-resourse或者用axios,在vue2之后官方就 ...
Vue小项目二手书商城：（一）准备工作、组件和路由
本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件 ...
VUE小练习(按钮颜色，数组映射)
VUE小练习(按钮颜色,数组映射) ## 1.有红.黄.蓝三个按钮,以及一个200x200矩形框box, 点击不同的按钮,box的颜色会被切换成指定的颜色 ''' 解法一:我本来的思路,把三个按钮绑定 ...
vue小故事之父子(上下级)通信之父传子props
vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props 或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...

随机推荐

深入理解Java内存模型JMM与volatile关键字
深入理解Java内存模型JMM与volatile关键字多核并发缓存架构 Java内存模型 Java线程内存模型跟CPU缓存模型类似,是基于CPU缓存模型来建立的,Java线程内存模型是标准化的,屏蔽 ...
Weblogic 'wls-wsat' XMLDecoder 反序列化_CVE-2017-10271漏洞复现
Weblogic 'wls-wsat' XMLDecoder 反序列化_CVE-2017-10271漏洞复现一.漏洞概述 WebLogic的 WLS Security组件对外提供webservic ...
无法启动iis express web服务器解决
VS2013 .VS2015 .VS2017调试出现无法启动iis express web服务器最近自己老是遇到这个问题,天天如此,烦死人,网上答案繁多,但是都解决不了,也是由于各种环境不同导致的, ...
微信小程序开发--组件(5)
一.editor 富文本编辑器,可以对图片.文字进行编辑. 编辑器导出内容支持带标签的 html和纯文本的 text,编辑器内部采用 delta 格式进行存储. 通过setContents接口设置内容 ...
vue组件之间的传值——中央事件总线与跨组件之间的通信（$attrs、$listeners）
vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...
g++ -std=c++11 -g -o test emit_log_direct.cpp
g++ -std=c++11 -g -o test emit_log_direct.cpp
[机器学习] k-近邻算法(knn)
最近在参加大数据的暑期培训,记录一下学习的东西. 引言懒惰学习法:简单的存储数据,并且一直等待,直到给定一个检验数据,才进行范化,以便根据与存储的训练元组的相似性对该检验数据进行分类.懒惰学习法在 ...
个人永久性免费-Excel催化剂功能第87波-将批量发送邮件做到极致化，需借力Outlook
在过往的功能中,已经实现过批量发送邮件的功能,但收到的反馈是部分企业邮箱不能用,原因是无解的,因为程序员能找到的公开的类库只能实现一些通用性的场景,太复杂的企业环境可能会失灵.近期认真来学习Outlo ...
Java map笔记
Map 是一个键值对的集合花和尚豹子头鲁智深林冲如果想要从map中获得值,可以根据键 Map<Key,velue> Map虽然是集合,但是和collection的接口无关我们可 ...
[LeetCode] 32. Longest Valid Parentheses (hard)
原题链接题意: 寻找配对的(),并且返回最长可成功配对长度. 思路配对的()必须是连续的,比如()((),最长长度为2:()(),最长长度为4. 解法一 dp: 利用dp记录以s[i]为终点时,最 ...

Vue小事例

Vue小事例的更多相关文章

随机推荐

热门专题