直接运行vue+django项目

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

直接运行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项目 的全部内容， 来源链接： utcz.com/z/374662.html

回到顶部