项目依赖模块解决、二次封装Response、后台数据库配置、user模块user表设计、前台创建及配置

今日内容概要

• 二次封装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;