# vue-element-plus-admin-python

**Repository Path**: lkyuan4/vue-element-plus-admin-python

## Basic Information

- **Project Name**: vue-element-plus-admin-python
- **Description**: 前端使用vue-element-plus-admin<https://gitee.com/kailong110120130/vue-element-plus-admin>，创建python版本
- **Primary Language**: Python
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 8
- **Forks**: 1
- **Created**: 2023-04-16
- **Last Updated**: 2024-06-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 说明
本项目使用python django_rest_framework 以及vue-element-plus-admin 进行整合

## 项目目录
- ui 对应 vue-element-plus-admin 
- py 对应 django 代码

## Demo
http://test.room58.cn/


### REST framework 需要以下内容：
- Python (2.7, 3.4, 3.5, 3.6, 3.7)
- Django (1.11, 2.0, 2.1)
#### 以下包是可选的：
- rest_framework_simplejwt - 权限认证支持。
- django-filter (1.0.1+) - 过滤支持。
- django-crispy-forms - 改进的 HTML 过滤显式。
- django-guardian (1.1.1+) - 对象级权限支持。
- coreapi (1.32.0+) - 模式生成支持。
- Markdown (2.1.0+) - 对可浏览 API 的 Markdown 支持。

### vue-element-plus-admin 需要以下内容：
- Vue3
- TypeScript
- Vue-router
- Element-plus
- Vitejs
- Axios
- Pinia
- Es6
- WindiCss

## 安装步骤
```bash
pip3 install django==4.1.3
pip3 install djangorestframework
pip3 install django-filter #查询过滤器
pip3 install djangorestframework-simplejwt #jwt认证
pip3 install uwsgi #生产环境运行
pip3 install pysqlite3
pip3 install pysqlite3-binary
django-admin startproject name .
cd name
django-admin startapp name
```

## 配置文件 settings.py
```bash
INSTALLED_APPS = [
    ...
    'rest_framework',
    'rest_framework.authtoken',
    'rest_framework_simplejwt',
    'django_filters',
    'appname', # 此处为 startproject 的 name
]
```

## 创建数据
```bash
# 导入基础表
python3 manage.py makemigrations
python3 manage.py migrate
# 创建默认用户
python3 manage.py createsuperuser
admin/admin
```

## 新建models
```bash
新建表后需要执行
python3 manage.py makemigrations apps 
python3 manage.py migrate apps 
修改表后执行
python3 manage.py makemigrations --empty apps
```

## 生成静态文件
```bash
1、 在setting.py加入
STATIC_ROOT = os.path.join(BASE_DIR, "static/")

2、 执行
python3 manage.py collectstatic

```

## uwsgi.ini配置
```bash
[uwsgi]
#非常重要：当我们要使用nginx+uwsgi时，需要使用socket配置项。而单独使用uwsgi时，则使用http配置项。
http = :8880
socket = :8889
chdir           = /Users/kunyuan/www/genuine/py
# 项目目录.相当于 web/wsgi.py文件， 可用 wsgi-file=web/wsgi.py
#module          = web.wsgi
wsgi-file       = app/wsgi.py
# 主进程,启动一个master进程，来管理其余其他的子进程
master          = true
#进程数
processes       = 4
# 设置每个工作进程的线程数
threads=2
# pid文件，用于脚本启动，停止
#pidfile=uwsgi.pid
# 服务停止时自动移除unix Socket和pid文件
vacuum          = true
# 设置用于uwsgi包解析的内部缓存区大小为64k。默认为4k
buffer-size     = 65536 
# 设置最大日志文件大小
log-maxsize=5000000
#后台运行 设置后台运行保存日志。只要配置了daemonize将会让uwsgi后台运行，同时将日志输出到指定目录
#daemonize      = yes
# 进程在后台运行，并将日志打印到指定文件
daemonize=%(chdir)/logs/server.log 
# 在失去权限前，将主进程pid写到指定的文件
pidfile=%(chdir)/pidfile.pid 

# 静态文件
#static-map=/static=/Users/kunyuan/www/python/topweb/web/static

```

## 启动
### 后端调试
```bash
python3 manage.py runserver #启动服务
```
### 前端调试
```bash
pnpm run lint:eslint #格式化代码
pnpm run dev #启动调试
```

### 生产环境
#### 前端生成并放置对应的nginx目录
```bash
pnpm run build:pro #生成静态文件
```

#### 后端
```bash
uwsgi --ini uwsgi.ini #启动
uwsgi --reload pidfile.pid #重启
uwsgi --stop pidfile.pid #结束
```
- 如果关闭不了，可以通过查找进程来kill掉
```bash
lsof -i:8888  
```

#### uwsgi 设置开机启动
```bash
vi /etc/systemd/system/uwsgi.service
```
#### 增加以下配置
```bash
[Unit]
Description=uwsgi
After=network.target

[Service]
Type=notify
ExecStart=/usr/local/bin/uwsgi --ini /root/python/uwsgi.ini #ini文件所在目录
ExecReload=/usr/local/bin/uwsgi --reload /root/python/pidfile.pid #pid文件所在目录
ExecStop=/usr/local/bin/uwsgi --stop /root/python/pidfile.pid
Restart=always

[Install]
WantedBy=multi-user.target
```
#### 重载系统服务
```bash
sudo systemctl daemon-reload
# 设置开机启动
sudo systemctl enable uwsgi

# 其他命令
sudo systemctl daemon-reload
# 启动 uwsgi
sudo systemctl start uwsgi
# 停止 uwsgi
sudo systemctl stop uwsgi
# 查看 uwsgi 状态
sudo systemctl status uwsgi
# 设置开机启动
sudo systemctl enable uwsgi
# 取消开机启动
sudo systemctl disable uwsgi
```

# 配置nginx
```bash

server {
    listen 80;
    server_name d.ts;
    root /Users/kunyuan/www/genuine/html;
    server_tokens off; 
    
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    gzip on;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

    location ~ /\.(?!well-known).* {
        deny all;
    }

    # 接口
    location /api {
        include uwsgi_params;
        uwsgi_pass 127.0.0.1:8889; #uwsgi socket端口
        uwsgi_read_timeout 2;
    } 

    # 静态文件
    location /static {
        expires 30d;
        autoindex on; 
        add_header Cache-Control private;
        alias /Users/kunyuan/www/genuine/py/app/static/;
    }   

}


```

### 设置开机启动
```bash
systemctl enable nginx.service
```

## 官方网址
### 后端
https://www.django-rest-framework.org/

### 前端
https://kailong110120130.gitee.io/vue-element-plus-admin-doc/