本次使用到的知识：

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

实现效果：

功能结构图

准备工作

创建项目

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.运行结果

功能结构图

管理端功能结构图：

前台：

准备工作

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

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

pip install Django

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

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

创建项目

1.创建项目

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

django-admin startproject message_board

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

2.创建App

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

django-admin startapp message

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

3.创建对应文件夹

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

编写代码

1.创建数据库

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

python manage.py migrate

用于生成数据库。

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

字段	类型	说明
id	char(36)	留言id，非空，主键，为36位uuid
time	Datetime	非空，默认为当前时间
title	Vatchar(100)	留言标题，非空
message_text	Varchar(5000)	留言内容，非空

在项目目录下执行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 modelsclass AuthGroup(models.Model):id = models.IntegerField(primary_key=True)  # AutoField?name = models.CharField(unique=True, max_length=80)class Meta:managed = Falsedb_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 = Falsedb_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 = Falsedb_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 = Falsedb_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 = Falsedb_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 = Falsedb_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 = Falsedb_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 = Falsedb_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 = Falsedb_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 = Falsedb_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 = Falsedb_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,为生成的uuidid = 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-8from 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 adminfrom message import modelsclass MessageAdmin(admin.ModelAdmin):passadmin.site.register(models.Message, MessageAdmin)

6.templates/index.html

index.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() {//点击添加留言图片跳转到添加留言界面$(".add_message").click(function() {window.location.href = '/add_message'})
})
</script>
<body style="background-image: url('https://uuclock-1254170634.cos.ap-chengdu.myqcloud.com/bg.jpg')"><img src="static/img/add.png" class="add_message"/><center><h1 style="margin-top: 50px; color: #E1FFFF;margin-bottom: 20px;">所有的留言</h1></center>{% for message in message_list %}<div class="layui-col-md12" style="width: 80%;border-radius: 20px; border:0.1px solid #FFF; margin-bottom: 30px;margin-left: 10%;"><div class="layui-card"><div class="layui-card-header">{{message.time}} 标题：{{message.title}}</div><div class="layui-card-body" style="margin-top: -20px; white-space:normal;word-break:break-all;word-wrap:break-word;word-break:break-all;white-space: pre-line;">{{message.message_text}}</div></div></div>{% endfor %}
</body>
<style type="text/css">
.add_message {width: 50px;height: 50px;background: #00BFFF;border-radius: 50%;z-index: 999;position: fixed;float: right;right: 3vw;top: 70vh;
}
</style>
</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() {//使用layuilayui.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

添加留言：http://localhost/add_message

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

管理端首页：http://localhost/admin/

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

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

最后附上项目地址：https://github.com/RickyHal/message_board

Django+Layui+SQLite+JQuery实现一个简单的留言板相关推荐

php mysql 简单留言板_PHP+MySql实现一个简单的留言板
跟着书学的,代码不是自己写的,但是都能理解,有时间自己去写个好看一点的吼吼吼-(不熟练花了一天的时间- 留言板是接触WEB开发的基础,写一个留言板需要知道前端的一些基础标签,对数据库有一个了解会基础S ...
PHP写一个简单的留言板
要求: 1.留言本,即留言后,能让客户用户查看其留言. 2.留言本该具有用户发表的标题,用户的注册名,发表的内容. 3.所以留言本的实现需要两个模块,一个是静态的html页面,提供表单供用户输入,另一 ...
【留言板】使用Think PHP6＋光年模板开发一个简单的留言板
前言:本文章是使用thinkphp6框架加上光年模板开发的一套留言板,个人感觉特别适合新手有点小基础的同学尝试去实战,文章和代码可能都写得不太好! 工具与环境: VSCode(简称)也可以使用别的光 ...
如何使用小程序云开发实现一个简单的留言板
简介本教程将教您如何使用小程序云开发快速构建一个留言板应用程序.您将学习到如何使用云数据库.云函数和云存储等功能,以及如何将它们集成到您的小程序中. 小程序开发教程:微信小程序入门与实战常用组件A ...
留言板asp mysql_ASP简单入门(制作一个简单的留言板 )
语句 -- %> <2>定义变量dim语句 dim a,b a=10 b="ok!" %> 注意:定义的变量可以是数值型,也可以是字符或者其他类型的 < ...
HTML+PHP+MYSQL实现一个简单的留言板
提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加大家好,下面将为大家展示基于HTML PHP MYSQL的留言板的设计与实现过程,适合初学者点击观看,以下我将会以笔者自称! 废话不 ...
XPO学习(6)----实现一个简单的留言薄(ASP.NET)
l留言簿是网站上很常见的一个功能.一个访问者可以通过这个留言簿留下姓名,EMAIL,消息标题及内容.内容显示用ASPxNewscontrol控件.类似界面如下: 步骤: 1.界面设计 2.定义一个持久 ...
php实例之简单的留言板,PHP实例一之简单的留言板
注:参考兄弟连教学视频写的一个简单的留言板模块,获得更多内容请参考我的博文. 示例:文本式留言板需要的知识点: 1.文件操作: file_put_contents();文件的写入函数 file_ge ...
Django学习笔记2：一个简单的开发实例
Technorati 标签: Python,Django 目标:通过开发一个简单的Todo管理应用,熟悉Django的基本概念.和使用. 运行环境 Windows Vista + Python 2.7 ...

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

功能结构图

准备工作

创建项目

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.运行结果

Django+Layui+SQLite+JQuery实现一个简单的留言板相关推荐

最新文章

热门文章