7.1、启动后端项目 python3 manage.py runserver 7.2、启动前端项目 npm run dev 7.3、查看效果 八、整合项目【前后端分别部署的跳过89步骤,到此就结束了】 目前我们已经分别完成了Django后端和Vue.js前端工程的创建和编写,但实际上它们是运行在各自的服务器上,和我们的要求是不一致的。因此我们须要把Django的Templat...
在frontend目录下启动Vue开发服务器: npm run serve 4. 访问项目 打开浏览器,访问http://localhost:8080,你应该会看到从Django后端API获取并显示的博客文章列表。 重点和难点 CORS问题:前后端分离的项目中,通常会遇到跨域资源共享(CORS)问题。你需要在Django项目中配置CORS,安装django-cors-headers并进行配置。 pip i...
DjangoVue前后端分离项目部署8888配置项目路径项目的所在目录chdirusrmyprojectdacts配置wsgi接口模块文件路径也就是wsgipy这个文件所在的目录名dactswsgipymoduledactswsgi配置启动的进程数processes4配置每个进程的线程数threads2配置启动管理主进程mastertrue配置存放主进程的进程号文件pidfileuwsgipid配置dump日志记录daemonize...
主要就是给nginx加权限,vue部署后使用history路由时会去掉地址后面的‘#’号,打包部署后不加权限会有bug。 2、如配置所示,有两个Server,分别部署了前端服务,和后端服务,值得注意的是两个Server用的是同一个服务器,监听的端口不同。 3、vue部署需要注意的是反向代理地址: proxy_pass http://xxxxx.com; # 反向...
现阶段是前后端分开开发,但是当最后要用的时候,还需要把代码合在一起。 首先对前端项目进行打包,这里用Vue的自动打包: npm run build 可以看到前端项目中多出了一个dist文件夹,这个就是前端文件的打包结果。需要把dist文件夹复制到books_demo项目文件夹中。
将vue前端编译好的文件,放置在Nginx中配置的static文件位置 这样输入ip:8001就能打开你的网站了。 这样就可以方便的管理我们的 Djnago 项目了,下面是实际工作开发中用到的部署项目命令,一键部署重启。 git pull --rebase && ./manage.py collectstatic -c --noinput && supervisorctl restart demo...
后端用的Django REST Framework,使用的是uwsgi+nginx,前端使用的Vue。 一、配置uwsgi.ini 进入服务器项目文件目录下,我的django项目放在了“/usr/myProjects/”目录下了。在manage.py同级目录下创建uwsgi.ini文件,配置如下: #添加配置选择 [uwsgi] #配置和nginx连接的socket连接 ...
Web 开发中前后端分离已经是常规性做法,但是不少初学者不太熟悉如何前后端分离,搭建 Demo 的时候遇到的问题也比较多,今天就来分享一下如何用 Vue 和 Django 快速搭建前后端分离项目。 先搭建前端 这里使用 Vue3,可以参考官方文档[1]。 在终端或者命令窗口执行: ...
这里使用 Vue3,可以参考官方文档[1]。 在终端或者命令窗口执行: 复制 npm init vue@latest 1. 这将后自动安装 Vue 的最新版本,并初始化一个 Vue 项目,填写一个项目名称,其它都直接回车按默认值处理即可: 然后执行这些,就会看到前端项目启动了: 复制 ...
前后端联调测试 开发环境下,vue 会占用一个端口,这里是 localhost:5173,而 djangorestframework 也会占用一个端口,比如 localhost:8000,那么 localhost:5137 需要获取 localhost:8000 的数据进行联调,因此我们将前端 demo 中 RestApi.vue 中请求的接口由 api/users 改为 http://127.0.0.1:8000/users.json,实际开发...