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 或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...

随机推荐

mongodb数据存储
# 打开服务端直接执行abc.bat文件,如果执行闪退可以把data文件夹里的mongod.lock文件先删除打开cmd窗口, 输入mongo,启动客户端. 也可以通过NoSQLBooster启动 ...
Easy doesn't enter into grown-up life
Hi xinlu, good afternoon, my name is xx, you can also call me andrew. i'm 31 years old, and i'm from ...
SpringCloud解析之Ribbon
Ribbon是分布式微服务架构中负载均衡的一个解决方案,我们只需要引入ribbon依赖,然后初始化一个RestTemplate对象,在其上添加@LoadBalanced注解,就可以实现请求的负载均衡, ...
宏旺半导体深度剖析嵌入式存储芯片eMMC原理一篇概括大全
eMMC 一直是嵌入式存储市场最主流的选择,除了读写速度快.性价比高外,在节省空间方面也是相当优秀,今天宏旺半导体就和大家详细聊聊eMMC. eMMC 是 embedded MultiMediaCar ...
开设“C程序答疑解惑”的初衷
博主经常在QQ群里.论坛里看到好多C语言初学者,甚至是有一定编程经验的人,咨询在编程中遇到的一些稀奇古怪的问题.博主对这些问题做过分析汇总,有些问题确实隐蔽的非常深,像break关键字用的不对啦,局部 ...
最新 centos7下zabbix 监控redis状态
准备先准备两台服务器,已经部署好了zabbix-sever和zabbix-agent zabbix-server 192.168.1.70 centos7.2 zabbix-agent 192.16 ...
SSAS多维设计模型与报表客户端-Excel透视表制作
VS:SSAS设计多维设计模型: 数据源视图.dsv: 数据源视图表,名称命名规范:vw_表名(事实表_F_/维表_D_),
洛谷P2384 最短路题解
题目简叙: 请你求出从1到n的最短路径,其中最短路径☞这条路经过的边的权值的乘积. 题目分析: 很显然,这也是一道经典的单元最短路问题,首先我们可以考虑使用Floyd,显然,这是一个比较无脑简单的最短 ...
html+css-->background-img(背景图的设置）
背景图:(相关验证代码请查看代码,在验证时需将当前不需要验证的代码注释掉) 1.inherit:从父元素继承属性设置 2.background-repeat:平铺(在图片大小小于元素尺寸时 ...
Redis持久化背后的故事
Redis持久化 Redis提供了不同的持久化选项: RDB持久化以指定的时间间隔保存那个时间点的数据快照. AOF持久化方法则会记录每一个服务器收到的写操作.在服务器启动时,这些记录的操作会逐条执行 ...

Vue小事例

Vue小事例的更多相关文章

随机推荐

热门专题