1. Brief description of front-end functions

Insert picture description here

Using Vue development, using Vue.js two-way binding to achieve user interaction and partial page refresh effects.
Adopt front-end and back-end non-separation mode

1. Overview of main functions

Create registered static page styles and content templates
- You need to enter the user name, password, confirm password, mobile phone number, graphic verification code, SMS verification code, agree to the mall agreement selection box and registration button, and login jump
- Optional: website log, advertisement, etc.
Data verification required
- When the input box is out of focus, judge whether the required items are filled in and whether the content meets simple specifications
- When the user name input box is out of focus, you need to send verification to the back end to ensure that the user name is not registered
- When the two passwords are inconsistent, prompt to enter the same
- When the mobile phone number input box is out of focus, you need to send a verification to the back end to ensure that the mobile phone number has not been registered
- When obtaining the SMS verification code, you need to send a graphic verification to the backend, and the SMS will be sent only after the graphic verification code is correct
When the page is loaded, you need to initiate an application for a graphic verification code image to the backend

2. Simple verification after the input box is out of focus

Copy vue-2.5.16.js to the ./static/js directory in advance
Create register.js

1. Basic js reference

Add relevant js references in register.html

<script src="{% static 'js/vue-2.5.16.js' %}"></script>
<script src="{% static 'js/register.js' %}"></script>

2. Bind Vue data to the user registration page

Insert picture description here

<div id="app">
    <body>
    ......
    </body>
</div>

Insert picture description here

v-model="username": binding attribute
@blur="check_username": Bind the event of losing focus (for input box)
@change="check_allow": trigger event after binding change (for checkBox)
v-show="error_password2": v-show=True: display the corresponding information; otherwise hide

3. The user registers the JS file to achieve data verification

let vm = new Vue({
    
    
    el: '#app',
    // 修改Vue读取变量的语法
    delimiters: ['[[', ']]'],
    data: {
    
    
        username: '',
        error_name: false,
    },
    methods: {
    
    
        // 校验用户名
        check_username(){
    
    
        let re=/^[a-zA-Z0-9_-]{
    
    5,20}$/
        if (re.test(this.username))
        	this.error_name = false;
        }else {
    
    
	        this.error_name = true;
	        this.error_name_message = '请输入5-20个字符的用户名';
        }
    },
});

4. Need to pay attention to the pits to avoid

4.1 Solutions to blank and white screens in vue framework development

Insert picture description here

For details, please refer to: "Problems and Solutions Encountered by v-cloak"

4.2 Pay attention to spaces in regular expressions

Phenomenon: If there is a space, the regular expression will be wrong: an error will be reported if the string meets the length specification
correct:

4.3 Django modify bug

Code runs will report an error

nicodeDecodeError: 'gbk' codec can't decode byte 0xa6 in position 9737: ille

Solution:

打开django/views下的debug.py文件，转到line331行：
　　　with Path(CURRENT_DIR, 'templates', 'technical_500.html').open() as fh
　　将其改成：
　　　　with Path(CURRENT_DIR, 'templates', 'technical_500.html').open(encoding="utf-8") as fh
就成功了。

Insert picture description here

3. Repeated user registration (front-end)

When the user name input box loses focus, perform verification
After the simple verification is passed, a user name re-registration verification application is initiated to the backend through ajax, and the backend returns if 0 means that it has not been registered, otherwise it is registered or the database has an error.

        // 检验用户名
        check_username(){
    
    
            //用户名: 5-20 [a-zA-Z0-9_-]
            let re = /^[a-zA-Z0-9_-]{
    
    5,20}$/;
            if (re.test(this.username)){
    
    
                // 匹配 不展示错误提示信息
                this.error_name = false;
            }else {
    
    
                this.error_name = true;
                this.error_name_message = '请输入5-20个字符的用户名';
            }

            if (this.error_name == false){
    
    

                let url = '/users/usernames/'+ this.username +'/count/';
                // axios.get(url, 请求头(字典))    ajax请求
                axios.get(url, {
    
    
                    responseType: 'json'
                })
                    // 请求成功  function(response){
    
    }
                    .then(response => {
    
    
                        console.log(this);
                        console.log(response.data);
                        alert(response.data.count);
                        if (response.code==0 && response.data.count == 0){
    
    
                            this.error_name = false;
                        } else {
    
    
                            this.error_name=true;
                            if (response.code==0){
    
    
                                this.error_name_message="用户名已经存在";
                            }else{
    
    
                                this.error_name_message=response.date.errmsg;
                            }
                        }
                    })
                    // 请求不成功
                    .catch(error => {
    
    
                        console.log(error.response)
                    })
            }
        },

Add ajax reference in register.html

<script src="{% static 'js/axios-0.18.0.min.js' %}"></script>

Django project practice (mall): Fourth, user registration (front-end development)

1. Brief description of front-end functions

1. Overview of main functions

2. Simple verification after the input box is out of focus

1. Basic js reference

2. Bind Vue data to the user registration page

3. The user registers the JS file to achieve data verification

4. Need to pay attention to the pits to avoid

4.1 Solutions to blank and white screens in vue framework development

4.2 Pay attention to spaces in regular expressions

4.3 Django modify bug

3. Repeated user registration (front-end)

Guess you like