万能网站,建筑工程资质,服装网站建设策划书,wordpress登陆美化前言
感觉有很多东西#xff0c;不知道写什么#xff0c;随便写点吧。
正文
前后端合并
就不说怎么开发的#xff0c;就说点个人感觉重要的东西。
前端用ReactViteaxios随便写一个demo#xff0c;用于CRUD。
后端用Django REST Framework。
设置前端打包
import { …前言
感觉有很多东西不知道写什么随便写点吧。
正文
前后端合并
就不说怎么开发的就说点个人感觉重要的东西。
前端用ReactViteaxios随便写一个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:pathpath.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 langenheadmeta charsetUTF-8 /link relicon typeimage/svgxml href{% static vite.svg%} /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleVite React/titlescript typemodule crossorigin src../static/index-CetNvwB0.js/scriptlink relstylesheet crossorigin href../static/index-B7i0P6ID.css/headbodydiv idroot/div/body
/html5、修改项目的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_nameindex.html)), # 这里是为了解决前端路由问题
]启动项目。 刷新页面没有问题。
如果写成下面这种。
path(,TemplateView.as_view(template_nameindex.html)),
刷新就会报错。因为前端路由和后端路由并不是完全相同的。
比如前端路由/show而后端只有book,book/:id等的路由没有/show路由不一致。
因此代码如下
re_path(r^.*$, TemplateView.as_view(template_nameindex.html))
前后端合并完成其实这个时候可以部署到服务器。笔者选择打包成exe文件
打包exe文件
笔者的Django项目是Rye建立的安装Pyinstaller
其中pyproject.toml的脚本内容如下
[tool.rye.scripts]dev python manage.py runserver
buildpyinstaller -F manage.py
build_add_datapyinstaller -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?spm1001.2014.3001.5502我使用了nwnw可以吧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 --moderun --globfalse ./\,nw:build: nwbuild --modebuild --globfalse --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的知识以后再来。
