方式是使用axios（安装命令：npm install --save axios），语法格式：
login() {
//=>表示可以渲染模板数据
axios.get('./static/login.json').then((response) => {
console.log(response); //请求正确时执行的代码
user = response.data;
for(var i = 0; i < user.length; i++) {
if(user[i].name == this.name) {
if(user[i].pwd == this.pwd) {
this.$router.push('/Main');
} else {
alert("密码错误");
}
}
}
}).catch(function(response) {
console.log(response); //发生错误时执行的代码
});
}现实现如下功能：
登录成功后跳转：
代码如下：
1、先在static静态文件夹下创建json数据（注意需要放在static文件夹下，否则访问不了），
其中,login.json:
[{"name":"张三","pwd":"123"},
{"name":"李四","pwd":"456"}]2、在router下的index.js中配置路由：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Main from '@/components/Main'
import Index from '@/components/Index'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Index',
component: Index
},
{
path: '/Main',
name: 'Main',
meta: {
requireAuth: true, // 添加该字段，表示进入这个路由是需要登录的
},
component: Main
}
]
})
3、components下新建Index.vue文件：
<template>
<el-form label-width="500px" class="demo-ruleForm loginform" align="center">
<el-form-item label="用户名">
<el-input v-model="name"></el-input>
</el-form-item>
<el-form-item label="密 码" prop="pass">
<el-input v-model="pwd" type="password" auto-complete="off"></el-input>
</el-form-item>
<el-form-item size="large">
<el-button type="primary" @click="login()">登录</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</template>
<script>
import axios from 'axios'
/*var user=[{"name":"张三","pwd":"123"},
{"name":"李四","pwd":"456"}]; */
var user;
export default {
data() {
return {
name: "",
pwd: ""
}
},
methods: {
login() {
//=>表示可以渲染模板数据
axios.get('./static/login.json').then((response) => {
console.log(response); //请求正确时执行的代码
user = response.data;
for(var i = 0; i < user.length; i++) {
if(user[i].name == this.name) {
if(user[i].pwd == this.pwd) {
this.$router.push('/Main');
} else {
alert("密码错误");
}
}
}
}).catch(function(response) {
console.log(response); //发生错误时执行的代码
});
}
}
}
</script>
<style>
.loginform {
float: left;
margin: auto;
}
</style>4、components下新建Main.vue文件：
<template>
<div>
<el-button type="success" @click="addFormVisible = true" class="addbtn">新增</el-button>
<el-table :data="user" height="250" border style="width: 100%">
<el-table-column prop="name" label="用户名" min-width="20%" align="center">
</el-table-column>
<el-table-column prop="age" label="年龄" min-width="20%" align="center">
</el-table-column>
<el-table-column prop="address" label="地址" align="center" min-width="20%">
</el-table-column>
<el-table-column label="操作" min-width="40%" align="center">
<template slot-scope="scope">
<el-button type="primary" size="mini" round @click="update(scope.$index)">编辑</el-button>
<el-button type="primary" size="mini" round @click="deleteuser(scope.row.name)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog title="修改用户信息" :visible.sync="updateVisible">
<el-form :model="currform">
<el-form-item label="用户名" :label-width="formLabelWidth">
<el-input v-model="currform.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" :label-width="formLabelWidth">
<el-input v-model="currform.age" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="地址" :label-width="formLabelWidth">
<el-input v-model="currform.address" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="updateVisible = false">取 消</el-button>
<el-button type="primary" @click="updateVisible = false">确 定</el-button>
</div>
</el-dialog>
<el-dialog title="新增用户" :visible.sync="addFormVisible">
<el-form :model="addform">
<el-form-item label="用户名" :label-width="formLabelWidth">
<el-input v-model="addform.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" :label-width="formLabelWidth">
<el-input v-model="addform.age" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="地址" :label-width="formLabelWidth">
<el-input v-model="addform.address" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="addFormVisible = false">取 消</el-button>
<el-button type="primary" @click="adduser">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import axios from 'axios'
export default {
data() {
return {
currform: {
"name": '',
"age": '',
"address": ''
},
addform: {
"name": '',
"age": '',
"address": ''
},
formLabelWidth: '120px',
updateVisible: false,
addFormVisible: false,
user: []
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
/*this.$ajax({
method: 'get',
url: '/mock/user.json',
data: {
name: 'wise',
info: 'wrong'
}
})*/
axios.get('./static/user.json').then((response)=> {
console.log(response); //请求正确时执行的代码
//alert(response);
this.user = response.data;
console.log(this.user)
}).catch(function(response) {
console.log(response); //发生错误时执行的代码
});
},
update(index) {
this.currform = this.user[index];
this.updateVisible = true;
},
deleteuser(name) {
alert(name);
},
adduser() {
alert(this.addform.name + this.addform.age + this.addform.address);
this.addFormVisible = false;
}
}
}
</script>
<style>
.addbtn {
float: right;
margin-right: 100px;
}
</style>