前端学习笔记

李南北找东西

已于 2023-04-15 20:25:24 修改

阅读量276

点赞数

分类专栏：前端文章标签：前端学习笔记

于 2023-04-15 18:41:06 首次发布

本文链接：https://blog.csdn.net/qq_41900477/article/details/130168710

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章介绍了如何使用SCSS预编译器，包括安装、PyCharm配置和使用。接着讲解了Vue项目的搭建，包括服务器环境配置、删除默认样式、初始化全局变量和方法。还涉及了跨域问题的解决，通过CORS配置和axios设置实现。此外，文章还提到了日志配置和自定义异常处理在Django项目中的应用。

摘要由CSDN通过智能技术生成

引入第三方组件

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>

李南北找东西

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端学习笔记

在中编写自定义的异常处理函数logger = logging . getLogger("django") # 参数名要和dev.py中的logger日志对象名一致 from rest_framework import status # 记录了各种状态码的含义 def custom_exception_handler(exc , context) : """自定义异常处理:param exc: 本次请求发生的异常信息。
复制链接

扫一扫