Django个人博客搭建教程---用Vue写你的第一个前后端分离页面

最新推荐文章于 2024-06-12 17:20:47 发布

请叫我算术嘉

最新推荐文章于 2024-06-12 17:20:47 发布

阅读量7.2k

点赞数

分类专栏： Vue.js Django 文章标签： django vue webpack

本文链接：https://blog.csdn.net/ssjdoudou/article/details/104396296

版权

Django 同时被 2 个专栏收录

59 篇文章 3 订阅

订阅专栏

Vue.js

28 篇文章 3 订阅

订阅专栏

一、构建Vue.js前端项目

npm install vue-cli -g

npm install webpack -g

vue init webpack myblogfront

经过一系列设置之后，就会出现一个文件夹，这就是你的vue工程

进入myblogfront目录，运行命令

npm install

npm install vue-resource

npm install element-ui

这里的element-ui是饿了么的开源组件

新建BlogList这个component

template如下

<template>
  <div class="home">
    <el-row display="margin-top:10px">
        <el-input v-model="input" placeholder="请输入书名" style="display:inline-table; width: 30%; float:left"></el-input>
        <el-button type="primary" @click="showBooks()" style="float:left; margin: 2px;">新增</el-button>
    </el-row>
    <el-row>
        <el-table :data="bookList" style="width: 100%" border>
          <el-table-column prop="id" label="编号" min-width="100">
            <template scope="scope"> {{ scope.row.pk }} </template>
          </el-table-column>
          <el-table-column prop="book_name" label="书名" min-width="100">
            <template scope="scope"> {{ scope.row.fields.title }} </template>
          </el-table-column>
          <el-table-column prop="add_time" label="添加时间" min-width="100">
            <template scope="scope"> {{ scope.row.fields.views }} </template>
          </el-table-column>
        </el-table>
    </el-row>
  </div>

</template>

script如下

<script>
export default {
  name: 'home',
  data () {
    return {
      input: '',
      bookList: []
    }
  },
  mounted: function () {
    this.showBooks()
  },
  methods: {
    showBooks () {
      this.$http.get('http://127.0.0.1:8000/blog/showarticles/')
        .then((response) => {
          var res = JSON.parse(response.bodyText);
          console.log(res);
          if (res.error_num === 0) {
            this.bookList = res['list']
          } else {
            this.$message.error('查询书籍失败');
            // console.log(res['msg'])
          }
        })
    }
  }
}
</script>

style如下

<style scoped>
  h1, h2 {
    font-weight: normal;
  }
  ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

在src/router下注册，这里必须引入element-ui和vue-resource

element-ui保证了页面样式

vue-resource保证了get请求的正常使用

import Vue from 'vue'
import Router from 'vue-router'
import VueResource from 'vue-resource';
import HelloWorld from '@/components/HelloWorld'
import BlogList from '@/components/BlogList'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(VueResource)
Vue.use(Router)
Vue.use(ElementUI)


export default new Router({
  routes: [
    {
      path: '/',
      name: 'BlogList',
      component: BlogList
    }
  ]
})

二、Django后端api

from django.core import serializers
from django.views.decorators.http import require_http_methods


@require_http_methods(["GET"])
def show_books(request):
    response = {}
    try:
        articles = Articles.objects.filter()[:3]
        response['list'] = json.loads(serializers.serialize("json", articles, ensure_ascii=False))
        response['msg'] = 'success'
        response['error_num'] = 0
    except  Exception as e:
        response['msg'] = str(e)
        response['error_num'] = 1
    # return JsonResponse(response, charset='utf-8')
    return HttpResponse(json.dumps(response, ensure_ascii=False))

这里不要用JsonResponse，否则会返回中文乱码

api接口返回如下

