使用django+vue写一个博客

时间: 2023-11-27 08:05:12 浏览: 67
这里提供一个简单的步骤来使用Django和Vue.js编写一个博客: 1. 安装Django和Vue.js 安装Django和Vue.js以便您能够进行开发。您可以使用pip安装Django,使用npm安装Vue.js。 2. 创建Django项目 使用Django创建一个新的项目。在终端中运行以下命令: ``` django-admin startproject myblog ``` 3. 创建Django应用程序 创建一个新的Django应用程序。在终端中运行以下命令: ``` python manage.py startapp blog ``` 4. 创建Vue.js项目 使用Vue CLI创建一个新的Vue.js项目。在终端中运行以下命令: ``` vue create frontend ``` 5. 配置Django 在Django项目的settings.py文件中添加以下内容: ``` INSTALLED_APPS = [ ... 'rest_framework', 'blog', ] REST_FRAMEWORK = { 'DEFAULT_PERMISSION_CLASSES': [ 'rest_framework.permissions.AllowAny', ], 'DEFAULT_AUTHENTICATION_CLASSES': [], } TEMPLATES = [ { ... 'APP_DIRS': True, }, ] STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'frontend/dist/static') ] STATIC_ROOT = os.path.join(BASE_DIR, 'static') STATIC_URL = '/static/' ``` 6. 创建Django模型 在Django应用程序的models.py文件中创建一个模型。这里可以创建一个简单的Post模型。 ``` from django.db import models class Post(models.Model): title = models.CharField(max_length=200) content = models.TextField() created_at = models.DateTimeField(auto_now_add=True) updated_at = models.DateTimeField(auto_now=True) def __str__(self): return self.title ``` 7. 创建Django序列化器 在Django应用程序的serializers.py文件中创建一个序列化器。这里可以创建一个简单的PostSerializer。 ``` from rest_framework import serializers from blog.models import Post class PostSerializer(serializers.ModelSerializer): class Meta: model = Post fields = '__all__' ``` 8. 创建Django视图 在Django应用程序的views.py文件中创建一个视图。这里可以创建一个简单的PostViewSet。 ``` from rest_framework import viewsets from blog.models import Post from blog.serializers import PostSerializer class PostViewSet(viewsets.ModelViewSet): queryset = Post.objects.all() serializer_class = PostSerializer ``` 9. 配置Django路由 在Django项目的urls.py文件中添加以下内容: ``` from django.urls import path, include from rest_framework import routers from blog.views import PostViewSet router = routers.DefaultRouter() router.register(r'posts', PostViewSet) urlpatterns = [ path('api/', include(router.urls)), ] ``` 10. 配置Vue.js 在Vue.js项目的src/main.js文件中添加以下内容: ``` import Vue from 'vue' import App from './App.vue' import router from './router' import axios from 'axios' Vue.config.productionTip = false Vue.prototype.$http = axios.create({ baseURL: 'http://localhost:8000/api/' }) new Vue({ router, render: h => h(App) }).$mount('#app') ``` 11. 创建Vue.js组件 在Vue.js项目的src/components文件夹中创建一个组件。这里可以创建一个简单的PostList组件。 ``` <template> <div> <h1>Posts</h1> <ul> <li v-for="post in posts" :key="post.id"> <h2>{{ post.title }}</h2> <p>{{ post.content }}</p> </li> </ul> </div> </template> <script> export default { data () { return { posts: [] } }, mounted () { this.$http.get('posts') .then(response => { this.posts = response.data }) .catch(error => { console.log(error) }) } } </script> ``` 12. 配置Vue.js路由 在Vue.js项目的src/router/index.js文件中添加以下内容: ``` import Vue from 'vue' import VueRouter from 'vue-router' import PostList from '../components/PostList.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'PostList', component: PostList } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router ``` 13. 运行应用程序 在终端中分别运行以下命令来启动Django和Vue.js: ``` python manage.py runserver ``` ``` cd frontend npm run serve ``` 现在您可以在浏览器中访问http://localhost:8080,并看到您的博客。

