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中的关键字synchronized
1. 介绍在Java并发系列的文章中,这个是第二篇文章.在前面的一篇文章中,我们学习了Java中的Executor池和Excutors的各种类别. 在这篇文章中,我们会学习synchronized关 ...
【POJ - 3669】Meteor Shower（bfs）
-->Meteor Shower Descriptions: Bessie听说有场史无前例的流星雨即将来临:有谶言:陨星将落,徒留灰烬.为保生机,她誓将找寻安全之所(永避星坠之地).目前她正在平 ...
Protocol Buffer使用转换工具将proto文件转换成Java文件流程及使用
Client与Server的网络通信协议传输使用google protobuf,服务器端使用的是Java 一. Protocol Buffersprotobuf全称Google Protocol Bu ...
.NET项目迁移到.NET Core操作指南
为什么要从.NET迁移到.NET Core? .NET Core提供的特性 .NET Core性能提升 .NET如何迁移到.NET Core? 迁移工作量评估(API兼容性分析) 迁移方案制定通过类 ...
JAVA获取公网ip
在ipv4地址稀缺的今天,分配到公网ip几乎是不可能的,但是我拨号之后的ip竟然是公网IP. 将自己的电脑作为服务器·,做点好玩的程序,就成为了可能. 由于运营商的ip是动态分配的公网ip的所以就需要 ...
[leetcode] 20. Valid Parentheses (easy)
原题链接匹配括号思路: 用栈,遍历过程中,匹配的成对出栈:结束后,栈空则对,栈非空则错. Runtime: 4 ms, faster than 99.94% of Java class Solut ...
md文档的书写《二》
对<md文档的书写一>的补充和部分归总我使用的是Typora,快捷键可能有些片面,没有特殊说明,下文所有快捷键都是Typora编辑器下支持的快捷键,望知晓. 关于标题的书写补充除了 ( ...
【MySQL】（二）InnoDB存储引擎
InnoDB是事务安全的MySQL存储引擎,设计上采用了类似于Oracel数据库的架构.通常来说,InnoDB存储引擎是OLTP应用中核心表的首选存储引擎.同时,也正是因为InnoDB的存在,才使My ...
Oculus Rift 没有声音的解决方法
If you do not hear any audio when using Rift, please try the following steps: Check the Rift audio s ...
vue系列---vue项目(已安装vuex)中引入jquery
vue项目中引入jquery有很多方法,这只是其中一种. 步骤如下: 1,安装jquery依赖 npm install jquery --save 如果是使用淘宝镜像则将npm改为cnpm 2,修改配 ...

Vue小事例

Vue小事例的更多相关文章

随机推荐

热门专题