经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 程序设计 » Django » 查看文章
用pycharm开发django项目示例代码
来源：jb51　　时间：2019/6/14 9:23:01　　对本文有异议

在pycharm（企业版）中新建Django工程，注意使用虚拟环境

创建成功后，在pycharm显示的工程目录结构如下：

打开pycharm的Terminal，进入该工程的目录新建一个django工程

  1. python3 manage.py startapp django_web

执行成功后，工程目录结构如下：

修改settings.py文件，注册该工程

Django的开发遵循MTV模式（models, templates, views），views.py负责执行操作，models.py负责数据处理（如数据库连接），templates目录下存放网页的模板

首先在templates下新建一个index.html文件，并把以下内容替换到该文件中

  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4. <head>
  5.  <meta charset="UTF-8">
  6.  <title>The blah</title>
  7.  <link rel="stylesheet" type="text/css" href=" new_blah.css" rel="external nofollow" >
  8. </head>
  9. <body>
  10.  
  11. <div class="header">
  12.  <img src="images/blah.png">
  13.  <ul class="nav">
  14.   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
  15.   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Site</a></li>
  16.   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Other</a></li>
  17.  </ul>
  18.  
  19. </div>
  20.  
  21. <div class="main-content">
  22.  <h2>Article</h2>
  23.  <ul class="article">
  24.  
  25.   <li>
  26.    <img src="images/0001.jpg" width="100" height="90">
  27.    <h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >The blah</a></h3>
  28.    <p>This is a dangerously delicious cake.</p>
  29.   </li>
  30.  
  31.   <li>
  32.    <img src="images/0002.jpg" width="100" height="90">
  33.    <h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >The blah</a></h3>
  34.    <p>It's always taco night somewhere!</p>
  35.   </li>
  36.  
  37.   <li>
  38.    <img src="images/0003.jpg" width="100" height="90">
  39.    <h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >The blah</a></h3>
  40.    <p>Omelette you in on a little secret </p>
  41.   </li>
  42.  
  43.   <li>
  44.    <img src="images/0004.jpg" width="100" height="90">
  45.    <h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >The blah</a></h3>
  46.    <p>It's a sandwich. That's all we .</p>
  47.   </li>
  48.  </ul>
  49. </div>
  50.  
  51. <div class="footer">
  52.  <p>© Mugglecoding</p>
  53. </div>
  54. </body>
  55. </html>
  56.  
  57. <--!http://css3gen.com/box-shadow/-->

首先编写views.py文件，定义访问这个index.html文件的操作

  1. def index(request): 
  2.  
  3.   return render(request, 'index.html')

编写urls.py文件，定义访问这个index.html的url路径（使用正则表达式）

  1. from django.conf.urls import url 
  2. from django.contrib import admin 
  3. from django_web.views import index #导入views.py文件中的index函数 
  4.  
  5. urlpatterns = [ 
  6.  url(r'^admin/', admin.site.urls), 
  7.  url(r'^index/', index), #在url中凡是以url开头的访问都使用index函数来处理该请求 
  8. ]

在pycharm的Terminal中输入命令运行服务器：

  1. python3 manager.py runserver

在浏览器中输入url：http://127.0.0.1:8000/index/ 可以看到如下的格式，接下来要做的就是添加资源

将css文件（css文件的内容在最后）和图片（随意找几张图片，更名为如下所示即可）都复制到env5工程下的一个名为static的文件，工程结构如下：

注意：一定要保证与templates目录同级

