0 #创建项目(注意:这里的项目名只能全部小写)
vue create luffy001
1 node_models 文件夹内放了一堆当前项目的依赖(删掉:可以上传git,分享给他人)
2 #如果项目中没有node_models这个文件夹,可以执行以下指令
cnpm install (pip3 istall -r requirements.txt)
3 #目录介绍
luffycity # 项目
-node_modules # 项目依赖,可以删除 执行npm install 会安装
-public
-index.html # 项目整个index.html 单页面开发
-favicon.ico # favicon图标
-src
main.js # 整个项目的入口js文件(django的setting.py)
components # 组件
views # 页面组件
assets # 静态资源,图片...
store # vuex:状态管理器的相关配置和使用,cookie,localstorage,sessionstorage(https://www.cnblogs.com/pengc/p/8714475.html)
router # 路由相关:不同组件之间跳转
App.vue # 根组件()
babel.config.js
package.json # 相当于requements.txt,项目依赖,配置。。。不能删
package-lock.json #
.gitignore
.editorconfig
README.md
1 在要跳转的位置加(等同于原来的a标签)
<router-link to="/">首页</router-link> |
2 组件在roueter文件夹 index.js配置
http://www.liuqingzheng.top/python/%E8%B7%AF%E9%A3%9E%E9%A1%B9%E7%9B%AE/1-%E9%A1%B9%E7%9B%AE%E5%9F%BA%E7%A1%80/7-luffy%E5%89%8D%E5%8F%B0/
//1 全局样式,配置文件
在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; /* 合并边框 */
}
//2 axios前后台交互
cnpm install axios
在main.js中配置
import axios from 'axios'
Vue.prototype.$axios = axios;
//3 vue-cookies
cnpm install vue-cookies
在main.js中配置
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;
//4 elementui页面组件框架
cnpm install element-ui
在main.js中配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
//5 jquery组件
cnpm install jquery
在项目根路径下建一个vue.config.js文件
在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"]
})
]
}
};
//6 bootstrap页面组件框架
cnpm install bootstrap@3
在main.js中配置
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
http://www.liuqingzheng.top/python/%E8%B7%AF%E9%A3%9E%E9%A1%B9%E7%9B%AE/1-%E9%A1%B9%E7%9B%AE%E5%9F%BA%E7%A1%80/8-luffy%E5%89%8D%E5%8F%B0%E9%85%8D%E7%BD%AE/
http://www.liuqingzheng.top/python/%E8%B7%AF%E9%A3%9E%E9%A1%B9%E7%9B%AE/1-%E9%A1%B9%E7%9B%AE%E5%9F%BA%E7%A1%80/6-user%E6%A8%A1%E5%9D%97User%E8%A1%A8/
#utils/response.py
from rest_framework.response import Response
class APIResponse(Response):
def __init__(self, status=0, msg='ok', http_status=None, headers=None, exception=False, **kwargs):
data = {
'status': status,
'msg': msg,
}
if kwargs:
data.update(kwargs)
super().__init__(data=data, status=http_status, headers=headers, exception=exception)
#utils/exception.py
from rest_framework.views import exception_handler as drf_exception_handler
from rest_framework.views import Response
from rest_framework import status
from utils.logging import logger
import logging
logging.getLogger('django')
def exception_handler(exc, context):
response = drf_exception_handler(exc, context)
if response is None:
# 记录服务器异常
logger.critical('%s' % exc)
response = Response({
'detail': '服务器异常,请重试...'}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
return response
#dev.py中
REST_FRAMEWORK = {
'EXCEPTION_HANDLER': 'utils.exception.exception_handler',
}
#dev.py
# 真实项目上线后,日志文件打印级别不能过低,因为一次日志记录就是一次文件io操作
LOGGING = {
'version': 1,
'disable_existing_loggers': False,
'formatters': {
'verbose': {
'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': {
'()': 'django.utils.log.RequireDebugTrue',
},
},
'handlers': {
'console': {
# 实际开发建议使用WARNING
'level': 'DEBUG',
'filters': ['require_debug_true'],
'class': 'logging.StreamHandler',
'formatter': 'simple'
},
'file': {
# 实际开发建议使用ERROR
'level': 'INFO',
'class': 'logging.handlers.RotatingFileHandler',
# 日志位置,日志文件名,日志保存目录必须手动创建,注:这里的文件路径要注意BASE_DIR代表的是小luffyapi
'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': {
'handlers': ['console', 'file'],
'propagate': True, # 是否让日志信息继续冒泡给其他的日志处理系统
},
}
}
#utils/logging.py
import logging
logger = logging.getLogger('django')
1 同源策略:浏览器的安全策略,不允许向不同的域发送请求获取数据
http://127.0.0.1:8080/
http://127.0.0.1:8000/
这俩不是同一个域(地址,端口不一样,就不是一个域),发送请求,能发出去,数据也回来了
但是被浏览器的同源策略阻止了
2 前后端分离后,会存在跨域
-前端项目和后端项目跑在不同的端口上
3 解决跨域问题
-第一种:前端解决(通过代理解决)
-第二种:自己解决(自己写代码解决)
-第三种:借助第三方模块
-下载 pip install django-cors-headers
-app中注册:corsheaders
-配置中间件:
'corsheaders.middleware.CorsMiddleware',
-修改配置文件(在settings.py中添加)
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
'http://127.0.0.1:8080', #这里是后端允许访问前端的路径,与前端路径需保持一致
)
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
)
#App.vue
<script>
export default {
data(){
return{
name:''
}
},
mounted () {
// this.name = this.$settings.name
this.$axios.get(this.$settings.base_url+'/user/test/').then(res=>{
console.log(res.data)
})
}
}
script>
1 Python 获取环境变量的几种方式(django项目中配置文件,数据库用户和密码通过环境变量获取)
db_user='root'
db_password='123456'
user = os.environ.get('db_user')
password = os.environ.get('db_password')
2 cookie,localstorage,sessionstorage区别(https://www.cnblogs.com/pengc/p/8714475.html)
3 pyechars的使用(研究一下)
4 django2.2.2需要改源码的原因,你使用了pymysql来操作mysql数据库
-如果使用mysqlclient操作mysql,就不需要改源码了,并且
import pymysql
pymysql.install_as_MySQLdb() 不需要配置
-mysqlclient安装麻烦,解决方法:http://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/
5 cnpm install jquery --save # 依赖模块同步到pacakage.json中
6 npm run build # 项目上线,执行,把dist文件夹部署,前端所有的代码