專案依賴模組解決、二次封裝Response、後臺資料庫配置、user模組user表設計、前臺建立及配置
阿新 • • 發佈：2022-04-19
今日內容概要
- 二次封裝Response
- 後臺資料庫配置
- user模組user表設計
- 前臺建立及配置
內容詳細
補充--專案依賴模組
# 匯出專案依賴模組和安裝專案依賴模組
第三方模組---》匯出來---》專案路徑下--》requirements.txt
第三方模組名字和版本
pip freeze >requirements.txt # 會生成一個文字 內容都是模組與版本號
pip3 install -r requirements.txt # 執行後 會將檔案中所有模組及指定版本裝上
1、二次封裝Response
# drf有個Response類 data=None, {'status':100,'msg':'成功','token':asedfasfd3a21} status=None, template_name=None, headers=None, exception=False, content_type=None ## 程式碼演示： from rest_framework.response import Response class APIResponse(Response): def __init__(self, status=100, msg='成功', http_status=None, template_name=None, headers=None, exception=False, content_type=None, **kwargs): data = { 'status': status, 'msg': msg } if kwargs: data.update(kwargs) # 這句話什麼意思？{token:adfads,name:asdfa} super().__init__(data=data, status=http_status, template_name=template_name, headers=headers, exception=exception, content_type=content_type) # res = APIResponse(token='asdfadsf') # -->{status:100,msg:成功，token：asdfadsf} # res = APIResponse(result=[{}, {}, {}]) # -->{status:100,msg:成功，result：[{},{},{}]} # res = APIResponse(status=101, msg='失敗') # -->{status:101,msg:失敗} # res = APIResponse(status=101, msg='失敗', http_status=201) # -->{status:101,msg:失敗}
2、後臺資料庫配置
# 使用mysql---》建立一個庫(手動)--》庫名：luffy # 專案配置檔案中，連線這個資料庫(Navicat建立一樣) # 建立資料庫，並配置 create database luffy default charset=utf8; # 給資料庫建立一個普通使用者，它只能操作luffy庫 ## 建立使用者 授權賬號命令：grant 許可權(create, update) on 庫.表 to '賬號'@'host' identified by '密碼' grant all privileges on luffy.* to 'lqz'@'%' identified by 'Luffy123?'; grant all privileges on luffy.* to 'lqz'@'localhost' identified by 'Luffy123?'; ## 重新整理許可權 flush privileges; # 檢視使用者 5.7之前版本 select user,host,password from mysql.user; 5.7往後的版本 select user,host,authentication_string from mysql.user; ## 專案配置檔案修改： DATABASES = { # 'default': { # 'ENGINE': 'django.db.backends.sqlite3', # 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), # } 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': 'luffy', # 資料庫名字 'USER': 'lqz', # 使用者名稱 'PASSWORD': 'Luffy123?', 'HOST': 'localhost', 'PORT': 3306 } } ### django操作mysql 模式使用MysqlDB來操作---》MysqlDB在python3.x以後不存在了 使用pymysql替換---》django2.0.7版本及以上，如果使用pymysql替換，需要改django原始碼 ### 關於 pymysql和 mysqlclient的選擇 通過pymysql操作資料庫需要加入下面兩句話： import pymysql pymysql.install_as_MySQLdb() 這兩句話，只要執行即可，放在那裡都行---》只要django執行，所有py檔案中頂格寫的程式碼都會執行 也可以直接寫在配置檔案中 但是需要改原始碼才可以執行專案 如果改原始碼，後期只要使用django，都要改它的原始碼 所以咱們換另一個操作mysql的模組 -- mysqlclient win上安裝最好不要裝最新版(很可能安裝失敗) 可以嘗試降版本安裝或者參考一下博文： http://www.liuqingzheng.top/python/%E5%85%B6%E4%BB%96/01-%E5%90%84%E4%B8%BB%E6%B5%81Linux%E7%B3%BB%E7%BB%9F%E8%A7%A3%E5%86%B3pip%E5%AE%89%E8%A3%85mysqlclient%E6%8A%A5%E9%94%99/ #### 使用mysqlclient不需要寫兩句話，不用改原始碼
3、user模組user表設計
# 使用者板塊---》做成app python ../../manage.py startapp user # 建立使用者表，基於auth的user表擴寫 注意：在寫好這個之前，不要先遷移資料，如果遷移了資料庫，這個就不行了 如果你已經遷移了，刪除資料庫，刪除所有的migrations檔案，包含你自己的app，和auth和admin這兩個app ### 在 models.py中： from django.db import models from django.contrib.auth.models import AbstractUser class User(AbstractUser): mobile = models.CharField(max_length=11, unique=True) # 唯一，長度11 # 需要pillow包的支援 ImageField繼承自FileField icon = models.ImageField(upload_to='icon', default='icon/default.png') class Meta: db_table = 'luffy_user' verbose_name = '使用者表' verbose_name_plural = verbose_name def __str__(self): return self.username ### 配置檔案新增： INSTALLED_APPS = [ 'user' ] ### 把擴寫了auth的user表註冊一下 AUTH_USER_MODEL = 'user.User' # 配置media資料夾 MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media') # 安裝pillow ，遷移資料庫 pip install pillow python manage.py makemigrations python manage.py migrate
4、前臺建立及配置
# cmd視窗建立專案:
vue create luffycity
使用pycharm開啟
# 刪除一些東西
### 保留 router/index.js 為：
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
### 保留 views/HomeView.vue 為：
<template>
<div class="home">
<h1>首頁</h1>
</div>
</template>
<script>
export default {
name: 'HomeView',
components: {
}
}
</script>
### 保留 App.vue 為：
<template>
<div id="app">
<router-view/>
</div>
</template>
### elementui ,bootstrap,jquery,axios配置:
# axios
cnpm install axios -S
## main.js
import axios from 'axios'
Vue.prototype.$axios = axios;
# elementui
cnpm install element-ui -S
## main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
# bootstrap和jq
cnpm install jquery -S
cnpm install bootstrap@3 -S
## vue.config.js
const {defineConfig} = require('@vue/cli-service')
const webpack = require("webpack")
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery",
Popper: ["popper.js", "default"]
})
]
}
})
## main.js
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
# 全域性css樣式配置
## 新建：assets/css/global.css
/* 宣告全域性樣式和專案的初始化樣式 */
body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
margin: 0;
padding: 0;
font-size: 15px;
}
a {
text-decoration: none;
color: #333;
}
ul {
list-style: none;
}
table {
border-collapse: collapse; /* 合併邊框 */
}
## main.js
// 把自己定義的global.css 引入
import './assets/css/global.css'
# 配置檔案配置
## 新建：assets/js/settings.js
export default {
base_url: "http://127.0.0.1:8000"
}
# main.js
// 匯入自定義配置
import settings from './assets/js/settings'
Vue.prototype.$settings = settings;