1. Http发送请求接口
关键类：net.mingsoft.people.action.web.PeopleActon.java
关键方法：PeopleActon.checkLogin(...)
1.1. 范例：用户登录
范例中演示并实现了用户的登录
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<meta http-equiv="content-type" content="text/html"/>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
<meta name="viewport"
content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="app-mobile-web-app-capable" content="yes"/>
<meta name="app-mobile-web-app-status-bar-style" content="black-translucent"/>
<!--引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--通用图标-->
<link rel="stylesheet" href="https://cdn.mingsoft.net/iconfont/iconfont.css"/>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://cdn.bootcss.com/qs/6.9.0/qs.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://cdn.mingsoft.net/ms/1.0/ms.js"></script>
<script src="http://cdn.mingsoft.net/ms/1.0/ms.http.js"></script>
<script src="http://cdn.mingsoft.net/ms/1.0/ms.util.js"></script>
<style>
[v-cloak] {
display: none;
}
.custom-body {
width: 300px;
margin: auto;
}
</style>
</head>
<body class="custom-body">
<div id="app" v-cloak>
<div class="class-1" @keydown.13='login'>
<div class="class-8">
<div class="class-9">
<div class="class-10 "></div>
<div class="class-11">
<div class="class-12 "></div>
<div class="class-13 "></div>
<div class="class-14">
<div class="class-15 ">账号登录</div>
</div>
<el-form ref="form" :model="form" :rules="rules">
<div class="class-16">
<el-form-item class="class-17" prop="peopleName">
<el-input v-model="form.peopleName"
:disabled="false"
:style="{width: '100%'}"
:clearable="true"
placeholder="请输入用户名或手机号">
</el-input>
</el-form-item>
</div>
<div class="class-18">
<el-form-item class="class-19" prop="peoplePassword">
<el-input show-password type="password" v-model="form.peoplePassword"
:disabled="false"
:style="{width: '100%'}"
:clearable="true"
placeholder="请输入密码">
</el-input>
</el-form-item>
</div>
<div class="class-22">
<el-form-item class="class-23 " prop="rand_code">
<el-input v-model="form.rand_code"
:disabled="false"
:style="{width: '100%'}"
:clearable="true"
placeholder="请输入验证码">
</el-input>
</el-form-item>
<div class="class-24">
<img :src="verificationCode" @click="code"
class="class-25 "/>
</div>
<div class="class-26">
<div class="class-27 ">看不清?</div>
<div class="class-28 " @click="code">换一个</div>
</div>
</div>
</el-form>
<div class="class-20">
<div
class="class-21" @click="login">
<el-button class="class-21" type="primary" :loading="operation"
:disabled="form.peopleName && form.peoplePassword ? false:true">登录
</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data() {
return {
operation: false,
verificationCode: '',
//表单数据
form: {
peopleName: 'msopen',
peoplePassword: 'msopen',
rand_code: ''
},
rules: {
peopleName: [
{required: true, message: '请输入用户名'},
],
peoplePassword: [
{required: true, message: '请输入密码'},
],
rand_code: [
{required: true, message: '验证码'},
]
},
}
},
watch: {},
computed: {},
methods: {
//登录
login: function () {
var that = this;
this.$refs.form.validate((valid) => {
if(valid) {
that.operation = true;
ms.http.post("/checkLogin.do", {
peopleName: that.form.peopleName,
peoplePassword: that.form.peoplePassword,
rand_code: that.form.rand_code
}).then(function (data) {
if (data.result) {
that.$notify.success("登录成功！");
} else {
that.operation = false;
that.$notify({
title: '失败',
message: data.resultMsg,
type: 'warning'
});
}
});
}else {
return false;
}
})
;
},
//验证码
code: function () {
this.verificationCode = "/code?t=" + new Date().getTime();
}
},
created() {
this.code();
}
});
</script>