# 开源程式碼學習筆記 caoqianming/django-vue-admin
###### tags: `learn` `open source project` `backend` `python` `django`
## 相關資料
source code:
https://github.com/caoqianming/django-vue-admin
後端程式心智圖：
https://gitmind.com/app/doc/d6a2710078
資料庫連結關係圖：
https://dbdiagram.io/d/60e27cb50b1d8a6d39666305
my fork:
https://github.com/LJlkdskdjflsa/django-vue-admin
## 閱讀目標
1. 理解django rbac權限實做
2. 練習閱讀開源專案
### work flow
```
cd server
source /home/lj//Documents/GitHub/django-vue-admin/server/venv/bin/activate
python manage.py runserver 8000
source venv/bin/activate
python manage.py runserver 7000
```
### 概念理解
#### 理念
首先得会使用django-rest-framework, 理解vue-element-admin前端方案
本项目采用前端路由，后端根据用户角色读取用户权限代码返回给前端，由前端进行加载(核心代码是路由表中的perms属性以及checkpermission方法)
后端功能权限的核心代码在server/apps/system/permission.py下重写了has_permission方法, 在APIView和ViewSet中定义perms权限代码
数据权限因为跟具体业务有关,简单定义了几个规则,重写了has_object_permission方法;根据需要使用即可
#### 关于定时任务
使用celery以及django_celery_beat包实现
需要安装redis并在默认端口启动, 并启动worker以及beat
进入虚拟环境并启动worker: celery -A server worker -l info -P eventlet, linux系统不用加-P eventlet
进入虚拟环境并启动beat: celery -A server beat -l info
## 實做細節
### 建立後端環境：
```
python3 -m venv venv
source /home/lj//Documents/GitHub/django-vue-admin/server/venv/bin/activate
sudo apt install default-libmysqlclient-dev --fix-missing
pip install -r requirements.txt
//修改数据库连接
python /home/lj/Documents/GitHub/django-vue-admin/server/server/settings_dev.py
python manage.py makemigrations
python manage.py migrate
//导入初始数据
python manage.py loaddata db.json
//或直接使用sqlite数据库(超管账户密码均为admin)
//创建超级管理员
python manage.py createsuperuser
用户名: admin
电子邮件地址: admin@admin.com
password: admin
python manage.py runserver 8000
```
### 建立前端環境
```
cd client
yarn install
npm run dev
```
### nginx(緩)
http://127.0.0.1:8000/docs/
接口文檔
### 資料庫視覺化
把資料轉成sql
輸出成sql檔
- sqlite
```
sqlite3 /home/lj/Documents/GitHub/django-vue-admin/server/db.sqlite3
sqlite> .output /home/lj/Documents/GitHub/django-vue-admin/server/db.sql
```
- postgreSQL
```
//enter postgreSQL
sudo -i -u postgres
psql
//create db
CREATE DATABASE Things;
GRANT CONNECT ON DATABASE Things TO test;
//export using pg_dump
pg_dump -U test things > dbexport.sql;
pg_dump -U test -h localhost things >> /home/lj/Downloads/sqlfile.sql
```
輸出檔案後上傳：
https://dbdiagram.io/d/60ddab06dd6a5971482828d7
去做視覺化
但是一直跳出錯誤
```
(373:40) Expected "ADD" or "ALTER" but "O" found.
(393:7) Expected "TABLE" but "S" found.
Can't find table "system_user_user_permissions"
```
我猜測應該
```
ALTER TABLE public.auth_group OWNER TO test;
```
像這樣 ALTER 然後下面意行是空的,刪掉可能可以解決
可能寫個程式,或用re解決
https://www.fooish.com/regex-regular-expression/character-classes.html
->手動生成
7/13
### 問題
pip install -r requirements.txt
->
```
ERROR: Command errored out with exit status 1:
command: /home/lj/Documents/GitHub/django-vue-admin/server/venv/bin/python3 -c 'import sys, setuptools, tokenize; sys.argv[0] = '"'"'/tmp/pip-install-9o_awbrc/mysqlclient/setup.py'"'"'; __file__='"'"'/tmp/pip-install-9o_awbrc/mysqlclient/setup.py'"'"';f=getattr(tokenize, '"'"'open'"'"', open)(__file__);code=f.read().replace('"'"'\r\n'"'"', '"'"'\n'"'"');f.close();exec(compile(code, __file__, '"'"'exec'"'"'))' egg_info --egg-base /tmp/pip-install-9o_awbrc/mysqlclient/pip-egg-info
cwd: /tmp/pip-install-9o_awbrc/mysqlclient/
Complete output (15 lines):
/bin/sh: 1: mysql_config: not found
/bin/sh: 1: mariadb_config: not found
/bin/sh: 1: mysql_config: not found
Traceback (most recent call last):
File "<string>", line 1, in <module>
File "/tmp/pip-install-9o_awbrc/mysqlclient/setup.py", line 15, in <module>
metadata, options = get_config()
File "/tmp/pip-install-9o_awbrc/mysqlclient/setup_posix.py", line 70, in get_config
libs = mysql_config("libs")
File "/tmp/pip-install-9o_awbrc/mysqlclient/setup_posix.py", line 31, in mysql_config
raise OSError("{} not found".format(_mysql_config_path))
OSError: mysql_config not found
mysql_config --version
mariadb_config --version
mysql_config --libs
----------------------------------------
ERROR: Command errored out with exit status 1: python setup.py egg_info Check the logs for full command output.
```
->fix
```
sudo apt install default-libmysqlclient-dev
-> error
->fix
sudo apt install default-libmysqlclient-dev --fix-missing
```
front end envroment setup
```
npm install --registry=https://registry.npm.taobao.org
npm ERR! code ENOTFOUND
npm ERR! syscall getaddrinfo
npm ERR! errno ENOTFOUND
npm ERR! network request to https://registry.npm.taobao.org/@babel%2fcore failed, reason: getaddrinfo ENOTFOUND registry.npm.taobao.org
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly. See: 'npm help config'
npm ERR! A complete log of this run can be found in:
npm ERR! /home/lj/.npm/_logs/2021-06-29T11_29_17_480Z-debug.log
->
npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @babel/core@7.0.0
npm ERR! node_modules/@babel/core
npm ERR! dev @babel/core@"7.0.0" from the root project
npm ERR! peer @babel/core@"^7.0.0-0" from @babel/register@7.0.0
npm ERR! node_modules/@babel/register
npm ERR! dev @babel/register@"7.0.0" from the root project
npm ERR! 61 more (@vue/cli-plugin-babel, babel-core, babel-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @babel/core@"^7.4.0-0" from @babel/helper-define-polyfill-provider@0.2.3
npm ERR! node_modules/babel-plugin-polyfill-corejs2/node_modules/@babel/helper-define-polyfill-provider
npm ERR! @babel/helper-define-polyfill-provider@"^0.2.2" from babel-plugin-polyfill-corejs2@0.2.2
npm ERR! node_modules/babel-plugin-polyfill-corejs2
npm ERR! babel-plugin-polyfill-corejs2@"^0.2.2" from @babel/plugin-transform-runtime@7.14.5
npm ERR! node_modules/@babel/plugin-transform-runtime
npm ERR! @babel/plugin-transform-runtime@"^7.4.0" from @vue/babel-preset-app@3.12.1
npm ERR! node_modules/@vue/babel-preset-app
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/lj/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/lj/.npm/_logs/2021-06-29T11_31_40_769Z-debug.log
Q->npm 版本过高
online 解法->退回就版本
->fix
yarn install
```
### 解構
* 檔案架構
* server
* apps
* crm -> 客戶關係管理（沒東西）
* monitor
* system （主要內容）
*
* server -> core
* 資料庫
* api
Sign in with Wallet
Connect another wallet