Django

2021/8/13 23:07:22

本文主要是介绍Django,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

Django整合Vue

目录
  • Django整合Vue
    • 1. 项目开发
      • 1.1 前端代码
        • 准备
        • 开发
      • 1.2 后端代码
        • 准备
        • 开发
      • 1.3 启动项目
        • 1.3.1. Nginx配置信息
        • 1.3.2. uWSGI配置信息
        • 1.3.3 浏览器查看
      • 1.4 后续启动关闭
      • 1.5 绑定域名
        • 1.5.1 域名添加配置
        • 1.5.2 在服务器打开端口号
        • 1.5.3 修改nginx配置
      • 1.6 打包后操作
        • 1.6.1 收集静态资源
        • 1.6.2 修改网站logo
      • 1.7 提交git
      • 1.8 发布部署

1. 项目开发

1.1 前端代码

准备

  • 安装axios

    npm install --save axios
    
  • main.js配置

    在main.js里配置,该两行
    import axios from 'axios'
    Vue.prototype.axios = axios   //其它组件可以使用this.axios
    

开发

  • App.vue

  • Register.vue编写

    <!--
     * @Description: henggao_learning
     * @version: v1.0.0
     * @Author: henggao
     * @Date: 2021-07-06 14:32:58
     * @LastEditors: henggao
     * @LastEditTime: 2021-07-07 11:13:54
    -->
    <template>
      <div>
        <h1>Register Page</h1>
        <h2>Demo</h2>
        <p>{{ msg }}</p>
    
        <button @click="getData">获取数据</button>
      </div>
    </template>
    
    <script>
    import axios from "axios";
    export default {
      name: "Register",
      data() {
        return {
          msg:"",
        };
      },
      methods: {
        getData() {
          // const url = "http://127.0.0.1:8000/api/test/";
          const url = "/api/test/";
          axios
            .get(url, {})
            .then((response) => {
              console.log("返回数据");
              console.log(response.data);
              console.log(response.data[0]['name']);
              this.msg = response.data[0]['name']
            })
            .catch((err) => {
              console.log("error message");
            });
        },
      },
    };
    </script>
    
    <style scoped>
    </style>
    
  • router/index.js

  • vue.config.js,使用最上面,即可

    /*
     * @Description: henggao_learning
     * @version: v1.0.0
     * @Author: henggao
     * @Date: 2021-07-06 20:37:20
     * @LastEditors: henggao
     * @LastEditTime: 2021-07-07 11:42:33
     */
    
    
    const path = require('path')
    module.exports = {
      publicPath: '/',
    	// 输出文件目录
      outputDir: 'dist',
      assetsDir: 'static',
      lintOnSave: false,
      chainWebpack: (config) => {
        config.resolve.symlinks(true) //热更新
      },
      configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
          // 为生产环境修改配置...
          config.mode = 'production'
          // 将每个依赖包打包成单独的js文件
          let optimization = {
            runtimeChunk: 'single',
            splitChunks: {
              chunks: 'all',
              maxInitialRequests: Infinity,
              minSize: 20000,
              cacheGroups: {
                vendor: {
                  test: /[\\/]node_modules[\\/]/,
                  name(module) {
                    const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                    return `npm.${packageName.replace('@', '')}`
                  }
                }
              }
            }
          }
          Object.assign(config, {
            optimization
          })
        } else {
          // 为开发环境修改配置...
          config.mode = 'development'
        }
        Object.assign(config, {
          // 开发生产共同配置
          resolve: {
            extensions: ['.js', '.vue', '.json'],//请求本地json
            alias: {
              '@': path.resolve(__dirname, './src'),
              '@c': path.resolve(__dirname, './src/components'),
              '@p': path.resolve(__dirname, './src/pages')
            } // 别名配置
          }
        })
      },
      // 生产环境是否生成 sourceMap 文件
    	productionSourceMap: true,
      css: {
    		// 是否使用css分离插件 ExtractTextPlugin
    		extract: true,
    		// 开启 CSS source maps?是否在构建样式地图,false将提高构建速度
    		sourceMap: false,
    		// css预设器配置项
    		loaderOptions: {},
    		// 启用 CSS modules for all css / pre-processor files.
    		modules: false
    	},
    	parallel: require('os').cpus().length > 1,
    	// webpack-dev-server 相关配置
    	devServer: {
    		open: true,
    		host: 'localhost',
    		port: 8080,
    		https: false,
        hotOnly: false,
        overlay: {
          warnings: false,
          errors: false
        },
    		proxy: {
          '/api': {
            // 目标 API 地址
            // target: 'http://127.0.0.1:8000/api',//这里后台的地址模拟的;应该填写你们真实的后台接口
            target: 'http://39.105.175.144:8001/api',//这里后台的地址模拟的;应该填写你们真实的后台接口
            // 如果要代理 websockets
            ws: true,
            changeOrigin: true, // 允许websockets跨域
            pathRewrite: {
              '/api': ''
            }
          }
        },
        // 代理转发配置,用于调试环境
      disableHostCheck: true,
      }
    }
    
  • 打包前端项目,前端项目目录whjproject_ui下打包

    npm run build
    

