前台全局样式和js配置 前台使用axios,cookies,elementui 后台主页模块接口 跨域问题详解,前后端打通


1 前台全局样式和js配置

# 引入全局css
-第一步:创建一个css样式
   -第二步:在main.js中引入即可
   import './assets/css/global.css'
   
# 引入js
-跟后端交互,有个后端地址,设置成一个变量,以后要换,只要改这个变量即可
   -第一步:写一个settings
       export default {
           base_url:'http://127.0.0.1:8000',
      }
   -第二步:在main.js中引入
   import settings from '@/assets/js/settings'
   //把settings对象,放到了Vue的原型中,相当于放到了Vue类中,类可以拿到,对象也可以拿到
   Vue.prototype.$settings=settings
   
   -第三步:以后再任意组件中直接使用
  this.$settings

 

2 前台使用axios,cookies,elementui

# axios 跟后端交互
-第一步:安装
  cnpm install axios -S
   -第二步:在main.js中引入
  import axios from 'axios'
Vue.prototype.$axios=axios
   -第三步:使用
  this.$axios.get()

# cookies 项目做了前后端分离,后端操作不了前端的cookie了,后端返回,前端自己把数据(token)放到cookie中,第三方模块,它可以方便我们直接使用js操作cookie
-第一步:安装
  cnpm install vue-cookies -S
   -第二步:在main.js中引入
  import cookies from 'vue-cookies'
Vue.prototype.$cookies=cookies
   -第三步:使用
  this.$cookies.set('key','value',秒)
       this.$cookies.get('key')

# elementui :ui库,样式
cnpm install element-ui -S



# 补充:cookie,sessionStroage,localStorage的区别?
-cookie:会放到客户端浏览器的cookie中,有过期时间
   -sessionStroage:放在客户端浏览器的会话存储中,没有过期时间,关闭浏览器,就没了
   -localStorage:放在客户端浏览器的会话存储中,没有过期时间,永久生效

3 后台主页模块接口

# 软件开发模式:
-瀑布开发模式:设计,开发,测试,上线
   -敏捷开发:按板块设计,开发,测试,上线 (周期基本上一个周,)
   
-学bbs时候,数据完全设计好了  瀑布开发模式



# 首页轮播图接口
# 操作步骤:
第一步:创建一个home  app
   第二步:在models中创建轮播图表
  -写一个基表
       class BaseModel(models.Model):
           created_time = models.DateTimeField(auto_now_add=True, verbose_name='创建时间')
           updated_time = models.DateTimeField(auto_now=True, verbose_name='最后更新时间')
           is_delete = models.BooleanField(default=False, verbose_name='是否删除')
           is_show = models.BooleanField(default=True, verbose_name='是否上架')
           orders = models.IntegerField(verbose_name='优先级')

           class Meta:
               abstract = True  # BaseModel这个表,只用来继承用,不会在数据库生成

       -banner表继承基表
      class Banner(BaseModel):
               title = models.CharField(max_length=16, unique=True, verbose_name='名称')
               image = models.ImageField(upload_to='banner', verbose_name='图片')  # 真正的轮播图---》存的是地址
               link = models.CharField(max_length=64, verbose_name='跳转链接')  # 跳转地址
               info = models.TextField(verbose_name='详情')  # 也可以用详情表,宽高出处

               class Meta:
                   db_table = 'luffy_banner'
                   verbose_name_plural = '轮播图表'

               def __str__(self):
                   return self.title

       
   第三步:迁移数据
  python manage.py makemigrations
       python manage.py migrate
       
   第四步:录入数据  后台admin
 
       
       
       
       
       
       
 # 学长问题:
-写个表:表中字段
  -image:图片
       -link:跳转地址
       -type:跳转类型(0:跳app内部,1:跳外链,浏览器打开)
   -写接口
  {code:100,msg:成功,image:'http://127.0.0.1/media/banner/a.png',type:0,link:'Home'}
       

4 跨域问题详解,前后端打通

#1  前后端分离后,前端向后端发送请求,会被禁止,所谓的跨域问题


#2 同源策略:它是浏览器的安全策略,浏览器不允许向不同的域发送请求获取数据
同一个域(同源):ip地址和端口号完全一致
   请求发出去,后端执行了,但是到前端浏览器,被拦截了,不让进
   
   
# xss 跨站脚本攻击
# csrf:跨站请求伪造
#cors:跨域资源共享


# 3 通过CORS(跨域资源共享)解决---》服务端,只要在响应头中加入固定的东西,浏览器就能允许数据进入

   
   
#4 浏览器将跨域请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)
-简单请求只发一次
   -非简单请求发送两次---》第一次是options预检请求,如果允许,再发送第二次真正的请求
   
   -满足以下两个条件,就是简单请求
  1 请求方法是以下三种方法之一:
           HEAD
           GET
           POST
       2 HTTP的头信息不超出以下几种字段:
           Accept
           Accept-Language
           Content-Language
           Last-Event-ID
           Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

           
#5 解决,没有第三方,我们自己解决
-写个中间件---process_resposne中
   from django.utils.deprecation import MiddlewareMixin
   class CorsMiddleWare(MiddlewareMixin):
       def process_response(self,request,response):
           if request.method=="OPTIONS":
               #可以加*
               response["Access-Control-Allow-Headers"]="Content-Type"
           response["Access-Control-Allow-Origin"] = "*"
           return response
       
        