修改index.html如下

  1. {% load static %}
  2.  
  3. <html>
  4.  
  5. <head>
  6.  <link rel="stylesheet" type="text/css" href="{% static 'css/new_blah.css' %}" rel="external nofollow" >
  7. </head>
  8. <body>
  9.  
  10. <div class="header">
  11.  <img src="{% static 'images/blah.png' %}">
  12.  <ul class="nav">
  13.   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
  14.   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Site</a></li>
  15.   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Other</a></li>
  16.  </ul>
  17. </div>
  18.  
  19. <div class="main-content">
  20.  <h2>Article</h2>
  21.  <ul class="articles">
  22.  
  23.   <li>
  24.    <img src="{% static 'images/0001.jpg' %}" width="100" height="91">
  25.  
  26.    <div class="article-info">
  27.     <h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >The blah</a></h3>
  28.     <p class="meta-info">
  29.      <span class="meta-cate">fun</span>
  30.      <span class="meta-cate">Wow</span>
  31.     </p>
  32.     <p class="description">Just say something.</p>
  33.    </div>
  34.  
  35.    <div class="rate">
  36.     <span class="rate-score">4.5</span>
  37.    </div>
  38.   </li>
  39.  
  40.   <li>
  41.    <img src="{% static 'images/0002.jpg' %}" width="100" height="91">
  42.    <div class="article-info">
  43.     <h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >The blah</a></h3>
  44.     <p class="meta-info">
  45.      <span class="meta-cate">butt</span>
  46.      <span class="meta-cate">NSFW</span>
  47.     </p>
  48.     <p class="description">Just say something.</p>
  49.    </div>
  50.  
  51.    <div class="rate">
  52.     <img src="{% static 'images/Fire.png' %}" width="18" height="18">
  53.     <span class="rate-score">5.0</span>
  54.    </div>
  55.   </li>
  56.  
  57.   <li>
  58.    <img src="{% static 'images/0003.jpg' %}" width="100" height="91">
  59.    <div class="article-info">
  60.     <h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >The blah</a></h3>
  61.     <p class="meta-info">
  62.      <span class="meta-cate">sea</span>
  63.     </p>
  64.     <p class="description">Just say something.</p>
  65.    </div>
  66.  
  67.    <div class="rate">
  68.     <span class="rate-score">3.5</span>
  69.    </div>
  70.   </li>
  71.  
  72.   <li>
  73.    <img src="{% static 'images/0004.jpg' %}" width="100" height="91">
  74.    <div class="article-info">
  75.     <h3><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >The blah</a></h3>
  76.     <p class="meta-info">
  77.      <span class="meta-cate">bay</span>
  78.      <span class="meta-cate">boat</span>
  79.      <span class="meta-cate">beach</span>
  80.     </p>
  81.     <p class="description">Just say something.</p>
  82.    </div>
  83.  
  84.    <div class="rate">
  85.     <span class="rate-score">3.0</span>
  86.    </div>
  87.   </li>
  88.  </ul>
  89. </div>
  90.  
  91. <div class="footer">
  92.  <p>© Mugglecoding</p>
  93. </div>
  94. </body>
  95.  
  96. </html>

在settings.py文件的最后增加如下配置

  1. STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)

再次打开浏览器就可以看到正常的显示

