Skip to content

Latest commit

 

History

History
574 lines (361 loc) · 29.9 KB

README.md

File metadata and controls

574 lines (361 loc) · 29.9 KB
Raw

基于Django搭建的个人网站

[toc]

@项目开始于2019-11-21

开发环境安装配置及工具

  • Windows10操作系统

  • 考虑到该项目需要开源到GitHub中（不打算开源的可以忽略这点），所以我们首先安装GitHub桌面版软件，进行相关配置（desktop使用教程）并创建我们的远程仓库Djangoblog。

安装anaconda

  • 为了有一个纯净的开发环境，我们选择使用虚拟环境anaconda，首先安装anaconda3-5。
    • 使用虚拟环境的原因：
      • 便于管理，避免不必要的麻烦
    • 选择anaconda的原因：
      • 不需要安装Python
      • 创建的虚拟环境可以选择Python版本
      • 解决依赖关系

创建虚拟环境

  • 创建虚拟环境,我们的项目将在虚拟环境中开发

image.png

安装Django

  • 在虚拟环境中安装Django2.2.1，首先激活虚拟环境，在虚拟环境中通过pip安装

image.png

image.png

安装pycharm

  • 编写Python代码的集成开发环境
  • 官网下载安装

项目工程的创建

创建工程

  • 因为项目需要上传到GitHub中，所以我们可以直接在本地的GitHub仓库文件夹中直接运行cmd来激活虚拟环境，然后创建工程。

image.png

启动工程

  • 进入MyBlog目录，即manage.py的同级目录，启动Django服务验证我们创建的工程是否能够运行。第一次启动服务时，在manage.py的同级目录中会自动生成一个db.sqlite3 的数据文件。Django服务默认启动在8000端口。用该命令启动的Django服务使用的时Django自带的服务器，支持的最大并发量时200，常用来做开发、测试。

    image.png

image.png

执行启动命令常见的方式：

# 启动项目，默认端口为本机8000
python manage.py runserver

# 启动项目，端口为9000
python manage.py runserver 127.0.0.1:9000
    
# 启动项目，任意地址访问9000端口
python manage.py runserver 0.0.0.0:9000

pycharm打开Django项目

  • 在工程总目录MyBlog即manage.py的上级目录打开项目

  • image.png

  • 选择编译环境为我们最初创建的虚拟环境myenvs

  • image.png

  • 启动服务进行验证，如果成功，在浏览器中输入127.0.0.1:8000会出现小火箭。

  • 进行基本的配置修改

  • image.png

子应用创建与使用

考虑到网站的健壮性和可移植性，我们将使用子应用。方便管理。

创建子应用

三种方式：

  1. 使用命令cmd创建，必须是在工程总目录下打开cmd，并且激活虚拟环境

python manage.py startapp appName

  1. pycharm创建工程的时候创建

image.png

  1. 在pycharm的Tool中打开run manage.py Task使用命令创建（我采用的方式）

image.png

子应用的使用

子路由

为了保证子应用中的资源能够被使用，首先我们需要对子应用进行注册 image.png   然后在子应用中创建一个子路由，并且在主路由中加入对子路由的引入 image.png

验证路由配置是否正确 image.png

子静态系统

  1. 在子应用的目录下创建一个static的目录，在该目录下创建与子应用同名的目录用来存放静态文件（CSS、JS、image等）

image.png

  1. 对静态文件进行收集，必须先保证子应用已经注册，首先在工程目录下创建一个static目录，第一步注释掉之前的静态文件的配置STATICFILES_DIRS（有冲突），第二步添加静态文件收集配置，第三步收集完成后还原配置文件

      image.png

子模板系统

在子应用的目录下创建一个templates的目录，在该目录下创建与子应用同名的目录用来存放模板 image.png

模板继承

  • 首先创建base.html文件，将模板中所有的公共部分放入这里

  • 修改静态文件路径  CTRL+R 可以检索所有进行同时修改

  • image.png

  • 添加块

  • image.png

  • image.png

  • image.png

image.png

  • 字模板继承父模板，并且打开对应的块添加上字模板独有的内容

  • image.png

  • 之后将每个模板页面都修改好

ORM的配置和使用

配置

安装数据库

  1. 下载社区版数据库   mysql-installer
  2. 安装数据库   安装卸载教程
  3. 安装可视化工具   Navicat

Django中配置mysql

image.png

在数据库中创建blog库

image.png

安装pymysql

pip install pymysql

再次启动项目

当我们再次启动项目时，发现项目启动失败，发生第一个报错信息：

image.png       原因是： Django默认使用Python2版本的数据库模块（MySQLdb），而我们使用的               Python3版本使用的是pymysql模块。 解决方案： 在项目的主目录的init.py文件中增加：

image.png

当我们第二次重新启动项目时，发现项目还是启动失败，发生第二个报错信息：

image.png

原因是： Django默认检测pymysql版本。 解决方案： 修改源码，找到对应的地方，注释掉相关的判断即可： image.png 当我们第三次重新启动项目时，发现项目还是启动失败，发生第三个报错信息：

image.png

原因是： Python3中string没有decode方法，只有encode方法 解决方案： 找到报错的地方，将decode改为encode()即可： image.png 之后项目就可以启动成功了！

使用

创建模型

image.png

数据迁移

  1. 在数据迁移之前，检测相关配置是否正确
python manage.py check
  1. 生成迁移文件

是将模型中的改动，生成相对应修改文件

python manage.py makemigrations

image.png image.png

  1. 执行迁移文件

将迁移文件执行，在数据库的表中做相对应的修改和生成表结构

python manage.py migrate

image.png image.png

站点管理

  1. 后台站点管理，首先得创建超级用户