相关推荐

最新推荐

recommend-type

使用django和vue进行数据交互的方法步骤

在Django后端,你需要创建一个视图处理GET请求,返回文章详情数据。例如,你可以在views.py文件中定义如下视图: ```python from django.http import JsonResponse from .models import Article def get_article_...
recommend-type

Python Django Vue 项目创建过程详解

在本文中,我们将深入探讨如何使用Python的Django框架与前端技术Vue.js结合来创建一个完整的Web项目。首先,我们创建Django项目和应用,接着搭建Vue.js前端,并将其打包集成到Django项目中,最后配置Django的模板和...
recommend-type

vue+elementUI组件table实现前端分页功能

本文将深入探讨如何使用Vue和Element UI组件`el-table`和`el-pagination`来创建一个高效的前端分页系统。 首先,前端分页与后端分页的主要区别在于数据处理的位置。后端分页是在服务器端完成的,每次用户翻页都会向...
recommend-type

Caché数据库及其特性.pdf

本文对Caché数据库相关概念、架构、前景、特性、实现及应用进行了简洁的介绍和阐述,并用较大篇幅对Caché数据库独一无二的架构设计和特性实现进行了详细的说明和解释,期间,结合实例对相关概念和知识进行了解析,以期各位同学对该数据库进行初步了解和学习,为进一步深入学习和掌握打下良好的基础。
recommend-type

图书大厦会员卡管理系统:功能设计与实现

本资源是一份C语言实训题目,目标是设计一个图书大厦的会员卡管理程序,旨在实现会员卡的全流程管理。以下是详细的知识点: 1. **会员卡管理**: - 该程序的核心功能围绕会员卡进行,包括新会员的注册(录入姓名、身份证号、联系方式并分配卡号),以及会员信息的维护(修改、续费、消费结算、退卡、挂失)。 - **功能细节**: - **新会员登记**:收集并存储个人基本信息,如姓名、身份证号和联系方式。 - **信息修改**:允许管理员更新会员的个人信息。 - **会员续费**:通过卡号查询信息并计算折扣,成功续费后更新数据。 - **消费结算**:根据卡号查询消费记录,满1000元自动升级为VIP,并提供9折优惠。 - **退卡和挂失**:退卡时退还余额,删除会员信息;挂失则转移余额至新卡,原卡显示挂失状态。 - **统计功能**:按缴费总额和消费总额排序,显示所有会员的详细信息。 2. **软件开发过程**: - 遵循软件工程标准,需按照分析、设计、编码、调试和测试的步骤来开发程序。 - **菜单设计**:程序以菜单形式呈现,用户通过菜单选择操作项目,如选择录入、查询、挂失等。 3. **输入输出要求**: - 用户通过键盘输入数据,程序会提供清晰的提示信息,包括数据内容、格式和结束方式。 - 菜单界面清晰,包含各项功能选项,如“添加会员”、“查询信息”、“挂失处理”等。 4. **数据结构与函数设计**: - 使用`struct huiyuan`定义会员信息结构体,包含卡号、姓名、身份证号和电话号码字段。 - 设计`menu()`函数负责显示菜单,通过函数调用来执行不同操作的功能函数。 5. **优惠策略**: - 购书打折规则:满1000元享受95折,满2000元享受9折,满5000元享受8折。 通过这个C语言项目,学生将学习到如何运用结构体、函数、文件I/O以及用户交互等核心概念,实现一个实用的会员卡管理系统。同时,也将提升他们的编程逻辑思维、问题解决能力和项目管理能力。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

类图与代码生成:自动化代码创建,提升开发效率

![类图与代码生成:自动化代码创建,提升开发效率](https://img-blog.csdnimg.cn/b1f38608ac2840cc9347f0a00a11c6b4.png) # 1. 类图概述** 类图是统一建模语言(UML)中的一种重要图表,用于可视化表示软件系统中的类、接口和它们之间的关系。类图在软件开发生命周期中发挥着至关重要的作用,因为它提供了系统结构的清晰视图,有助于理解和设计复杂的软件系统。 类图由以下元素组成: - **类:**表示现实世界中的实体或概念,具有属性和方法。 - **接口:**定义了类必须实现的一组方法,但没有提供实现。 - **关联:**表示类之间
recommend-type

转换json的方法是json.tojsonString

"toJsonString"并不是JSON本身的标准方法,它通常是在某些编程语言如Java中,使用特定库(如Jackson、Gson等)将JSON对象或结构转换成JSON字符串的函数。例如,在Java中,如果你有一个`ObjectMapper`实例,你可以这样做: ```java import com.fasterxml.jackson.databind.ObjectMapper; // 假设你有一个Pojo对象 MyClass obj = new MyClass(); ObjectMapper mapper = new ObjectMapper(); String jsonString
recommend-type

