Prerequisite
【完结】项目地址：xxx
相关文章：
- TypeScript
- VUE 3【基本实现了项目的前端】
- Django
- AI 相关笔记
技术栈：
后端：Python3 + Django（Ninja）
前端：TypeScript + Vue3 + VueRouter + Vuex + Vue-Vben-Admin
数据库：SQLite3
项目构建工具：Vite + Pnpm
数据模拟：MockJS
AI：ChaGPT-3.5 + Stable Diffusion + MODNet + VITS + Mubert
相关命令：
- 创建前端：
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
- 下载命令：
- Django
- 下载 Django
pip install django django-cors-headers
- 下载 Django
基于 Django 框架的 AI 故事生成技术与实现
PS1：本来想用 MySQL 的，结果死活显示不出数据（查了好几个小时资料后放弃）
项目前端
- views 文件夹，用于存储主视图（Home.vue 和 AI.vue）
- router 文件夹，用于存储路由文件
- api 文件夹，用于接收后端数据（ai.ts 和 request.ts）
PS：具体方法详情上一个案例
- Home.vue 使用 Three.js 构建炫酷主页（
npm install three --save） - 配置：在 vite-env.d.ts 文件中添加
declare module 'three'; - 入门教程：初步一栏
<!-- Home.vue -->
- Vue-Vben-Admin 框架
- 获取项目代码：
git clone https://github.com/anncwb/vue-vben-admin.git - 安装依赖：
pnpm install - 运行：
pnpm serve - 打包：
pnpm build
- 获取项目代码：