运用Django、MySQL、HTML、JS、Ajax模拟开发博客系统（1）

时间 2019-11-24

标签运用 django mysql html ajax 模拟开发博客系统栏目 Python 繁體版

原文原文链接

开发环境：django 2.0.2 工具为pycharmjavascript

首先建立一个django项目名为blog 第一个程序名为BlogUserhtml

建立完成以后须要在templates下新建一个名为register.html的文件java

重复上步操做在新建一个名为welcome.html文件，用于登录成功后的欢迎界面
在register.html文件内写入以下代码，可在浏览器内呈现简单的登陆注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/static/js/jquery-3.3.1.js"></script>
    <script>
        $(function (){
            $("input[name='username']").blur(function () {
               //alert("")
                uname=$("input [name='username']").val()
                CSRF=$("input[name='csrfmiddlewaretoken']").val()
                $.ajax({
                    url:'/BlogUser/getUser',
                data:{'uname':uname,'csrfmiddlewaretoken':CSRF},
                    type:'POST',
                    success:function (dat) {
                        if (dat=='True'){
                            $("span").html("用户名已存在")
                            }
                        else{
                            $("span").html("用户名能够使用")
                            }
                    }

                });
            });
        });
    </script>
</head>
<body>
<h1>欢迎注册</h1>
<form action="/BlogUser/register" method="post">
    {% csrf_token %}
    用户名：<input type="text" name="username" value="{{ username }}">
            <span>{{ error }}</span>
    <br>
    密  码：<input type="password" name="pwd"><br>
{#    性  别：<input type="radio" name="sex" value="女" checked>女#}
{#            <input type="radio" name="sex" value="男">男<br>#}
{#    爱  好：<input type="checkbox" name="likes" value="篮球">篮球#}
{#            <input type="checkbox" name="likes" value="足球">足球#}
{#            <input type="checkbox" name="likes" value="乒乓球">乒乓球<br>#}
{#    地址：#}
{#        <select>#}
{#            <option value="北京">北京</option>#}
{#            <option value="上海">上海</option>#}
{#            <option value="广州">广州</option>#}
{#            <option value="深圳">深圳</option>#}
{#        </select>#}
{#    <br>#}
    <input type="submit" value="注册">
    </form>
</body>
</html>

在BlogUser下models目录设置了两个简单的字段用户名和密码
其中models.py承载数据的对象并提供了对数据的curd(增删改查) 能够生成数据库表
在SQLyog中建立py_blog数据库（在数据库中直接按ctrl+D建立新的数据库）
而后咱们须要更改django的数据库链接引擎(blog下settings.py目录内，找到DATABAS）
django链接数据库必需要有django driver 为mysqlclient 版本为1.7.3+mysql
能够经过 pip install mysqlclient来安装jquery
因为刚开始的时候就建立了开始的app 为bloguser在这里django 自动帮咱们生成了若是没有的话须要本身写上去ajax