vue-cli中使用ajax请求

刺骨的言语ヽ痛彻心扉 2022-02-21 13:40 294阅读 0赞

## 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>