[标准]Vue表单数据验证

zhuanbike 2022-1-16 748

登陆验证,获取token

methods:{
    callApi () {                    var vm = this
                        vm.msg = ''
                        vm.result = ''                        //验证地址
                        vm.loginUrl= 'http://xxx/'                        //查询地址
                        vm.apiUrl = 'http://yyy/'
                        vm.loginModel= {
                            username: '你的用户名',
                            password: '你的密码',                                    //    grant_type: 'password',                    }                    
                        //先获取 token                    
                 axios.post(vm.loginUrl,vm.loginModel)
                 .then(function(res){
                     sessionStorage.setItem('accessToken', res.data.token)                     //显示token值                 console.log(res.data.token);
                    })
                    .catch(function(err){
                          console.log(err);
                    });

  查询数据:

 //  执行api 访问*/        
 axios.get(vm.apiUrl,{                    //获取token ,拼装jwt后写入消息头 headers
                    //注意:jwt后面有个空格 ,jwt 是配合 django 的 rest_framework_jwt                    headers:{            
                        Authorization:'JWT ' + sessionStorage.getItem('accessToken')
                    }
                })
                 .then(function(res){                //     显示结果                    console.log(res.data);
                    
                    })
                    .catch(function(err){
                          console.log(err);
                    })

 完整代码:

<template>
<div  id="SurveyForm">
    <div >
      <form id="transForm" v-on:submit="formSubmit">
        <p>题目</p>
      <h2>  {{Title}}</h2><br><br>
         请选择:<select  v-model="Selected">
          <option value="5">5</option>
          <option value="4">4</option>
          <option value="3">3</option>
          <option value="2">2</option>
        </select>
        <input type="submit" value="提交">
      </form>

      <div class="container">
                <div class="form-group">
                    <label></label>
                    <button @click="callApi">开始</button>
                </div>
                <div class="result">
                    API调用结果:{{ result | json }}                </div>
            </div>
    </div>
  </div>
</template>

<script>import axios from 'axios';

export default {
  name: "SurveyForm",
data:function(){      return {
      Title:"题目一",
      Selected: "5"
      }
    },
      
                
                
            result: '',
  methods:{
    callApi () {                    var vm = this
                        vm.msg = ''
                        vm.result = ''                        //验证地址
                        vm.loginUrl= 'http://xxx/api/auth/'                        //查询地址
                        vm.apiUrl = 'http://xxx/api/surveysn/'
                        vm.loginModel= {
                            username: 'xxx',
                            password: '***',                                    //    grant_type: 'password',                    }                    
                        //先获取 token                    
                 axios.post(vm.loginUrl,vm.loginModel)
                 .then(function(res){
                     sessionStorage.setItem('accessToken', res.data.token)                     //显示token值                 console.log(res.data.token);
                    })
                    .catch(function(err){
                          console.log(err);
                    });            
                
        //  执行api 访问*/        axios.get(vm.apiUrl,{                    //获取token ,拼装jwt后写入消息头 headers
                    //注意:jwt后面有个空格 ,jwt 是配合 django 的 rest_framework_jwt                    headers:{            
                        Authorization:'JWT ' + sessionStorage.getItem('accessToken')
                    }
                })
                 .then(function(res){                //     显示结果                    console.log(res.data);
                    
                    })
                    .catch(function(err){
                          console.log(err);
                    });
         },
        
                requestError: function(xhr, errorType, error) {                    this.msg = xhr.responseText
                }
            }
        }</script>


最新回复 (0)
发新帖