JAVA经典算法实战:月兔繁殖与素数判定

在Java编程中,经典算法题目的学习对于提升程序员的逻辑思维和解决问题的能力具有重要意义。以下是从提供的三个Java程序片段中提炼出的关键知识点: 1. 斐波那契数列问题: 题目涉及的是著名的斐波那契数列,它是一个经典的动态规划问题,特点是每一项都是前两项之和。第一个程序展示了如何使用递归方法实现,通过`exp2`类中的`f()`函数计算给定月份数的兔子总数。这里用到了递归公式 `f(x) = f(x-1) + f(x-2)`,该公式对应于序列1, 1, 2, 3, 5, 8, 13, 21...。递归函数设计巧妙地利用了自身调用,减少了重复计算。 2. 素数判断: 第二个程序涉及到判断101-200范围内的素数。素数是只有两个正因数(1和本身)的大于1的自然数。`math`类中的`iszhishu()`函数用于检测一个数是否为素数,它通过检查2到该数平方根之间的整数能否整除该数来判断。这是一种常见的素数检验方法,称为试除法。当找到能整除的因子时,返回`false`,否则如果循环结束都没有找到因子,返回`true`,表示该数是素数。 3. 水仙花数: 第三个程序提到的“水仙花数”是指那些每一位数字的立方和等于其本身的三位数,如153(1^3 + 5^3 + 3^3 = 153)。这里的算法没有直接给出,但提示了寻找这类数的思路,可能是遍历一定范围内的三位数,然后计算各位数字的立方和进行比较。这个题目考察了基本的数学概念和数据结构的使用,比如可能需要用到列表或者集合来存储和验证水仙花数。 这些Java代码示例涵盖了递归、动态规划(如斐波那契数列)、基本的数学逻辑(素数判定)以及简单的数据处理(如查找特定类型的数)。学习这些算法不仅可以提升编程技能,还能培养解决问题的策略,为后续的复杂编程挑战打下坚实的基础。同时,通过实际操作这些代码,程序员可以加深对Java语言特性和控制结构的理解。
recommend-type

"互动学习:行动中的多样性与论文攻读经历"

多样性她- 事实上SCI NCES你的时间表ECOLEDO C Tora SC和NCESPOUR l’Ingén学习互动,互动学习以行动为中心的强化学习学会互动,互动学习,以行动为中心的强化学习计算机科学博士论文于2021年9月28日在Villeneuve d'Asq公开支持马修·瑟林评审团主席法布里斯·勒菲弗尔阿维尼翁大学教授论文指导奥利维尔·皮耶昆谷歌研究教授:智囊团论文联合主任菲利普·普雷教授,大学。里尔/CRISTAL/因里亚报告员奥利维耶·西格德索邦大学报告员卢多维奇·德诺耶教授,Facebook /索邦大学审查员越南圣迈IMT Atlantic高级讲师邀请弗洛里安·斯特鲁布博士,Deepmind对于那些及时看到自己错误的人...3谢谢你首先,我要感谢我的两位博士生导师Olivier和Philippe。奥利维尔,"站在巨人的肩膀上"这句话对你来说完全有意义了。从科学上讲,你知道在这篇论文的(许多)错误中,你是我可以依