在线编程学习网站开发教程:一、创建Django网站项目
liuian 2024-12-19 14:47 54 浏览
用django写了一个网站,在信息技术课上学生学习python用的,现在把整个过程写成教程展现出来。先看几个截图:
这个网站是ubuntu21.10,anaconda3下用VScode来完成的,编程判题采用了QingdaoU/JudgeServerAPI,网站试题来自卓帆、百日冲刺和科教版高中信息技术教材上的一些内容,在此表示感谢!
一、配置网站开发环境
为了本教程,全新配置了开发环境,整个网站复刻了一遍。
- 在 /home/下创建lichee文件夹,归属用户名wuxc
- 用conda 创建python虚拟环境,名为lichee-django,指定python版本
- 激活虚拟环境lichee-django,pip或conda安装django
- 使用pip list或conda list可以查看已经安装的python库
- 在/home/lichee下用django-admin创建django网站项目,项目名称名和文件夹名都是almond
- 在项目/home/lichee/almond/下新增应用django-admin startapp webcoding
- 用tree终端命令查看目录结构和文件列表
过程如下,有省略:
项目文件夹almond下有一个同名子文件夹,我们称为主应用,内有全局参数设置文件settings.py,全局路由文件urls.py,还有网关接口文件可以选择其一asgi.py或wsgi.py; 项目目录下的manage.py文件是整个项目的入口,在配置文件中有一行:WSGI_APPLICATION = 'almond.wsgi.application'指定了使用wsgi。
打算在主应用中加views.py和models.py,把网站的首页、登录功能放入views中,把网站的所有数据库模型放在models中,供其它应用调用。
应用(app)是django管理代码的一种方式,它对应一个文件夹,用以管理整个项目的功能分类和MTV模式实现。使用 django-admin startapp <appname>命令,创建应用(app)webcoding,在应用webcoding中实现在线的代码编辑器功能,代码执行由后端的JudgeServer来编译执行,结果返回到前端。这个网站是提供统一的python编程环境和高中信息技术学业水平考试复习之用的。主应用almond和应用webcoding的目录结构如下:
lichee[?la??t?i?]荔枝、almond [?ɑ?m?nd] 杏仁,这里选用的水果名作为目录名称,是因为短简易记。almond 因首字母是a,在vscode中主应用almond显示在最前面,便于使用。
二、实现Hello World:
vscode 打开 项目文件夹/home/lichee/almond,以下叙述都以项目文件夹为当前目录,
点击左下角更换 python解释器,选择 虚拟环境lichee-django,重启vscode生效:
在模块almond文件中新建views.py文件,在其中写一个视图函数defalut,并在urls.py文件中导入这个视图,添加两行路由地址:
// almond/views.py
from django.shortcuts import render, HttpResponse
def default(request):
return HttpResponse("Hello world!!!") //把字符串作为回应返回到浏览器
// almond/urls.py
from django.urls import path, re_path
// 导入视图模块
import almond.views as tv
urlpatterns = [
path('admin/', admin.site.urls), // 系统自动产生,后台管理的,请要是库的CRUD
// 添加两行路由地址
re_path(r'^#39;, tv.default, name='top'), // http://127.0.0.1:8000 访问
path('index/', tv.default, name='index'), // http://127.0.0.1:8000/index 访问
]
在vscode的终端启动服务(系统终端中也可以):
conda activate lichee-django
cd /home/lichee/almond
python manage.py runserver
在浏览器中可以打开helloworld网页了。视图可以一个函数,也可以是一个类的方法,效果如下:
三、初步理解MTV模式
django 作为python网站开发的框架,使用了MTV模式,如下图(来自互联网)
刚才是通过 HttpResponse('string')返回前端的,现在改进一下,创建一个模板文件index.html,在视图中rend()函数渲染好返回前端,这是体现MTV模式前后端代码分离的基本行为。
在项目目录中创建模板文件夹templates,在其中新建文件index.html。
在主应用中修改settings.py几个地方:
//almond/settings.py
INSTALLED_APPS = [ //注册应用,实际是让项目能找到 对应的文件夹
......
'almond', //注册主应用,因为在其他应用中 调用 主应用中 视图和模型
//其他书籍和教程都没这么用,我尝试了是可以的
'webcoding', //注册 在线编程应用,后续还要添加更多的应用
]
#模板文件夹
TEMPLATES = [{
......
// 模板文件夹 almond/templates
'DIRS': [ BASE_DIR/'templates' ], //BASE_DIR是项目文件夹的绝对路径。
......
} ]
ALLOWED_HOSTS = [ '*' ] //指定IP地址,可以从其他机器访问,'*'是任意的意 思,您的计算机可能在不同场合的ip不一样,'*'就可以了。
//语言和时区
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
//创建并配置 静态文件夹almond/statics,存放 css js img media等资源文件。
STATIC_URL = '/static/' //这个在html 或 浏览器中使用,名称可自定义
STATICFILES_DIRS = [ BASE_DIR/'statics' ] //这个是实际位置
接下来,修改almond/views.py, templages/index.html 两个文件:
// almond/views.py
from django.shortcuts import render, HttpResponse
class MainView():
def default(request):
myname = "wuxiaochun 吴晓春"
return render(request, 'index.html', {'name':myname})
<!-- templates/index.html -->
<html>
<head>
<title> 这是首页demo </title>
</head>
<body>
<p> <h1> Hello world !!!</h1>
<font color='blue' size='6'> I am {{name}} </font>
</p>
</body>
</html>
指定端口运行,效果如下:
在视图文件almond/views.py中把变量以字典的形式通过render()函数渲染给了模板文件templates/index.html,在index.html通过模板语法{{变量名}}的形式来显示。
render函数中第三个参数也可以用 locals() 来代替。
在上面MTV模式图中还有一个Model称为模型,它是连接读写数据库的中介,后续介绍。第一讲就到这里,不足之处请指正。
相关推荐
- 苹果ios打包的ipa应用APP怎么不能安装?多种安装不上的原因排查
-
亲爱的同学们,非常高兴能和同学们一起探讨关于苹果应用安装失败的问题。作为一个开发者,我们很可能会遇到这样的情况:开发好一个应用,兴致勃勃地想把它运行到手机上去测试,结果发现安装失败了。而此时,定位问题...
- Flutter 系列 - 环境搭建
-
#头条创作挑战赛#本文同步本人掘金平台的文章:https://juejin.cn/post/7002401225270362143Flutter作为火热的跨端工具包,在github上超过12...
- XV6 操作系统入门系列-01-环境配置
-
xv6是一个用于教育目的的简单Unix操作系统,基于Unix第六版(Version6,V6)开发,运行在RISC-V处理器上。它由麻省理工学院(MIT)开发,用于操作系统课程(Ope...
- 速递|已获2000万美元融资,苹果前高管携Unblocked挑战代码理解“黑箱难题”
-
图片来源:Unblocked每位开发者都有自己独特的编码风格。尽管公司制定了最佳实践并编写了文档,开发者要理解他人的代码库仍非易事。为解决这一问题,DennisPilarinos开发了一款名为U...
- C语言之编译器集合
-
C语言有多种不同的编译器,以下是常见的编译工具及其特点:一、主流C语言编译器1.GCC(GNUCompilerCollection)特点:开源、跨平台,支持多种语言(C、C++、Fortran...
- Xamarin for Visual Studio v4.0正式发布
-
XamarinforVisualStudio让开发者可以在Windows上用VisualStudio开发原生iOS,Android和Windows应用程序。XamarinforVis...
- macOS/iOS开发必备:Dylib文件的深度解析与安全防护
-
在macOS和iOS开发中,dylib文件是开发者们不可或缺的工具。它不仅能够实现代码复用、减少内存占用,还能支持程序的模块化更新。然而,随着技术的发展,dylib文件的安全性也面临着诸多挑战,例如被...
- 微软Islandwood项目启动:iOS应用轻松移植至Win10
-
IT之家讯5月1日消息,在昨天的Build2015开发者大会上,微软详细阐述了iOS应用程序移植到Win10平台的更多细节信息。现在,微软正式开启了ProjectIslandwood,该项目旨在搭...
- macOS26中被库克删掉的启动台,有开源的项目实现了
-
这是一个第三方实现的,只实现了最基本的功能,包括:启动台应用程序文件夹打开应用删除应用为什么要做这个macOS26版本中,自带的启动台功能被库克老小子删除了,导致使用起来很不习惯。所以就自己做了...
- 环境配置劝退?Rust + Slint开发环境搭建全攻略,手把手教你避坑!
-
各位对科技充满好奇,又跃跃欲试想亲手写代码的朋友们!是不是每次下定决心要学习一门新语言、尝试一个新框架时,都会被“环境配置”这第一道坎儿给劝退?下载一堆软件,安装各种工具,然后面对一堆看不懂的错误提示...
- MyEclipse移动开发教程:构建可分发的PhoneGap应用程序
-
本教程将用PhoneGap远程构建服务(remotebuildservices)去构建一个PhoneGap应用程序。当然,你也可以在本地构建PhoneGap应用程序。需要多说一句的是,Phone...
- Android和iOS应用可以快速移植到Win10
-
|责编:刘菲菲在今天凌晨的Build2015开发者大会上,微软宣布所有Android和iOS应用,都可以通过简单的修改代码,直接生成适用于Win10的应用。也就是说,开发者们不需要学习更多内容,就...
- Injection for Xcode:成吨的提高开发效率
-
本文为投稿文章,作者:@没故事的卓同学直接放demo演示动图:我很久以前就希望有这么一种功能,直接修改某行代码,F5一下就能刷新这个实例,而不用重写build整个项目。靠夭,我不是在说前端!没想居然有...
- 抖音品质建设 - iOS启动优化《原理篇》
-
前言启动是App给用户的第一印象,启动越慢用户流失的概率就越高,良好的启动速度是用户体验不可缺少的一环。启动优化涉及到的知识点非常多面也很广,一篇文章难以包含全部,所以拆分成两部分:原理和实践。本...
- 蓝鸥郑州iOS培训老师分享的iOS支付知识
-
最近常用朋友问iOS支付方面的问题,郑州iOS培训老师就和大家分享一些关于iOS支付方面的知识,希望对大家有所帮助。支付宝iOS使用支付宝进行一个完整的支付功能,大致有以下步骤:1>先与支付宝...
- 一周热门
-
-
Python实现人事自动打卡,再也不会被批评
-
【验证码逆向专栏】vaptcha 手势验证码逆向分析
-
Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控
-
一个解决支持HTML/CSS/JS网页转PDF(高质量)的终极解决方案
-
再见Swagger UI 国人开源了一款超好用的 API 文档生成框架,真香
-
网页转成pdf文件的经验分享 网页转成pdf文件的经验分享怎么弄
-
C++ std::vector 简介
-
系统C盘清理:微信PC端文件清理,扩大C盘可用空间步骤
-
飞牛OS入门安装遇到问题,如何解决?
-
10款高性能NAS丨双十一必看,轻松搞定虚拟机、Docker、软路由
-
- 最近发表
- 标签列表
-
- python判断字典是否为空 (50)
- crontab每周一执行 (48)
- aes和des区别 (43)
- bash脚本和shell脚本的区别 (35)
- canvas库 (33)
- dataframe筛选满足条件的行 (35)
- gitlab日志 (33)
- lua xpcall (36)
- blob转json (33)
- python判断是否在列表中 (34)
- python html转pdf (36)
- 安装指定版本npm (37)
- idea搜索jar包内容 (33)
- css鼠标悬停出现隐藏的文字 (34)
- linux nacos启动命令 (33)
- gitlab 日志 (36)
- adb pull (37)
- python判断元素在不在列表里 (34)
- python 字典删除元素 (34)
- vscode切换git分支 (35)
- python bytes转16进制 (35)
- grep前后几行 (34)
- hashmap转list (35)
- c++ 字符串查找 (35)
- mysql刷新权限 (34)