1.2 后端代码

准备

  • 安装django-cors-headers,后端出于安全考虑,对于跨域有限制。

    pip install django-cors-headers
    
  • 配置settings.py文件

    #app
    'corsheaders',
    
    # 设置可跨域
    'corsheaders.middleware.CorsMiddleware',
          
    CORS_ALLOW_CREDENTIALS = True
    CORS_ORIGIN_ALLOW_ALL = True
    

开发

  • 后端代码,(这里使用010小节进行测试)

    • models.py

    • serializers.py

    • views.py

    • urls.py

    • Django根目录setting.py部署上线需改设置

         DEBUG = False
         ALLOWED_HOSTS = ['39.105.175.144']
      
      • local_settings.py

1.3 启动项目

1.3.1. Nginx配置信息

  • /etc/nginx/conf.d文件夹下,创建wjproject.conf,内容如下:

    server {   listen   8001;         server_name  39.105.175.144;   charset     utf-8;   client_max_body_size  75M;      location /media {               expires 30d;       autoindex  on;       add_header Cache-Control private;       alias /usr/local/wjproject_docker/wjproject_env/media/;    }    location /static {              expires 30d;        autoindex on;        add_header Cache-Control private;        alias /usr/local/wjproject_docker/wjproject_env/wjproject_ui/dist/static;     }     location / {                   include  uwsgi_params;         uwsgi_pass 127.0.0.1:8000;         uwsgi_read_timeout 2;      }}server {	 listen 8004; 	 server_name 39.105.175.144; 	 location / {	 root /usr/local/wjproject_docker/wjproject_env/wjproject_ui/dist; 	 try_files $uri $uri/ /index.html; 	 } }
    
    • 第一个server配置信息是将nginxuWSGI服务器实现通信连接;

      • uwsgi_pass 127.0.0.1:8000; //必须和uwsgi中socket的设置一致
        
    • 第二个server是配置Vue项目

  • nginx,在任意目录下

    # 启动nginxservice nginx start# 重启nginxservice nginx reload#停止service nginx stop
    

1.3.2. uWSGI配置信息

  • uWSGI配置,在Django根目录/wjproject_docker/wjproject_env下新建wjproject_uwsgi.ini文件,输入配置信息

    [uwsgi]; 监听的端口,不配置nginx; http = :8001#配置端口号,指定和nginx进行套接字通信的方式:端口或文件socket= 127.0.0.1:8000; socket= 39.105.175.144:8000; socket= 0.0.0.0:8002#项目的绝对路径,项目所在目录,和manage.py同级chdir=/usr/local/wjproject_docker/wjproject_env; 主应用中的wsgi文件wsgi-file = wjproject_v1/wsgi.py; 启动一个master进程,来管理其余的子进程master=true#设置最大工作进程数processes=4threads = 2#保存主进程的pid,用来控制uwsgi服务pidfile=/usr/local/wjproject_docker/wjproject_env/logs/uwsgi.pid; 设置后台运行,保存日志daemonize=/usr/local/wjproject_docker/wjproject_env/logs/uwsgi.log; 设置每个工作进程处理请求的上限,达到上限时,将回收(重启)该进程。可以预防内存泄漏max-requests=5000#服务停止时自动移除unix Socket和pid文件vacuum=true# 指定依赖的虚拟环境; virtualenv=/home/peter/.virtualenvs/opwfenvvirtualenv=/usr/local/wjproject_docker/wjproject_env
    
    • 注意:为了配合 nginx 工作,端口协议是 socket , 如果换成 http ,则可以直接运行uwsgi,就能通过浏览器访问页面了。命令为 uwsgi dj_uwsgi.ini
  • uwsgi,在/usr/local/wjproject_docker/wjproject_env目录下

    # 启动uwsgi --ini wjproject_uwsgi.ini# 停止uwsgi --stop logs/uwsgi.pidpkill -f uwsgi -9#查看uwsgi端口号ps -ef |grep uwsgi
    

1.3.3 浏览器查看

http://39.105.175.144:8001/

