1.0、vue 阶段代码代码
vue.js的下载链接
https://cn.vuejs.org/v2/guide/installation.html
<form id="login">
<input name="username" type="text" placeholder="用户名" v-model="form.username" >
<input name="password" type="password" placeholder="密 码" v-model="form.password" >
<input name="key" type="text" placeholder="验证码" v-model="form.key">
<input type="button" @click="submitForm()" value="登 录">
</form>
<!---加载vue.js 开发版本--->
<script src="__PLUGS__vue.js"></script>
<script>
window.onload = function () {
const app = new Vue({
el: '#login', //对应使用id="app"获取信息。
data: {
form:{
username: '',
password: '',
key: ''
},
},
methods: {
submitForm: function () {
var $this = this;
var FormData =this.form; //获取表单数据
console.log(FormData.key); //打印验证码字段
}
}
})
};
</script>
2.0、添加axios.js 后的代码
axios.js 的链接
http://www.axios-js.com/docs/
axios.js 是一个类似于ajax 的异步请求JavaScript 库。相对来说axios比ajax 更适合现在的api为主要数据交互的环境。
axios.js+vue.js 后代码
<form id="login">
<input name="username" type="text" placeholder="用户名" v-model="form.username" >
<input name="password" type="password" placeholder="密 码" v-model="form.password" >
<input name="key" type="text" placeholder="验证码" v-model="form.key">
<input type="button" @click="submitForm()" value="登 录">
</form>
<!---加载vue.js 开发版本--->
<script src="__PLUGS__vue.js"></script>
<!---加载axios.js 库--->
<script src="__PLUGS__axios.min.js"></script>
<script>
window.onload = function () {
const app = new Vue({
el: '#login', //对应使用id="app"获取信息。
data: {
form:{
username: '',
password: '',
key: ''
},
},
methods: {
submitForm: function () {
var $this = this;
var FormData =this.form;
//写法1
axios.post(
'{:Url('login')}',
{ //使用post 数据请求,其他请求方法见官方demo
'key': FormData.key,
'username': FormData.username,
'password': FormData.password,
}).then(function (res) {
console.log(res); //成功数据返回
}).catch(function (err) {
console.log(err); //失败数据返回
});
//写法2
axios({
method: 'post', //提交方法
url: '{:Url('login')}',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response); //成功数据返回
})
.catch(function (error) {
console.log(error); //失败数据返回
});
}
}
})
};
</script>
2.1、axios 使用关联 vue 当中的方法
<form id="login">
<input name="username" type="text" placeholder="用户名" v-model="form.username" >
<input name="password" type="password" placeholder="密 码" v-model="form.password" >
<input name="key" type="text" placeholder="验证码" v-model="form.key">
<input type="button" @click="submitForm()" value="登 录">
<Modal v-model="visible" title="Welcome">Welcome to iView</Modal>
</form>
<!---加载vue.js 开发版本--->
<script src="__PLUGS__vue.js"></script>
<!---加载axios.js 库--->
<script src="__PLUGS__axios.min.js"></script>
<script>
window.onload = function () {
const app = new Vue({
el: '#login', //对应使用id="app"获取信息。
data: {
form:{
username: '',
password: '',
key: ''
},
},
methods: {
submitForm: function () {
var $this = this;
var FormData =this.form;
//写法1
axios.post(
'{:Url('login')}',
{ //使用post 数据请求,其他请求方法见官方demo
'key': FormData.key,
'username': FormData.username,
'password': FormData.password,
}).then(res =>{ //继承vue 类
console.log(1111); //成功数据返回
console.log(res); //成功数据返回
this.show(res); //调用vue 方法
}).catch(function (err) {
console.log(2222); //失败数据返回
console.log(err); //失败数据返回
});
},
show: function (){
this.visible = true;
}
}
})
};
</script>
3.0、 使用require.js模块化
3.1、设置初始化app.js（命名为自定config.js或其他名字都可以）。
RequireJS，发现他的缓存十分严重，所以需要加urlArgs
requirejs.config({
urlArgs: "v=15615616515616556",
map: {
'*': {
'css': '/static/plugs/require/require-css.js' //非AMD模块 css输出所需加载的类库
}
},
shim:{
'iview':{
deps:['css!iviewcss'] //iview.css必须在iview/dist/styles/的文件夹下面，不然对应字体文件路径不匹配
},
},
paths: { //以字段代替对应文件路径
'static':'static',
'system':'system',
'vue':'/static/plugs/vue/dist/vue.min',
'axios':'/static/plugs/axios/dist/axios.min',
'iview':'/static/plugs/iview/dist/iview.min',
'iviewcss':'/static/plugs/iview/dist/styles/iview',
'jquery':'/static/plugs/jquery/jquery-3.4.1',
},
});
如果使用data-main="__PLUGS__require/app.js" 加载配置的方式会出现所对应文件丢失的现象。也就是偶尔能加载到文件，偶尔加载不到。所以，配置文件应该放在当前页面之下。
<script>
requirejs.config({
urlArgs: "v=15615616515616556",
map: {
'*': {
'css': '/static/plugs/requirejs/require-css.js'
}
},
//baseUrl:'/static/plugs/',
shim:{
'iview':{
deps:['css!iviewcss'] //iview.css必须在iview/dist/styles/的文件夹下面，不然对应字体文件路径不匹配
},
},
paths: { //以字段代替对应文件路径
'static':'static',
'system':'system',
'vue':'/static/plugs/vue/dist/vue.min',
'axios':'/static/plugs/axios/dist/axios.min',
'iview':'/static/plugs/iview/dist/iview.min',
'iviewcss':'/static/plugs/iview/dist/styles/iview',
},
});
</script>
<script>
window.onload = function(){
require(['vue','iview','axios'], function (Vue,iview,axios) {
Vue.use(iview);
const app = new Vue({
el: '#login', //对应使用id="app"获取信息。
data: {
form:{
username: '',
password: '',
key: '',
//visible: false
},
visible1:false,
visible2:false,
visible3:false
},
methods: {
submitForm: function () {
var $this = this;
var FormData =this.form;
//写法1
axios.post(
'{:Url('login')}',
{ //使用post 数据请求,其他请求方法见官方demo
'key': FormData.key,
'username': FormData.username,
'password': FormData.password,
}).then(res =>{ //继承vue 类
console.log(1111); //成功数据返回
console.log(res); //成功数据返回
this.show(res); //调用vue 方法
}).catch(function (err) {
console.log(2222); //失败数据返回
console.log(err); //失败数据返回
});
},
show: function (){
this.visible = true;
this.$Modal.info({
title: title,
content: content
});
}
}
});
})
}
</script>
3.2、页面使用
<form id="login">
<input name="username" type="text" placeholder="用户名" v-model="form.username" >
<input name="password" type="password" placeholder="密 码" v-model="form.password" >
<input name="key" type="text" placeholder="验证码" v-model="form.key">
<input type="button" @click="submitForm()" value="登 录">
<Modal v-model="visible" title="Welcome">Welcome to iView</Modal>
</form>
<script data-main="__PLUGS__require/app.js" src="__PLUGS__require/require.js"></script>
<script>
window.onload = function () {
require(['vue','iview','axios','jquery'], function (Vue,iview,axios,$) {
//require 是文件路径;function是使用方法别名,可自取.
Vue.use(iview); //vue 内关联iview
const app = new Vue({
el: '#login', //对应使用id="app"获取信息。
data: {
form:{
username: '',
password: '',
key: ''
},
},
methods: {
submitForm: function () {
var $this = this;
var FormData =this.form;
//写法1
axios.post(
'{:Url('login')}',
{ //使用post 数据请求,其他请求方法见官方demo
'key': FormData.key,
'username': FormData.username,
'password': FormData.password,
}).then(res =>{ //继承vue 类
console.log(1111); //成功数据返回
console.log(res); //成功数据返回
this.show(res); //调用vue 方法
}).catch(function (err) {
console.log(2222); //失败数据返回
console.log(err); //失败数据返回
});
},
show: function (){
this.visible = true;
}
}
})
}
};
</script>
后台登陆实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网站后台管理</title>
<link href="__LOGIN__css/master.css" rel="stylesheet" type="text/css">
<script>
function edoshowkey(showid,vname){
document.getElementById(showid).innerHTML='<img src="{:url(\'/admin/login/captcha\')}?v='+vname+'&t='+Math.random()+'" name="'+vname+'KeyImg" id="'+vname+'KeyImg" align="bottom" onclick=edoshowkey("'+showid+'","'+vname+'") title="看不清楚,点击刷新">';
}
</script>
</head>
<body>
<div class="main">
<form id="login" autocomplete="off">
<div class="logo"><img src="__LOGIN__images/loginlogo.png"></div>
<div class="login">
<div class="bd">
<img src="__LOGIN__images/ico1.png" width="20" height="20">
<input v-model="form.username" name="username" type="text" class="form-control" placeholder="用户名">
</div>
<div class="bd">
<img src="__LOGIN__images/ico2.png" width="19" height="21">
<input v-model="form.password" name="password" type="password" class="form-control" placeholder="密 码">
</div>
<div>
<img src="__LOGIN__images/ico3.png" width="21" height="19">
<input v-model="form.key" name="key" type="text" placeholder="验证码" class="form-control">
<span id="checkkeyshowkey">
<a href="javascript:;" onClick="edoshowkey('checkkeyshowkey','checkkey');" title="点击显示验证码">点击显示</a>
</span>
</div>
</div>
<div class="denglu">
<input type="button" class="regsubmit" @click="submitForm()" value="登 录">
</div>
<div class="jszc">
Copyright ©2019-2024 <a href="https://www.ulimeco.com" target="_blank"> www.ulimeco.com</a>,All Rights Reserved.
</div>
</form>
</div>
<script src="__PLUGS__requirejs/require.js"></script>
<script>
requirejs.config({
urlArgs: "v=15615616515616556",
map: {
'*': {
'css': '/static/plugs/requirejs/require-css.js'
}
},
//baseUrl:'/static/plugs/',
shim:{
'iview':{
deps:['css!iviewcss'] //iview.css必须在iview/dist/styles/的文件夹下面，不然对应字体文件路径不匹配
},
},
paths: { //以字段代替对应文件路径
'static':'static',
'system':'system',
'vue':'/static/plugs/vue/dist/vue.min',
'axios':'/static/plugs/axios/dist/axios.min',
'iview':'/static/plugs/iview/dist/iview.min',
'router':'/static/plugs/vue-router/dist/vue-router.min',
'iviewcss':'/static/plugs/iview/dist/styles/iview',
},
});
</script>
<script>
window.onload = function(){
require(['vue','iview','axios','router'], function (Vue,iview,axios,router){
Vue.use(iview);
Vue.use(router);
const app = new Vue({
el: '#login', //对应使用id="app"获取信息。
data: {
form:{
username: '',
password: '',
key: '',
},
},
methods: {
submitForm: function () {
var $this = this;
var FormData =this.form;
//写法1
axios.post(
'{:Url('verify')}',
{ //使用post 数据请求,其他请求方法见官方demo
'key': FormData.key,
'username': FormData.username,
'password': FormData.password,
}
).then(res =>{
//console.log(res); //成功数据返回
if(res.data.code == 1){
window.location.href=res.data.data;
}else{
this.warning(res.data.msg); //调用vue 方法
}
}).catch(function (err) {
//console.log(err); //失败数据返回
this.error(err.data.msg);
});
},
success (msg) {
//console.log(msg);
this.$Message.success(msg);
},
warning (msg) {
//console.log(msg);
this.$Message.warning(msg);
},
error (msg) {
//console.log(msg);
this.$Message.error(msg);
},
}
});
})
}
</script>
</body>
</html>