{
    "list": [
        {
            "model": "blog.articles",
            "pk": 1,
            "fields": {
                "title": "用Django写一个自己的博客网站",
                "body": "##写在最前面：\r\n想用Django写网站很久了，本地也建立过很多demo，对于整个框架的入门算是熟练了。用pycharm可 \r\n以很方便的新建一个Django工程。专业版的Pycharm是自带Django的，目前Diango的最新版本应该是2.1。\r\n\r\nIDE:Pycharm\r\npython版本：3.6\r\n操作系统：macOS Mojave\r\n\r\n![图片](/media/images/blog1body1.png)\r\n\r\n这是用Django2.1写的一个个人博客的展示，还有一个含有带登录、注册、登出的session控制的监控系统，博客本身内置下载、天气查询、Google在线翻译，还可以发送QQ邮件。\r\n下面先贴一下目录结构：\r\n\r\n![图片](/static/images/blog1body2.jpg)",
                "timestamp": "2019-02-21T21:20:23",
                "authorname": 1,
                "views": 2853,
                "category": 1,
                "greats": 23,
                "comments": 3,
                "status": "有效",
                "brief": null,
                "pic": "jiablogimages/tim-foster-1659631-unsplash_gaitubao_800x450.jpg",
                "istop": "0",
                "articlebodybrief": "##写在最前面：\r\n想用Django写网站很久了，本地也建立过很多demo，对于整个框架的入门算是熟练了。用pycharm可 \r\n以很方便的新建一个Django工程。专业版的Pycharm是自带Django的，目前Diango的最新版本应该是2.1。\r\n\r\nIDE:Pycharm\r\npython版本：3.6\r\n操作系统：macOS Mojave\r\n\r\n![图片](/media/images/blog1body1.png)\r\n\r\n这是用Django2.1写的一个个人博客的展示，还有一个含有带登录、注册、登出的session控制的监控系统，博客本身内置下载、天气查询、Google在线翻译，还可以发送QQ邮件。\r\n下面先贴一下目录结构：\r\n\r\n![图片](/static/images/blog1body2.jpg)",
                "last_edit_timestamp": "2020-02-16T13:29:34.999",
                "url_slug": "yong-djangoxie-yi-ge-zi-ji-de-bo-ke-wang-zhan",
                "tags": [
                    1
                ]
            }
        },
        {
            "model": "blog.articles",
            "pk": 2,
            "fields": {
                "title": "Django和Flask的区别",
                "body": "##写在最前面：\r\npython web开发有很多常用的框架，主要包括Django，Flask，Tornado，Diesel，Cubes，Pulsar，Falcon，webpy，大家最熟知的还是Django和Flask，今天就来简单介绍一下Django和Flask的区别，本博客就是使用Django开发的，Flask不是很了解，因为没有用过，今天就借花献佛，简单介绍一下。\r\n\r\n##Flask\r\n\r\nFlask确实很“轻”，不愧是Micro Framework，从Django转向Flask的开发者一定会如此感慨，除非二者均为深入使用过\r\nFlask自由、灵活，可扩展性强，第三方库的选择面广，开发时可以结合自己最喜欢用的轮子，也能结合最流行最强大的Python库\r\n    入门简单，即便没有多少web开发经验，也能很快做出网站\r\n    非常适用于小型网站\r\n    非常适用于开发web服务的API\r\n    开发大型网站无压力，但代码架构需要自己设计，开发成本取决于开发者的能力和经验\r\n    各方面性能均等于或优于Django\r\n    Django自带的或第三方的好评如潮的功能，Flask上总会找到与之类似第三方库\r\n    Flask灵活开发，Python高手基本都会喜欢Flask，但对Django却可能褒贬不一\r\n    Flask与关系型数据库的配合使用不弱于Django，而其与NoSQL数据库的配合远远优于Django\r\n    Flask比Django更加Pythonic，与Python的philosophy更加吻合\r\n\r\n##Django\r\n\r\nDjango太重了，除了web框架，自带ORM和模板引擎，灵活和自由度不够高\r\n    Django能开发小应用，但总会有“杀鸡焉用牛刀”的感觉\r\n    Django的自带ORM非常优秀，综合评价略高于SQLAlchemy\r\n    Django自带的模板引擎简单好用，但其强大程度和综合评价略低于Jinja\r\n    Django自带ORM也使Django与关系型数据库耦合度过高，如果想使用MongoDB等NoSQL数据，需要选取合适的第三方库，且总感觉Django+SQL才是天生一对的搭配，Django+NoSQL砍掉了Django的半壁江山\r\n    Django目前支持Jinja等非官方模板引擎\r\n    Django自带的数据库管理app好评如潮\r\n    Django非常适合企业级网站的开发：快速、靠谱、稳定\r\n    Django成熟、稳定、完善，但相比于Flask，Django的整体生态相对封闭\r\n    Django是Python web框架的先驱，用户多，第三方库最丰富，最好的Python库，如果不能直接用到Django中，也一定能找到与之对应的移植\r\n    Django上手也比较容易，开发文档详细、完善，相关资料丰富",
                "timestamp": "2019-02-21T21:25:28",
                "authorname": 1,
                "views": 3002,
                "category": 1,
                "greats": 23,
                "comments": 3,
                "status": "有效",
                "brief": null,
                "pic": "jiablogimages/img2.jpg",
                "istop": "0",
                "articlebodybrief": "##写在最前面：\r\npython web开发有很多常用的框架，主要包括Django，Flask，Tornado，Diesel，Cubes，Pulsar，Falcon，webpy，大家最熟知的还是Django和Flask，今天就来简单介绍一下Django和Flask的区别，本博客就是使用Django开发的，Flask不是很了解，因为没有用过，今天就借花献佛，简单介绍一下。\r\n\r\n##Flask\r\n\r\nFlask确实很“轻”，不愧是Micro Framework，从Django转向Flask的开发者一定会如此感慨，除非二者均为深入使用过\r\nFlask自由、灵活，可扩展性强，第三方库的选择面广，开发时可以结合自己最喜欢用的轮子，也能结合最流行最强大的Python库\r\n    入门简单，即便没有多少web开发经验，也能很快做出网站\r\n    非常适用于小型网站\r\n    非常适用于开发web服务的API\r\n    开发大型网站无压力，但代码架构需要自己设计，开发成本取决于开发者的能力和经验\r\n    各方面性能均等于或优于Django\r\n    Django自带的或第三方的好评如潮的功能，Flask上总会找到与之类似第三方库\r\n    Flask灵活开发，Python高手基本都会喜欢Flask，但对Django却可能褒贬不一\r\n    Flask与关系型数据库的配合使用不弱于Django，而其与NoSQL数据库的配合远远优于Django\r\n    Flask比Django更加Pythonic，与Python的philosophy更加吻合\r\n\r\n##Django\r\n\r\nDjango太重了，除了web框架，自带ORM和模板引擎，灵活和自由度不够高\r\n    Django能开发小应用，但总会有“杀鸡焉用牛刀”的感觉\r\n    Django的自带ORM非常优秀，综合评价略高于SQLAlchemy\r\n    Django自带的模板引擎简单好用，但其强大程度和综合评价略低于Jinja\r\n    Django自带ORM也使Django与关系型数据库耦合度过高，如果想使用MongoDB等NoSQL数据，需要选取合适的第三方库，且总感觉Django+SQL才是天生一对的搭配，Django+NoSQL砍掉了Django的半壁江山\r\n    Django目前支持Jinja等非官方模板引擎\r\n    Django自带的数据库管理app好评如潮\r\n    Django非常适合企业级网站的开发：快速、靠谱、稳定\r\n    Django成熟、稳定、完善，但相比于Flask，Django的整体生态相对封闭\r\n    Django是Python web框架的先驱，用户多，第三方库最丰富，最好的Python库，如果不能直接用到Django中，也一定能找到与之对应的移植\r\n    Django上手也比较容易，开发文档详细、完善，相关资料丰富",
                "last_edit_timestamp": "2020-01-21T19:59:07.883",
                "url_slug": "djangohe-flaskde-qu-bie",
                "tags": [
                    1,
                    2
                ]
            }
        },
        {
            "model": "blog.articles",
            "pk": 3,
            "fields": {
                "title": "python中的GIL锁",
                "body": "为什么我们说python中无法实现真正的多线程呢，这是因为在C语言写的python解释器中存在全局解释器锁，由于全局解释器锁的存在，在同一时间内，python解释器只能运行一个线程的代码，这大大影响了python多线程的性能。而这个解释器锁由于历史原因，现在几乎无法消除。\r\n\r\npython GIL 之所以会影响多线程等性能，是因为在多线程的情况下，只有当线程获得了一个全局锁的时候，那么该线程的代码才能运行，而全局锁只有一个，所以使用python多线程，在同一时刻也只有一个线程在运行，因此在即使在多核的情况下也只能发挥出单核的性能。\r\n\r\n任何Python线程执行前，必须先获得GIL锁，然后，每执行100条字节码，解释器就自动释放GIL锁，让别的线程有机会执行。这个GIL全局锁实际上把所有线程的执行代码都给上了锁，所以，多线程在Python中只能交替执行，即使100个线程跑在100核CPU上，也只能用到1个核。\r\n\r\n对于有io操作的线程，当一个线程在做io操作的时候，因为io操作不需要cpu，所以，这个时候，python会释放python全局锁，这样其他需要运行的线程就会使用该锁。",
                "timestamp": "2019-02-21T22:01:52",
                "authorname": 1,
                "views": 2449,
                "category": 2,
                "greats": 13,
                "comments": 3,
                "status": "有效",
                "brief": null,
                "pic": "jiablogimages/img3.jpg",
                "istop": null,
                "articlebodybrief": "为什么我们说python中无法实现真正的多线程呢，这是因为在C语言写的python解释器中存在全局解释器锁，由于全局解释器锁的存在，在同一时间内，python解释器只能运行一个线程的代码，这大大影响了python多线程的性能。而这个解释器锁由于历史原因，现在几乎无法消除。\r\n\r\npython GIL 之所以会影响多线程等性能，是因为在多线程的情况下，只有当线程获得了一个全局锁的时候，那么该线程的代码才能运行，而全局锁只有一个，所以使用python多线程，在同一时刻也只有一个线程在运行，因此在即使在多核的情况下也只能发挥出单核的性能。\r\n\r\n任何Python线程执行前，必须先获得GIL锁，然后，每执行100条字节码，解释器就自动释放GIL锁，让别的线程有机会执行。这个GIL全局锁实际上把所有线程的执行代码都给上了锁，所以，多线程在Python中只能交替执行，即使100个线程跑在100核CPU上，也只能用到1个核。\r\n\r\n对于有io操作的线程，当一个线程在做io操作的时候，因为io操作不需要cpu，所以，这个时候，python会释放python全局锁，这样其他需要运行的线程就会使用该锁。",
                "last_edit_timestamp": "2020-02-01T19:39:32.414",
                "url_slug": "pythonzhong-de-gilsuo",
                "tags": [
                    3
                ]
            }
        }
    ],
    "msg": "success",
    "error_num": 0
}

如果发现列表抓取不到数据，可能是出现了跨域问题

pip install django-cors-headers

settings.py添加中间件

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware', # 这个
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'debug_toolbar.middleware.DebugToolbarMiddleware',
    'django.middleware.locale.LocaleMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware', #这个
]

CORS_ORIGIN_ALLOW_ALL = True

然后就行了

请叫我算术嘉

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Django个人博客搭建教程---用Vue写你的第一个前后端分离页面

一、构建Vue.js前端项目npm install vue-cli -gnpm install webpack -g在项目根目录下（和你的app目录平级）vue init webpack myblogfront经过一系列设置之后，就会出现一个文件夹，这就是你的vue工程进入myblogfront目录，运行命令npm install npm install ...
复制链接

扫一扫

专栏目录