Design knowledge of the front end

Project the front end of the page using the vue to implement local refresh, through the bidirectional data binding implementation and user interaction, look at the below requirements, after the user input, front need to do some simple rule checking, we hope that after the user input can real-time detect, if there are any errors can be displayed in the input box below.

<span type="text" name="username" id="user_name"> <span class="error_tip"> </span> <span type="text" name="username" id="user_name </li> <li> <li> < div div > <input type="password" name="password" id=" PWD "> <span Class ="error_tip"> </span> </li> </span

The above is a user and password input box. When the user enters the user name, the cursor leaves the input box, which can detect the correctness of the input content in real time. When there is a problem with the input, the error message is displayed below the input box.

V-model realizes two-way binding of data, V-on performs event binding, and V-show controls whether DOM is displayed or not. The following is part of the code after adding Vue

> <input type="text" name="username" id="user_name" v-model="username" @blur="check_username"> <span class="error_tip" v-show="error_name">[[error_name_message]]</span> </li> <li> <label> <input type="password" name="password" id="pwd" v-model="password" @blur="check_password"> <span class="error_tip" V-show ="error_password"> Please enter an 8-20 digit password </span> </li>

When the cursor disappears, the binding time check_username is triggered. By binding to the Boolean variable error_name through V-show, the string variable error_name_message is controlled to be displayed. Other input boxes are similar to this operation.

Registered business implementation

Front-end registration business logic

Registration form code:

<form method="post" class="register_form" bb0 {{csrf_input}} <ul> <li> <label> <input type="text" name="username" id="user_name" v-model="username" @blur="check_username"> <span class="error_tip" V-show ="error_name">[[error_name_message]]</span> </li> <li> <label> <input type=" "name=" " Id =" PWD "v-model="password" @blur="check_password"> <span class="error_tip" v-show="error_password"> Please enter an 8-20 digit password </span> </li> <li> < div style ="password" v-model="password2" @blur="check_password2" name="password2" Id =" CPWD "> <span class="error_tip" v-show="error_password2"> </span> </li> <li> <label> <input type="text" v-model="mobile" @blur="check_mobile" name="mobile" id="phone"> <span class="error_tip" V-show ="error_mobile">[[error_mobile_message]]</span> </li> <li> <label> <input type="text" Class ="msg_input"> <img SRC ="{{static('images/pic_code.jpg')}"}" Alt ="pic_code" Class ="pic_code"> <span class="error_tip"> </span> </li> <li> <label> <input type="text" name="sms_code" id="msg_code" class="msg_input"> <a href="javascript:;" </span> > </li> <li class="agreement"> <input. </span> </li> > <li class="agreement"> <input Type ="checkbox" name="allow" id="allow" v-model="allow" @change="check_allow"> <label> <span </span> </li> <li class="reg_sub"> <input type="submit" value=" submit" class="reg_sub" v-show=" error_tip" </span> <li class="reg_sub"> <input type="submit" value=" submit" @change="on_submit"> {% if register_errmsg %} <span class="error_tip2">{{ register_errmsg }}</span> {% endif %} </li> </ul> </form>

Import Vue.js and JS libraries for Ajax requests

<script type="text/javascript" SRC ="{{static('js/vue-2.5.16.js')}}"></script> <script type="text/javascript" SRC ="{{ The static (' js/axios - 0.18.0. Min. Js')}} "> < / script >

Prepare the Register.js file

The Register.js file mainly handles the interaction events of the registration page and submits the registration form request to the server

<script type="text/javascript" src="{{ static('js/register.js') }}"></script>

The following is the implemented front-end validation logic and form submission logic

