项目依赖模块解决、二次封装Response、后台数据库配置、user模块user表设计、前台创建及配置
阅读原文时间:2022年04月20日阅读:1

今日内容概要

  • 二次封装Response
  • 后台数据库配置
  • user模块user表设计
  • 前台创建及配置

内容详细

# 导出项目依赖模块和安装项目依赖模块
    第三方模块---》导出来---》项目路径下--》requirements.txt
    第三方模块名字和版本

    pip freeze >requirements.txt  # 会生成一个文本 内容都是模块与版本号

    pip3 install -r requirements.txt  # 执行后 会将文件中所有模块及指定版本装上

# 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:失败}


# 使用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不需要写两句话,不用改源码


# 用户板块---》做成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

# 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;