Django个人博客开发练手demo笔记

目录

序言

一、环境搭建、项目结构

二、设计阶段

三、创建数据库模型

四、使用后台管理系统

五、创建视图类

六、网站成型

七、问题修复

八、完整项目效果

九、其他


序言

Django是一个的python开源Web应用框架,是一个遵循 MVC 设计模式的框架。MVC是Model、View、Controller三个单词的简写,分别代表模型、视图、控制器。

一、环境搭建、项目结构

环境搭建:略

项目结构:

二、设计阶段

数据库设计:有道云笔记

三、创建数据库模型

django的一切操作,视图、后台都是以Model为基础。根据表结构,构造出需要的model即可:尤其需要注意:外键、一对一、一对多等关系

此处以文章举例

blog/models.py(图片双击放大)

在cmd使用如下命令,进行数据库转移

python3 manage.py makemigrations

python3 manage.py migrate

转移之后,会在app/migrations包下生成数据迁移记录,可检查是否迁移成功

四、使用后台管理系统

admin后台管理可以让我们快速便捷管理数据。

此处需要注册表信息:

blog/admin.py

使用fieldsets可自定义编辑表单。 注册表信息之后:即可登录http://localhost:8000/admin/进行可视化操作

登录后如图所示:

五、创建视图类

前面已经讲了MVT中的模型和视图、本章内容为模板相关。

简单来说,可以把模板理解为HTML,再高阶一些就是VUE等框架。

在blog/views.py对要进行操作的mode进行实例化,然后将其渲染模板中

此处以博客首页为例:

# 首页 
def index(request): 
    allarticle = Article.objects.all().order_by('-id')[0:10] 
    # 常规ORM操作 
    context = { 'allarticle': allarticle, } 
    # 带参数渲染到模板中 
    return render(request, 'index.html', locals())

在HTML模板中:

<div>     
    <ul>     
        <h4>所有文章:</h4>         
        {% for article in allarticle  %}         
        <li>{{ article.title }}</li>         
        {% endfor %}     
    </ul> 
</div>

渲染成功后结果如下:

由前面的章节可以看出,如果我要将内容渲染到网页,需要模型、视图、模板共同作用。

此也对应了MVT的设计理念。

六、网站成型

前面都是单个举例,根据单例延伸即可

七、问题修复

博客在使用翻页功能中,遇到页面报错:RelatedObjectDoesNotExist at /show-6.html

首先定位到了报错点,如下,无非就是通过ORM查询:查询条件为:创建时间小于当前文章,且为同类型

next_blog = Article.objects.filter\ (created_time__lt=show.created_time,category=show.category_id).last()

其等价于为:

select * from article where created_time<"xxxx"" and category_id ="xx"

然后用navicat去数据库查询本条记录,发现报错文章的“category_id”为空。‘

解决办法嘛:将category在前端或者后端标记必填

八、完整项目效果

#首页

 #文章详情页

九、其他

第一次开发练手,还有很多不好的地方,理想是后面以前后端分离重新完善一下

  • 15
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue和Django都是非常流行的Web开发框架,Vue是一个JavaScript框架,用于构建单页面应用程序,而Django是一个Python框架,用于构建Web应用程序。在这里,我将向您展示如何使用Vue和Django构建一个完整的Web应用程序。 首先,您需要决定如何组织您的项目。您可以将Vue作为前端,Django作为后端,或者将它们结合在一起,使用Django作为API,并使用Vue作为前端框架来调用API。 在这里,我们将使用Vue和Django结合在一起,使用Django作为API,Vue作为前端框架。这意味着我们将使用Django来处理所有的后端逻辑,并使用Vue来渲染前端页面并调用Django API。 步骤如下: 1. 安装和配置Django 首先,您需要安装Django。您可以使用pip在命令行中运行以下命令来安装Django: ``` pip install django ``` 安装完成后,您需要创建一个新的Django项目。在命令行中输入以下命令: ``` django-admin startproject myproject ``` 这将创建一个名为myproject的新Django项目。 2. 创建Django应用程序 在Django中,应用程序是一个可重用的组件,用于执行特定任务。在我们的项目中,我们将创建一个名为api的Django应用程序,用于处理所有的API请求。 在命令行中,进入myproject目录,并运行以下命令: ``` python manage.py startapp api ``` 这将创建一个名为api的新Django应用程序。 3. 配置Django路由 在Django中,路由用于指定应用程序如何响应特定的URL。在我们的项目中,我们将使用Django路由来指定如何处理API请求。 在api应用程序的目录中,创建一个名为urls.py的新文件,并添加以下代码: ```python from django.urls import path from . import views urlpatterns = [ path('api/', views.api_view, name='api_view'), ] ``` 这将创建一个新的路由,并将其指向api_view视图函数。我们将在下一步中创建这个视图函数。 4. 创建Django视图函数 在Django中,视图函数用于处理HTTP请求并返回HTTP响应。在我们的项目中,我们将创建一个名为api_view的视图函数,用于处理API请求。 在api应用程序的views.py文件中,添加以下代码: ```python from django.http import JsonResponse def api_view(request): data = { 'message': 'Hello, world!' } return JsonResponse(data) ``` 这将创建一个简单的视图函数,返回一个包含“Hello, world!”消息的JSON响应。 5. 配置Django设置 在Django中,设置用于配置应用程序的特定行为。在我们的项目中,我们需要配置Django以允许跨域请求,并将api应用程序添加到INSTALLED_APPS设置中。 在myproject目录中,打开settings.py文件,并添加以下代码: ```python INSTALLED_APPS = [ # ... 'api', ] CORS_ORIGIN_ALLOW_ALL = True ``` 这将启用跨域请求,并将api应用程序添加到INSTALLED_APPS设置中。 6. 创建Vue应用程序 接下来,我们将创建Vue应用程序。在命令行中,运行以下命令: ``` vue create myapp ``` 这将创建一个名为myapp的新Vue应用程序。 7. 配置Vue应用程序 在Vue应用程序的src目录中,打开main.js文件,并添加以下代码: ```javascript import Vue from 'vue' import App from './App.vue' import axios from 'axios' Vue.config.productionTip = false Vue.prototype.$http = axios.create({ baseURL: 'http://localhost:8000' }) new Vue({ render: h => h(App), }).$mount('#app') ``` 这将配置Vue应用程序,使其使用Axios库调用Django API。请注意,我们使用了http://localhost:8000作为API的基本URL,这是Django的默认端口。 8. 创建Vue组件 在Vue应用程序的src目录中,创建一个名为HelloWorld.vue的新文件,并添加以下代码: ```html <template> <div> <h1>{{ message }}</h1> </div> </template> <script> export default { data() { return { message: '' } }, mounted() { this.$http.get('/api/') .then(response => { this.message = response.data.message }) } } </script> ``` 这将创建一个Vue组件,用于显示从Django API返回的消息。 9. 渲染Vue应用程序 在Vue应用程序的src目录中,打开App.vue文件,并添加以下代码: ```html <template> <div> <HelloWorld /> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script> ``` 这将渲染Vue应用程序,并在页面上显示HelloWorld组件。 10. 运行项目 现在,您已经完成了Vue和Django的配置。在命令行中,进入myproject目录,并运行以下命令: ``` python manage.py runserver ``` 这将启动Django服务器。在另一个命令行窗口中,进入myapp目录,并运行以下命令: ``` npm run serve ``` 这将启动Vue开发服务器。现在,您可以在浏览器中访问http://localhost:8080,看到来自Django API的“Hello, world!”消息。 至此,您已经成功地使用Vue和Django构建了一个完整的Web应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值