weixin_45153932的博客

原创 vue中使用echars，渲染不上后端请求的数据

最近用vue和echars做了两个小页面，遇到一个问题是，在mounted发送请求，和初始化echars图，发现数据出不来，现在记录一下解决方法。解决：在数据请求的时候，生命周期是不会等待你完成请求在继续走mounted，所有你在mounted初始化echarts的时候，请求可能没完成，所以说拿不到数据显示，你可以直接再mounted请求数据，在请求成功回调里面进行echarts初始化this.$post('/adminOutAccess/',this.department,this.months).t

转载 Vue生命周期

VUE生命周期详解

原创 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

原创 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:{

原创 vue-Cli 3.0创建项目

1.vue create demo2.个人设置3.配置信息4.vue.js版本号5.是否需要历史路由，指老版本路由，有#号6、然后一直回车

原创 Vue-cli脚手架安装

原创 Vue组件

1、Vue组件作用：用来建设Vue实例对象中代码量，日后在使用Vue开发过程中，可以根据不同业务功能将页面中划分成不同的多个组件，然后由多个组件去完成整个页面的布局，便于日后使用Vue进行开发时页面管理，方便开发人员维护。2、组件使用2.1、全局组件注册到Vue中根实例上的组件成为全局组件，全局组件一旦定义可以在任意组件中进行使用。Vue.component('user',{ template:"<div>用户登录局部组件</div>",});2.2、局部组件第

原创 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); }) .

原创 Vue之methods和computed

1、methods和computedmethods: data中的methods中定义事件触发的方法，调用一次执行一次。computed: 计算属性，有缓存，当多次调用同一个计算结果时，不需要重复执行。使用时直接使用属性名。2、事件修饰符事件修饰符：作用：用来和事件连用，用来决定事件触发条件和决定事件触发机制常用的事件修饰符：stop: 阻止事件冒泡 v-on:click.stop=“child”prevent：阻止默认行为self：只触发自身行为once：一次事件，让事件只能执行一次3

原创 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"&gt

原创 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">现在你

原创 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

原创 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 的核心是一个允许采用简洁的模板

原创 vue介绍

1、vue引言vue是一款渐进式JavaScript框架渐进式1、易用 html css javascript2、高效 开发前端页面非常高效3、灵活 开发灵活，多样性总结Vue是一个JavaScript框架，是一个js框架，简化js操作bootstrap 是一个css 框架 ，封装css注意日后再使用Vue过程中页面不再引入jQueryVue作者尤雨溪 国内的...

原创 bootstrap介绍

1、bootstrap简单、直观、强悍的前端开发框架，让web开发更迅速、简单。来自twitter，是目前很受欢迎的前端框架之一。Bootstrap是基于HTML、CSS、JavaScript的，让属性代码更容易。移动优先，响应式布局开发。bootstrap中文网址：boostrap中文网址2、bootstrap容器container-fluid 流体container1170970750100%<div class="container-fluid">流体容器</di

原创 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":

原创 滚轮事件与函数节流

jquery.mousewheel插件使用jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jQuery的滚轮事件插件jquery.mousewheel.js。函数节流javascript中有些事件的触发频率非常高，比如onresize事件（jq中是resize），onmousemove事件(jq中是mousemove)以及上面所说的鼠标滚轮事件，再短事件内多处触发执行绑定的函数，可以巧妙的使用定时器来减少触发的次数，实现函数节流。$(window).moiusewheel(f

原创 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

原创 jQuery事件与事件冒泡

1、事件函数列表blur() 元素失去焦点focus() 元素获得焦点click() 鼠标点击mouseover() 鼠标进入（进入子元素也触发）mouseout() 鼠标离开（离开子元素也触发）mouseenter() 鼠标进入（进入子元素不触发）mouseleave() 鼠标离开（离开子元素不触发）hover() 同时为mouseenter和mouseleave事件指定处理函数ready() DOM加载完成resize() 浏览器

原创 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

原创 jQuery尺寸相关与滚动事件

1、获取和设置元素尺寸width()、height() 获取元素width和heightinnerWidth()、innerHight() 包括padding的width和heightouterWidth()、outerHight() 包括padding和border的width和heightouterWidth(true)、outerHight(true) 包括padding和border以及margin的width和height2、获取元素相对页面

原创 jQuery特殊效果

1、jQuery特殊效果fadeIn() //淡入<script type="text/javascript"> $(function(){ $('#div').fadeIn(1000,''swing',function(){ alert("done"); }); });</script>fadeOut() //淡出fadeToggle() //切换淡入淡出hide() //隐藏元素show() //显示元素toggle() //切换元素的可见状

原创 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

原创 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); }

原创 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写在标

原创 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&

原创 css之background属性

属性解释：background属性是css中应用比较多，且比较重要的一个属性，他是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：background-color：设置背景颜色background-image：设置背景图片background-repeat：设置背景图片如何重复平铺background-position：设置背景图片的位置background-attachment：设置背景图片是固定还是随着页面滚动...

原创 css定位

我们使用css中的position属性来设置元素的定位类型，position的设置项如下：relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。absolute 生成绝对定位元素，元素脱离翁当了，不占据文档流的位置，可以理解为漂浮在文档流的上方，相当于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮再文档流的上方，相对于浏览器窗口进行定位。sta

原创 css浮动 与 清除浮动

原创 块元素、内联元素、内联块元素

原创 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会加到外边的盒子上，导

原创 css盒子模型

原创 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

原创 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

原创 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>...

原创 HTML常用标签和属性

html常用标签及属性介绍1、image标签<image src="文件路径" alt="提示信息"/>2、a标签<a href="#" title='提示信息' target='页面跳转方式'/><!--torget标签的属性有'_self'和'_blank' 分别对应链接网页代替原网页和重新打开一个网页-->3、label标签<label for="input标签中的id">用户名：</label><!--label标

原创 tensorboardX可视化

最近用tensorboardX可视化论文中的一些数据，然后找相关内容，在此记录一下。1、第一步安装pip install tensorboardX2、创建一个writer = SummaryWriter(log_dir='scalar')参数log_dir=‘scalar’，表示生成的文件所存储 的路径。3、记录数据。writer.add_scalar('loss', loss, epoch)，第一个参数表示生成图表的名称，第二个和第三个简单理解就是图标的纵坐标和横坐标。记录完数据以后运行发现一个C

原创 Django引用静态页面格式css,js

背景最近做Django项目出现一个问题，就是Django中把静态页面和页面格式同时放入templates模板目录下，在服务器上运行发现格式文件不显示，经过一系列搜索最终解决问题。第一步建立一个静态文件夹static，然后把格式对应的静态文件放入该文件夹下。然后去项目的配置文件setting.py中引入这些静态文件。STATIC_URL = '/static/' # 配置文件最后有，没有的话手动添加STATIC_ROOT = os.path.join(BASE_DIR, 'static')

原创 scrapy爬虫框架基本使用

1、创建scrapy项目一般使用 scrapy startproject firstblood(项目名称) 创建。创建完以后的结果如图：2、爬虫文件的创建创建完项目，我们可以看到一个spiders的文件夹，爬虫文件都是创建在这个文件夹下，创建爬虫文件一般也使用命令scrapy genspider first www.xxx.com，创建完成以后的基本页面如图，我们一般将allowed_domains = ['www.xxx.com']这行代码注释掉，原因是因为，我们可能爬取的文件并不是以www.xx

原创 Scrapy 安装步骤

Scrapy 安装步骤