Methods: {/ / check username check_username () {let re = / ^ [a zA - Z0 - _ - 9] {5, 20} $/; if (re.test(this.username)) { this.error_name = false; } else {this.error_name_message = 'Please enter a user name of 5-20 characters '; this.error_name = true; }}, / / verify password check_password () {let re = / ^ [0-9 a Za - z] 8, 20} {$/; this.error_password = ! re.test(this.password); }, check_password2() {if (this.password! == this.password2) { this.error_password2 = true; } else { this.error_password2 = false; }}, / / check phone number check_mobile () {let re = / ^ 1/3-9 \ d {9} $/; if (re.test( { this.error_mobile = false; } else {this.error_mobile_message = 'The format you entered is incorrect '; this.error_mobile = true; }}, // Check_allow () {this.error_allow =! this.allow; }, // listen for form submission event on_submit() {this.check_username(); this.check_password(); this.check_password2(); this.check_mobile(); this.check_allow(); # one of the input fields does not conform to the rules prohibit the if (this. Error_name = = = true | | this. Error_password = = = true | | this. Error_password2 = = = true | | Enclosing error_mobile = = = true | | this. Error_allow = = = true) {/ / disable the form submission window. Event. ReturnValue = false; }}},

Backend business registration logic

The user after losing a username, we often want to be able to quickly give the user name is in accordance with the registration requirements, just in front of the user name rules for the calibration, also want to know whether he has been registered in the system, or when the registration to give users upload username or mobile phone number has been registered, experience is not very good. So you need to ask the server to check if it has registered when the cursor leaves the user name input field.

Define the routing

Path ('register/', views.registerview.as_view (), name='register'), # name add namespace path('usernames/< STR :username>', views.UsernameCountView.as_view(), name="username"), re_path(r'mobiles/(? P<mobile>1[3-9]\d{9})', views.MobileCountView.as_view(), name='mobile')

Writing View Classes

Class UsernameCountView(View): def get(self, request, username): "" Request object :param username: front-end username: return: """ count = User.objects.filter(username=username).count() return http.JsonResponse({'code':1001, If count == 1 \ else http. jsonResponse ({'code': 1000, 'MSG ':' '})

There is no uniform processing package for the response, which will be explained later.

Then it’s time to write the register view class:

Class registerView (View): """ def get(self, request): Return render(request, 'register.html') def post(self, request): """""" username = request.POST.get('username') password = request.POST.get('password') password2 = get('password2') mobile = get('mobile') allow = get('mobile' all([username, password, password2, mobile, allow]): Return HTTP. HttpResponseForbidden (' lack of will pass parameters') # to determine whether the user name. 5-20 characters if not re match (r '^ [a zA - Z0 - _ - 9] {5, 20} $', username) : Return HTTP. HttpResponseForbidden (" please enter a 5-20 characters' user name ') # judgment whether the password is 8 to 20 digital if not re. Match (r '^ [0-9 a Za - z] 8, 20} {$', password) : Return the HTTP. HttpResponseForbidden (' please enter the password that was 8 to 20 ') # whether two password consistent if the password! = password2: return HTTP. HttpResponseForbidden (' two do not match the password input) # judgment. It is legal to have a phone number if not re match (r '^ 1/3-9 \ d {9} $', mobile) : Return HTTP. HttpResponseForbidden (' please enter the correct phone number ') # judge whether to check the user agreement if allow! = 'on' : the return of HTTP. HttpResponseForbidden (' please check the user agreement) try: user = User.objects.create_user(username=username, password=password, mobile=mobile) except DatabaseError as e: return render(request, 'register.html', {'register_errmsg': E.args}) # Login (request, user) return redirect(reverse('contents:index'))

The login method provided by Django, which encapsulates writing to a session, allows you to quickly login to a user and maintain state by writing uniquely identifiable information (such as the user ID) to the current browser cookie and the server session.

request.session[SESSION_KEY] =
request.session[BACKEND_SESSION_KEY] = backend
request.session[HASH_SESSION_KEY] = session_auth_hash

Session storage is stored in Redis, which was previously configured at project creation time

SESSION_ENGINE = "django.contrib.sessions.backends.cache"