学习笔记
引入第三方组件
npm i element-ui -S
npm i axios -S
在main.js中导入ElementUI,并调用
在main.js中引用 axios插件
import axios from 'axios'; // 从node_modules目录中导入包
// 允许ajax发送请求时附带cookie
axios.defaults.withCredentials = false;
Vue.prototype.$axios = axios; // 把对象挂载vue中
一、SCSS预编译器使用
1.1、安装
打开cmd,什么都不要改,输入命令:npm install -g sass sass-loader
,回车,等待安装完成。
1.2、pycharm配置scss
打开settings、Tools、File Watchers,点击右侧的“+”号,选择scss,点击ok
1.2、使用
在/static/css/
目录下创建index.scss
文件,会自动创建index.css
、index.css.map
两个文件
在index.html
文件的标签中引入scss生成的css文件
<head>
<meta charset="UTF-8">
<title>nanbei's blog</title>
<link rel="stylesheet" href="/static/css/index.css">
</head>
对static/css/index.scss/index.scss编写完样式后,要去settings.py文件中配置路径,才能生效
import os
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/
STATIC_URL = '/static/'
# 配置static路径
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
二、服务器搭建前端开发环境
参考博客:
(15条消息) Ubuntu18.04搭建Vue开发环境_L·S·P的博客-CSDN博客
(15条消息) 虚拟机Ubuntu18.04搭建vue环境,安装node,npm,cnpm_ubuntu安装cnpm_#黑白键~的博客-CSDN博客
Vue
sudo apt update //获取最新软件包
sudo apt install nodejs // 下载nodejs
nodejs -v //查看版本,测试是否正确安装
sudo apt install npm // 下载npm
npm -v // 查看版本,测试是否正确安装
sudo npm install n -g // 安装node版本管理工具'n'
sudo n stable // 升级node最新版本
或者 sudo n v16.14.0 //或者升级到指定版本,下一步安装cnpm的时候需要特定版本的node
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org // 下载淘宝镜像
cnpm -v //查看cnpm版本,测试是否正确安装
sudo cnpm install -g vue-cli // 安装vue脚手架工具vue-cli,搭建项目所需模板框架
vue -V //查看vue版本,测试是否正确安装
项目搭建
mkdir luffy
cd luffy
vue init webpack lufei_pc
命令行启动项目
注意:在控制台使用ctrl+c终止项目,不要使用ctrl+z,不然在pycharm中运行前端项目时会报错(端口被占用,之前运行的项目并未被真实关闭)
cd lufei_pc
npm run dev
pycharm启动项目:打开lufei_pc项目,进行配置
项目初始化(删除默认vue样式)
修改App.vue:
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
修改src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/'
}
]
})
在src/components/下面创建组件Home.vue,在index.js中引入这个Home组件:
import Vue from 'vue'
import Router from 'vue-router'
import Home from "../components/Home";
Vue.use(Router)
export default new Router({
mode: "history",
routes: [
{
path: '/',
name: 'Home',
component: Home,
}
]
})
初始化全局变量和全局方法
在src/目录下创建settings.js文件:
export default {
"HOST": "http://127.0.0.1:8000",
}
export 将本文件的内容暴露出去,这样别的文件中就可以使用
在main.js文件中引入,然后赋予Vue,之后别的文件创建vue对象时就不同重复导入
import settings from "./settings";
Vue.prototype.$settings = settings;
分配前后端域名
为前后端设置两个不同的域名
位置 | 域名 |
---|---|
前端 | www.luffycity.cn |
后端 | api.luffycity.cn |
编辑/etc/hosts
文件,可以设置本地域名:sudo vim /etc/hosts
,增加两条信息
127.0.0.1 localhost
127.0.0.1 api.luffycity.cn
127.0.0.1 www.luffycity.cn
暂停运行前端项目,并修改配置文件config/index.js,保存修改信息,并重启项目
host: 'www.luffycity.cn', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
然后在后台项目中通过settings/dev.py的ALLOWED_HOSTS,设置允许访问
ALLOWED_HOSTS = [
"api.luffycity.cn",
"www.luffycity.cn"
]
修改pycharm的manage.py的配置参数,让用户访问的时候,使用api.luffycity.cn:8000
后端解决跨域问题后,前端使用 axios就可以访问到后端提供给的数据接口。
但是如果要附带cookie信息,前端还要设置一下。前端引入axios插件并配置允许axios发送cookie信息[axios本身也不允许ajax发送cookie到后端]
使用cors方案解决跨域
前端与后端分处不同的域名,我们需要为后端添加跨域访问的支持,否则前端无法使用axios无法请求后端提供的api数据,我们使用CORS来解决后端对跨域访问的支持。
使用django-cors-headers扩展:pip install django-cors-headers
文档:https://github.com/ottoyiu/django-cors-headers/
在django项目中的dev.py文件中添加应用、中间件(中间件必须写在第一个)、白名单:
INSTALLED_APPS = (
...
'corsheaders',
...
)
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...
]
# CORS组的配置信息
CORS_ORIGIN_WHITELIST = (
'www.luffycity.cn:8080',
)
CORS_ALLOW_CREDENTIALS = False # 允许ajax跨域请求时携带cookie
日志配置
django内置了logging模块来记录日志,在settings/dev.py
中配置logging
import os
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# 日志配置
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': {
'level': 'DEBUG',
'filters': ['require_debug_true'],
'class': 'logging.StreamHandler',
'formatter': 'simple'
},
'file': {
'level': 'INFO',
'class': 'logging.handlers.RotatingFileHandler',
# 日志位置,日志文件名,日志保存目录logs必须手动创建
'filename': os.path.join(os.path.dirname(BASE_DIR), "logs/luffy.log"),
# 日志文件的最大值,这里我们设置300M
'maxBytes': 300*1024*1024,
# 日志文件的数量,设置最大日志数量为10
'backupCount': 10,
# 日志格式:详细格式
'formatter': 'verbose'
},
},
# 日志对象,'django',将django框架内部的异常处理也记录到logging日志系统
'loggers': {
'django': {
'handlers': ['console', 'file'],
'propagate': True, # 是否让日志信息继续冒泡给其他的日志处理系统
},
}
}
自定义异常配置
在luffyapi/utils/exceptions.py
中编写自定义的异常处理函数
from rest_framework.views import exception_handler
from django.db import DatabaseError
from rest_framework.response import Response
import logging
logger = logging.getLogger("django")# 参数名要和dev.py中的logger日志对象名一致
from rest_framework import status# 记录了各种状态码的含义
def custom_exception_handler(exc, context):
"""
自定义异常处理
:param exc: 本次请求发生的异常信息
:param context: 本清请求发送异常的执行上下文[ 本次请求的request对象,异常发送的时间,行号等... ]
:return:
"""
# 让提供的异常处理类exception_handler()执行一遍
response = exception_handler(exc, context)
# exception_handler()中只封装了部分异常,可以自己补充如数据库异常的处理
if response is None:
"""来到这里只有2种情况:要么程序没出错,要么就是出错了而django或者restframework不识别"""
view = context["view"]
if isinstance(exc, DatabaseError):
# 数据库异常
logger.error('[%s] %s' % (view, exc))
response = Response({'message': '服务器内部错误,请联系客服工作人员!'}, status=status.HTTP_507_INSUFFICIENT_STORAGE)
return response
在luffyapi/settings/dev.py
中添加上自定义异常函数的路径
REST_FRAMEWORK = {
# 异常处理
'EXCEPTION_HANDLER': 'luffyapi.utils.exceptions.custom_exception_handler',
}
js
js中拼接url时使用`而不是’
vue
引入vue.js文件
在HTML文件中引入vue.js:
<script src="/static/vue/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
msg: "nanbei"
}
})
</script>
一个问题:vue.js中渲染变量是使用双大括号{{}}
插值语法,但现在是在django中模板语法渲染也是使用{{}}
,会出现语法冲突
解决:将vue.js的插值语法改为使用双中括号[[]]
<script>
new Vue({
el: '#app',
delimiters:["[[", "]]"],
data:{
msg: "nanbei"
}
})
</script>