构建自己的网站（一）——uWSGI+Django实现显示图片点击更新

最新推荐文章于 2024-03-18 11:51:18 发布

Sen-Lee

最新推荐文章于 2024-03-18 11:51:18 发布

阅读量627

点赞数 1

分类专栏： Python 服务器文章标签： django html 显示图片 uwsgi托管项目

本文链接：https://blog.csdn.net/lishenluo/article/details/103388952

版权

Python 同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

服务器

8 篇文章 0 订阅

订阅专栏

目的说明

申请了一个域名，想通过域名构建一个简单的网站，就显示图片，鼠标点击，更新图片。听着是不是很容易？但是中间也遇到了各种问题。

前提

本地编码html使用VSCode，推荐老马的前端课程，免费。
买的阿里云和在万网上注册的域名。
服务器安装uwsgi和django。

遇到的问题及解决

通过ip地址+端口也访问不到服务器？

阿里云端口号要做一下映射
在这里插入图片描述

后续我的服务的对外端口主要是8000哈。

域名不可用？

域名申请下来后需要实名认证！

域名解析后还是不可用？80端口没开放？

域名要能能用，还需要解析，要购买DNS。
解析很简单，就添加一条域名到服务器地址的对应关系就行。然后域名默认是用80端口的。但是阿里云控制台进程是占用着这个80端口的。自己的服务想要用80端口，还得对服务器备案。【我目前还没有备案】

本地实现点击切换图片

index1.html文件，并所在路径下有一个images文件夹中有所需显示的图片。

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>点击切换图片</title>
    <script type="text/javascript">
        function changePic() {
            //随机产生1-6随机数
            var num = Math.ceil(Math.random() * 6);
            //修改src路径
            document.getElementById("p").src = './images/' + num + ".jpg";
        }
    </script>
</head>

<body>
    <p align="center"><img src="./images/1.jpg" id="p" width="auto" height="800px" onclick="changePic()" /></p>
</body>

</html>

简单测试是可用的。

django+html图片显示不出来？

配置静态static文件夹路径。看后面的。

django服务器实现显示图片

创建django项目：$django-admin startproject mysite

创建应用shows用来显示图片：$ python manage.py startapp shows

一个django项目下可以有多个应用。

目录结构mysite：

├── db.sqlite3
├── --ini
├── log
│ └── mysite.log
├── manage.py
├── mysite
│ ├── init.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── shows
│ ├── admin.py
│ ├── apps.py
│ ├── init.py
│ ├── migrations
│ │ ├── init.py
│ ├── models.py
│ ├── static
│ │ └── images
│ ├── templates
│ │ ├── index1.html
│ │ └── index1.html.bak
│ ├── tests.py
│ ├── urls.py
│ └── views.py
└── uwsgi.ini

在应用目录shows下，添加了一个static文件夹，存放静态文件，images和js，css等。图片放在images下。

新建文件

shows下新建templates模板目录，里面放我们的index1.html文件。
shows下新建urls.py和view.py

urls.py

#coding:utf-8
# django_upload_example/urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
from . import views
urlpatterns = [
    path('', views.index),
]

view.py

from django.shortcuts import render

from django.http import HttpResponse


def index(request):
    return render(request,'index1.html')

在服务器这边index1.html修改一下，修改后的是：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>点击切换图片</title>
    <script type="text/javascript">
        function changePic() {
            var num=get_num();
            //修改src路径
            document.getElementById("p").src = "/static/images/"+num+".jpg";
         }
         function get_num(){
             return Math.ceil(Math.random() * 500)+9000;
         }
    </script>
</head>

<body>
   <!-- {% load static %}
    <p align="center"><img src="{% static "images/9001.jpg" %}" id="p" width="auto" height="800px" οnclick="changePic()" /></p>-->
     <p align="center"><img src="/static/images/9001.jpg" id="p" alt="稍等，加载ing"  width="auto" height="800px" onclick="changePic()" /></p>
</body>

</html>

注意： 图片路径是，/static/images ，前面要有/

对里层mysite下的urls.py做修改一映射到应用中的urls.py

from django.contrib import admin
from django.urls import path
from django.urls import include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('shows/',include('shows.urls')),
]

修改mysite下的settings.py配置文件

运行访问控制：ALLOWED_HOSTS = [’*’] #来是[],否则外网访问不进来。
添加应用：shows.apps.ShowsConfig
INSTALLED_APPS = [
‘shows.apps.ShowsConfig’,
‘django.contrib.admin’,
‘django.contrib.auth’,
‘django.contrib.contenttypes’,
‘django.contrib.sessions’,
‘django.contrib.messages’,
‘django.contrib.staticfiles’,
]
静态目录设置
#Static files (CSS, JavaScript, Images)
#https://docs.djangoproject.com/en/2.1/howto/static-files/
#特别重要否则可能显示不了图片
STATIC_URL = ‘/static/’
STATICFILES_DIRS = (os.path.join(BASE_DIR,‘static’).replace(’\’,’/’),)

这样基本的工作就完成了。

启动服务

最外层mysite下，运行： $python3 manage.py runserver 0:8000
Performing system checks…

System check identified no issues (0 silenced).
December 04, 2019 - 09:06:23
Django version 2.1.8, using settings ‘mysite.settings’
Starting development server at http://0:8000/
Quit the server with CONTROL-C.

客户端浏览器即可访问。

http://www.76study.com:8000/shows/

uWSGI托管

在外层mysite下建立配置文件，uwsgi.ini

[uwsgi]
http = 0:8000
chdir = /home/lishenluo/mysite/
static-map=/static=/home/lishenluo/mysite/shows/static
wsgi-file = mysite/wsgi.py
processes = 4
threads = 2
stats = 127.0.0.1:9191
post-buffering = 8192
buffer-size=32768

**注意：**一定要设置static-map=/static=/home/lishenluo/mysite/shows/static静态文件路径，否则会报找不到文件：Not Found: /static/images/9324.jpg。

外层mysite下启动

$uwsgi --ini uwsgi.ini
[uWSGI] getting INI configuration from uwsgi.ini
[uwsgi-static] added mapping for /static => /home/lishenluo/mysite/shows/static
*** Starting uWSGI 2.0.18 (64bit) on [Wed Dec 4 17:12:55 2019] ***
compiled with version: 4.8.5 20150623 (Red Hat 4.8.5-36) on 02 December 2019 02:02:08
os: Linux-3.10.0-957.21.3.el7.x86_64 #1 SMP Tue Jun 18 16:35:19 UTC 2019
nodename: txserver…

ctrl+c终端服务，$uwsgi -d --ini uwsgi.ini 可后台启动

启动后要停止好似直接kill或stop都不行

uwsgi 停止：
uwsgi --stop xxx.pid
不行的话：killall -s INT /usr/local/bin/uwsgi
都不行。最后 $killall -s INT /usr/local/bin/uwsgi
$netstat -nap|grep 8000 没有再看到进程了。

总结

最后能实现了，不多鼠标点击的时候图片显示太慢，图片太大了。
各种坑。
我目前的网站http://www.76study.com:8000/

更新

网站备案完成
现在网址http://www.76study.com

Sen-Lee

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
构建自己的网站（一）——uWSGI+Django实现显示图片点击更新

文章目录目的说明前提遇到的问题及解决通过ip地址+端口也访问不到服务器？域名不可用？域名解析后还是不可用？80端口没开放？本地实现点击切换图片django+html图片显示不出来？django服务器实现显示图片创建django项目：$django-admin startproject mysite创建应用shows用来显示图片：$ python manage.py startapp shows目录...
复制链接

扫一扫