数据库配置和前端项目创建

发布于 2022年 05月 19日 18:26

数据库配置和前端项目创建

1、封装Response

utils.py/exception

from rest_framework.response import Response


class APIResponse(Response):
    def __init__(self, code=100, msg='成功', status=None, headers=None, **kwargs):
        res_data = {
            'code': code,
            'msg': msg,
        }
        res_data.update(kwargs)  # kwargs是字典
        super().__init__(data=res_data, status=status, headers=headers)  # super()需要加()

# 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、创建数据库&创见数据库用户&赋予权限给新用户

create database luffy1;

create user luffy1@'%' identified by 'luffy123';

grant all privileges on luffy1.* to luffy1@'%';

刷新权限
flush privileges;

select user,host,authentication_string from mysql.user;

3、修改Django项目配置文件链接数据库信息

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'luffy1',
        'HOST': '127.0.0.1',
        'POST': 3306,
        'USER': 'luffy1',
        'PASSWORD': 'luffy123',
    }
}

4、下载安装Django链接数据库的模块

1\使用MysqlDB来操作---》MysqlDB在python3.x以后不存在了

2\使用pymysql替换---》django2.0.7版本及以上,如果使用pymysql替换,需要改django源码
import pymysql
pymysql.install_as_MySQLdb()

3\使用mysqlclient不需要写两句话,不用改源码

5、创建user应用,基于auth创建用户表模型

python ../../manage.py startapp user

创建用户表,基于auth的user表扩写
注意:在写好这个之前,不要先迁移数据,如果迁移了数据库,这个就不行了
如果已经迁移了,删除数据库,删除所有的migrations文件,包含自己的app,和auth和admin这两个app

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

# models.py
class User(AbstractUser):
    mobile = models.CharField(max_length=11, unique=True)
    # ImageField 继承 FileField,需要下载pillow模块
    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

# dev.py
AUTH_USER_MODEL = 'user.User'

# 安装pillow ,迁移
pip install pillow
python manage.py makemigrations
python manage.py migrate

6、开启media文件夹接口,用户上传文件默认保存到这里

dev.py

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

配置路由:

from django.conf import settings
from django.views.static import serve

urlpatterns = [
    path('admin/', admin.site.urls),
    path('media/<path:path>', serve, {'documents_root': settings.MEDIA_ROOT})
]

前台项目创建

1、在响应目录下创建vue框架项目

其实就是vue使用npm命令在github中下载vue框架

vue create luffycity

2、使用pycharm打开luffycity

3、初始化前端框架(把不需要的原有页面组件删除)

删除一些东西
### APP.vue
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

## HomeView.vue
<template>
  <div class="home">
    <h1>首页</h1>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  components: {
  }
}
</script>

## router下的index.js 
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
]

4、下载前端框架,并在vue项目中导入

// 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 webpack = require("webpack");

module.exports = {
    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'

5、全局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'

6、配置文件配置

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;

推荐文章