css文件

  1. body {
  2.  padding: 0 0 0 0;
  3.  background-color: #ffffff;
  4.  background-image: url(../images/bg3-dark.jpg);
  5.  background-position: top left;
  6.  background-repeat: no-repeat;
  7.  background-size: cover;
  8.  font-family: Helvetica, Arial, sans-serif;
  9. }
  10.  
  11.  
  12. .main-content {
  13.  width: 500px;
  14.  padding: 20px 20px 20px 20px;
  15.  border: 1px solid #dddddd;
  16.  border-radius:15px;
  17.  margin: 30px auto 0 auto;
  18.  background: #fdffff;
  19.  -webkit-box-shadow: 0 0 22px 0 rgba(50, 50, 50, 1);
  20.  -moz-box-shadow: 0 0 22px 0 rgba(50, 50, 50, 1);
  21.  box-shadow:   0 0 22px 0 rgba(50, 50, 50, 1);
  22.  
  23.  
  24. }
  25. .main-content p {
  26.  line-height: 26px;
  27. }
  28. .main-content h2 {
  29.  color: #585858;
  30. }
  31. .articles {
  32.  list-style-type: none;
  33.  padding: 0;
  34. }
  35. .articles img {
  36.  float: left;
  37.  padding-right: 11px;
  38. }
  39. .articles li {
  40.  border-top: 1px solid #F1F1F1;
  41.  background-color: #ffffff;
  42.  height: 90px;
  43.  clear: both;
  44. }
  45. .articles h3 {
  46.  margin: 0;
  47. }
  48. .articles a {
  49.  color:#585858;
  50.  text-decoration: none;
  51. }
  52. .articles p {
  53.  margin: 0;
  54. }
  55.  
  56. .article-info {
  57.  float: left;
  58.  display: inline-block;
  59.  margin: 8px 0 8px 0;
  60. }
  61.  
  62. .rate {
  63.  float: right;
  64.  display: inline-block;
  65.  margin:35px 20px 35px 20px;
  66. }
  67.  
  68. .rate-score {
  69.  font-size: 18px;
  70.  font-weight: bold;
  71.  color: #585858;
  72. }
  73.  
  74. .rate-score-hot {
  75.  
  76.  
  77. }
  78.  
  79. .meta-info {
  80. }
  81.  
  82. .meta-cate {
  83.  margin: 0 0.1em;
  84.  padding: 0.1em 0.7em;
  85.  color: #fff;
  86.  background: #37a5f0;
  87.  font-size: 20%;
  88.  border-radius: 10px ;
  89. }
  90.  
  91. .description {
  92.  color: #cccccc;
  93. }
  94.  
  95. .nav {
  96.  padding-left: 0;
  97.  margin: 5px 0 20px 0;
  98.  text-align: center;
  99. }
  100. .nav li {
  101.  display: inline;
  102.  padding-right: 10px;
  103. }
  104. .nav li:last-child {
  105.  padding-right: 0;
  106. }
  107. .header {
  108.  padding: 10px 10px 10px 10px;
  109.  
  110. }
  111.  
  112. .header a {
  113.  color: #ffffff;
  114. }
  115. .header img {
  116.  display: block;
  117.  margin: 0 auto 0 auto;
  118. }
  119. .header h1 {
  120.  text-align: center;
  121. }
  122.  
  123.  
  124.  
  125. .footer {
  126.  margin-top: 20px;
  127. }
  128. .footer p {
  129.  color: #aaaaaa;
  130.  text-align: center;
  131.  font-weight: bold;
  132.  font-size: 12px;
  133.  font-style: italic;
  134.  text-transform: uppercase;
  135. }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Django热门文章

  • django-rest-framework 自定义swagger过程详解
  • 前后端分离实现注册+登录（Vue3.0 + Django3.2)
  • 详解Django CAS 解决方案
  • python+Django实现防止SQL注入的办法
  • django 配置阿里云OSS存储media文件的例子
  • 【django-vue】封装logger 封装全局异常 封装response 数据库配置 用户表继承AbstractUser配置
  • django使用ckeditor上传图片
  • Django集成富文本编辑器summernote的实现步骤
  • 使用django和vue进行数据交互的方法步骤
  • python3.8+django2+celery5.2.7环境准备(python测试开发django)

    • Django推荐文章

  • 探索Django：从项目创建到图片上传的全方位指南
  • Django国际化与本地化指南
  • CentOS+Django+uWSGI+Celery+Supervisor配置
  • vue3 + element-plus 的 upload + axios + django 文件上传并保存
  • Django学习(三) 之 模板中标签的使用
  • 前后端分离实现注册+登录（Vue3.0 + Django3.2)
  • Django笔记三十二之session登录验证操作
  • Django笔记三十之log日志记录详解
  • 【django-vue】封装logger 封装全局异常 封装response 数据库配置 用户表继承AbstractUser配置
  • Luffy项目：2、项目需求（2），项目库的创建，软件开发目录，Django配置文件介绍

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号