1.4 后续启动关闭

  • 打包前端代码

    npm run build
    
  • Nginx

    # 启动nginxservice nginx start# 重启nginxservice nginx reload#停止service nginx stop
    
  • uwsgi,在/usr/local/wjproject_docker/wjproject_env目录下,不需要虚拟环境。

    # 启动uwsgi --ini wjproject_uwsgi.ini# 停止uwsgi --stop logs/uwsgi.pidpkill -f uwsgi -9#查看uwsgi端口号ps -ef |grep uwsgi
    

1.5 绑定域名

1.5.1 域名添加配置

  • 添加ip公网地址

1.5.2 在服务器打开端口号

  • 打开http端口号80
  • 将程序部署到80端口上,或者把8080端口映射到公网的80上,或者ngnix反向代理到80端口上。
  • 浏览器默认80端口不要加端口号,别的端口就要加上

1.5.3 修改nginx配置

  • 修改/etc/nginx/conf.d文件夹下创建的wjproject.conf,内容如下:
server {   listen   80;         server_name  www.genghenggao.top;   charset     utf-8;   client_max_body_size  100M;      location /media {               expires 30d;       autoindex  on;       add_header Cache-Control private;       alias /usr/local/wjproject_docker/wjproject_env/media/;    }    location /static {              expires 30d;        autoindex on;        add_header Cache-Control private;        alias /usr/local/wjproject_docker/wjproject_env/wjproject_ui/dist/static;     }     location / {                   include  uwsgi_params;         uwsgi_pass 127.0.0.1:8000;         uwsgi_read_timeout 2;      }}server {	 listen 8004; 	 server_name 39.105.175.144; 	 location / {	 root /usr/local/wjproject_docker/wjproject_env/wjproject_ui/dist; 	 try_files $uri $uri/ /index.html; 	 } }
  • 最后版本/etc/nginx/conf.d/wjproject.conf
server{    listen 80;	server_name  genghenggao.top www.genghenggao.top;	# server_name  39.105.175.144; 	charset     utf-8;	client_max_body_size  100M;		location /media {               expires 30d;       autoindex  on;       add_header Cache-Control private;       alias /usr/local/wjproject_docker/wjproject_env/media/;    }	    location /static {              expires 30d;        autoindex on;        add_header Cache-Control private;        alias /usr/local/wjproject_docker/wjproject_env/static/;    }		location / {		root /usr/local/wjproject_docker/wjproject_env/wjproject_ui/dist;		index  index.html;		try_files $uri $uri/ /index.html;	}	location /api{		# 配置代理路径        proxy_pass http://127.0.0.1:8000/api;    }		location /admin{		proxy_pass http://127.0.0.1:8000/admin;	}}# Django转发请求到Nginx:127.0.0.1:8000server {	listen 8000;	server_name  localhost	127.0.0.1;	location / {		include  /etc/nginx/uwsgi_params;        uwsgi_pass 127.0.0.1:8002;    	}}server {	# Vue端口	listen 8004;	server_name  genghenggao.top www.genghenggao.top;	 	# server_name 39.105.175.144; 		location / {		root /usr/local/wjproject_docker/wjproject_env/wjproject_ui/dist;		index  index.html;		try_files $uri $uri/ /index.html; 	}	# 配置代理路径	location /api{            proxy_pass http://127.0.0.1:8000/api;    }}
  • 重启Nginx
http://genghenggao.top/

1.6 打包后操作

1.6.1 收集静态资源

  • 说明:打包好Vue,收集Django的静态资源(我是放在一个目录下的/usr/local/wjproject_docker/wjproject_env/wjproject_ui/dist/static
  • 虚拟环境下,运行以下命令
python manage.py collectstatic
  • 修改

    • 第一种,将打包好的dist/index.html
    https://www.www.zyiz.net/i/l/?n=20&i=blog/1389175/202107/1389175-20210730211819913-1178460802.png
    
    • 第二种,修改打包前public/index.html
     <!-- 原来 -->    <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <!-- 修改为 -->	<link rel="icon" href="https://www.www.zyiz.net/i/l/?n=20&i=blog/1389175/202107/1389175-20210730211819913-1178460802.png">
    

1.7 提交git

  • 配置好提交仓库
# 前端项目cd C:\Users\Admin\Desktop\fsdownload\wjproject_docker\wjproject_env\wjproject_ui# 后端项目目录cd /usr/local/wjproject_docker/wjproject_envgit add .git commit -m "commit_log"git push

1.8 发布部署

  • 进入到需要导出所有 Python 库的那个环境,然后使用那个环境下的 pip :
pip freeze > requirements.txt

requirement.txt 文件默认输出在桌面

然后就可以用:

pip install -r requirements.txt

来一次性安装 requirements.txt 里面所有的依赖包,真是非常方便。



这篇关于Django的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程