项目后端环境搭建
环境搭建
外部依赖
- 注册支付宝的开发者账号[https://open.alipay.com]，注册一下账号就可以了，剩下的以后再说
- 注册容联云短信接口平台的账号[https://www.yuntongxun.com/?ly=baidu-pz-p&qd=cpc&cp=ppc&xl=null&kw=10360228]
- 注册保利威视频服务平台的账号[暂时别注册,因为有个7天免费测试期，如果到时候过期了就没法用了,网址：http://www.polyv.net/?f=baiduPZ&utm_term=%E4%BF%9D%E5%88%A9%E5%A8%81]
- 注册gitee[码云]的账号
- 注册阿里云账号,如果可以购买一个服务器和域名, 或者第一次使用的可以申请一个免费外网服务器
依赖包安装
pip install djangorestframework -i https://pypi.douban.com/simple/
pip install PymySQL -i https://pypi.douban.com/simple/
pip install Pillow -i https://pypi.douban.com/simple/
pip install django-redis -i https://pypi.douban.com/simple/
pip install https://codeload.github.com/sshwsfc/xadmin/zip/django2
搭建项目
创建项目
注意要cd到linux的主目录下
mkdir lufei
cd lufei
django-admin startproject lufei
打开项目
在pycharm中打开项目
先使用127.0.0.1:8000的网址来运行项目。
调整目录
lufei/
├── docs/ # 项目相关资料保存目录
├── lyweb/ # 前端项目目录
├── lyapi/ # 后端项目目录
├── logs/ # 项目运行时/开发时日志目录
├── manage.py
├── lyapi/ # 项目主应用，开发时的代码保存
│ ├── apps/ # 开发者的代码保存目录，以模块[子应用]为目录保存（包）
│ ├── libs/ # 第三方类库的保存目录[第三方组件、模块]（包）
│ ├── settings/ #（包）
│ ├── dev.py # 项目开发时的本地配置
│ ├── prod.py # 项目上线时的运行配置
│ ├── test.py # 测试人员使用的配置(咱们不需要)
│ ├── urls.py # 总路由（包）
│ ├── utils/ # 多个模块[子应用]的公共函数类库[自己开发的组件]
└── scripts/ # 保存项目运营时的脚本文件
在编辑中开发项目时,必须指定项目目录才能运行,例如,开发后端项目,则必须选择的目录是lyapi
分不同环境进行项目配置
开发者本地的环境、目录、数据库密码和线上的服务器都会不一样,所以我们的配置文件可以针对不同的系统分成多分.
- 在项目主应用下,创建一个settings的配置文件存储目录
- 根据线上线下两种情况分别创建2个配置文件 dev.py和prod.py
- 把原来项目主应用的 settings.py配置内容复制2份到dev.py和prod.py里面
- 把原来的settings.py配置文件修改文件名或者删除
- 新的目录settings:
新的目录settings:
接下来,就可以根据在manage.py中根据不同的情况导入对应的配置文件了.
日志配置
在settings/dev.py文件中追加如下配置：
# 日志配置
LOGGING = {
'version': 1, #使用的python内置的logging模块，那么python可能会对它进行升级，所以需要写一个版本号，目前就是1版本
'disable_existing_loggers': False, #是否去掉目前项目中其他地方中以及使用的日志功能，但是将来我们可能会引入第三方的模块，里面可能内置了日志功能，所以尽量不要关闭。
'formatters': { #日志记录格式
'verbose': { #levelname等级，asctime记录时间，module表示日志发生的文件名称，lineno行号，message错误信息
'format': '%(levelname)s %(asctime)s %(module)s %(lineno)d %(message)s'
},
'simple': {
'format': '%(levelname)s %(module)s %(lineno)d %(message)s'
},
},
'filters': { #过滤器：可以对日志进行输出时的过滤用的
'require_debug_true': { #在debug=True下产生的一些日志信息，要不要记录日志，需要的话就在handlers中加上这个过滤器，不需要就不加
'()': 'django.utils.log.RequireDebugTrue',
},
'require_debug_false': { #和上面相反
'()': 'django.utils.log.RequireDebugFalse',
},
},
'handlers': { #日志处理方式，日志实例
'console': { #在控制台输出时的实例
'level': 'DEBUG', #日志等级；debug是最低等级，那么只要比它高等级的信息都会被记录
'filters': ['require_debug_true'], #在debug=True下才会打印在控制台
'class': 'logging.StreamHandler', #使用的python的logging模块中的StreamHandler来进行输出
'formatter': 'simple'
},
'file': {
'level': 'INFO',
'class': 'logging.handlers.RotatingFileHandler',
# 日志位置,日志文件名,日志保存目录必须手动创建
'filename': os.path.join(os.path.dirname(BASE_DIR), "logs/luffy.log"), #注意，你的文件应该有读写权限。
# 日志文件的最大值,这里我们设置300M
'maxBytes': 300 * 1024 * 1024,
# 日志文件的数量,设置最大日志数量为10
'backupCount': 10,
# 日志格式:详细格式
'formatter': 'verbose',
'encoding': 'utf-8', # 设置默认编码，否则打印出来汉字乱码
},
},
# 日志对象
'loggers': {
'django': { #和django结合起来使用，将django中之前的日志输出内容的时候，按照我们的日志配置进行输出，
'handlers': ['console', 'file'], #将来项目上线，把console去掉
'propagate': True, #冒泡：是否将日志信息记录冒泡给其他的日志处理系统，工作中都是True，不然django这个日志系统捕获到日志信息之后，其他模块中可能也有日志记录功能的模块，就获取不到这个日志信息了
},
}
}
异常处理
新建utils/exceptions.py
from rest_framework.views import exception_handler
from django.db import DatabaseError
from rest_framework.response import Response
from rest_framework import status
import logging
logger = logging.getLogger('django')
def custom_exception_handler(exc, context):
"""
自定义异常处理
:param exc: 异常类
:param context: 抛出异常的上下文
:return: Response响应对象
"""
# 调用drf框架原生的异常处理方法
response = exception_handler(exc, context)
if response is None:
view = context['view']
if isinstance(exc, DatabaseError):
# 数据库异常
logger.error('[%s] %s' % (view, exc))
response = Response({'message': '服务器内部错误'}, status=status.HTTP_507_INSUFFICIENT_STORAGE)
return response
settings/dev.py配置文件中添加
REST_FRAMEWORK = {
# 异常处理
'EXCEPTION_HANDLER': 'lyapi.utils.myexceptionhandler.custom_exception_handler',
}
创建数据库
mysql -uroot -p
-- utf8也会导致有些极少的中文出现乱码的问题，
mysql5.5之后官方才进行处理，出来了utf8mb4，
这个是真正的utf8，能够容纳所有的中文，其实一般情况下utf8就够用了。
create database lyapi default charset=utf8mb4;
为当前项目创建数据库用户[这个用户只能看到这个数据库]
create user ly_user identified by '123';
grant all privileges on lyapi.* to 'ly_user'@'%';
flush privileges;
mysql -u luffy_user -pluffy
select user(); #luffy_user
配置数据库连接
打开settings/dev.py文件，并配置
DATABASES = {
"default": {
"ENGINE": "django.db.backends.mysql",
"HOST": "127.0.0.1",
"PORT": 3306,
"USER": "ly_user",
"PASSWORD": "123",
"NAME": "lyapi",
}
}
在项目主模块的 __init__.py中导入pymysql
import pymysql
pymysql.install_as_MySQLdb()
python manage.py makemigrations
python manage.py migrate
调整错误
数据库版本检测导致的错误
数据库的版本检测代码注释掉。
第二个错误也是因为数据库版本的默认编码导致，query返回的内容格式使用有误。
新增一行代码，把query查询结果转换格式为 bytes类型
配置Xadmin
按照上一篇文章进行配置，注意要配置对应的文件里
home/adminx.py文件
from home import models
import xadmin
from xadmin import views
class BaseSetting(object):
"""xadmin的基本配置"""
enable_themes = True # 开启主题切换功能
use_bootswatch = True
xadmin.site.register(views.BaseAdminView, BaseSetting)
class GlobalSettings(object):
"""xadmin的全局配置"""
site_title = "莽夫学城" # 设置站点标题
site_footer = "莽夫学城有限公司" # 设置站点的页脚
menu_style = "accordion" # 设置菜单折叠
xadmin.site.register(views.CommAdminView, GlobalSettings)
lyapi项目后端基本就配置完了，下面搞一下前端客户端。
git提交代码
git add .
git commit -m 'v2 各种配置'
git push orgin dev
搭建前端项目
创建项目目录
cd /home/hkxpz/lufei/
vue init webpack lyweb
前端初始化全局变量和全局方法
export default {
host:"http://127.0.0.1:8000",
}
在main.js中引入
import settings from "./settings"
// Vue.config.productionTip = false;
Vue.prototype.$settings = settings; #将settings中的内容作为vue的属性，以后就不用每次都导包了
路径/static/css/reset.css
把App.vue的style标签的css代码放到static外部目录下引用过来
main.js
import "../static/css/reset.css";
/static/css/reset.css
body{
margin: 0;
padding: 0;
}
ul{
list-style: none;
padding: 0;
margin: 0;
}
li{
list-style: none;
}
/*.el-header{*/
/* width: 1200px;*/
/*}*/
/*input,select,textarea{*/
/* border: none;*/
/* outline: none;*/
/*}*/
a{
text-decoration: none;
color: #4a4a4a;
}
跨域CORS
为前端和后端配置假域名
1.我们现在为前端和后端分别设置两个不同的域名
| 位置 | 域名 |
|---|---|
| 前端 | www.lyweb.com |
| 后端 | www.lyapi.com |
2.编辑/etc/hosts文件，可以设置本地域名
sudo vim /etc/hosts
3.在文件中增加两条信息
127.0.0.1 www.lyapi.com
127.0.0.1 www.lycity.com
4.通过浏览器访问drf项目,会出现以下错误信息
可以在lyapi后端通过settings/dev.py的ALLOWED_HOSTS,设置允许访问
ALLOWED_HOSTS = [
'www.lyapi.com'
'www.lycity.com', # 客户端网址也要，将来客户端要访问到服务端的
]
现在，前端与后端分处不同的域名，我们需要为后端添加跨域访问的支持
否则前端无法使用axios无法请求后端提供的api数据，我们使用CORS来解决后端对跨域访问的支持。
使用django-cors-headers扩展
1.安装
pip install django-cors-headers
2.添加应用
INSTALLED_APPS = (
...
'corsheaders',
...
)
3.中间件设置【必须写在第一个位置】
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', # 放在中间件的最上面，就是给响应头加上了一个响应头跨域
...
]
4.需要添加白名单，确定一下哪些客户端可以跨域
# CORS组的配置信息
CORS_ORIGIN_WHITELIST = (
#'www.luffycity.cn:8080', #如果这样写不行的话，就加上协议(http://www.luffycity.cn:8080，因为不同的corsheaders版本可能有不同的要求)
'http://www.lyweb.com:8080'
)
'''
是否允许ajax跨域请求时携带cookie，False表示不用，
我们后面也用不到cookie，所以关掉它就可以了，以防有人
通过cookie来搞我们的网站
'''
CORS_ALLOW_CREDENTIALS = False
axios配置
完成了上面的步骤，我们就可以通过后端提供数据给前端使用ajax访问了。
前端使用 axios就可以访问到后端提供给的数据接口，但是如果要附带cookie信息，前端还要设置一下。
前端引入axios插件并配置允许axios发送cookie信息[axios本身也不允许ajax发送cookie到后端]
1.安装axios
npm i axios -S --registry https://registry.npm.taobao.org
2.在main.js中引用 axios插件
import axios from 'axios'; // 从node_modules目录中导入包
// 客户端配置是否允许ajax发送请求时附带cookie，false表示不允许
axios.defaults.withCredentials = false;
Vue.prototype.$axios = axios; // 把对象挂载vue中
注意:如果你拷贝前端vue-cli项目到咱们指定目录下，如果运行起来有问题，一些不知名的错误，那么就删除node_modules文件件，然后在项目目录下执行npm install 这个指令，重新按照package.json文件夹中的包进行node_modules里面包的下载
619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
