zoukankan      html  css  js  c++  java
  • vue与后台交互之post用法

    vue解决跨域

    • 安装 axios

      cnpm install axios --save
      
    • 在 config/index.js

      proxyTable: {
            '/api': {  //使用"/api"来代替"http://f.apiplus.c" 
              target: 'http://127.0.0.1:8000/', //源地址 
              changeOrigin: true, //改变源 
              pathRewrite: { 
                '^/api': '' //路径重写 
                } 
            } 
          },
      
    • 在 src/main.js

      import axios from 'axios'
      Vue.prototype.axios = axios
      
    • 在 src/components下新建文件 User.vue

      <template>
      	<div>
              <h2>用户注册</h2>
              username: <input type='text' v-model='username'>
              password: <input type='password' v-model='password'>
              <button @click='register'>
              	注册    
          	</button>
          </div>
      </template>
      
      <script>
          export default{
              name:'user',
              data(){
                  return {
                      username:'',
                      password:''
                  }
              },
              methods:{
                  register:function(){
                      var params = new URLSearchParams();
                      params.append('name',this.username);
                      params.append('password',this.password);
                      this.axios({
                          method:'post',
                          // api 是 http://127.0.0.1:8000 的简写
                          url:'api/app01/add/',
                          data:params
                      }).then(res=>{
                          console.log(res);
                      }).catch(error=>{
                          console.log(error);
                      })
                  }
              }
          }
      </script>
      
    • 在 router/index.js

      import user from '@/components/User.vue'
      
      export default new Router({
        routes: [
          {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
          },
          {
            path:'/user/register',
            name:'user',
            component:user
          }
        ]
      })
  • 相关阅读:
    input 放大镜
    记住密码弹出事件
    thinkphp修改及编写标签库,编辑器的使用
    thinkphp 配合mongodb
    缓存技术
    php面试题目
    pdo 整套类的封装,保存修改查询
    mongodb 的备份恢复导入与导出
    mongodb 分组查询
    smarty 模板的入门使用
  • 原文地址:https://www.cnblogs.com/ngngng/p/13885731.html
Copyright © 2011-2022 走看看