直接运行vue+django项目

  1. 下载前后端代码

wget https://files.cnblogs.com/files/pyyu/luffy_boy.zip

wget https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip

  1. 解压缩前后端源码压缩包

unzip luffy_boy.zip

unzip 07-luffy_project_01.zip

  1. 先从后端搞起 进入后端路飞代码文件夹

  2. 解决后端python模块问题,准备一个模块版本文件

    requirements.txt 这个文件可以手动创建

    touch 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

  3. 安装这个模块依赖文件

pip3 install -i https://pypi.douban.com/simple -r requirements.txt

  1. 运行后端 代码

python3 manage.py runserver 0.0.0.0:8000

  1. 开始准备前端代码

  2. 准备打包环境 node环境

    1. 下载node环境

    cd /opt

    wget https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz

    1. 配置node环境的环境变量

      解压缩源码包

    tar -zxvf node-v8.6.0-linux-x64.tar.gz

    1. 配置node的环境变量

    vim /etc/profile

    写入新的path

    PATH="/opt/python36/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin:/opt/node-v8.6.0-linux-x64/bin"

    ​ 读取全局配置文件,加载node的环境变量

    source /etc/profile

    1. 检测node环境是否正常

    node -v

    npm -v

    1. 进入vue代码包中,开始进行打包,注意修改vue的api请求接口地址!!!

    cd /opt/s16luffy/07-luffy_project_01

    ​ 替换所有的api.js请求地址:命令如下

    sed -i "s/127.0.0.1/192.168.15.53/g" api.js

    1. 此时进行打包

    npm install

    npm run build

    1. 只需要将vue的静态文件,发布到web服务器,访问web服务器即可
    2. 安装配置nginx web服务器,访问到vue的静态文件

    yum install nginx -y

    1. 配置nginx,结合vue的静态文件

      配置nginx的配置文件,让nginx可以返回vue的静态文件

    vim /etc/nginx/nginx.conf

    #修改代码和我一样
    找到如下代码,只需要修改root这个参数!!!!!!!!!!!!
    server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name _;
    #root这个参数代表定义网页根目录,只要访问nginx,nginx就去这个目录寻找一个名叫index.html的文件
    root /opt/s16luffy/07-luffy_project_01/dist;
    1. 修改了nginx配置文件之后,需要nginx服务才能生效

    systemctl restart nginx

    1. 此时在windows中访问linux的80端口,查看是否定位到路飞学城
    2. 访问课程列表,查看是否可以正常向后端发送数据
    3. 添加课程数据是存放到redis中的,需要安装redis

    yum install redis -y

    1. 启动redis服务端

    systemctl start redis

    1. 添加django 和linux的课程,登录alex用户

    账号 alex

    密码 alex3714

    查看购物车数据

直接运行vue+django项目的更多相关文章

  1. 主机无法访问虚拟机中运行的Django项目

    在虚拟机中的linux上运行了Django项目,虚拟机中可以访问,但外部主机无法访问(连接超时),但主机能ping同虚拟机,虚拟机也能ping通主机 需检查三个地方:(后面发现虚拟机的ip地址存在改变 ...

  2. Vue+Django项目部署

    本地项目配置 1 复制 luffy/settings/dev.py为prop.py 修改luffy/settings/prop.py中以下几项 (1) allow_hosts ALLOWED_HOST ...

  3. 【Django】Apache上运行单个Django项目,mod_wsgi配置

    1 安装环境 操作系统:Ubuntu 12.04 LTS 32 位(安装在VMware虚拟机中) python 版本: Python 2.7.3 Django版本 >>> djang ...

  4. centos7关闭运行的django项目

    1.查看django项目的端口对应的PID :sudo netstat -tulpn | grep :8000 2.杀死进程命令:kill -9 pid

  5. 在linxu机器ansible上运行启动django项目命令

    source py3env/bin/activate  进入虚拟环境 cd /xiangmulujing     进入项目路径 然后就可以执行运行命令了 python manage.py runser ...

  6. Linux学习笔记之Django项目部署(CentOS)

    一.引入 用Django写了一个测试的项目,现在要部署在Linux上,一般这种情况下,只要在项目里面敲一行命令:python manage.py runserver 0.0.0.0:8000就行了.但 ...

  7. Django项目和Django初体验和创建、目录结构认识

    .MVC的设计方式(跟Flask一样,都是MVC的设计模式) .开发效率高 .功能强大(丰富的第三方组件) .安全性高(帮助开发者规避安全漏洞) 目前市面上使用:Django>Flask #使用 ...

  8. Django项目部署在Linux下以进程方式启动

    Django项目部署在Linux下以进程方式启动 这是一篇关于如何在linux下,以后台进程的方式运行服务,命令改改基本上就通用了. 开发完Django项目后,需要把项目部署到linux环境下.当然, ...

  9. 项目部署Vue+Django(luffy)

    部署路飞学城 部署整体框架图: 1 熟悉linux操作 2 上传路飞学城项目到linux服务器 xftp上传到服务器 lrzsz工具 3 完成python3解释器的安装 在linux命令行模式下, 输 ...

随机推荐

  1. vb.net 使用NPO各種格式設定

    '導入命名空間Imports System.IO Imports NPOI.HSSF.UserModelImports NPOI.HPSFImports NPOI.POIFS.FileSystem P ...

  2. 线程 线程池 Task

    首先声明 这是读了 愉悦的绅士 文章 <菜鸟之旅——学习线程(线程和线程池)> <Task与线程> 的一些个人总结,还是那句话,如有不对,欢迎指正 文章以代码加注释的方法展示. ...

  3. (4)Microsoft office Word 2013版本操作入门_插入图片及图片的排版

    1.word中插入图片和文绕图 1.1插入图片 :点击[插入]-->[图片] 或者 [联机图片]从网上选择. 1.2文字环绕: [格式] --->点击[位置]   .[自动换行]  进行图 ...

  4. software testing

    Software Testing Software testing is the process of evaluation a software item to detect differences ...

  5. C#设计模式之十三模板方法模式(Template Method Pattern)【行为型】

    一.引言 “结构型”的设计模式已经写完了,从今天我们开始讲“行为型”设计模式.现在我们开始讲[行为型]设计模式的第一个模式,该模式是[模板方法],英文名称是:Template Method Patte ...

  6. spring-framework-中文文档二:Bean概述

    Spring IoC容器管理一个或多个bean.这些bean是使用您提供给容器的配置元数据创建的,例如,以XML <bean/>定义的形式 . 在容器本身中,这些bean定义被表示为 Be ...

  7. 51单片机:IO口扩展芯片用法(74HC165,74HC595)

    IO口扩展芯片,主要是解决单片机IO口太少. 74HC165:数据从并转串 74HC595:数据从串转并 两种芯片,都是通过时序电路,加上移位功能,进行数据传输 74HC165:数据从并转串.以下实例 ...

  8. margin:0 auto是什么意思

    一.margin设置对象外边距 二.margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right 因为0 auto

  9. JS动态创建元素

    动态添加标签,可从服务器获取标签文本,然后加载到指定div中,可用于权限控制. 1.添加标签字符串方式 var str='<div>5555555555555555555555555555 ...

  10. 洛谷P3247 [HNOI2016]最小公倍数(分块 带撤销加权并查集)

    题意 题目链接 给出一张带权无向图,每次询问\((u, v)\)之间是否存在一条路径满足\(max(a) = A, max(b) = B\) Sol 这题居然是分块..想不到想不到..做这题的心路历程 ...