网站网页设计个人博客seo
前言
感觉有很多东西，不知道写什么，随便写点吧。
正文
前后端合并
就不说怎么开发的，就说点个人感觉重要的东西。
前端用React+Vite+axios随便写一个demo，用于CRUD。
后端用Django REST Framework。
设置前端打包
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'// https://vite.dev/config/
export default defineConfig({plugins: [react()],base:'./',build:{outDir:'template',assetsDir:'static',},server:{proxy:{'/api':{target:'http://localhost:8000',changeOrigin:true,rewrite:path=>path.replace(/^\/api/,'')}}}
})
如果不用一些代理工具nginx等，打包后代理没有用了。
要么在axios中去掉
baseUrl='/api'或者在Django的路由前加上/api，一样，都行
后续操作
1、打包后将tempate目录复制到Django的根目录下
2、将vite.svg图标放到static目录下
3、修改settings.py文件的关键部分
TEMPLATES = [{'BACKEND': 'django.template.backends.django.DjangoTemplates','DIRS': [BASE_DIR/'templates'],'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',],},},
]
STATICFILES_DIRS=[BASE_DIR/'templates/static'
]如果选择static文件夹拿到根目录，也行，修改一下STATICFILES_DIRS。
4、修改index.html，显示图标
{% load static %}
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="{% static 'vite.svg'%}" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + React</title><script type="module" crossorigin src="../static/index-CetNvwB0.js"></script><link rel="stylesheet" crossorigin href="../static/index-B7i0P6ID.css"></head><body><div id="root"></div></body>
</html>
5、修改项目的urls.py文件
from django.contrib import admin
from django.urls import path,include,re_path
from django.views.generic import TemplateViewurlpatterns = [path('admin/', admin.site.urls),path('api/book/', include('book.urls')), # 加上api前缀re_path(r'^.*$', TemplateView.as_view(template_name='index.html')), # 这里是为了解决前端路由问题
]
启动项目。
刷新页面，没有问题。
如果写成下面这种。
path('',TemplateView.as_view(template_name='index.html')),刷新就会报错。因为前端路由和后端路由并不是完全相同的。
比如前端路由/show，而后端只有book,book/:id等的路由，没有/show，路由不一致。
因此，代码如下
re_path(r'^.*$', TemplateView.as_view(template_name='index.html'))前后端合并完成，其实这个时候，可以部署到服务器。笔者选择打包成exe文件
打包exe文件
笔者的Django项目是Rye建立的，安装Pyinstaller
其中pyproject.toml的脚本内容如下
[tool.rye.scripts]dev = "python manage.py runserver"
build="pyinstaller -F manage.py"
build_add_data='pyinstaller -F --add-data="./templates;templates" --add-data="./static;static" manage.py'dev :运行项目
build_add_data:增加其他模板文件和静态文件打包成一个exe文件
笔者依照脚本移动templates目录下的static到根目录，为了更好的打包。也可以不移动，修改一下脚本的路径即可。
笔者参考了其他大佬的打包过程，可能版本发生变换，打包简单多了，只需要增加静态文件和模板。
Pyinstaller打包Django项目（耗时两天 踩坑无数 记录一下）_runtimeerror: script runserver does not exist.-CSDN博客
https://blog.csdn.net/qq_40292262/article/details/117026558pyinstaller打包Django项目+避坑指南-CSDN博客https://blog.csdn.net/weixin_37934258/article/details/130216656进入到manage.py目录下。
运行脚本
rye run build_add_data虽然过程中有警告
但无所谓，运行成功。
完美。
后端打包，前端使用nw
在前篇文章中
在github action工作流使用nw和nw-builder打包-CSDN博客https://blog.csdn.net/qq_63401240/article/details/146126489?spm=1001.2014.3001.5502我使用了nw，nw可以吧html页面打包成exe
笔者有个想法
不把前后端合并，后端没有模板和静态文件，就提供API，把后端打包成manage.exe
然后nw运行html文件时，同时打开manage.exe。
可惜，没完全实现，笔者实力不行
前端打包和跨域问题
笔者可能刚刚知道nw，不是很了解，笔者发现需要html文件本身能够运行，才能使用nw。
因此，修改路由为Hash
即createHashRouter，
如果不改，运行是这样的
修改后
没有显示内容，因为代理失效了。
修改axios的baseUrl内容
import axios from 'axios';// 后端服务地址
const API_BASE_URL = 'http://127.0.0.1:8000/api';
const requests = axios.create({baseURL: API_BASE_URL, // 动态设置 baseURLtimeout: 5000,headers: {'Content-Type': 'application/json'}
});export default requests;再次前端打包，运行
需要跨域，而笔者没有使用代理工具。因此，笔者使用django-cors-headers
修改setting.py的配置
INSTALLED_APPS = [...'corsheaders', # 增加corsheaders
]
MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware', # 配置中间件...]
CORS_ALLOW_ALL_ORIGINS = True # 允许所有的源访问运行index.html
后端打包
不需要模板和静态文件
rye run build打包没有问题，不必细说。
后端、前端、nw合并
1、将没有模板和静态文件的manage.exe复制在前端pubilc目录下
2、在前端pubilc目录下新建package.json，内容如下
{"name": "book","version": "1.0.0","main": "index.html","window": {"icon": "vite.svg"},"scripts": {"dev": "concurrently \"node ./main.js\" \"nwbuild --mode=run --glob=false ./\"","nw:build": "nwbuild --mode=build --glob=false --output=../build ."},"dependencies": {"nw": "^0.96.0","nw-builder":"^4.13.9"},"devDependencies": {"concurrently": "^6.2.1"}
}
3、新建main.js文件，这里面deepseek写的，我希望使用js代码运行manage.exe
其中内容如下。
const { exec } = require('child_process');
const path = require('path');// 获取 manage.exe 的路径
const manageExePath = path.join(__dirname, 'manage.exe');// 打印路径以调试
console.log('manageExePath:', manageExePath);// 在 Windows 上使用 start 命令启动 manage.exe
if (process.platform === 'win32') {exec(`start "" "${manageExePath}" runserver --noreload`, (error, stdout, stderr) => {if (error) {console.error(`启动 manage.exe 失败: ${error.message}`);return;}console.log(`stdout: ${stdout}`);console.error(`stderr: ${stderr}`);});
} else {// 非 Windows 系统使用 spawnconst manageProcess = spawn(manageExePath, ['ruanserver', '--noreload'], {detached: true,stdio: 'ignore'});manageProcess.unref();manageProcess.on('close', (code) => {console.log(`manage.exe 退出，代码 ${code}`);});manageProcess.on('error', (error) => {console.error(`启动 manage.exe 失败: ${error.message}`);});
}安装依赖后，运行dev脚本，同时运行manage.exe和nw
结果如下
完美
可惜
可惜，笔者并不知道如何打包后双击的同时运行manage.exe，这可能需要nw的知识，以后再来。