前言:本文适合有一定Vue或Django基础的开发者阅读,文中不会特别强调技术细节,只强调搭建的流程和配置,若有技术细节不懂请自行谷歌。

目录

一 、技术栈选择

二、 环境配置

三、 项目初始化

更新日志 


一 、技术栈选择

前端Vue的所有技术栈: vue2 + vuex + vue-router + webpack

UI库: element-ui

网络请求:axios

前端脚手架构建工具:vue-cli

后端技术栈:Python+Django

数据库: MySQL

前端技术栈选择原因:Vue是如今最火的MVVM框架之一,它的优势是双向数据绑定、文件组件化、生态较完善等。

后端技术栈选择原因:Django是基于Python的一款轻量级的后端框架,适合个人全栈快速开发,我青睐于它的原因是它的ORM方便高效、配置简单清晰、自带token等。

前后端分离模式选择原因:实现并行开发,开发结束后需要进行独立部署,前端通过ajax来调用http请求调用后端的restful api。前端只需要关注页面的样式与动态数据的解析&渲染,而后端专注于具体业务逻辑。

 

二、 环境配置

本项目的系统环境:Ubuntu 18 

本项目的开发环境:Node12.10.3  + Vue 2.9.6 + Python 3.6.8 + Django2.2.7

本项目的开发软件:Vscode、Pycharm

配置开发环境:

(1)安装Node.js 和 Python

(2)安装Django以及依赖包:

通过Pycharm安装 Django==2.2.7  pymysql==0.9.3  djangorestframework==3.1.3

(3)安装cnpm(直接用npm可行,但需科学上网)

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

(4)安装Vue-cli脚手架构建工具

$ cnpm install -g vue-cli

 

三、 项目初始化

(1)在命令行界面输入下列指令,创建Django应用——PythonSky:

$ django-admin startproject PythonSky

(2)进入创建的项目,创建应用app——childName:

$ cd PythonSky

$ python manage.py startapp PythonSky

(3)在appName的跟目录,利用vue-cli创建vue应用——vueName:

$ vue-init webpack PythonSky

(4)进入vueName,安装模块并打包:

$ cd PythonSky

$ cnpm install

$ cnpm run dev

(5) 找到Django应用——PythonSky根目录里的urls.py(即PythonSky/urls.py),配置url路径:

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('home.urls')),
]

(6)在PythonSky文件根目录里的settings.py添加python的app应用:


INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'home'
]

(7)本项目数据库为mysql,所以在PythonSky文件根目录里的settings.py修改数据库信息:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',  # 数据库引擎
        'NAME': 'databases',  # 数据库名
        'USER': 'root',  # 用户名
        'PASSWORD': 'root',  # 密码
        'HOST': '',  # 数据库主机,默认为localhost
        'PORT': '',  # 数据库端口,MySQL默认为3306
        'OPTIONS': {
            'autocommit': True,
        },
    }
}

(8)在PythonSky文件根目录里的init.py中添加pymysql配置:

import pymysql
pymysql.install_as_MySQLdb()

(9)修改Django的模板渲染路径及中国时区:


LANGUAGE_CODE = 'zh-Hans'

TIME_ZONE = 'Asia/Shanghai'

(10)修改home的urls,在home文件夹中创建新的api.py:

from rest_framework.response import Response
from rest_framework.decorators import api_view

@api_view(['GET'])
def Hello(request):
    jsonData = {'success': 'ok', 'message': 'hello world', 'data': ''}
    return Response(jsonData)

(11)在Pycharm中运行Django项目,并在浏览器打开:

 

更新日志

2019-11-07 15:30   初始化项目

Logo

前往低代码交流专区

更多推荐