今日内容概要
- 二次封装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;
