- 博客(141)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Linux下安装使用MySQL
一、操作流程//安装mysqlsudo apt-get install mysql-server//确认是否启动成功，mysql节点处于LISTEN状态表示启动成功sudo netstat -tap | grep mysql//以root用户登陆进入mysql界面sudo mysql -u root -p//启动mysql服务器service mysql start//关闭mysql服务器service mysql stop//检查数据库运行状态sudo systemct.
2020-11-08 20:15:11
798
原创 学习Vue源码（三） 响应式原理
文章目录一、代码结构上的一些注意点二、Object.defineProperty一、代码结构上的一些注意点在（二）中，render()函数已被实现，但一些地方尚未说明，现在先来扫个尾。首先，回顾一下代码结构：function LnVue( options ) { this._el = options.el; this._data = options.data; this._template = document.querySelector(this._el); this.moun.
2020-11-07 21:15:36
295
原创 学习Vue源码(二）真实DOM与虚拟DOM的转换，函数柯里化
文章目录一、将渲染出的DOM转换为虚拟DOM二、将虚拟DOM转换为真实DOM三、函数柯里化（1）区分模板标签（2）虚拟DOM的render()方法一、将渲染出的DOM转换为虚拟DOMVue为了提示性能而引入了VNode，即虚拟DOM，简单来说，虚拟DOM是一个记录着真实DOM信息的对象，VNode存储在内存中，因为js操作内存的速度远比浏览器渲染刷新真实DOM的时间来的快，因此Vue用VNode来记录页面的变化并映射DOM，最后再反映到页面上。接下来实现将DOM转换为VNode的功能：//再次强调.
2020-11-05 11:10:22
1982
原创 学习Vue源码(一） 仿照vue实现数据驱动功能
文章目录一、Vue的数据驱动二、使用步骤1.引入库2.读入数据总结一、Vue的数据驱动我们最一般的使用Vue的步骤可能如下：（1）编写模板（可能有以下几种方式）直接在HTML中写标签通过使用template通过使用.vue文件（中的template）（2）创建Vue实例（3）把Vue挂载到页面中（mount）而Vue是如何实现数据驱动的呢？Vue将通过this.$options.template获取到模板，二、使用步骤1.引入库代码如下（示例）：import.
2020-11-05 11:09:19
386
原创 better-scroll的使用与封装
在手机端上使用js原生的滚动效果时会有非常卡顿的现象，此时我们可以使用第三方库 better-scroll 来解决该问题。<div class="wrapper"> <ul class="content"> <li>...</li> </ul></div>首先你的html结构需要长这样，用一个大的wrapper套一个唯一个标签，标签中是你希望滚动的内容，当然wrapper与content的名字不是非它不可，你可.
2020-10-22 16:43:26
692
1
原创 axios的使用与封装
一、发送get请求axios({ url:'***', method:'get' //该句可省略，默认是get请求}).then(data => { console.log(data);})axios.get(url).then()//get请求附带参数axios({ url:'url1', params:{ type:'', page:'' }}).then()二、发送并发请求不使用axios的话，发送并发请求有以下方法：（1）通过ajaxl.
2020-10-15 14:37:48
363
原创 Vue cli4除了默认配置外，在项目中可能会用到的配置
一、配置路径别名如果在项目中大量使用 …/…/…/ 这种方式来指定路径，显然不是一个好办法，webpack支持在项目中配置路径别名，具体方法如下：（1）在项目根目录创建vue.config.js文件（2）在该文件中写下如下代码：const path = require('path') // 引入path模块function resolve(dir) { return path.join(__dirname, dir) // path.join(__dirname)设置绝对路径}modul.
2020-10-14 22:48:39
217
原创 vue-router 报错Error: Avoided redundant navigation to current location 的解决方法
问题：启动vue项目后，重复点击路由会报Avoided redundant navigation to current location的错误，虽然不影响运行，但控制台会报错。解决办法：这里想要看情况，网上看到的解决方法大多不全面。如果你是用replace方法更新路由的，那么，在你的路由的index.js中添加如下代码：import VueRouter from 'vue-router'const originalReplace = VueRouter.prototype.replaceVue.
2020-10-14 13:17:58
2385
2
原创 怎样使用django的类视图处理登录注册功能(LoginView,LogoutView,CreateView)
登录注册是一个网站再平常不过的功能，因此Django内置了许多类和方法来帮助我们使开发更便捷，相比较于使用函数的方式来处理登录注册的后端代码，使用类的方式更为便捷方便，如下：urls.py:path('login/', views.LoginUser.as_view(), name='login'),path('register/', views.RegisterUser.as_view(), name='register'),path('logout/', views.LogoutUser.as.
2020-07-10 12:07:44
3809
原创 简单了解响应式开发
一、响应式开发1. 响应式布局web网页开发的页面布局大致出现了以下几类：固定宽度的布局：给网页设置一个固定的宽度，通常以px作为单位，常见于PC端web开发。流式布局：给网页设置一个相对宽度，通常以百分比作为单位。栅格布局：像表格一样对页面进行划分，以每一个划分出的单元格为长度单位，比如bootstrap采用的就是栅格化的布局。响应式布局：通过检测设备信息来决定网页的布局方式，从而使网页可以匹配大部分移动设备和PC端。2. 响应式开发响应式开发的结果将是开发出一个能够在多种设备上都能.
2020-06-23 11:20:57
3079
原创 Less的简单使用
1.定义变量@color = #DC3545;2.样式复用(1) 无参数.box{ color:@color; font-size:15px;}.layout{ .box; /*复用.box的样式*/}(2) 带参数.box(@r:10px){ color:@color; font-size:@r;}.layout{ .box; /*不传入参数默认是10px*/ /* .box(15px); */}3. 样式嵌套.layout{ bac.
2020-06-23 11:16:56
914
原创 在Django中使用ajax的一些注意点
注意url与url.py中的url的绝对一致性。发送到后端的数据可以在request.GET或request.POST中（看你是什么HTTP请求了）ajax默认的是urlencoded编码格式，但它还可以发送application/json格式，但这时你发送的数据就必须是application/json格式，因此不要忘了序列化的转换。区分contentType与dataType，contentType是指定ajax发送的数据的格式，dataType指定ajax从后端接受到的数据必须是什么类型。da..
2020-05-13 14:51:40
317
原创 Django 绝对可以成功的通过cropper.js实现的头像上传功能
说实话，给Django项目加上可以上传头像的功能真的是花了我不少时间，差不多前后折腾了两天，期间也在网上找了很多很多，很多很多的例子，但是几乎无一例外在我这里都行不通，要么是点击提交按钮无反应，要么是报一些奇奇怪怪让我难以解决的错误，要么是大神写的代码实在是看不明白，连复制粘贴都胆战心惊，更不要说二次改造了。嘛，人菜就不得不瞎折腾，所幸，最后居然侥幸成功了，所以特地心情澎湃的写篇博客，记录一下...
2020-05-02 23:25:05
530
原创 深入理解什么是Beta分布
例一Beta分布是一种描述概率的概率分布，这句话可能有些绕口，看一个例子：以抛硬币为例，如果硬币是均匀的，并且正面朝上的概率记为p（p=0.5），那么每一次抛硬币都可以看做是一次伯努利实验，它服从0-1分布；如果我们把硬币抛了n次，并且想要计算，在这n次当中，硬币正面朝上的次数的概率，那么它应该是服从 X~B(n,p) ，即二项分布。二项分布可以看做是多次重复进行伯努利实验所得到的分布。...
2020-04-17 17:38:12
22233
3
原创 简单了解伽马函数
我们把形如下面这样的函数叫做伽马函数：因为对t的积分最后会得到一个数值，因此上式是一个关于x的函数，易证当x>0时，该函数是收敛的。要学会识别什么样的函数是伽马函数，同时对于一个伽马函数，要能够快速的得到它是伽马(?)的函数。...
2020-04-17 14:25:15
9707
原创 本福特定律
一堆从实际生活得出的数据中，以1为数字首位出现的概率约为总数的三成，而并不是我们靠直觉得出的 1/9 ，这就是本福特定律。比方说，我们从1开始计数，1，2，3，4，5 …一直这么数下去，当我们数累了不数了，比方说我们数到19就不数了，那么显然以1为数字首位的数出现的概率要远远大于其它数，如果我们数到29不数了，那么显然以1或者以2作为数字首位的概率要远远大于其它数。意思就是，数字次序越靠后的，...
2020-04-16 14:02:02
2180
原创 axios
npm install axios --save//axios的简单使用axios({ url:'', method:''}).then()axios.get( url:'', ...).then()axios.post().then()//axios处理并发请求axios.all([axios({ url:'', //... }), axios...
2020-04-02 18:22:12
94
原创 如何使用Vuex
npm install vuex --save-dev //安装vuex// src/store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.store({ state:{ }, mutation:{ }, action:{ }, g...
2020-04-01 17:50:49
118
原创 什么是Vuex？
Vuex是一个专门为Vuejs开发的状态管理模式，它采用集中式存储管理应用的所有组件状态，然后巴拉巴拉…好了，用概念来解释概念那是大佬做的事，Vuex说白了就是一个保存多个组件的公共变量（你可以暂时把状态理解为变量）的一个对象，把这个对象封装在顶层的Vue实例中，以后不管哪个组件想用这些变量，都可以直接从中获得，或者是向其中写入新变量。为什么要有这个东西呢？倘若现在你开发了许多个组件，组件1...
2020-03-31 21:51:04
881
原创 vue简单案例 编写一个移动端底部导航栏
效果图：src源码目录结构：//TabbarItem.vue<template> <div class="tabbar-item" @click="itemclick"> <div v-if="!isActive"><slot name="item-icon"></slot></div> &l...
2020-03-30 17:39:05
1790
2
原创 vue-router keep-alive
keep-alive是Vue内置的一个组件，它可以使被包含的组件保留状态，或避免重新被渲染。在vue-router中，我们使用router-view组件来显示内容时，你会发现随着页面被刷新，之前的页面并没有缓存下来，也就是哪怕是一些页面用户曾经浏览过，但当再次点击链接回到该页面时，该页面上曾经被执行过的一些状态也不会被保存。换句话说，就是一旦用户使用这个页面，该页面对应的组件就会被创建，而一旦...
2020-03-29 21:53:44
154
原创 vue-router 导航守卫
考虑一下这个需求：当页面发生跳转时，自动更改页面的标题。比如跳转到home页面，标题改为首页，跳转到about页面，标题改为关于。首先，可以通过生命周期函数实现这个需求，但使用生命周期函数的话，需要在每一个组件中都添加实现代码，如果组件过多的话，这将不是一个好的选择。这时，就可以考虑使用导航守卫的功能。什么是导航守卫呢？导航守卫对全局跳转进行监听，并且可以根据你的需求在跳转时执行一些代码。...
2020-03-29 21:13:31
115
原创 vue-router参数传递
params方式：//index.jsroutes = [ { path:'/user/:userId', component:User }]//App.vue<router-link :to="'/user/' + userId">用户</router-link>//获取path中的信息this.$route.params.userId ...
2020-03-29 17:08:43
141
原创 vue-router 路由的懒加载
首先需要知道，当我们用 npm run build 去打包项目的时候，在生成的dist文件中，它会按照内容分成一个个独立的文件，比如css、js等，其中，在js文件下，默认会生成三种类型的js文件以及相对应的js.map文件，分别是：app.js //自己写的业务逻辑代码manifest.js //提供底层支撑服务的js代码vendor.js //第三方引用的js代码随着我们项目的...
2020-03-29 14:29:46
143
原创 使用vue-router
#1 安装vue-router：npm install vue-router --save#2 在src文件夹下新建router目录，在该目录下新建一个index.html文件#3 在刚才创建的index.html文件中写入如下代码：import VueRouter from 'vue-router'import Vue from 'vue'// 1. 通过vue.use(插件...
2020-03-29 00:12:46
102
原创 url的hash和HTML5的history
前端路由的核心就在于更改url，页面不刷新，如何做到这一点呢？第一种方法是改变url的hash值。location.href>>> http://localhost:8080/#location.hash = 'foo'>>> http://localhost:8080/#/foo改变hash值，页面不刷新，页面会根据前端的路由映射关系找到相应...
2020-03-28 17:57:41
477
原创 后端路由、前后端分离、前端路由
后端路由阶段因此，后端路由都是由服务器来生成页面，然后返回给客户端，这种方式渲染的页面，不需要单独再加载js或css代码，可以直接交给浏览器显示。缺点就是 后端开发人员的任务太多太杂，而前端要想处理这部分工作，就必须学习额外的技术，比如Java、PHP等；另外，HTML代码与数据混合在一起，造成逻辑混乱。前后端分离阶段这种模式显然没有路由的概念，因为数据都是通过ajax请求获得。...
2020-03-28 14:47:23
1385
原创 Vue CLI3.x以上版本怎么修改配置
Vue CLI3.x版本之后，大部分的webpack配置都被隐藏了起来，但有时我们可能会需要修改这些配置，这里介绍三种方法。vue ui在终端输入 vue ui 指令打开Vue项目管理器；可以看到，我们可以通过项目管理器来管理项目，创建项目，或者导入项目。这里因为我们是要修改原有项目的配置，所以选择导入项目，找到我们希望修改配置的Vue项目，然后导入；在如下界面修改配置：在项...
2020-03-27 16:15:12
516
原创 Vue CLI 项目目录结构
npm install -g @vue/cli //安装CLInpm install -g @vue/cli-init //安装桥接工具，拉取CLI旧版本vue init webpack myproject //vue2.x版本初始化项目vue create myproject //vue3.x以上版本初始化项目Vue2.x初始化项目过程：vue init webpack v...
2020-03-26 23:27:12
200
原创 Vue runtime+compiler 与 runtime-only 的区别
在用Vue脚手架快速搭建一个项目时，在初始化时有一个选择runtime+compiler还是runtime-only的选项，那么这两个配置有什么区别呢？如下图，当一个Vue程序被运行时，一般它会经历如下过程。#1 template加载如vm.options中#2 解析为ast（抽象语法树）#3 编译为一个render()函数#4 渲染为虚拟DOM#5 渲染为真实DOM（呈现出UI界...
2020-03-26 22:00:23
192
原创 webpack的使用（二）
使用plugin#1 通过npm安装相应的plugin#2 在webpack.config.js的plugins中配置插件BannerPlugin//webpack.config.jsconst webpack = require('webpack')module.exports = { ... plugins:[ new webpack.BannerPlugin("...
2020-03-24 22:15:43
88
原创 Vue的分离写法
首先需要知道，在Vue根实例下，template 中的内容会自动嵌入到 el 挂载的HTML块中。//即本来是这样:<div id="app"> <h2>{{message}}</h2></div>new Vue({ el:'#app', data:{ message:'Hello,VueJs!' }})//可以修改成这...
2020-03-24 16:55:28
987
原创 webpack配置vue
配置vue：npm install --save vueimport Vue from 'vue'仅仅是这样还不够，这样在使用Vue时会出现runtime-only错误，因为Vue分为runtime-only（代码中不允许有template）与runtime-compiler（代码中允许template）。因此还需要一些配置：//webpack.config.jsmodule.e...
2020-03-24 16:38:10
122
原创 webpack的使用（一）
entry与output//直接给出entry与outputwebpack ./src/.main.js ./dist/bundle.js配置文件：webpack.config.jsconst path = require('path'); //使用Node模块需要事先npm init，生成package.jsonmodule.exports = { entry:'./src/m...
2020-03-24 09:32:15
88
原创 前端模块化
当多人开发同一项目时，很容易就会产生命名冲突的问题，尤其是js文件，任何的js引入顺序的打乱都可能导致项目运行失败，为了解决命名冲突的问题，在ES6之前，可以使用函数闭包来解决这个问题。即可能像这样：;(function () { var flag = true; function add(num1,num2){ return num1 + num2 } //...})()...
2020-03-21 14:44:18
104
原创 Vue学习笔记 （插槽）
一、入门在Vue中，需要了解应用、实例以及组件之间的关系。每个Vue应用都是通过创建一个新的Vue实例开始的，通常，一个Vue应用由一个Vue根实例，以及多个可选的、嵌套的、可复用的Vue组件构成。data当一个Vue实例被创建时，它会将data中的所有属性加入到Vue的响应式系统中，这些属性一旦被再度更改，视图将产生响应，即匹配更新为新的值。data = {a:1}var vm ...
2020-03-20 18:10:22
97
原创 使用link rel="shortcut icon"为网页标题加图标
使用link rel="shortcut icon"为网页标题加图标HTML rel 属性
2020-03-12 10:18:08
899
原创 详细说明基于 Bootstrap4 编写 一个响应式导航栏
风格一：<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collaps...
2020-03-11 11:59:34
4613
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人