![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
mzf19980423
这个作者很懒,什么都没留下…
展开
-
vue中使用echars,渲染不上后端请求的数据
最近用vue和echars做了两个小页面,遇到一个问题是,在mounted发送请求,和初始化echars图,发现数据出不来,现在记录一下解决方法。解决:在数据请求的时候,生命周期是不会等待你完成请求在继续走mounted,所有你在mounted初始化echarts的时候,请求可能没完成,所以说拿不到数据显示,你可以直接再mounted请求数据,在请求成功回调里面进行echarts初始化this.$post('/adminOutAccess/',this.department,this.months).t原创 2021-06-12 13:39:07 · 524 阅读 · 0 评论 -
Vue生命周期
VUE生命周期详解转载 2021-06-02 17:19:20 · 139 阅读 · 0 评论 -
Django接受post请求出现Forbidden (CSRF cookie not set.): /api/index
Forbidden (CSRF cookie not set.): /api/index/解决办法把Django中setting.py中’django.middleware.csrf.CsrfViewMiddleware’,注释掉MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'djang原创 2021-06-01 20:14:05 · 471 阅读 · 0 评论 -
Django + Vue解决跨域问题
最近用Django做后端服务器,Vue做前端,遇到了一个跨域问题,在此纪录一下:前端:封装了一下Axios:request.js如下:// 加载进度条//导入import NProgress from 'nprogress'import 'nprogress/nprogress.css'import axios from "axios";//请求相关的方法// 初始化axios对象var instance = axios.create({ headers:{原创 2021-06-01 17:57:29 · 202 阅读 · 1 评论 -
Vue-cli脚手架安装
原创 2021-04-12 09:42:10 · 48 阅读 · 0 评论 -
Vue组件
1、Vue组件作用:用来建设Vue实例对象中代码量,日后在使用Vue开发过程中,可以根据不同业务功能将页面中划分成不同的多个组件,然后由多个组件去完成整个页面的布局,便于日后使用Vue进行开发时页面管理,方便开发人员维护。2、组件使用2.1、全局组件注册到Vue中根实例上的组件成为全局组件,全局组件一旦定义可以在任意组件中进行使用。Vue.component('user',{ template:"<div>用户登录局部组件</div>",});2.2、局部组件第原创 2021-04-10 17:52:40 · 56 阅读 · 0 评论 -
Axios基本使用
1、Axios==>ajax异步请求技术Axios是一个异步请求技术,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中渲染 类似于页面局部更新技术Ajax2、Axios网站中文网站:http://axios-js.com/3、发送异步请求1、get请求// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .原创 2021-04-07 15:50:48 · 79 阅读 · 0 评论 -
Vue之methods和computed
1、methods和computedmethods: data中的methods中定义事件触发的方法,调用一次执行一次。computed: 计算属性,有缓存,当多次调用同一个计算结果时,不需要重复执行。使用时直接使用属性名。2、事件修饰符事件修饰符:作用:用来和事件连用,用来决定事件触发条件和决定事件触发机制常用的事件修饰符:stop: 阻止事件冒泡 v-on:click.stop=“child”prevent:阻止默认行为self:只触发自身行为once:一次事件,让事件只能执行一次3原创 2021-04-07 15:28:41 · 126 阅读 · 0 评论 -
Vue之v-for、v-model
1、v-forv-for:作用就是用来对对象进行遍历的<div id="app"> <h1>遍历对象</h1> <h2 v-for="(value,key,index) in user"> index:{{index}} key:{{key}} value:{{value}} </h2> <h1>遍历数组</h1> <h2 v-for="(school,index) in school">原创 2021-04-07 14:14:57 · 116 阅读 · 0 评论 -
Vue之v-if、v-show和v-bind
1、v-if和v-show使用v-if和v-show:作用都是用来控制页面中标签是否展示和隐藏使用:标签v-if=“true|false” v-show=“true|false”区别:v-show:底层在控制页面标签是否展示时底层使用的是css中display属性来控制标签的展示和隐藏v-if: 底层在控制页面标签是否展示时底层是直接操作DOM元素,通过对DOM元素删除和添加来控制标签的展示和隐藏<div id="app-3"> <p v-if="seen">现在你原创 2021-04-07 12:47:19 · 228 阅读 · 0 评论 -
vue事件绑定
1、js时间三要素1、事件源:发生时间源头成为事件源,一般指html标签2、事件:事件特定动作 onclick单击 dblclick双击…3、事件处理程序:事件处理函数2、vue事件1、在vue中给对应标签绑定事件可以通过vue提供v-on指令进行事件绑定==> v-on: 事件名 简化写法:@事件名<div id="app-5"> <p>{{ message }}</p> <button v-on:click="aaa">点击&l原创 2021-04-07 11:17:10 · 166 阅读 · 0 评论 -
Vue入门
1、引入<!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>或者<!-- 生产环境版本,优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script>2、声明式渲染Vue.js 的核心是一个允许采用简洁的模板原创 2021-04-07 10:40:06 · 55 阅读 · 0 评论 -
vue介绍
1、vue引言vue是一款渐进式JavaScript框架渐进式1、易用 html css javascript2、高效 开发前端页面非常高效3、灵活 开发灵活,多样性总结Vue是一个JavaScript框架,是一个js框架,简化js操作bootstrap 是一个css 框架 ,封装css注意日后再使用Vue过程中页面不再引入jQueryVue作者尤雨溪 国内的...原创 2021-04-07 10:00:45 · 60 阅读 · 0 评论 -
bootstrap介绍
1、bootstrap简单、直观、强悍的前端开发框架,让web开发更迅速、简单。来自twitter,是目前很受欢迎的前端框架之一。Bootstrap是基于HTML、CSS、JavaScript的,让属性代码更容易。移动优先,响应式布局开发。bootstrap中文网址:boostrap中文网址2、bootstrap容器container-fluid 流体container1170970750100%<div class="container-fluid">流体容器</di原创 2021-04-02 20:13:40 · 144 阅读 · 0 评论 -
json与ajax
1、jsonjson是JavaScript Object Notation 的首字母的缩写,单词的意思是JavaScript对象表示法,这里说的json指的是类似于JavaScript对象的一种数据格式,目前这种数据格式比较流行,逐渐替换掉了传统的xml数据格式。JavaScript自定义对象:var oMan = { name:'tom', age:16, talk:function(){ alert("说话"); }}json格式{ "name":"tom", "age":原创 2021-03-31 17:48:52 · 51 阅读 · 0 评论 -
滚轮事件与函数节流
jquery.mousewheel插件使用jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事件不兼容,可以使用jQuery的滚轮事件插件jquery.mousewheel.js。函数节流javascript中有些事件的触发频率非常高,比如onresize事件(jq中是resize),onmousemove事件(jq中是mousemove)以及上面所说的鼠标滚轮事件,再短事件内多处触发执行绑定的函数,可以巧妙的使用定时器来减少触发的次数,实现函数节流。$(window).moiusewheel(f原创 2021-03-31 11:07:51 · 162 阅读 · 0 评论 -
jQuery元素节点操作
1、创建节点var $div = $('<div>')var $div2 = $('<div>这是一个div元素</div>')2、插入节点1、append()和appendTo():在现存元素的内部,从后面插入元素var $span = $('<span>这是一个span元素</span>');$('#didv1').append($span);......<div id="div1"></div>2原创 2021-03-29 20:44:09 · 47 阅读 · 0 评论 -
jQuery事件与事件冒泡
1、事件函数列表blur() 元素失去焦点focus() 元素获得焦点click() 鼠标点击mouseover() 鼠标进入(进入子元素也触发)mouseout() 鼠标离开(离开子元素也触发)mouseenter() 鼠标进入(进入子元素不触发)mouseleave() 鼠标离开(离开子元素不触发)hover() 同时为mouseenter和mouseleave事件指定处理函数ready() DOM加载完成resize() 浏览器原创 2021-03-29 17:36:15 · 112 阅读 · 0 评论 -
jQuery属性操作与jQuery循环
1、html()取出或设置html内容//取出html内容var &htm = $('#div1').html();//设置html内容$('div1').html('<span>添加文字</span>')2、prop()取出或设置某个属性的值//取出图片 的地址var $src = $('#img1').prop('src');//设置图片的地址和alt属性$('#img1').prop({src:"test.jpg", alt:"test image原创 2021-03-29 16:02:26 · 69 阅读 · 0 评论 -
jQuery尺寸相关与滚动事件
1、获取和设置元素尺寸width()、height() 获取元素width和heightinnerWidth()、innerHight() 包括padding的width和heightouterWidth()、outerHight() 包括padding和border的width和heightouterWidth(true)、outerHight(true) 包括padding和border以及margin的width和height2、获取元素相对页面原创 2021-03-29 15:14:37 · 58 阅读 · 0 评论 -
jQuery特殊效果
1、jQuery特殊效果fadeIn() //淡入<script type="text/javascript"> $(function(){ $('#div').fadeIn(1000,''swing',function(){ alert("done"); }); });</script>fadeOut() //淡出fadeToggle() //切换淡入淡出hide() //隐藏元素show() //显示元素toggle() //切换元素的可见状原创 2021-03-29 10:21:31 · 58 阅读 · 0 评论 -
jQuery样式操作,绑定click事件,索引值
1、操作行间样式//获取div的样式$('div').css('width');$('div').css('color');//设置div的样式$("div").css("width","30px");$("div").css("height","30px");$("div").css({"width":"30px",color:"red"});2、操作样式类名$("#div").addClass("divClass2") //为id为div的对象追加样式divClass2$("#d原创 2021-03-28 17:56:04 · 223 阅读 · 0 评论 -
jQuery加载与选择器
1、jQuery引入以及写法//不能再jQuery的引入标签中写js代码<script type="text/javascript" src="jquery文件的位置"></script><script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); alert('原生javasctipt'+oDiv); }原创 2021-03-28 16:53:55 · 99 阅读 · 1 评论 -
javascript 函数定义与执行
1、函数定义与调用<script type="text/javascript"> function fnMyclick(){ alert("hello world!"); }</script><div id="div1" onclick="fnMyclick()">这是一个div</div><inpyt type="button" value="改变div" id="btn01">2、提取行间事件如果把onclick写在标原创 2021-03-26 17:55:43 · 92 阅读 · 0 评论 -
javascript 操作元素属性
JavaScript嵌入页面的方式1、行间事件(主要用于事件)<input type="button" name="" onclick ="alert(OK!);">2、页面script标签嵌入<script type="text/javascript"> alert("ok!");</script>3、外部引入<script type="text/javascript" src = "js/index.js"></script&原创 2021-03-24 11:10:47 · 92 阅读 · 0 评论 -
css之background属性
属性解释:background属性是css中应用比较多,且比较重要的一个属性,他是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项:background-color:设置背景颜色background-image:设置背景图片background-repeat:设置背景图片如何重复平铺background-position:设置背景图片的位置background-attachment:设置背景图片是固定还是随着页面滚动...原创 2021-03-18 20:41:49 · 172 阅读 · 0 评论 -
css定位
我们使用css中的position属性来设置元素的定位类型,position的设置项如下:relative 生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移。absolute 生成绝对定位元素,元素脱离翁当了,不占据文档流的位置,可以理解为漂浮在文档流的上方,相当于上一个设置了定位的父级元素来进行定位,如果找不到,则相对于body元素进行定位。fixed 生成固定定位元素,元素脱离文档流,不占据文档流的位置,可以理解为漂浮再文档流的上方,相对于浏览器窗口进行定位。sta原创 2021-03-18 19:44:56 · 62 阅读 · 0 评论 -
css浮动 与 清除浮动
原创 2021-03-18 17:22:54 · 51 阅读 · 0 评论 -
块元素、内联元素、内联块元素
原创 2021-03-17 20:26:03 · 45 阅读 · 0 评论 -
css使用技巧
1、设置垂直居中可以设置行高和盒子高度相同:height:50px;line-height:50px;2、margin使用技巧2.1 设置元素水平居中:margin:x auto;auto可以自动计算使盒子左右居中。且只能用于左右。margin:50px auto 100px auto;2.2 margin负值让元素位移及边框合并margin-left:-50px;2.3 margin-top 塌陷在两个盒子嵌套的时候,内部的盒子设置的margin-top会加到外边的盒子上,导原创 2021-03-17 15:10:23 · 57 阅读 · 0 评论 -
css盒子模型
原创 2021-03-17 14:11:57 · 45 阅读 · 0 评论 -
css选择器
1、标签选择器选择所有标签*{ color:red;}div{ color:green;}2、id选择器id须唯一,不能重复 用的不多#div1{ color:gold;}<div id='div1'>这是第一个div</div>3、类选择器用的最多.green{ color:green;}.big{ font-size:40px;}<div class='green big'>这是第一个div原创 2021-03-16 17:47:19 · 52 阅读 · 0 评论 -
css常用的文本样式
常用的应用文本的css样式:color:设置字体颜色,如:color:red;font-size:设置字体大小,如:font-size:12px;font-family:设置字体类型,如:font-family:‘微软雅黑’;font-style:设置字体是否倾斜,如font-style:‘normal’;,设置不倾斜,font-style:‘italic’,设置字体倾斜。font-weight:设置字体是否加粗,如:font-weight:bold;设置字体加粗,font-weight:norm原创 2021-03-16 16:48:38 · 87 阅读 · 0 评论 -
HTML引入css样式及css使用
1、外联式:<link rel="stylesheet" type="text/css" href="css/main.css">main.cssdiv{font-size:20px;color:red;}2、嵌入式:用style标签,通常写在head中<style type="text/css"> h1{ font-size:24px; color:gold;}</style>...原创 2021-03-16 15:40:06 · 56 阅读 · 0 评论 -
HTML常用标签和属性
html常用标签及属性介绍1、image标签<image src="文件路径" alt="提示信息"/>2、a标签<a href="#" title='提示信息' target='页面跳转方式'/><!--torget标签的属性有'_self'和'_blank' 分别对应链接网页代替原网页和重新打开一个网页-->3、label标签<label for="input标签中的id">用户名:</label><!--label标原创 2021-03-09 18:27:10 · 78 阅读 · 0 评论