直接运行vue+django项目

偏执的太偏执、 2022-01-07 09:13 370阅读 0赞

## 直接运行vue+django项目 ##

1.  下载前后端代码

> wget [https://files.cnblogs.com/files/pyyu/luffy\_boy.zip][https_files.cnblogs.com_files_pyyu_luffy_boy.zip]
> 
> wget [https://files.cnblogs.com/files/pyyu/07-luffy\_project\_01.zip][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][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][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
    
    查看购物车数据

转载于:https://www.cnblogs.com/zhang-zi-yi/p/10792638.html

[https_files.cnblogs.com_files_pyyu_luffy_boy.zip]: https://files.cnblogs.com/files/pyyu/luffy_boy.zip
[https_files.cnblogs.com_files_pyyu_07-luffy_project_01.zip]: https://files.cnblogs.com/files/pyyu/07-luffy_project_01.zip
[https_pypi.douban.com_simple]: https://pypi.douban.com/simple
[https_nodejs.org_download_release_v8.6.0_node-v8.6.0-linux-x64.tar.gz]: https://nodejs.org/download/release/v8.6.0/node-v8.6.0-linux-x64.tar.gz