linux Vue+nginx+django 实现前后端分离

示例项目 -- LuffyCity.com 的上线

具体解释,vue前端提供静态页面,且可以向后台发起get,post等restful请求

django后台提供数据支撑,返回json数据,返回给vue,进行数据页面渲染

下面是部署笔记:

-- 先从后端搞起  解决环境依赖 -- 解决环境依赖的办法:1 挨个报错的处理2 pip3 freeze >requirements.txt 3 传这个txt文件到linux linux通过命令安装  pip3 install -r requirements.txt4 或者自己创建 touch requirements.txtvim requirements.txt  写进去包数据

(s17luffy) [root@master luffy_boy]# cat requirements.txt
certifi==2018.11.29
chardet==3.0.4
crypto==1.4.1
Django==2.1.4
django-redis==4.10.0
django-rest-framework==0.1.0
djangorestframework==3.9.0
idna==2.8
Naked==0.1.31
pycrypto==2.6.1
pytz==2018.7
PyYAML==3.13
redis==3.0.1
requests==2.21.0
shellescape==3.4.1
urllib3==1.24.1
uWSGI==2.0.17.1

5 安装uwsgi启动项目后端启动方式1 :用参数启动 uwsgi --socket :8000 --module luffy_boy.wsgi方式2     用配置文件启动  创建 touch uwsgi.ini   　　　　                vim uwsgi.ini 写入  　　　　　　　　　　　　　 启动命令 (虚拟环境) [root@web02 opt]# uwsgi --ini luffy_boy/uwsgi.ini    找见 .ini文件的地址

[uwsgi]
# Django-related settings
# the base directory (full path)
chdir           = /opt/luffy_boy
# Django's wsgi file
module          = luffy_boy.wsgi
# the virtualenv (full path)
home            = /root/Envs/s17luffy
# process-related settings
# master
master          = true
# maximum number of worker processes
processes       = 1
# the socket (use the full path to be safe
socket          = 0.0.0.0:6666     此处需注意
# ... with appropriate permissions - may be needed
# chmod-socket    = 664
# clear environment on exit
vacuum          = true

#后台运行uwsgidaemonize=yes

-- 前端代码 vue 打包搞起  --1 准备node环境,下载node环境包wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz2 解压包tar  -zxvf   node-v8.6.0-linux-x64.tar.gz3  添加到环境变量   vim /etc/profilePATH="......"   4  编译打包前端的vue文件1 修改vue提交的请求地址,修改文件是/opt/s17luffy/07-luffy_project_01/src/restful/api.js 2  更该接口内的地址原来是 127.0.0.1:8000/改成服务器的ip地址和端口sed -i "s/127.0.0.1/192.168.11.186/g"   /opt/s17luffy/07-luffy_project_01/src/restful/api.js 此时进入vue代码的第一册层文件夹,  　　　　　　cd /opt/s17luffy/07-luffy_project_01　　　　 3  安装node模块,这是找到package.json,安装它的内容　　　　　　npm install 　　　　 4  编译打包vue代码,这一步会生成 dist 静态文件夹,用于nginx 展示,路飞的页面都在这里了　　　　   npm install build 　　　　 5  配置nginx去找到这个路飞学城页面　　　　　　修改 nginx.conf 参数如下所示:

       虚拟主机1，用于找到vue页面server {listen       80;server_name  s17dnf.com;location / {root  /opt/s17luffy/dist;  index index.html;}}虚拟主机2，用于反向代理，找到djangoserver{listen 8000;server_name  192.168.11.250;location / {include uwsgi_params;uwsgi_pass 0.0.0.0:6666;}}

　　　　　　nginx -t 检查

　　　　　　nginx -s reload 重启使得配置生效

-- 启动redis数据库,支撑购物车数据

　　　　redis-server redis.conf 默认6379端口

-- 确保前端vue正常,后端django正常,nginx启动正常,redis正常,在Windows中访问页面

-- 确保可以添加购物车数据,用户登陆

更多请访问 https://www.cnblogs.com/pyyu/p/10160874.html

转载于:https://www.cnblogs.com/zhangchen-sx/p/10524064.html

linux Vue+nginx+django 实现前后端分离相关推荐

教你玩转Vue和Django的前后端分离
题图:枯树新芽,来自网络,侵删. 阅读本文大概需要 10 分钟. 今天中秋节,先祝大家节日愉快,不在父母身边的都打个电话关心一下吧,我们最容易忽略的人恰恰是最爱我们的父母. 另外,节假日真的不适合出去 ...
基于Vue和Django搭建前后端分离项目
前言最近公司要做一个系统,需要前后端分离,后端使用Django,前端使用Vue,因为之前主要做的是后端开发,前端只会写一写简单的,Vue只会绑定数据,至于Vue怎么与Django结合还是第一次接触, ...
Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的，一键生成代码和API接口的，通用后台管理系统快速开发框架，开发小程序和APP的推荐框架！
Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的,一键生成代码和API接口的,通用后台管理系统快速开发框架,开发小程序和APP的推荐框架! 概述 R ...
SprinBoot-data-jpa整合Vue使用Swagger2实现前后端分离
SprinBoot整合Vue使用Swagger2实现前后端分离首先是后台 Swagger相关的依赖 <dependency><g ...
Nginx完美解决前后端分离端口号不同导致的跨域问题
Nginx完美解决前后端分离端口号不同导致的跨域问题参考文章: (1)Nginx完美解决前后端分离端口号不同导致的跨域问题 (2)https://www.cnblogs.com/PyKK2019/p ...
Springboot+vue 社团管理系统（前后端分离）
Springboot+vue 社团管理系统(前后端分离) zero.项目功能设计图一.数据库设计(项目准备) 1.建表 2.表目录二.前端编写(vue) 1.搭建Vue框架 2.放入静态资源(as ...
Vue+SpringBoot图书管理系统前后端分离（教你一步一步搭建）
Vue+SpringBoot图书管理系统前后端分离(教你一步一步搭建) 介绍: 说明: 环境搭建后端环境搭建 1.新建一个工程(只有收费版的idea才有这个选项哦) 2.选择Java8 4.配置工程 ...
Django的前后端分离以及Rest风格接口开发大全
1.什么是前后端分离开发: 就是前后端工程师约定好数据交互接口,并行的进行开发和测试,后端只提供数据,不负责将数据渲染到页面上,前端通过HTTP请求获取数据并负责将数据渲染到页面上,这个工作是交给浏览 ...
大前端–Vue前端体系、前后端分离
大前端–Vue前端体系.前后端分离前言 Soc:关注点分离原则 HTML+CSS+JS(视图):给用户看,刷新后台给的数据网络通信:axios 页面跳转:vue-router 状态管理:vuex ...

linux Vue+nginx+django 实现前后端分离

linux Vue+nginx+django 实现前后端分离相关推荐

最新文章

热门文章