vue入門記録一

1.main.js構成

import Vue from 'vue'
import App from './App.vue'
import Router from "./router";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import qs from 'qs'
import axios from 'axios' //  axios
Vue.prototype.$alert = ElementUI.Alert
Vue.prototype.$ajax=axios
Vue.prototype.$qs=qs
Vue.use(ElementUI);
Vue.use(Router)
new Vue({
  router:Router,
  render: h => h(App),

}).$mount('#app')

2.vue3.0ローカルドメイン間
新しいvue.config.jsはルートディレクトリに捨てられた.

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8008/', //       
                changeOrigin: true,
                ws: true,
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }
    }
}

3.バックエンドインタフェースにアクセスし、パラメータnullを解決し、qsを使用する

<template>
    <el-form label-width="80px" :model="user"
             @submit.prevent="submit($event)">
        <el-form-item label="  ">
            <el-input v-model="user.id"></el-input>
        </el-form-item>
        <el-form-item label="  ">
            <el-input v-model="user.name"></el-input>
        </el-form-item>
        <el-form-item label="  ">
            <el-input v-model="user.age"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">    </el-button>
            <el-button>  </el-button>
        </el-form-item>
    </el-form>

</template>

<script>
    export default {
        name: "ComponentB",
        data() {
            return {
                user:{
                    id:'',
                    name:'',
                    age:''
                }
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
                console.log(this.user.age)
               var user = this.$qs.stringify({
                    id:this.user.id,
                    name:this.user.name,
                    age:this.user.age==''?0:this.user.age,
                });
                //vue-resource
                this.$ajax.post('/api/user/addUser', user).then(res => {
                    // success callback
                   console.log(res.data.body)
                this.$alert(res.data.body)
                }, err => {
                    alert(err)
                    // error callback
                });
            }
        },
    }