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 開發(fā)版本--->
<script src="__PLUGS__vue.js"></script>
<script>
window.onload = function () {
const app = new Vue({
el: '#login', //對應(yīng)使用id="app"獲取信息。
data: {
form:{
username: '',
password: '',
key: ''
},
},
methods: {
submitForm: function () {
var $this = this;
var FormData =this.form; //獲取表單數(shù)據(jù)
console.log(FormData.key); //打印驗證碼字段
}
}
})
};
</script>
2.0、添加axios.js 后的代碼
axios.js 的鏈接
http://www.axios-js.com/docs/
axios.js 是一個類似于ajax 的異步請求JavaScript 庫。相對來說axios比ajax 更適合現(xiàn)在的api為主要數(shù)據(jù)交互的環(huán)境。
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 開發(fā)版本--->
<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', //對應(yīng)使用id="app"獲取信息。
data: {
form:{
username: '',
password: '',
key: ''
},
},
methods: {
submitForm: function () {
var $this = this;
var FormData =this.form;
//寫法1
axios.post(
'{:Url('login')}',
{ //使用post 數(shù)據(jù)請求,其他請求方法見官方demo
'key': FormData.key,
'username': FormData.username,
'password': FormData.password,
}).then(function (res) {
console.log(res); //成功數(shù)據(jù)返回
}).catch(function (err) {
console.log(err); //失敗數(shù)據(jù)返回
});
//寫法2
axios({
method: 'post', //提交方法
url: '{:Url('login')}',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
})
.then(function (response) {
console.log(response); //成功數(shù)據(jù)返回
})
.catch(function (error) {
console.log(error); //失敗數(shù)據(jù)返回
});
}
}
})
};
</script>
2.1、axios 使用關(guān)聯(lián) 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 開發(fā)版本--->
<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', //對應(yīng)使用id="app"獲取信息。
data: {
form:{
username: '',
password: '',
key: ''
},
},
methods: {
submitForm: function () {
var $this = this;
var FormData =this.form;
//寫法1
axios.post(
'{:Url('login')}',
{ //使用post 數(shù)據(jù)請求,其他請求方法見官方demo
'key': FormData.key,
'username': FormData.username,
'password': FormData.password,
}).then(res =>{ //繼承vue 類
console.log(1111); //成功數(shù)據(jù)返回
console.log(res); //成功數(shù)據(jù)返回
this.show(res); //調(diào)用vue 方法
}).catch(function (err) {
console.log(2222); //失敗數(shù)據(jù)返回
console.log(err); //失敗數(shù)據(jù)返回
});
},
show: function (){
this.visible = true;
}
}
})
};
</script>
3.0、 使用require.js模塊化
3.1、設(shè)置初始化app.js（命名為自定config.js或其他名字都可以）。
RequireJS，發(fā)現(xiàn)他的緩存十分嚴重，所以需要加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/的文件夾下面，不然對應(yīng)字體文件路徑不匹配
},
},
paths: { //以字段代替對應(yīng)文件路徑
'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" 加載配置的方式會出現(xiàn)所對應(yīng)文件丟失的現(xiàn)象。也就是偶爾能加載到文件，偶爾加載不到。所以，配置文件應(yīng)該放在當前頁面之下。
<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/的文件夾下面，不然對應(yīng)字體文件路徑不匹配
},
},
paths: { //以字段代替對應(yīng)文件路徑
'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', //對應(yīng)使用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 數(shù)據(jù)請求,其他請求方法見官方demo
'key': FormData.key,
'username': FormData.username,
'password': FormData.password,
}).then(res =>{ //繼承vue 類
console.log(1111); //成功數(shù)據(jù)返回
console.log(res); //成功數(shù)據(jù)返回
this.show(res); //調(diào)用vue 方法
}).catch(function (err) {
console.log(2222); //失敗數(shù)據(jù)返回
console.log(err); //失敗數(shù)據(jù)返回
});
},
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 內(nèi)關(guān)聯(lián)iview
const app = new Vue({
el: '#login', //對應(yīng)使用id="app"獲取信息。
data: {
form:{
username: '',
password: '',
key: ''
},
},
methods: {
submitForm: function () {
var $this = this;
var FormData =this.form;
//寫法1
axios.post(
'{:Url('login')}',
{ //使用post 數(shù)據(jù)請求,其他請求方法見官方demo
'key': FormData.key,
'username': FormData.username,
'password': FormData.password,
}).then(res =>{ //繼承vue 類
console.log(1111); //成功數(shù)據(jù)返回
console.log(res); //成功數(shù)據(jù)返回
this.show(res); //調(diào)用vue 方法
}).catch(function (err) {
console.log(2222); //失敗數(shù)據(jù)返回
console.log(err); //失敗數(shù)據(jù)返回
});
},
show: function (){
this.visible = true;
}
}
})
}
};
</script>
后臺登陸實例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網(wǎng)站后臺管理</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 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/的文件夾下面，不然對應(yīng)字體文件路徑不匹配
},
},
paths: { //以字段代替對應(yīng)文件路徑
'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', //對應(yīng)使用id="app"獲取信息。
data: {
form:{
username: '',
password: '',
key: '',
},
},
methods: {
submitForm: function () {
var $this = this;
var FormData =this.form;
//寫法1
axios.post(
'{:Url('verify')}',
{ //使用post 數(shù)據(jù)請求,其他請求方法見官方demo
'key': FormData.key,
'username': FormData.username,
'password': FormData.password,
}
).then(res =>{
//console.log(res); //成功數(shù)據(jù)返回
if(res.data.code == 1){
window.location.href=res.data.data;
}else{
this.warning(res.data.msg); //調(diào)用vue 方法
}
}).catch(function (err) {
//console.log(err); //失敗數(shù)據(jù)返回
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>
