百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

在线编程学习网站开发教程:一、创建Django网站项目

liuian 2024-12-19 14:47 78 浏览


用django写了一个网站,在信息技术课上学生学习python用的,现在把整个过程写成教程展现出来。先看几个截图:

这个网站是ubuntu21.10,anaconda3下用VScode来完成的,编程判题采用了QingdaoU/JudgeServerAPI,网站试题来自卓帆、百日冲刺和科教版高中信息技术教材上的一些内容,在此表示感谢!

一、配置网站开发环境

为了本教程,全新配置了开发环境,整个网站复刻了一遍。

  1. 在 /home/下创建lichee文件夹,归属用户名wuxc
  2. 用conda 创建python虚拟环境,名为lichee-django,指定python版本
  3. 激活虚拟环境lichee-django,pip或conda安装django
  4. 使用pip list或conda list可以查看已经安装的python库
  5. 在/home/lichee下用django-admin创建django网站项目,项目名称名和文件夹名都是almond
  6. 在项目/home/lichee/almond/下新增应用django-admin startapp webcoding
  7. 用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称为模型,它是连接读写数据库的中介,后续介绍。第一讲就到这里,不足之处请指正。

相关推荐

赶紧收藏!编程python基础知识,本文给你全部整理好了

想一起学习编程Python的同学,趁我粉丝少,可以留言、私信领编程资料~Python基础入门既然学习Python,那么至少得了解下这门编程语言,知道Python代码执行过程吧。Python的历...

创建绩效改进计划 (PIP) 的6个步骤

每个经理都必须与未能达到期望的员工抗衡,也许他们的表现下降了,他们被分配了新的任务并且无法处理它们,或者他们处理了自己的任务,但他们的行为对他人造成了破坏。许多公司转向警告系统,然后在这些情况下终止。...

PI3K/AKT信号通路全解析:核心分子、上游激活与下游效应分子

PI3K/AKT/mTOR(PAM)信号通路是真核细胞中高度保守的信号转导网络,作用于促进细胞存活、生长和细胞周期进程。PAM轴上生长因子向转录因子的信号传导受到与其他多条信号通路的多重交叉相互作用的...

互联网公司要求签PIP,裁员连N+1都没了?

2021年刚画上句号,令无数互联网公司从业者闻风丧胆的绩效公布时间就到了,脉脉上已然炸了锅。阿里3.25、腾讯二星、百度四挡、美团绩效C,虽然名称五花八门,实际上都代表了差绩效。拿到差绩效,非但不能晋...

Python自动化办公应用学习笔记3—— pip工具安装

3.1pip工具安装最常用且最高效的Python第三方库安装方式是采用pip工具安装。pip是Python包管理工具,提供了对Python包的查找、下载、安装、卸载的功能。pip是Python官方提...

单片机都是相通的_单片机是串行还是并行

作为一个七年的从业者,单片机对于我个人而言它是一种可编程的器件,现在长见到的电子产品中几乎都有单片机的身影,它们是以单片机为核心,根据不同的功能需求,搭建不同的电路,从8位的单片机到32位的单片机,甚...

STM32F0单片机快速入门八 聊聊 Coolie DMA

1.苦力DMA世上本没有路,走的人多了,便成了路。世上本没有DMA,需要搬运的数据多了,便有了DMA。大多数同学应该没有在项目中用过这个东西,因为一般情况下也真不需要这个东西。在早期的单片机中...

放弃51单片机,直接学习STM32开发可能会面临的问题

学习51单片机并非仅仅是为了学习51本身,而是通过它学习一种方法,即如何仅仅依靠Datasheet和例程来学习一种新的芯片。51单片机相对较简单,是这个过程中最容易上手的选择,而AVR单片机则更为复杂...

STM32串口通信基本原理_stm32串口原理图

通信接口背景知识设备之间通信的方式一般情况下,设备之间的通信方式可以分成并行通信和串行通信两种。并行与串行通信的区别如下表所示。串行通信的分类1、按照数据传送方向,分为:单工:数据传输只支持数据在一个...

单片机的程序有多大?_单片机的程序有多大内存

之前一直很奇怪一个问题,每次写好单片机程序之后,用烧录软件进行烧录时,能看到烧录文件也就是hex的文件大小:我用的单片机芯片是STM32F103C8T6,程序储存器(flash)只有64K。从...

解析STM32单片机定时器编码器模式及其应用场景

本文将对STM32单片机定时器编码器模式进行详细解析,包括介绍不同的编码器模式、各自的优缺点以及相同点和不同点的应用场景。通过阅读本文,读者将对STM32单片机定时器编码器模式有全面的了解。一、引言...

两STM32单片机串口通讯实验_两个32单片机间串口通信

一、实验思路连接两个STM32单片机的串口引脚,单片机A进行发送,单片机B进行接收。单片机B根据接收到单片机A的指令来点亮或熄灭板载LED灯,通过实验现象来验证是否通讯成功。二、实验器材两套STM32...

基于单片机的智能考勤机设计_基于51单片机的指纹考勤机

一、设计背景随着科技水平的不断发展,在这么一个信息化的时代,智能化信息处理已是提高效率、规范管理和客观审查的最有效途径。近几年来,国内很多公司都在加强对企业人员的管理,考勤作为企业的基础管理,是公司...

STM32单片机详细教学(二):STM32系列单片机的介绍

大家好,今天给大家介绍STM32系列单片机,文章末尾附有本毕业设计的论文和源码的获取方式,可进群免费领取。前言STM32系列芯片是为要求高性能、低成本、低功耗的嵌入式应用设计的ARMCortexM...

STM32单片机的 Hard-Fault 硬件错误问题追踪与分析

有过单片机开发经验的人应该都会遇到过硬件错误(Hard-Fault)的问题,对于这样的问题,有些问题比较容易查找,有些就查找起来很麻烦,甚至可能很久都找不到问题到底是出在哪里。特别是有时候出现一次,后...