这篇文章主要是针对于在前后端分离项目，在Vue前端使用Axios进行通信，相当于Ajax一样，下面就写了一个登录的例子，来进行演示，同时在登陆到主页后会有一个列表数据请求，并将请求的数据展示在table页面中。
一、准备工作
如何新建一个Vue项目请看我的另一篇文章：Vue学习之Vue结合 ElementUI 组件库搭建Web工程项目
新建好之后，我们要在项目的build中加入本地的数据json文件，用来模拟请求返回的数据，这里推荐一篇文章，讲的比较详细的vue配置请求本地json数据的方法.
不要走开！底部有完整的项目GitHub地址提供给大家学习！！
首先修改build里面的webpack.dev.conf.js，在里面加入如下代码：
const express = require('express') const app = express() const appData = require('../data.json') // 加载本地json文件 const login = appData.login // 获取对应本地数据 const caseList = appData.caseList //const ratings = appData.ratings const apiRoutes = express.Router() app.use('/api',apiRoutes) //然后找到devSeerver，在里面添加 before (app) { app.get('/api/login',(reg,res) => { res.json({ errno: 0, data: login }) // 接口返回json数据，上面配置的数据seller就复制给data请求后调用 }), app.get('/api/caseList',(reg,res) => { res.json({ errno: 0, data: caseList }) // 接口返回json数据，上面配置的数据goods就复制给data请求后调用 })/*, app.get('/api/ratings',(reg,res) => { res.json({ errno: 0, data: ratings }) // 接口返回json数据，上面配置的数据ratings就复制给data请求后调用 })*/ }
我的json文件内容如下：将该文件放在我们项目的根目录便于获取。
{ "login": { "code": 200, "msg": null, "data": { "id": null, "userId": 1, "token": "77ae89be36504adfb5c09ef71409ea0e", "expireTime": "2018-09-01T16:24:50.473+0000", "createBy": null, "createTime": null, "lastUpdateBy": null, "lastUpdateTime": "2018-09-01T04:24:50.473+0000" } }, "caseList": { "code": 200, "msg": null, "data": [ { "startDate": null, "endDate": null, "startTime": null, "endTime": null, "orgId": "1", "orgName": "夸夸可爱猪", "orgLevel": 0 }, { "startDate": null, "endDate": null, "startTime": null, "endTime": null, "orgId": "2", "orgName": "夸夸可爱猪", "orgLevel": 0 }, { "startDate": null, "endDate": null, "startTime": null, "endTime": null, "orgId": "3", "orgName": "夸夸可爱猪", "orgLevel": 0 } ] } }
加上之后我们就可以获取它，在此之前需要我们进行安装以下组件：
首先是安装了elementUI > > >命令为：npm i element-ui -S > > >然后是sass-loder node-sass > > >命令为：npm install sass-loader node-sass --save-dev > > >然后是axios > > >命令为：npm install axios -s > > >然后是cookie > > > npm install cookie -s
欧克，一切就绪，接下来就开始写登录功能！
二、登录实现
在这里我只放上js代码，后面我会将我的代码提交到github，大家可以下载
login.vue
<template> <div> <el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="80px" class="login-box"> <h3 class="login-title">欢迎登录</h3> <el-form-item label="账号" prop="username"> <el-input type="text" placeholder="请输入账号" v-model="loginForm.username"/> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" placeholder="请输入密码" v-model="loginForm.password"/> </el-form-item> <el-form-item> <el-button type="primary" v-on:click="onSubmit('loginForm')">登录</el-button> </el-form-item> </el-form> <el-dialog title="温馨提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <span>请输入账号和密码</span> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog> </div> </template> <script> import Cookies from 'js-cookie'; import router from '@/router'; export default { name: "login", props: {}, data() { return { loginForm: { username: 'admin', password: 'admin', src: '' }, //表单验证，需要在 el-form-item 元素中增加 prop 属性 rules:{ username:[ {required:true,message:'账号不可为空',trigger:'blur'} ], password:[ {required:true,message: '密码不可为空',trigger: 'blur'} ] }, //对话框显示和隐藏 dialogVisible:false } }, created() { }, mounted() { }, methods: { onSubmit(formName){ //为表单绑定验证功能 /* this.$refs[formName].validate((valid) => { //这是表单验证的方法 valid 是validate方法的回调参数 代表是否通过验证 如果为true就是通过 ref属性可以用来获取dom的引用，它的值可以随便定义, 但是注意这个名字不要和页面中其他的ref属性名相同,获取定义的ref可以通过this.$refs.ref的名字 if(valid){ //使用 vue-router 路由到指定页面，该方式称之为编程式导航 this.axios({ method: 'get', url: 'http://localhost:8080/api/login' }).then(function (repos) { console.log(repos); }).catch(function (error) { console.log(error); }); this.$router.push("/home") }else{ this.dialogVisible = true; return false; } });*/ var that =this this.$api.login.login(formName).then(function (res) {//调用登录接口 if(res.msg != null){ that.$message({message: res.msg, type: 'error'}) }else{ Cookies.set('token',res.data.token)//放置token到Cookie sessionStorage.setItem('user',that.loginForm.username)//保存用户到本地会话this.form.username 因为是有:model作为动态绑定，所以可以直接取值 /*this.$router.push({path: '/my/profile', query: queryData});*/ router.push("/home")//登录成功，跳转到主页 } /* this.dialogVisible = true;*/ }).catch( function(res){ that.$message({message: res.msg, type: 'error'}) }); }, /* beforeRouteEnter: (to, from, next) => { console.log("准备进入个人信息页"); next(); }, beforeRouteLeave: (to, from, next) => { console.log("准备离开个人信息页"); next(); }*/ } } </script> <style scoped> .login-box { border: 1px solid #DCDFE6; width: 350px; margin: 180px auto; padding: 35px 35px 15px 35px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 0 0 25px #909399; } .login-title { text-align: center; margin: 0 auto 40px auto; color: #303133; } </style>
这里会请求http文件中的api.js文件，代码如下：
import * as login from './modules/login' import * as caseList from './modules/caseList' // 默认全部导出 export default { login, caseList }
这里分别引用了两个模块，一个是登录一个是信息获取模块。
我们看一下登录，是在http的modules文件夹下，为了便于修改和统计：
login.js
//这里用来存放用于登录使用的login方法与logout方法 //首先导入axios import axios from "../axios" //登录 export const login = data => { return axios({ url: 'login', method: 'get', data }) } //登出 export const logout = () => { return axios({ url: 'logout', method: 'get' }) }
接下来是Axios通信封装组件，网上看了一个比较全的 大家可以借鉴一下：vue+axios 实现登录拦截权限验证.这里是我的：
//Axios拦截器 在这里进行请求拦截和响应拦截 主要是用来判断请求是否含有token 并进行拦截验证 import axios from 'axios' import config from './config' import Cookies from 'js-cookie' import router from '@/router' export default function $axios(options){ return new Promise((resolve,reject) => { const instance = axios.create({ baseURL: config.baseUrl, headers: config.headers, timeout: config.timeout, withCredentials:config.withCredentials }) //请求拦截器 instance.interceptors.request.use( config => { let token = Cookies.get("token") if (token){//发送请求时携带的token config.headers.token = token }else{//重定向到登录页 router.push("/login") } return config }, error => { return Promise.reject(error) } ) //response响应拦截器 instance.interceptors.response.use( response => { return response.data }, error => { return Promise.reject(err) } ) //请求处理 instance(options).then(res => { resolve(res) return false }).catch(error =>{ reject(error) } ) }) }
点击登录，跳转到主页面，
这里有我们请求返回过来的信息：
三、实现主页点击获取信息并展示
<template> <div> <el-button type="primary" v-on:click="getCaseList()">统计</el-button> <el-table :data="tableData" height="250" lazy :load="load" border style="width: 100%"> <el-table-column prop="orgName" label="办案单位" width="180" sortable> <template slot-scope="scope" > {{ scope.row.orgName }} </template> </el-table-column> <el-table-column prop="orgId" label="单位编号" width="180"> <template slot-scope="scope" > {{ scope.row.orgId }} </template> </el-table-column> <el-table-column prop="orgLevel" label="单位级别"> <template slot-scope="scope" > {{ scope.row.orgLevel }} </template> </el-table-column> </el-table> </div> </template> <script> export default { name: "home", data() { return { keyword: '', //搜索关键字 tableData: [], titles:[] } }, methods:{ getCaseList() { var that=this; //const url = "http://localhost:8080/api/caseList"; //const params = "?schoolId=1&keywords=" + keyword; // 记录搜索历史 // this.$store.dispatch('saveSearchShopHis', keyword); /*vm.axios.get(url + params).then((response) => {*/ this.$api.caseList.caseList().then(function (res) { console.log(res) if(res.msg != null){ that.tableData = []; // 将关键字置空 this.keyword = ""; this.$message({message: '没有获取到数据', type: 'error'}) } else { that.tableData = res.data.data; } }, (response) => { this.$message({message: '数据获取失败', type: 'error'}) }); } } } </script> <style scoped> </style>
点击统计，遍历出所有数据
目录结构如下：
项目Github地址：Github地址
