Django+Layui+SQLite+JQuery实现一个简单的留言板

客官°小女子只卖身不卖艺 2022-02-23 07:34 575阅读 0赞

本次使用到的知识：

*  Django框架的使用
 *  Layui的使用
 *  Jquery的使用
 *  SQLite的使用

实现效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoeTExMDc3ODY4NzE_size_16_color_FFFFFF_t_70][]

**目录**

功能结构图

准备工作

创建项目

1.创建项目

2.创建App

3.创建对应文件夹

编写代码

1.创建数据库

2.编写代码

1.message/api.py

2.message\_board/settings.py

3.message\_board/urls.py

4.message/views.py

5.message/admin.py

6.templates/index.html

7.templates/add\_message.html

运行项目

1.创建管理员用户

2.运行服务器

3.运行结果

--------------------

# 功能结构图 #

管理端功能结构图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoeTExMDc3ODY4NzE_size_16_color_FFFFFF_t_70 1][]

前台：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoeTExMDc3ODY4NzE_size_16_color_FFFFFF_t_70 2][]

# 准备工作 #

（1）安装Python3，参考我的博客：[Python3在Windows、Linux、Mac系统上的安装][Python3_Windows_Linux_Mac]

（2）安装Django框架，Cmd命令行下输入：

pip install Django

