数据库配置和前端项目创建
数据库配置和前端项目创建
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;
