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