node.js vue项目配置

main.js 全局配置

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios';//全局配置axios 使用ajax

axios.defaults.baseURL = 'http://localhost:8082';//配置全局请求路径
//axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

Vue.prototype.$http = axios; //将axios挂载在vue

Vue.config.productionTip = false


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

index.js 路由相当于Controller

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    }
  ]
})

<template>
  <div>
    <form action="">
      <input type="text" v-model="username"><br>
      <input type="text" v-model="password"><br>
      <button @click="denglu">登录</button>
    </form>
  </div>
</template>

<script>

  import Qs from 'qs';
  export default{
      name: 'Login',
      data(){
          return{
              username: "admin",
              password: "123"
          }
      },
      methods:{
          denglu:function () {
            console.log(JSON.stringify(this.$data));
            var url = "/login";

            this.$http({ //相当于 $.ajax(｛。。。。｝)   这种方式可以处理axios请求的类型（默认的是json请求数据）
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              },
              method: 'post',
              url: url,
              data: Qs.stringify(this.$data)


            })
//            this.$http.post(url,this.$data).then((res)=>{
//                console.log('res=>',res);
//              })
          }
      }

  }
</script>

<style>
</style>

来源：CSDN

作者：CHF...

链接：https://blog.csdn.net/weixin_41974710/article/details/104531758

标签

vue

url