vue-cli中使用ajax请求

创建好vue-cli项目，命令行在该路径下运行以下命令

npm install --save axios

在main.js中添加标记行import axios from ‘axios’

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

router/index.js作用解释

import Vue from 'vue'
//导入路由
import Router from 'vue-router'
//导入页面组件
import Login from '@/components/Login'
import Manage from '@/components/Manage'
//使用路由
Vue.use(Router)

export default new Router({
//不显示#符号的url
  mode:'history',
  routes: [
  //登录页面对应的url，如：localhost:8080/login
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    //首页页面对应的url，如：localhost:8080
  		{
  		  path: '/',
  		  name: 'Manage',
  		  component: Manage,
  		}
  ]
})

assets文件夹用于放图片文件

config/index.js

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    //设置同源访问，不然不能够访问后台接口
    proxyTable: {
		'/api': {  //使用"/api"来代替"http://f.apiplus.c" 
			target: 'http://10.18.45.66:8000', //源地址 
			changeOrigin: true, //改变源 
			pathRewrite: { 
			  '^/api': 'http://10.18.45.66:8000' //路径重写 
			  } 
		  } 
	},

    // Various Dev Server settings
    //设置访问主机
    host: '10.18.45.66', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    
    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

components用于放页面组件

//html页面
<template>
	 <div class="flex">
      <div id="logo">迷纱丽后台管理系统</div>
      <div class="main">
         <div id="left">
            <img src="../assets/login.png">
         </div>
         <div id="right">
            <div class="border">
         	  <div class="input">
                <p>欢迎登录</p>
         	  </div>
               <div style="width:300px;margin:30px auto;">
      	        <input v-model="username" type="text" name="username" placeholder=" 昵称" style="width:300px; height:35px; border-radius: 4px;border:1px #b0b0b0 solid">
               </div>
               <div style="width:300px;margin:30px auto;">
      	        <input v-model="password" type="text" name="password" placeholder=" 密码" style="width:300px; height:35px; border-radius: 4px; border:1px #b0b0b0 solid ">
               </div>
               <div style="width:300px; margin:50px auto;">
                 <input @click="login" type="submit" style="width:300px; height:43px; background-color:#317DEB; border-radius: 5px;border:1px solid #317DEB; font-size: 20px; color:#fff; margin-left:0px;" value="登录">
               </div>
               <div class="main" style="width:250px; margin:20px auto;">
                 <div ><a href="#" style="text-decoration: none; color:#a5aeff;">忘记密码</a></div>
                 <div style="margin-left: 100px;"><a href="register.html" style="text-decoration: none; color:#9aebed;">马上注册</a></div>
              </div>
            </div>
         </div>
      </div>
   </div> 
</template>
//js逻辑代码
<script>
export default {
	name: 'login',
	data () {
		return {
		  msg: 'huangchao',
		  username:null,
		  password:null
		}
	},
	methods:{
	    //登录函数
		login:function(){
		    //将参数格式化，否则后台接收不到数据
			var params=new URLSearchParams()
			params.append('username',this.$data.username)
			params.append('password',this.$data.password)
			//ajax请求
			this.$axios({
			    //请求方式
				method: 'post',
				//请求路劲
				url:'/api/manage/loginVer',
				//请求参数
				data:params,
				//请求成功的回调函数
			}).then((res)=>{
			    //将adminId保存进session
				sessionStorage.setItem('adminId',res.data[0][0])
				登录成功跳转到首页
				this.$router.push({path:'/'})
			});
		},
		
	}
}
</script>
//css样式
<style>
.flex{
  display: flex;
  flex-direction: column;
}
 #logo{
  background-color:#a5aeff;
  height:90px;
  margin:0 0;
  font-size:30px;
  text-align:center;
  color:#fff;
  padding-top:50px;
}
.main{
  display:flex;
  flex-wrap: wrap;
}
#left{
  flex:1;
  width:;
}
#left img{
  margin:100px 60px;
  width:100%;
}
#right{
  flex:1.5;
}
.border{
  margin-left:200px;
  margin-top:60px;
  width:400px;
  height: 400px;
  border:1px solid #a5aeff;
  border-radius: 7px;
  box-shadow: darkgrey 10px 10px 30px 5px ;
}
.input{    
      margin-left:center;
      font-size: 30px;
      }
</style>