数据库
首页 > 数据库> > Luffy /2/ 后台数据库配置&前台创建配置

Luffy /2/ 后台数据库配置&前台创建配置

作者:互联网

目录

二次封装Response

utils/reponse.py

from rest_framework.response import Response


class APIReponse(Response):
    # 将父类的status重名http_status
    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:
            # kwags接收除了处初始化规定的参数以外的参数,也用于更新字典
            data.update(kwargs)
        super.__init__(data=data, status=http_status,
                       template_name=template_name, headers=headers,
                       exception=exception, content_type=content_type)

后台数据库配置

命令操作

# 创建数据库
create database luffy default charset=utf8;

# 创建用户并授权
## 查看用户
### 5.7之前版本
select user,host,password from mysql.user;
### 5.7往后的版本
select user,host,authentication_string from mysql.user;

## 创建用户
### 授权账号命令:grant 权限(create, update) on 库.表 to '账号'@'host' identified by '密码'
## 这里授权所有权限
grant all privileges on luffy.* to 'luffy'@'%' identified by '7410';
grant all privileges on luffy.* to 'luffy'@'localhost' identified by '7410';

## 刷新权限表
flush privileges;

pycharm连接

## 项目配置文件加入
   'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'luffy', # 数据库名字
        'USER': 'luffy', # 用户名
        'PASSWORD': '7410',
        'HOST': '7410',
        'PORT': 3306
    }

然后再登录查看数据库只能查看luffy库

image-20220419164630955

django操作mysql

方式一

模式使用MysqlDB来操作,MysqlDB在python3.x以后不存在了

方式二

使用pymysql替换,django2.0.7版本及以上,如果使用pymysql替换,需要改django源码

import pymysql
pymysql.install_as_MySQLdb()

不改报错:AttributeError: 'str' object has no attribute 'decode'

image-20220419163440934

query = query.decode(errors='replace')
# 改成
query = query.encode(errors='replace')

所以不推荐改源码这种形式

推荐使用mysqlclient模块,其实就是MysqlDB在python3.x以后使用的版本,只不过变成了mysqlclient,使用mysqlclient不需要写两句话,不用改源码

如果装mysqlclient报以下错,可参考:

【已解决】error: Microsoft Visual C++ 14.0 or greater is required. Get it with "Microsoft C++ Build Tools": https://visualstudio.microsoft.com/visual-cpp-build-tools/ - HammerZe - 博客园 (cnblogs.com)

下载成功可以使用pycharm连接一下

image-20220419164546759

user表设计

这里基于auth的user表扩写,千万要注意,扩写好之前不要先迁移数据库,如果迁移了就不行了

如果你已经迁移了,删除数据库,删除所有的migrations文件,包含你自己的app,和auth和admin这两个app

# 用户板块---》做成app
python ../../manage.py startapp user

# 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

setting/dev.py

# 配置文件---》注册表
INSTALLED_APPS = [
    'user',
]

# 自定义User表
AUTH_USER_MODEL = 'user.User'


## 配置media
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

安装pillow模块

# 安装pillow 
pip install pillow
'''
Pillow是PIL的一个派生分支,但如今已经发展成为比PIL本身更具活力的图像处理库。pillow可以说已经取代了PIL,将其封装成python的库(pip即可安装),且支持python2和python3,目前最新版本是3.0.0
'''

迁移

python manage.py makemigrations
python manage.py migrate

image-20220419165644281

前台创建及配置

我的是win平台,建议使用管理员打开cmd创建

# 创建项目
vue create luffycity

image-20220419171050137

使用pycharm打开配置

  1. 删除components/HelloWorld.vueviews/AboutView.vue

  2. views/HomeView.vue

<template>
  <div class="home">
    <h1>首页</h1>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  components: {
  }
}
</script>
  1. router/index.js
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
]

// index.js种routes里删除下面的内容
{
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
  1. APP.vue
<template>
  <div id="app">
    <router-view/>
  </div>
</template>
  1. 集成elementui 、bootstrap、jquery、axios

    // elementui ,bootstrap,jquery,axios配置
    // axios
    npm install axios  -S
    // main.js
    import axios from 'axios'
    Vue.prototype.$axios = axios;
    
    //elementui
    npm install element-ui -S
    // main.js
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
    
    // bootstrap和jq
    npm install jquery -S
    npm 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'
    

image-20220419175525753

全局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;

标签:name,配置,js,luffy,user,Luffy,import,css,前台
来源: https://www.cnblogs.com/48xz/p/16166747.html