1、前后端分离,vue前端提供静态页面,且可以向后台发起get,post等restful请求。django后台提供数据支撑,返回json数据,返回给vue,进行数据页面渲染。
vue向后台发起请求 get 服务器ip:8000/课程列表
django-rest-framework框架接收,“ 服务器ip:8000/课程列表 ” 请求,然后return返回一个json数据
{"课程列表":"python课程,linux课程",.....}
一、
1.先从后端搞起,部署django后台的环境依赖
-解决环境依赖的办法:
把可以正常运行项目的那个机器地下的python包,全部导出来,就可以
pip3 freeze > requirements.txt 把这个文件,传输给linux系统
linux再通过命令安装
pip3 install -r requirements.txt
安装uwsgi启动后端
pip3 install uwsgi
启动方式1,用参数启动uwsgi --http :8000 --module luffy_boy.wsgi
启动方式2:用配置文件启动
touch uwsgi.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
二、
1、前端代码vue打包搞起
①、准备node环境,下载node环境包
wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz
②、解压缩node包
tar -zxvf node-v8.6.0-linux-x64.tar.gz
③、添加node到环境变量
PAHT="node环境"
④、开始编译打包前端vue文件
1.修改vue提交的请求地址,修改文件是
/opt/前端文件/src/restful/api.js
2.更改接口内的地址
原本是 127.0.0.1:8000/
改成服务器的ip地址+端口
sed -i "s/127.0.0.1/192.168.29.136/g" /opt/前端文件/src/restful/api.js
此时进入vue代码的第一层文件夹
cd /opt/vue文件名
3.安装node模块,这是找到package.json,安装它的内容
npm install (出现err后把vue文件删除,重新解压,开始④步骤)
如果多次出现err,换台电脑打包dist文件,
4.编译打包vue代码,这一步会生成dist静态文件夹,用于nginx展示,前端页面都在这了
npm run build
5.配置nginx去找到这个前端vue页面
修改nginx.conf 参数如下
虚拟主机1,用于找到vue页面
server {
listen 80;
server_name s17dnf.com;
location / {
root /opt/s17luffy/dist;
index index.html;
}
}
虚拟主机2,用于反向代理,找到django
server{
listen 8000;
server_name 192.168.11.250;
location / {
include uwsgi_params;
uwsgi_pass 0.0.0.0:6666;
}
}
6.重启nginx使得配置生效
nginx -s reload
7、启动redis数据库,支撑数据
redis-server redis.conf