（3）下载Layui框架，下载地址：[https://www.layui.com/][https_www.layui.com]

（4）下载jquery.min.js，下载地址：[http://jquery.com/download/][http_jquery.com_download]

# 创建项目 #

## 1.创建项目 ##

在待创建的目录下进入Cmd控制台，输入命令：

django-admin startproject message_board

执行完之后便创建好了一个Django项目，创建后的目录如：

![20190407120502297.jpg][]

## 2.创建App ##

进入创建项目后的项目目录，输入cmd命令：

django-admin startapp message

创建一个message App，用于处理前端的请求，创建后的目录如：

![20190407120633396.jpg][]

## 3.创建对应文件夹 ##

在message\_board/message下创建文件夹static和templates，其中static目录放置js、css、layui、图片等静态文件，templates放置网页。在static目录下分别创建js、img、layui目录分别存储对应的内容，创建后的目录如：

![2019040712142271.jpg][]

# 编写代码 #

## 1.创建数据库 ##

在项目目录下执行cmd命令：

python manage.py migrate

用于生成数据库。

使用SQLite数据库管理工具打开项目目录下的db.sqlite3文件，创建表message，用于存储留言，其结构为：

<table> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;width:138.25pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">字段</span></p> </td> 
   <td style="vertical-align:top;width:138.25pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">类型</span></p> </td> 
   <td style="vertical-align:top;width:138.3pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">说明</span></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:138.25pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">id</span></p> </td> 
   <td style="vertical-align:top;width:138.25pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">char(36)</span></p> </td> 
   <td style="vertical-align:top;width:138.3pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">留言id，非空，主键，为36位uuid</span></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:138.25pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">time</span></p> </td> 
   <td style="vertical-align:top;width:138.25pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">Datetime</span></p> </td> 
   <td style="vertical-align:top;width:138.3pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">非空，默认为当前时间</span></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:138.25pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">title</span></p> </td> 
   <td style="vertical-align:top;width:138.25pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">Vatchar(100)</span></p> </td> 
   <td style="vertical-align:top;width:138.3pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">留言标题，非空</span></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:138.25pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">message_text</span></p> </td> 
   <td style="vertical-align:top;width:138.25pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">Varchar(5000)</span></p> </td> 
   <td style="vertical-align:top;width:138.3pt;"> <p style="margin-left:0cm;"><span style="color:#000000;">留言内容，非空</span></p> </td> 
  </tr> 
 </tbody> 
</table>

在项目目录下执行cmd命令：

Python manage.py inspectdb message/models.py

生成Django 的model，这有点类似于Java Hibernate的持久类，对数据库的操作都是基于models.py文件中的类实现的。

执行命令后models.py文件内容便变成了：

# This is an auto-generated Django model module.
    # You'll have to do the following manually to clean this up:
    #   * Rearrange models' order
    #   * Make sure each model has one field with primary_key=True
    #   * Make sure each ForeignKey has `on_delete` set to the desired behavior.
    #   * Remove `managed = False` lines if you wish to allow Django to create, modify, and delete the table
    # Feel free to rename the models, but don't rename db_table values or
    # field names.
    from django.db import models
    
    
    class AuthGroup(models.Model):
        id = models.IntegerField(primary_key=True)  # AutoField?
        name = models.CharField(unique=True, max_length=80)
    
        class Meta:
            managed = False
            db_table = 'auth_group'
    
    
    class AuthGroupPermissions(models.Model):
        id = models.IntegerField(primary_key=True)  # AutoField?
        group = models.ForeignKey(AuthGroup, models.DO_NOTHING)
        permission = models.ForeignKey('AuthPermission', models.DO_NOTHING)
    
        class Meta:
            managed = False
            db_table = 'auth_group_permissions'
            unique_together = (('group', 'permission'),)
    
    
    class AuthPermission(models.Model):
        id = models.IntegerField(primary_key=True)  # AutoField?
        content_type = models.ForeignKey('DjangoContentType', models.DO_NOTHING)
        codename = models.CharField(max_length=100)
        name = models.CharField(max_length=255)
    
        class Meta:
            managed = False
            db_table = 'auth_permission'
            unique_together = (('content_type', 'codename'),)
    
    
    class AuthUser(models.Model):
        id = models.IntegerField(primary_key=True)  # AutoField?
        password = models.CharField(max_length=128)
        last_login = models.DateTimeField(blank=True, null=True)
        is_superuser = models.BooleanField()
        username = models.CharField(unique=True, max_length=150)
        first_name = models.CharField(max_length=30)
        email = models.CharField(max_length=254)
        is_staff = models.BooleanField()
        is_active = models.BooleanField()
        date_joined = models.DateTimeField()
        last_name = models.CharField(max_length=150)
    
        class Meta:
            managed = False
            db_table = 'auth_user'
    
    
    class AuthUserGroups(models.Model):
        id = models.IntegerField(primary_key=True)  # AutoField?
        user = models.ForeignKey(AuthUser, models.DO_NOTHING)
        group = models.ForeignKey(AuthGroup, models.DO_NOTHING)
    
        class Meta:
            managed = False
            db_table = 'auth_user_groups'
            unique_together = (('user', 'group'),)
    
    
    class AuthUserUserPermissions(models.Model):
        id = models.IntegerField(primary_key=True)  # AutoField?
        user = models.ForeignKey(AuthUser, models.DO_NOTHING)
        permission = models.ForeignKey(AuthPermission, models.DO_NOTHING)
    
        class Meta:
            managed = False
            db_table = 'auth_user_user_permissions'
            unique_together = (('user', 'permission'),)
    
    
    class DjangoAdminLog(models.Model):
        id = models.IntegerField(primary_key=True)  # AutoField?
        object_id = models.TextField(blank=True, null=True)
        object_repr = models.CharField(max_length=200)
        action_flag = models.PositiveSmallIntegerField()
        change_message = models.TextField()
        content_type = models.ForeignKey(
            'DjangoContentType', models.DO_NOTHING, blank=True, null=True)
        user = models.ForeignKey(AuthUser, models.DO_NOTHING)
        action_time = models.DateTimeField()
    
        class Meta:
            managed = False
            db_table = 'django_admin_log'
    
    
    class DjangoContentType(models.Model):
        id = models.IntegerField(primary_key=True)  # AutoField?
        app_label = models.CharField(max_length=100)
        model = models.CharField(max_length=100)
    
        class Meta:
            managed = False
            db_table = 'django_content_type'
            unique_together = (('app_label', 'model'),)
    
    
    class DjangoMigrations(models.Model):
        id = models.IntegerField(primary_key=True)  # AutoField?
        app = models.CharField(max_length=255)
        name = models.CharField(max_length=255)
        applied = models.DateTimeField()
    
        class Meta:
            managed = False
            db_table = 'django_migrations'
    
    
    class DjangoSession(models.Model):
        session_key = models.CharField(primary_key=True, max_length=40)
        session_data = models.TextField()
        expire_date = models.DateTimeField()
    
        class Meta:
            managed = False
            db_table = 'django_session'
    
    
    class Message(models.Model):
        id = models.CharField(unique=True, max_length=36, primary_key=True)
        time = models.DateTimeField(auto_now=True)
        title = models.CharField(max_length=100)
        message_text = models.CharField(max_length=5000)
    
        class Meta:
            managed = False
            db_table = 'message'

其中每个类对应数据库的一张表。

## 2.编写代码  ##

需要创建的文件有：

*  message/api.py
 *  templates/index.html
 *  templates/add\_message.html

需要修改的文件有：

*  message\_board/settings.py
 *  message\_board/urls.py
 *  message/views.py
 *  message/admin.py

### 1.message/api.py ###

api.py是 本项目的核心文件，创建在message目录下，用于操作数据库，存取留言，其内容为：

# coding:utf-8
    from message import models
    import uuid
    
    #将查询结果转list，方便返回给前端读取
    def getJson(data):
        res = []
        for item in data:
            if item not in res:
                res.append(item)
        return res
    
    #获取所有的留言
    def get_all_model():
        #查询所有留言
        messages = getJson((models.Message.objects.all()))
        return messages
    
    #将从前端获取到的留言内容存储到数据库
    def submit_message(request):
        try:
            #留言id,为生成的uuid
            id = uuid.uuid4()
            #留言标题
            title = request.POST['title']
            #留言内容
            message_text = request.POST['message_text']
            #写入SQLite数据库
            models.Message.objects.create(
                id=id, title=title, message_text=message_text)
            return '提交成功'
        except:
            return '提交失败'

### 2.message\_board/settings.py ###

settings.py存储的是Django项目的配置文件，这里只需要修改下列字段的value：

*  ALLOWED\_HOSTS：允许访问所有链接
 *  INSTALLED\_APPS：声明创建的App名称
 *  MIDDLEWARE：禁止csrf，不禁止访问时会出现403错误
 *  LANGUAGE\_CODE：管理端语言，默认为en-us

修改上述字段的值为：

ALLOWED_HOSTS = ['*']
    
    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
        'message'
    ]
    
    MIDDLEWARE = [
        'django.middleware.security.SecurityMiddleware',
        'django.contrib.sessions.middleware.SessionMiddleware',
        'django.middleware.common.CommonMiddleware',
        #'django.middleware.csrf.CsrfViewMiddleware',
        'django.contrib.auth.middleware.AuthenticationMiddleware',
        'django.contrib.messages.middleware.MessageMiddleware',
        'django.middleware.clickjacking.XFrameOptionsMiddleware',
    ]
    
    TIME_ZONE = 'Asia/Shanghai'

最后，还需要向settings.py文件内添加内容：

STATICFILES_DIRS = [
        os.path.join(BASE_DIR, 'static/'),
    ]

用于配置static文件目录。

### 3.message\_board/urls.py ###

urls.py用于配置路由，即访问对应的链接时将请求交与哪个函数处理，其内容为：

# coding:utf-8
    
    from django.contrib import admin
    from django.urls import path
    from message import views as message
    urlpatterns = [
        #后台管理系统
        path('admin/', admin.site.urls),
        #首页
        path('', message.index),
        #前台添加留言
        path('add_message/', message.add_message),
        #提交留言
        path('add_message/submit_message/', message.submit_message),
    ]

### 4.message/views.py ###

views.py文件存储的是处理请求的函数，其内容为：

# coding:utf-8
    from django.shortcuts import render
    from django.http import HttpResponse
    from message import api
    import uuid
    
    #首页
    def index(request):
        #获取所有的留言，并跳转到首页
        message_list = api.get_all_model()
        return render(request, 'index.html', {'message_list': message_list})
    
    #跳转到添加留言页面
    def add_message(request):
        return render(request, 'add_message.html')
    
    #获取前端提交的留言信息
    def submit_message(request):
        #只接收POST请求
        if request.method == 'POST':
            #将从前端收到的留言内容写入数据库
            res = api.submit_message(request)
            return HttpResponse(res)
        else:
            return HttpResponse('请求方式错误')

### 5.message/admin.py ###

admin.py用于将message表添加到后台管理系统中，方便管理留言内容，其内容为：

# coding:utf-8
    from django.contrib import admin
    
    from message import models
    
    
    class MessageAdmin(admin.ModelAdmin):
        pass
    
    admin.site.register(models.Message, MessageAdmin)

### 6.templates/index.html ###

index.html文件首页界面，其内容为：

### 7.templates/add\_message.html ###

add\_message.html文件为添加留言界面，其内容为：

{% load staticfiles %}
    <!DOCTYPE html>
    <html>
    
    <head>
        <title>留言板</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="{% static 'layui/layui.js' %}"></script>
        <script src="{% static 'js/jquery.min.js' %}"></script>
        <link rel="stylesheet" href="{% static 'layui/css/layui.css' %}">
    </head>
    <script type="text/javascript">
    $(document).ready(function() {
        //使用layui
        layui.use('layer', function() {
            //点击提交按钮
            $("#submit").click(function() {
                var layer = layui.layer;
                var title = $("#title").val()
                var message_text = $("#message_text").val()
                //判断留言内容是否为空
                if (title.length == 0) {
                    layer.msg('标题为空');
                } else if (message_text == 0) {
                    layer.msg('写点内容吧');
                } else {
                    //发送Ajax请求给后端
                    $.ajax({
                        url: "submit_message/",
                        method: 'POST',
                        data: {
                            'title': $("#title").val(),
                            'message_text': $("#message_text").val()
                        },
                        success: function(res) {
                            layer.msg(res);
                            setTimeout(function() {
                                if (res == '提交成功') {
                                    window.location.href = '/'
                                } else {
                                    $("#title").val('')
                                    $("#message_text").val('')
                                }
                            }, 500);
                        },
                        fail: function(res) {
                            layer.msg(res);
                        }
                    })
                }
            })
        });
    })
    </script>
    
    <body style="background-image: url('https://uuclock-1254170634.cos.ap-chengdu.myqcloud.com/bg.jpg')">
        <center>
            <h1 style="margin-top: 80px; color: #E1FFFF;">留言</h1>
        <div class="layui-form-item" style="margin-top: 50px; width: 70%;">
            <div class="layui-input-block">
                <input type="text" id="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" maxlength="100" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text" style=" width: 70%;">
            <div class="layui-input-block">
                <textarea placeholder="请输入留言内容" id="message_text" class="layui-textarea" maxlength="5000" style="height:35vh;"></textarea>
            </div>
        </div>
            <div id="submit" class="layui-btn layui-btn-normal" style="background-color: #00BFFF;">提交</div>
        </center>
    </body>
    </html>

# 运行项目 #

## 1.创建管理员用户 ##

在项目目录下执行cmd命令：

Python manage.py createsuperuser

之后输入账号密码即可。

## 2.运行服务器 ##

Django有自带的服务器，但是其不稳定，只能用于测试环境，请勿用于生产环境，如需在生产环境下运行，请安装在Nginx和Apache服务器上。

在项目目录下执行cmd命令：

Python manage.py runserver 0.0.0.0:80

这里的0.0.0.0表示外网可以访问，如果不加只能在本地访问，80为访问端口。

命令执行后会输出如下内容：

Performing system checks...
    
    System check identified no issues (0 silenced).
    April 07, 2019 - 12:56:43
    Django version 2.0.7, using settings 'message_board.settings'
    Starting development server at http://0.0.0.0:80/
    Quit the server with CTRL-BREAK.

表示启动成功，如果有错请自行查看提示。

## 3.运行结果 ##

首页：http://localhost

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoeTExMDc3ODY4NzE_size_16_color_FFFFFF_t_70][]

