django开发商城系统之使用Vue.js实现前端注册逻辑

最新推荐文章于 2023-07-16 16:43:43 发布

随着风儿去流浪

最新推荐文章于 2023-07-16 16:43:43 发布

阅读量193

点赞数

分类专栏： PythonWeb 文章标签： vue javascript js django

本文链接：https://blog.csdn.net/weixin_45915507/article/details/115408386

版权

PythonWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

目的：使用Vue.js双向绑定实现用户交互和页面局部刷新的效果

文章目录

步骤

1. 用户注册页面绑定Vue数据

准备盒子标签：首先使用<div>标签将body里面的内容全部包裹。使vue.js的作用域为全部。

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

对post里面的细节进行操作：

绑定用户名输入框：v-model="username"
然后对事件鼠标光标从框中消失焦点进行监听@blur='check_username'
由于用户名这里可能出现两种错误，因此需要控制两种展示方法。即v-show="error_name"

<li>
	<label>用户名:</label>
			<input type="text" v-model="username" name="username" @blur="check_username" id="user_name">
    <span class="error_tip" v-show="error_name">{{ error_name_message }}</span>		</li>											
<li>
	<label>密码:</label>
		<input type="password" v-model="password" @blur="check_password" name="password" id="pwd">
		<span class="error_tip" v-show="error_password">请输入8-20位的密码</span>
</li>
<li>
	<label>确认密码:</label>
		<input type="password" name="password2" v-model="password2" @blur="check_password2" id="cpwd">
		<span class="error_tip" v-show="error_password2">两次输入的密码不一致</span>
</li>
<li>
	<label>手机号:</label>
		<input type="text" name="mobile" v-model="mobile" @blur="check_mobile" id="phone">
		<span class="error_tip" v-show="error_mobile">{{ error_mobile_message }}</span>
</li>

vue处理勾选信息

<li class="agreement">
	<input type="checkbox" name="allow" v-model="allow" @change="check" id="allow">
<label>同意”在线商城用户使用协议“</label>
<span class="error_tip" v-show="error_allow">请勾选用户协议</span>
</li>

vue处理递交事件, 使用v-cloak解决渲染页面有延迟后，会将大胡子语法内容打印下来的问题(影响美观)。

<form method="post" class="register_form" @submit="on_submit" v-cloak>

表单中如果是post请求，django将会做后台验证，因此需要在form中增加一条：{{ csrf_input}}, 防止跨站请求伪造。否则由于安全机制，django后台框架将会报错。

2. register.js实现用户交互

导入vue.js库和实现ajax的请求库

<script type="text/javascript" src="{{ static('js/vue-2.5.16.js') }}"></script>
<script type="text/javascript" src="{{ static('js/axios-0.18.0.min.js') }}"></script>

将register.js绑定到register.html中

新建一个register.js 并将其绑定到register.html中：

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

绑定html内容
由于需要同时使用到jinja2和vue.js, 因此需要重新定义vue.js读取变量的语法，这里将{{ }}修改为[[ ]]。

let vm = new Vue({
    // 通过id绑定 
    el: '#app',
    // 修改Vue读取变量的语法
    delimiters: ['[[', ']]'],
    data: {
        username: '',
        password: '',
        password2: '',
        mobile: '',
        allow: '',

        error_name: false,
        error_password: false,
        error_password2: false,
        error_mobile: false,
        error_allow: false,

        error_name_message: '',
        error_mobile_message: '',
    },
    methods: {
    // 校验用户名
    check_username(){
        let re = /^[a-zA-Z0-9_-]{5,20}$/;
        if (re.test(this.username)) {
            this.error_name = false;
        } else {
            this.error_name_message = '请输入5-20个字符的用户名';
            this.error_name = true;
        }
    },
    // 校验密码
    check_password(){
        let re = /^[0-9A-Za-z]{8,20}$/;
        if (re.test(this.password)) {
            this.error_password = false;
        } else {
            this.error_password = true;
        }
    },
    // 校验确认密码
    check_password2(){
        if(this.password != this.password2) {
            this.error_password2 = true;
        } else {
            this.error_password2 = false;
        }
    },
    // 校验手机号
    check_mobile(){
        let re = /^1[3-9]\d{9}$/;
        if(re.test(this.mobile)) {
            this.error_mobile = false;
        } else {
            this.error_mobile_message = '您输入的手机号格式不正确';
            this.error_mobile = true;
        }
    },
    // 校验是否勾选协议
    check_allow(){
        if(!this.allow) {
            this.error_allow = true;
        } else {
            this.error_allow = false;
        }
    },
    // 监听表单提交事件
    on_submit(){
        this.check_username();
        this.check_password();
        this.check_password2();
        this.check_mobile();
        this.check_allow();

        if(this.error_name == true || this.error_password == true || this.error_password2 == true
            || this.error_mobile == true || this.error_allow == true) {
            // 禁用表单的提交
            window.event.returnValue = false;
        }
    },
}