1. Предпосылки
В нашей работе нам часто приходится создавать некоторые веб-проекты, такие как внутренние тестовые платформы, системы эксплуатации и обслуживания и т. д. В этой статье в основном рассказывается, как использовать стек технологий backend Django + frontend Vue.js для быстрого создания фреймворка для веб-проекта.
Зачем использовать Django и Vue.js?
Django — одна из самых зрелых веб-платформ в системе Python.Из-за простоты использования языка Python и его широкой аудитории платформа Django также стала первым выбором для сред разработки веб-сайтов малого и среднего размера из-за ее возможность быстрой разработки веб-приложений. А анализ данных Django ( Pandas ), очередь задач ( Celery ), Restful API ( Django REST framework ), ORM (похожий на спящий режим Java) и другие функции позволяют пользователям быть удобными при решении любых задач по созданию веб-сайтов.
Vue.js — очень популярная библиотека JavaScript MVVM, построенная с использованием идей, основанных на данных и компонентах. По сравнению с Angular.js, Vue.js также поддерживает двустороннюю привязку, синтаксис тегов усов и другие функции, а также предоставляет более краткий и простой для понимания API, что позволяет нам быстро приступить к работе и использовать Vue.js.
В этой статье в качестве внешнего интерфейса используется Vue.js, вместо более слабого механизма шаблонов Django. Django предоставляет API-интерфейсы в качестве серверной части, полностью разделяя интерфейс и серверную часть, что больше подходит для разработки и построения. одностраничных приложений.
2. Соответствующие технологии и среды, используемые в проекте
-
Операционная система: Windows 10
-
База данных: MySQL 5.7
-
Бэкенд: фреймворк Django 2.x, Python 3.x
-
Внешний интерфейс: HTML/CSS/jQuery/JavaScript/Vue.js
Примечание. Модули, связанные с Python, устанавливаются с помощью установщика pip, который поставляется вместе с python. Для сторонних пакетов, связанных с интерфейсом, мы используем диспетчер пакетов npm, который поставляется с узлом для установки.
3. Соберите проект Django
1. Войдите в безопасный каталог, откройте командную строку CMD и введите команду:
django-admin startproject myproject
Структура каталога:
2. Введите этот каталог MyProject, создайте виртуальную среду и активируйте:
cd myproject
# 需安装 Virtualenv
pip install virtualenv
# 新建虚拟环境
virtualenv env
# 激活虚拟环境
.\env\Scripts\activate
# 安装 django
pip install django
# 提前安装好所需模块
pip install requests
Активация флага для виртуальной среды:
3. Создайте приложение:
python manage.py startapp myapp
Структура каталога:
4. В файле конфигурации settings.py в myproject замените базу данных sqlite3 по умолчанию на нашу базу данных mysql:
# Database
# https://docs.djangoproject.com/en/2.2/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'myproject',
'USER': 'root',
'PASSWORD': 'admin',
'HOST': '127.0.0.1',
}
}
# 温馨小提示
# 将上面的 user 和 password 换成你自己的，同时保证自己有一个数据库名为 myproject 的数据库
И добавьте приложение в список Install_Apps:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myapp'
]
5. В models.py в каталоге app просто пишем модель следующим образом:
from django.db import models
# Create your models here.
class Book(models.Model):
book_name = models.CharField(max_length=64)
add_time = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.book_name
Есть только два поля: название книги book_name и время добавления add_time. Если первичный ключ не указан, django автоматически добавит идентификатор автоинкремента в качестве первичного ключа.
Введите команду в окне командной строки:
# 安装 mysqlclient
pip install mysqlclient
# 数据库迁移
python manage.py makemigrations myapp
python manage.py migrate
Запросите базу данных через командную строку и увидите, что таблица book была создана автоматически / напрямую проверьте наличие этой таблицы базы данных через графический инструмент Navicat Premium 12:
6. Добавляем два новых интерфейса в views.py в каталоге приложения, один — show_booksВернуться к списку всех книг(возвращает данные формата json, которые могут быть распознаны внешним интерфейсом через JsonResponse), второй — add_book принимает запрос на получение и добавляет данные книги в базу данных
from django.shortcuts import render
# Create your views here.
# 需要导入相关的模块
from django.http import JsonResponse
from django.views.decorators.http import require_http_methods
from django.core import serializers
import requests
import json
from .models import Book
@require_http_methods(["GET"])
def add_book(request):
response = {}
try:
book = Book(book_name=request.GET.get('book_name'))
book.save()
response['msg'] = 'success'
response['error_num'] = 0
except Exception as e:
response['msg'] = str(e)
response['error_num'] = 1
return JsonResponse(response)
@require_http_methods(["GET"])
def show_books(request):
response = {}
try:
books = Book.objects.filter()
response['list'] = json.loads(serializers.serialize("json", books))
response['msg'] = 'success'
response['error_num'] = 0
except Exception as e:
response['msg'] = str(e)
response['error_num'] = 1
return JsonResponse(response)
Видно, что с помощью ORM нашему интерфейсу фактически не нужно самостоятельно организовывать SQL-код.
Дополнение: Маленький друг сказал: «Неуместно ли использовать метод GET для добавления книг?» Прежде всего, исходный автор также использовал запрос get для добавления книг, поэтому у меня не было идеи его изменить. к запросу на публикацию.Поскольку маленький друг предложил, то я расскажу о шагах, если вы хотите изменить метод добавления книг в публикацию. Во-первых, на основе приведенного выше кода измените содержимое views.py в каталоге приложения:
# @require_http_methods(["GET"])
@require_http_methods(["POST"]) #修改
def add_book(request):
response = {}
try:
# book = Book(book_name=request.GET.get('book_name'))
book = Book(book_name=request.POST.get('book_name')) #修改
book.save()
response['msg'] = 'success'
response['error_num'] = 0
except Exception as e:
response['msg'] = str(e)
response['error_num'] = 1
return JsonResponse(response)
После модификации, если протестировать интерфейс add_book непосредственно на софте postman, появится ошибка 403, как показано на рисунке:
from django.urls import path,re_path
# 导入 myapp 应用的 views 文件
from . import views
urlpatterns = [
re_path(r'add_book$', views.add_book),
re_path(r'show_books$', views.show_books)
]
Кроме того, мы должны добавить URL-адреса в приложении к URL-адресам в проекте, чтобы завершить маршрутизацию:
from django.contrib import admin
from django.urls import path,re_path
from django.conf.urls import url, include
import myapp.urls
urlpatterns = [
path('admin/', admin.site.urls),
re_path(r'^api/', include(myapp.urls)),
]
8. Введите команду для запуска сервера:
python manage.py runserver
Первый метод тестирования интерфейса: через браузер, поскольку все эти запросы являются запросами на получение, вы можете напрямую видеть результаты, возвращаемые сервером, непосредственно в браузере. Введите прямо в адресную строку браузераhttp://localhost:8000/api/show_books вы увидите эффект следующей картинки:
Введите http://localhost:8000/api/add_book?book_name=test прямо в адресную строку браузера, вы увидите эффект следующей картинки:
Протестируйте два интерфейса, которые мы только что написали, через postman:
интерфейс add_book:
интерфейс show_books:
Ссылка на обучение:
В-четвертых, создайте интерфейсный проект Vue.js.
Предварительное условие: NODE установлен, и после установки он будет поставляться с менеджером пакетов npm.
1. Сначала установите инструмент создания шаблонов vue-cli с помощью npm (vue-cli — это официальный инструмент создания шаблонов, который может быстро помочь вам создать структуру проекта vue):
npm install -g vue-cli
После установки в корневом каталоге проекта проекта создайте новый каталог внешнего интерфейса:
vue-init webpack appfront //安装中把vue-router选上，我们须要它来做前端路由
Теперь мы можем видеть, что вся структура каталогов файлов выглядит так:
2. В каталоге src включите файл входа main.js, компонент входа App.vue и т. д. Файл с суффиксом vue — это однофайловый компонент, определенный фреймворком Vue.js.Содержимое тега можно понимать как содержимое html-подобной структуры страницы.Содержимое тега — это метод и данные js, но стиль css.Аспекты контента:
3. Установите и импортируйте элемент пользовательского интерфейса и axios
Сначала установите элемент ui и axios в командной строке.
npm install element-ui
npm install axios
Затем добавьте следующий код в src/main.js на основе исходного кода:
// 引入 element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
// 引入 axios
import axios from 'axios'
Vue.prototype.$axios = axios
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
axios,
components: { App },
template: '<App/>'
})
4. Создать новый компонент с именем Home.vue в папке src/component Вызовом апи, написанного на Django ранее, реализованы функции добавления книг и отображения информации о книгах.
<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="addBook()" 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 slot-scope="scope"> {{ scope.row.pk }} </template>
</el-table-column>
<el-table-column prop="book_name" label="书名" min-width="100">
<template slot-scope="scope"> {{ scope.row.fields.book_name }} </template>
</el-table-column>
<el-table-column prop="add_time" label="添加时间" min-width="100">
<template slot-scope="scope"> {{ scope.row.fields.add_time }} </template>
</el-table-column>
</el-table>
</el-row>
</div>
</template>
<script>
export default {
name: 'home',
data () {
return {
input: '',
bookList: [],
}
},
mounted: function() {
this.showBooks()
},
methods: {
addBook(){
this.$axios.get('http://127.0.0.1:8000/api/add_book?book_name=' + this.input)
.then((res) => {
// console.log(res)
var res = res.data;
if (res.error_num == 0) {
this.showBooks()
} else {
this.$message.error('新增书籍失败，请重试')
console.log(res['msg'])
}
})
},
showBooks(){
this.$axios.get('http://127.0.0.1:8000/api/show_books')
.then((res) => {
var res = res.data;
// console.log(res)
if (res.error_num == 0) {
this.bookList = res['list']
} else {
this.$message.error('查询书籍失败')
console.log(res['msg'])
}
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<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>
5. Если обнаружится, что данные не могут быть захвачены из списка, может быть междоменная проблема.Откройте консоль браузера для подтверждения:
В настоящее время нам нужно внедрить заголовки в слой Django и использовать сторонние пакеты Django.django-cors-headersЧтобы решить междоменную проблему:
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',
]
CORS_ORIGIN_ALLOW_ALL = True
6. В каталоге внешнего проекта введитеnpm run devЗапустите сервер, который идет в комплекте с узлом, автоматически откроется браузер, и мы сможем увидеть страницу:
7. В каталоге внешнего проекта введитеnpm run build, если ошибок в проекте нет, то видно, что все компоненты, css, изображения и т.д. автоматически упаковываются webpack в директорию dist:
5. Интегрируйте Django и Vue.js
На данный момент мы завершилиСерверная часть ДжангоиФронтенд-инжиниринг Vue.jsсоздаются и пишутся, но фактически работают на своих серверах, что не соответствует нашим требованиям. Итак, нам нужно поместить ДжангоTemplateView指向我们刚才生成的前端dist文件即可。
Я лично понимаю, что если вы хотите достичьFront-end и back-end отдельные проекты, в основном не нужно читать следующий контент, Vue.js реализует внешний интерфейс проекта, Django реализует серверную часть проекта и предоставляет API.
1. Найдите urls.py в каталоге проекта, используйте общее представление для создания простейшего контроллера шаблона и верните index.html напрямую при доступе к «/»:
from django.contrib import admin
from django.urls import path,re_path
from django.conf.urls import url, include
import myapp.urls
from django.views.generic import TemplateView # 新增的
urlpatterns = [
path('admin/', admin.site.urls),
re_path(r'^api/', include(myapp.urls)),
re_path(r'^$', TemplateView.as_view(template_name="index.html")), # 新增的
]
2. В предыдущем шаге использовалась система шаблонов Django, поэтому вам нужно настроить шаблон, чтобы Django знал, где найти index.html. В settings.py в каталоге проекта:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['appfront/dist'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
3. Также нам необходимо настроить путь поиска статических файлов. То же самое находится в settings.py в каталоге проекта:
# Add for vuejs
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "appfront/dist/static"),
]
4. После завершения настройки вводим команду в директорию проектаpython manage.py runserver, вы можете увидеть нашу страницу интерфейса, отображаемую в браузере:
Примечание. Порт службы уже 8000 службы Django вместо 8080 службы узла.
6. Развертывание
Из-за кроссплатформенной природы python, теоретически, если все зависимости установлены на сервере, каталог проекта можно скопировать непосредственно на сервер для запуска. Просто упомянуть здесь:Если nginx настроен для проекта в качестве обратного прокси-сервера, то все пути к статическим файлам в nginx должны быть настроены так, чтобы они указывали на URL-адрес статического файла, настроенный в проекте Django, а путь URL-адреса можно настроить в settings.py:
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/
STATIC_URL = '/static/'
7. Другое
Исходный код примера проекта можно скачать по следующей ссылке:
GitHub.com/Wish Yo Build/Великое ограбление…
Наконец, отдельное спасибо автору оригинала. ╂ Кочевникписьменный блогИнтегрируйте платформу Django + Vue.js для быстрой разработки веб-проектов., вся статья в блоге ссылается на блог, написанный первоначальным автором, и использует новейший стек технологий для перезаписи примера проекта, который отличается от исходного.