axios发送ajax请求实现局部刷新

需求：

用户在前端输入用户名，输入框失去焦点后，将所输入的用户名发送给后端判断用户名是否已经在数据库中存在。

(1) 接口设计

请求方法：GET

请求地址：/usernames/(?P<username>[a-zA-Z0-9_-]{5,20})/count/

(2) 后端逻辑(Django框架)

class UsernameCountView(View):
    """判断用户名是否重复注册"""
    def get(self, request, username):
        """

        :param request:
        :param username: 用户名
        :return: JSON
        """
        # 实现主体业务逻辑：使用username查询对应的记录的条数
        # filter方法返回的是满足条件的结果集
        count = User.objects.filter(username=username).count()
        # 响应结果
        return JsonResponse({'code': RETCODE.OK, 'errmsg': 'OK', 'count': count})

count = User.objects.filter(username=username).count()这句代码将数据库查询用户名对应记录条数记录下来。

(3) 前端逻辑(Vue.js)

                let url = '/usernames/' + this.username + '/count';
                axios.get(url, {
                    responseType: 'json'
                })
                    .then(response => {
                        if(response.data.count == 1){
                            // 用户名已存在
                            this.error_name_message = '用户名已存在';
                            this.error_name = true;
                        } else {
                            // 用户名不存在
                            this.error_name = false;
                        }

                    })
                    .catch(error => {
                        console.log(error.response);
                    })

HTML

<li>
  <!-- 接收数据 v-model -->
  <!-- 鼠标失去焦点事件@blur -->
  <!-- 展示错误：v-show -->
  <label>用户名:</label>
  <input type="text" v-model="username" @blur="check_username" name="username" id="user_name">
  <span class="error_tip" v-show="error_name">[[ error_name_message ]]</span>
</li>

(4) 流程分析

首先分析前端逻辑