Flask+Vue快速打造个人网站(二)

Flask+Vue快速打造个人网站(二)

2018.9.17 23:09

后端

后端框架使用flask考虑的是前后端分离,可以快速开发API,还有就是以前写的一些代码直接复用

在接口这块其实都差不多,主要来讲项目的模块化划分

目录

模块化项目是为了使代码更加清晰、可复用、低耦合,与django不同的是,前期使用flask时在github撸了很多demo,发现大部分项目结构都不同,各有各的分法。

# 模块化想法
models数据模型、routes全局路由、config全局配置、 一个启动文件、一个app初始化文件、utils外部方法包

这块有个坑就是互相引用的问题,尤其是在models里 A文件importB B文件又import A,就会引起这个问题,

最好的做法是__init__文件作为中间文件放置公共方法

模块化划分好之后,就是一些外部库的用法

  • Flask-admin
  • flask-migrate
  • Flask-BabelEx
  • Flask-Cors
  • Flask-login
  • Flask-restful
  • Flask-script
  • Flask-sqlalchemy
  • blueprint

需求一:原始接口都是一个方法上面一个路由,@app.route()这样,多个api多个页面时全局查看路由就很不方便,需要把路由都放在一块与接口分离开来

routes.py路由页面

from flask import Blueprint
from flask_restful import Api
from admins import Index

# 当需要flask_restful写接口时,Blueprint应该怎么引入就成了问题
# 实例化蓝图,路由前缀为/api
blue = Blueprint('api', __name__, url_prefix='/api')

docs = Api(blue)
# 路由注册
docs.add_resource(Index, '/', endpoint="index")
# 添加路由时只需
docs.add_resource(API类名, '路由地址', 端点)

api页面

from flask_restful import Resource

# restfulAPI继承Resource类
class Index(Resource):
    def __init__(self):
        # ...
    def get(self):
        #...
    def post(self):
       # ...

models页面

from admins import db

class Video(db.Model):
    __tablename__ = "video"
    id = db.Column(db.Integer, unique=True, primary_key=True)
    video_url = db.Column(db.String(100))
    desc = db.Column(db.String(80))
    time_long = db.Column(db.Integer)
    small_img = db.Column(db.String(100))
    watch = db.Column(db.Integer, default=0)

    def __repr__(self):
        return "<Video %r>" % self.id

这样路由查看就方便多了

需求二:models迁移数据,修改model字段可以随时更新迁移 用到了flask-migrate

"""
系统入口文件,
实例化app
添加shell脚本
"""
from flask_script import Manager, Server
from flask_migrate import Migrate, MigrateCommand
from app import create_app
# 为了避免重复引用,我将db放在了admins.py中
from admins import db, AdminUser
# 将所有的model都引进来
from pictures.models import *


app = create_app('dev')
migrate = Migrate(app, db)
manager = Manager(app)
manager.add_command("runserver",
                    Server(host='0.0.0.0',
                           port=5000,
                           ))
manager.add_command("db", MigrateCommand)


if __name__ == '__main__':
    manager.run()

在admins目录下的__init__.py文件

from flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy()

本篇结束

  • 4
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
这里提供一个简单的步骤来使用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,并看到您的博客。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值