添加留言：http://localhost/add\_message

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoeTExMDc3ODY4NzE_size_16_color_FFFFFF_t_70 3][]

管理端登录：http://localhost/admin

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoeTExMDc3ODY4NzE_size_16_color_FFFFFF_t_70 4][]

管理端首页：[http://localhost/admin/][http_localhost_admin]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoeTExMDc3ODY4NzE_size_16_color_FFFFFF_t_70 5][]

管理端查看所有留言：[http://localhost:8088/admin/message/message/][http_localhost_8088_admin_message_message]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoeTExMDc3ODY4NzE_size_16_color_FFFFFF_t_70 6][]

管理端查看留言：[http://localhost:8088/admin/message/message/df223f1c-65e5-461d-b0d3-d684ed418b4f/change/][http_localhost_8088_admin_message_message_df223f1c-65e5-461d-b0d3-d684ed418b4f_change]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoeTExMDc3ODY4NzE_size_16_color_FFFFFF_t_70 7][]

最后附上项目地址：[https://github.com/RickyHal/message\_board][https_github.com_RickyHal_message_board]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoeTExMDc3ODY4NzE_size_16_color_FFFFFF_t_70]: /images/20220223/6c254e35473147eb96f92a60b5b04cdc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoeTExMDc3ODY4NzE_size_16_color_FFFFFF_t_70 1]: /images/20220223/2b66b5cb8ed94056821feba9e8cb6f3d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoeTExMDc3ODY4NzE_size_16_color_FFFFFF_t_70 2]: /images/20220223/8ff79498127443b5b36e71dc8d2994f0.png
[Python3_Windows_Linux_Mac]: https://blog.csdn.net/hhy1107786871/article/details/85159999
[https_www.layui.com]: https://www.layui.com/
[http_jquery.com_download]: http://jquery.com/download/
[20190407120502297.jpg]: /images/20220223/4c1ec9d14dec4bc590872e6ae6fcc821.png
[20190407120633396.jpg]: /images/20220223/39d83aa96d294e7e8a2e6628e9a03161.png
[2019040712142271.jpg]: /images/20220223/2c1a3d51c1bb40adabda4f2ed63f6dde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoeTExMDc3ODY4NzE_size_16_color_FFFFFF_t_70 3]: /images/20220223/289c290c2c7b459aa6e28fcee7d7d55a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoeTExMDc3ODY4NzE_size_16_color_FFFFFF_t_70 4]: /images/20220223/55094b9aa8e942019ee469a0b28e616c.png
[http_localhost_admin]: http://localhost:8088/admin/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoeTExMDc3ODY4NzE_size_16_color_FFFFFF_t_70 5]: /images/20220223/a356f066978c4b7d9a29884ce066fab4.png
[http_localhost_8088_admin_message_message]: http://localhost:8088/admin/message/message/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoeTExMDc3ODY4NzE_size_16_color_FFFFFF_t_70 6]: /images/20220223/f8342800402f47efa10dc8b991761585.png
[http_localhost_8088_admin_message_message_df223f1c-65e5-461d-b0d3-d684ed418b4f_change]: http://localhost:8088/admin/message/message/df223f1c-65e5-461d-b0d3-d684ed418b4f/change/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoeTExMDc3ODY4NzE_size_16_color_FFFFFF_t_70 7]: /images/20220223/76772784f55a4503bfa023e9f5ee5179.png
[https_github.com_RickyHal_message_board]: https://github.com/RickyHal/message_board