搭建VUE项目（三）在VUE项目中使用ajax

清疚 2022-05-21 02:43 473阅读 0赞

方式是使用axios（进入项目根目录下，执行安装命令：npminstall\--saveaxios），（存在问题：会覆盖之前安装的UI，导致项目报错，可以先安装axios，再安装UI，不会出现报错情况）

语法格式：

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); //发生错误时执行的代码  
    				});
    			}

现实现如下功能：

![70][]

登录成功后跳转：

![70 1][]

代码如下：

![70 2][]

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>

[70]: /images/20220521/e1926a0688fc4a56b9c5d700fd29ece5.png
[70 1]: /images/20220521/2d25e78f1a134d84b0848b636da22c2c.png
[70 2]: /images/20220521/38663cd928ca49f4ac1d45dc5797ed16.png