# 6 使用第三方
-第一步:安装---装完确认以下django版本是否还是2.2.2
  pip3 install django-cors-headers
       
   -第二步:把它加入到app中
           INSTALLED_APPS = (
           ...
           'corsheaders',
           ...
      )
 
   -第三步:加入中间件
   MIDDLEWARE = [
   'corsheaders.middleware.CorsMiddleware',  #cors的中间件
]
   -第四步:配置文件
       CORS_ORIGIN_ALLOW_ALL = True
       CORS_ALLOW_METHODS = (
           'DELETE',
           'GET',
           'OPTIONS',
           'PATCH',
           'POST',
           'PUT',
           'VIEW',
      )

       CORS_ALLOW_HEADERS = (
           'accept-encoding',
           'authorization',
           'content-type',
           'origin',
           'user-agent',

      )
 

5 自定义配置

# django中有配置文件,项目自己会有一些配置信息,新增一个配置文件
#步骤
第一步:在settings文件夹下新建common_settings.py
   第二步:写入 BANNER_COUNT = 3
   第三步:在配置文件中导入
   from settings.common_settings import *

 

5 git介绍和安装

# 多人,个人开发程序,需要解决的问题
1 帮助开发者合并开发的代码
2 如果出现冲突代码的合并,会提示后提交合并代码的开发者,让其解决冲突
   3 做版本管理,找回很久以前写的代码

# 可以做版本管理和合并代码的软件
软件:SVN GIT
#名词解释
git,gitee,github,gitlab
   # git 是版本管理软件,可以装在不同操作系统平台,主要用来做版本管理
   # github:全球最大的开源软件仓库(私有软件,花钱,国内公司一般不放在github)
   # gitee:码云 中国版的github(少量公司用码云)
   # gitlab:公司内部使用的代码托管平台
   
# svn和git
git:集群化,有没有客户端,git都可以使用
   svn是客户端---》服务端架构
   
   
   
# git 的安装
-linux:centos
  yum install git -y
   -mac 下:
  -https://github.com/timcharper/git_osx_installer/releases
  下载软件,下一步安装

   -win下
  -https://git-scm.com/download/win
  下载软件,下一步安装

 

日志级别

首先日志的一个级别分为八个
ALL < TRACE < DEBUG < INFO < WARN < ERROR < FATAL < OFF
日志信息分类

1.等级由低到高:debug<info<warn<Error<Fatal;

2.区别:

debug 级别最低,可以随意的使用于任何觉得有利于在调试时更详细的了解系统运行状态的东东;

info  重要,输出信息:用来反馈系统的当前状态给最终用户的;

后三个,警告、错误、严重错误,这三者应该都在系统运行时检测到了一个不正常的状态。

warn, 可修复,系统可继续运行下去;

Error, 可修复性,但无法确定系统会正常的工作下去;

Fatal, 相当严重,可以肯定这种错误已经无法修复,并且如果系统继续运行下去的话后果严重。

3.使用

什么时候使用 info, warn , error ?

info 用于打印程序应该出现的正常状态信息, 便于追踪定位;

warn 表明系统出现轻微的不合理但不影响运行和使用;

error 表明出现了系统错误和异常,无法正常完成目标操作。

4.格式

总结起来, 错误日志格式可以为:

log.error(“[接口名或操作名] [Some Error Msg] happens. [params] [Probably Because]. [Probably need to do].”);

log.error(String.format(“[接口名或操作名] [Some Error Msg] happens. [%s]. [Probably Because]. [Probably need to do].”, params));



log.error(“[Some Error Msg] happens to 错误参数或内容 when [in some condition]. [Probably Because]. [Probably need to do].”);

log.error(String.format(“[Some Error Msg] happens to %s when [in some condition]. [Probably Because]. [Probably need to do].”, parameters));

[Probably Reason]. [Probably need to do]. 在某些情况下可以省略; 在一些重要接口和场景下最好能说明一下。

每一条错误日志都是独立的,尽可能完整、具体、直接说明何种场景下发生了什么错误,由什么原因导致,要采用什么措施或步骤。

5.意义

错误日志是排查问题的重要手段之一。 当我们编程实现一项功能时, 通常会考虑可能发生的各种错误及相应原因:

要排查出相应的原因, 就需要一些关键描述来定位原因。这就会形成三元组:错误现象 -> 错误关键描述 -> 最终的错误原因。

需要针对每一种错误尽可能提供相应的错误关键描述,从而定位到相应的错误原因。也就是说,编程的时候,要仔细思考, 哪些描述是非常有利于定位错误原因的, 尽可能将这些描述添加到错误日志中。

生产环境

即线上环境,用户使用的环境。由特定人员来维护,一般人没有权限去修改。
指正式提供对外服务的,一般会关掉错误报告,打开错误日志。(就是线上环境,发布到对外环境上,正式提供给客户使用的环境。

 

开发环境

开发环境是程序猿们专门用于开发的服务器,配置可以比较随意, 为了开发调试方便,一般打开全部错误报告。(程序员接到需求后,开始写代码,开发,运行程序,看看程序有没有达到预期的功能;)
项目尚且在编码阶段,我们的代码一般在开发环境中 不会在生产环境中,生产环境组成:操作系统 ,web服务器 ,语言环境。 php 。 数据库 。 等等

测试环境

一般是克隆一份生产环境的配置,一个程序在测试环境工作不正常,那么肯定不能把它发布到生产机上。(程序员开发完成后,交给测试部门全面的测试,看看所实现的功能有没有bug,测试人员会模拟各种操作情况;)
项目完成测试,修改bug阶段
 
posted @   文质彬彬赵其辉  阅读(213)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示