Django + Vue（项目篇）

Prerequisite

【完结】项目地址：xxx#

相关文章：

• TypeScript
• VUE 3【基本实现了项目的前端】
• Django
• AI 相关笔记

技术栈：
后端：Python3 + Django（Ninja）
前端：TypeScript + Vue3 + VueRouter + Vuex + Vue-Vben-Admin + Element-Plus-UI
数据库：SQLite3
项目构建工具：Vite + Pnpm
数据模拟：MockJS
AI：ChaGPT-3.5 + Stable Diffusion + MODNet + VITS + Mubert
总结：Django 开发后端 + Vue 开发前端，内容为 AI 故事生成【展现用游戏引擎，No】

相关命令：

• 创建前端：mkdir front
• 创建后端：mkdir back
• 创建后端环境：django-admin startproject ai【back】
• 创建后端应用程序：python manage.py startapp core【back/ai】
• 创建后端迁移文件：python manage.py makemigrations【back/ai】
• 更新后端数据库：python manage.py migrate【back/ai】
• 启动后端：python manage.py runserver【back/ai】
• 后端接口测试：http://127.0.0.1:8000/api/docs
• 创建前端环境：npm create vite@latest【front】
• 下载前端所需库：pnpm install【front/ai】
• 运行前端项目：pnpm serve【front/ai】
• 打包前端项目：pnpm build【front/ai】

所需软件

• Node.js
  • Node.js 官方下载地址：https://nodejs.org/zh-cn/ 【选择长期维护版；下载过程最后的选项，打个勾】
  • 查看 NPM 是否安装成功：npm --version
• pnpm
  • 下载命令：npm install -g pnpm【前置是已经下载 Nodejs】
  • 查看版本：pnpm --version
• Element-Plus-UI
  • 下载命令1：pnpm install element-plus -w
  • 下载命令2：pnpm install -D unplugin-vue-components unplugin-auto-import -w
  • 下载命令3：pnpm install @element-plus/icons-vue -w
• Django
  • 下载 Django pip install django django-cors-headers

碎碎念

• 数据库本来想用 MySQL 的，结果后端死活显示不出数据（查了好几个小时资料后放弃，改用 SQLite3）
• 前端本来想用 Three.js 构建炫酷主页，也可惜挺复杂的，抄都抄不明白（找的资料）

基于 Django 框架的 AI 故事生成技术与实现

项目前端#

基础内容详情这篇文章，本篇基于此进行补充和延申

待完善：

• 启动项目不进入登入页，想让其直接进入剧本页
• emm

剧本页

生成图像页

生成语音页

人物抠图页

背景音乐页

整体演示页

项目后端#

Django + AI + 数据库