Django

本文主要是介绍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

<!--
 * @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配置信息是将nginx和uWSGI服务器实现通信连接；
- ```
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

1.6.2 修改网站logo

修改

第一种，将打包好的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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Go教程

Django

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 发布部署

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