python manage.py createsuperuser

image.png

  1. 注册模型类到站点管理

image.png

启动项目，在浏览器输入下列地址，就可以看到Django提供的后台管理系统：

image.png

修改表结构，添加媒体文件

因为我们要上传图片，还有其他的媒体文件（音频、视频、图片等），将这些文件上传到服务器需要下面两个东西：

  1. 需要有文件处理的模块PIL（Python2版本的名称），我们使用的是Python3，Python3的文件处理模块叫做 pillow ，作用是处理图片，参与了人工智能
  2. 需要文件存储的位置

安装pillow：

pip install pillow

image.png

在settings中添加配置：

image.png

修改模型并进行数据迁移：

image.png image.png

在后台中添加数据

上传完数据后，会发现在static目录下自动生成了上传的images文件夹，里面是我们上传的图片文件

image.png image.png

修改模板内容

刷新页面，我们就能从数据库拿到数据了:

image.png

到这里，网站的基本配置已经完成了，如果到后面还有需要的地方，我们在配置，接下来我们将正式进入网站的建设

正式进入博客

模型创建

科目类型与文章属于一对多关系，所以在文章表中创建一个类型外键，迁移完数据之后，在admin中注册该类到站点管理：

image.png

富文本使用

方便我们在后台写文章，我们选择使用富文本编辑器CKeditor，它是一种和Django结合的富文本编辑器

安装富文本编辑器

pip install django-ckeditor

image.png

配置富文本

image.png

image.png

image.png

模型中使用

image.png

image.png

站点管理中使用富文本

image.png

确定思路：

  1. 首页的数据根据文章创建时间排序显示
  2. 点击首页中的文章类型log跳转至list学无止境页面，显示该文章类型的所有数据
  3. 点击文章的图片标题和阅读全文跳转至info文章详情页面，显示文章内容的详细内容

修改首页

视图：

image.png

模板：

image.png image.png

修改实现学无止境list页面

image.png

image.png

增加文章详情页面

路由：

image.png

视图：

image.png

模板：

image.png

添加数据

image.png

image.png

实现分页

Django中封装了分页器：paginator 首先，导包

from django.core.paginator import Paginator

视图：

image.png

模板：

image.png image.png

完善分页

视图：

image.png image.png

模板：

image.png

首页优化

image.png

完成首页上拉加载更多

视图(api):

def article_api(request):
    page = int(request.GET.get('page'))
    start = (int(page) - 1) * 12
    end = start + 12
    article = Article.objects.order_by('-art_date').all()[start:end]

    res = []
    for article in article:
        img = str(article.art_img)
        date = str(article.art_date)
        # print(date)
        res.append({
            "id": article.id,
            "art_img": img,
            "art_title": article.art_title,
            "art_description": article.art_description,
            "art_type_id": article.art_type_id,
            "art_type": article.art_type.course_name,
            "art_date": date,
            "art_click": article.art_click,
        })
    result = dict(res=res)

    return JsonResponse(result)

前端：

{% verbatim %}
<div class="blogs" id="wrapper">

  <div v-for="art in article">

    <li class="outpart">
      <span class="blogpic" v-model=art>
        <a :href="'/myblog/info/?id='+art.id" class="by_click">
          <img :src="'/static/'+ art.art_img"></a>
      </span>
      <h3 class="blogtitle">
        <a :href="'/myblog/info/?id='+art.id" class="by_click">{{ art.art_title }}</a>
      </h3>
      <div class="bloginfo" v-html="art.art_description">
      </div>
      <div class="autor">
        <span class="lm">
          <a :href="'/myblog/list/?type_id='+art.art_type_id+'&art_id='+art.id"
             :title=art.art_type class="classname">{{ art.art_type }}</a>
        </span>
        <span class="dtime">{{ art.art_date }}</span>
        <span class="viewnum">浏览（<a :href="'/myblog/info/?id='+art.id">{{ art.art_click }}</a>）</span>
        <span class="readmore"><a :href="'/myblog/info/?id='+art.id" class="by_click">阅读原文</a></span>
      </div>
    </li>
  </div>
</div>
{% endverbatim %}
<script>
        Vue.use(VueResource);
        new Vue({
                el: "#wrapper",
                data: {
                    article: [],
                    page: 1,
                    no_data: false,
                },
                created: function () {
                    url = "/myblog/article_api/?page=" + this.page,
                        this.$http.get(url).then(
                            function (data) {
                                article = data.data.res;
                                this.article = article;
                                this.page += 1;
                            }
                        );
                    window.addEventListener("scroll", this.onscroll)
                },
                methods: {
                    onscroll() {
                        // 计算当前文档的总高度
                       let dh = document.querySelector('body').clientHeight
                        // 浏览器窗口的高度
                        // 视窗高度
                        let outerHeight = document.documentElement.clientHeight;
                        // 滚动高度
                        let scrollTop = document.documentElement.scrollTop;
                        {#console.log(innerHeight, outerHeight, scrollTop)#}
                        if (outerHeight + scrollTop >= dh) {
                            console.log(11111111)
                            if (this.no_data === true) {
                                return false
                            }
                            url = "/myblog/article_api/?page=" + this.page;
                            this.$http.get(url).then(
                                function (data) {
                                    if (data.data.res){
                                        article = data.data.res;
                                        this.article = this.article.concat(article)
                                        console.log(this.article)
                                        this.page = this.page + 1;
                                    }else {
                                        this.no_data = true;
                                    }
                                }
                            ),500
                        }
                    }
                }
            }
        )
    </script>

添加回到顶部按钮

image.png

所有页面的优化

之后就是对所有的其他一些页面进行优化和扩展，让网站的功能更加齐全

详情页

image.png image.png