Web_front-优快云博客

原创前端swiper实现轮播图

1.普通的轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...

2019-12-22 15:26:18 1350

原创前端echarts框架实现饼状图、柱状图和折线图

1.饼状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta htt...

2019-12-22 15:10:50 4896 1

1. 开始 React 是一个用于构建用户界面的 JavaScript 库。你可以在首页或教程中学习什么是 React。 1.1 React是什么？ React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。 React 中拥有多种不同类型的组件，我们先从 React.Component 的子类开始介绍： class ShoppingList extends React.Comp

2020-06-09 23:34:04 272

原创微信小程序云开发知识

1. 开通云开发新建项目时，选择使用云服务控制台会提示一个错误，如下：选择“云开发”之后开通云开发，如下：点击确定，开通云开发创建完成之后，如下 2. 测试云开发新建的使用云服务的项目，就是使用云开发的案例 2.1 获取openid openid是用户的一个唯一标识点击下面选项，可以测试第一次使用，报如下错误原因分析：观察代码，发现此按钮对应的事件代码如下：由于刚才只开通了云开发，云环境中，还没有任何云函数解决方案创建云函数（需要先选择云环境，如下：）把你的

2020-05-27 23:36:11 363

原创微信小程序

1.安装微信开发者工具 1.1 浏览器搜索“微信官方文档小程序”进行安装如下图所示： 1.2 点击稳定版进行下载 1.3 选择多少位依次点击下一步进行安装，就ok啦！安装完如下图标所示： 2. 双击打开，微信扫码进行登录、创建然后选择文件新建项目，创建好项目显示如下页面：然后点击上传按钮，进行下面操作。 1.5 在微信公众平台（小程序）后台进行版本管理设置开发版本，然后可以进行手机端实际体验 1.6 成员管理可以增加体验成员，最多15个关联账户，添加上的体验成员才有资格进行手机

2020-05-26 22:15:41 366

原创 Vue移动端—登录的业务流程总结

登录业务流程判断用户是否登录第一次登录的时候，前端调后端的登陆接口，发送用户名和密码，后端收到请求，验证用户名和密码如果想点进我的页面，没有登录的话，会自动跳转登录页面，前端可根据后台返回的信息，在路由跳转中做判断。因为在这里使用的 axios做vue的请求模块，所以项目采用的是在请求拦截模块中根据后台返回的登录状态码进行判断，客户端输入手机号，点击验证码，进行登录，服务端对手机号，验证码进行验证，验证通过，则说明登陆成功，根据当前用户信息，生成了token，将token信息以cookie形式返回到了

2020-05-12 23:48:11 1463

原创关于Vue项目的优化

一、console的移除开发阶段，我们会编写大量的 console 语句用于测试使用 build 命令打包时，会作为警告提出，因为上线之后，这些 console 语句是没有任何作用的，所以警告你应该移除挨个文件手动删除的方法，会有两个问题耗时耗力代码中其实还是需要console的，只是打包后，希望生成的文件中不包含而已解决的办法比较多 babel-plugin-transform-r...

2020-04-29 23:20:33 378

原创 Web前端面试题

为了满足面试问题，以下就是各面试问题的总结：请点击链接打开：http://blog.poetries.top/FE-Interview-Questions/base/#_29-stylus-sass-less%E5%8C%BA%E5%88%AB：

2020-04-29 22:28:03 318

原创把项目推到码云上时报fatal: not a git repository (or any of the parent directorie site:blog.youkuaiyun.com错误

Git错误提示之：fatal: Not a git repository (or any of the parent directories): .git 产生原因：一般是没有初始化git本地版本管理仓库，所以无法执行git命令解决方法：操作之前执行以下命令行: git init 然后执行一下git status查看状态信息，good，问题解决。 ...

2020-04-10 23:16:36 400

原创 Node.js中的异步编程

1. 同步API,异步API 同步API：只有当API执行完成后，才能继续执行下一个API console.log('before'); console.log('after'); 异步API：当前API的执行不会阻塞后续代码的执行 console.log('before') setTimeout( ()=>{consloe.log('last'); ...

2020-03-11 21:06:33 305

原创改变this指向的方法

1、call方法语法：函数名.call(调用者，实参1…) 作用：函数被借用时，会立即执行，并且函数体内的this会指向调用者(借用者) 代码： 1 function fn(name, age) { 2 this.name = name; 3 this.age = age; 4 console.log(this == obj); //==>true 5 } ...

2020-03-02 21:13:26 258

原创函数内部this的指向

1、函数也是对象函数的创建==>底层都是new关键字创建函数函数声明： function sum(a,b){ console.log(a+b); } 函数表达式： 1 var sum = function sum(a,b) { 2 console.log(a + b); 3 } new关键字创建函数 1 // 语法：var 变量名 = new Function ...

2020-03-02 21:05:08 371

原创 call(),apply(),bind()的异同

call(),apply(),bind()的异同大家都知道在函数中，最耐人寻味的就是prototype属性了，对于ECMAScript中的引用类型而言，prototype是保存它们实力方法的真正所在。诸如toString()和valueOf()等方法都保存在prototype名下，只不过是通过各自对象的实例访问。在创建自定义引用类型以及实现继承时，prototype属性的作用是极为重要的。每...

2020-02-27 21:14:00 211

原创前端面试题第一季

1. JS面试题 1.1 javascript的原始类型由哪些 boolean null undefined number string symbol 原始类型存储的都是值，是没有函数可以调用的给一些原始数据类型调用方法的时候,js 给这些原始数据类型隐式转换了，所以有一些原始数据类型可以使用方法，但是它在使用这些方法的时候已经不是原始类型了 1.2 typeof和instance...

2020-01-03 14:48:34 282

原创码云

码云因为 github 网站的服务器在国外，所以国内访问经常会出问题可以选择国内的类似 github 的网站 https://gitee.com/ 1. 如何利用码云团队协作开发 A 同学在本地创建项目并初始化仓库后，执行如下及不做操作添加改变到暂存区 git add index.html 提交版本 git commit -m '注释' 推送更新 git push https://gi...

2020-01-03 14:11:01 265

原创 github

github https://github.com/ 1. 注册 2.团队协作开发 2.1 A创建本地仓库创建文件夹 game-demo 使用如下命令初始化仓库 git init 使用 VS Code 打开此项目，新建 index.html ，编写如下代码 <!DOCTYPE html> <html lang="en"> <head> <meta...

2020-01-03 11:52:32 614

原创 git分支

分支分支其实不是代码的一份拷贝当我们使用 git init 命令初始化仓库时,git 就会创建一个叫做 master 的分支作为我们项目的主分支在开发代码时，不建议直接在主分支上编写代码，而是先在一个其他分支上编写代码，代码编写并测试通过后，再将这个分支上的代码合并到主分支上这样，主分支上永远保存着正确的代码 1 创建分支首先使用git branch命令查看当前项目中有哪些分支发现只...

2020-01-03 11:35:02 330

原创 git软件应用

1. 配置 git安装好之后，首先执行配置，设置姓名和邮箱在电脑的任意位置，点击鼠标右键，选择“git bash here” 2. 创建git仓库 2.1创建项目跟我们以前写代码一样，都是先创建一个文件夹，作为项目的根目录 2.2 初始化仓库我们如果希望当前项目被git管理起来，只有这样，git 才能够跟踪我们项目当中所有的文件的变化，记录文件的变化，我们才可以使用git恢复...

2020-01-02 20:55:26 358

原创项目常见属性

项目常见属性 flex 项目占的份数 align-self 控制子项自己在侧轴的排列方式，前面的align-items 和 align-content 是对所有子项应用相同的排列方式，而这个属性是对单个子项应用个性化的排列方式 order 定义项目的排列顺序（前后顺序） 1. flex 定义子项目分配剩余空间，用 flex 属性表示占多少分分配的容器的剩余空间会增加到元素的宽度上项目...

2019-12-26 15:42:48 1224

原创移动端flex弹性布局容器常用属性

容器常用属性下列属性用于设置容器，也就是父盒子 flex-direction：设置主轴的方向，也就是项目横向排列还是纵向排列 justify-content：设置主轴上的子元素的排列方式 flex-wrap：设置子元素是否换行 align-content：设置侧轴上子元素的排列方式（多行） align-items：设置侧轴上的子元素排列方式（单行） flex-flow：复合属性，相当于同时设置...

2019-12-26 15:37:44 603

原创 flex弹性布局

1. 传统布局与flex布局传统布局：兼容性好布局繁琐局限性，对移动端的支持不好 flex弹性布局：操作方便，布局极简单，移动端应用广泛 PC端浏览器支持情况较差 IE11或更低版本，不支持或仅部分支持建议： PC端页面，使用传统布局移动端页面或者不考虑兼容性问题的PC端页面布局，使用flex弹性布局 2. 给父元素盒子div加入弹性布局后，...

2019-12-26 11:27:30 474

原创移动web开发

移动web开发 1.像素 1.1 什么叫做物理像素比如，手机像素是1792×828分辨率，就是手机屏幕横向828个点，手机屏幕纵向上有1792个点，同等大小屏幕下，点越多，图像显示越精信。上面所说的屏幕上一个个点就是物理像素（phy sical pixel）,物理像素也叫设备像素（dp:device pixel）。其实，每个像素就是一个点，每个点由红绿蓝三种色组成，只需要控制每个点每种颜色...

2019-12-23 21:07:43 272

原创容器和网格系统类名汇总

1、容器： container 固定宽度，不同尺寸固定了不同的宽度 container-fluid 100%宽度 2、阴影： shadow-none 无阴影 shadow-sm 小阴影 shadow 普通阴影 shadow-lg 大阴影参数-完整案例 shadow-lg p-3 mb-5 bg-white rounded 设置大阴影 3、...

2019-12-19 14:32:13 728

原创 bootstrap4常用样式类名

bootstrap4 常用样式类名（供自己参考） 1、容器和网格系统容器 container 固定宽度，不同尺寸固定了不同的宽度 container-fluid 100%宽度栅格系统 cal-xs//<768px cal-sm //>=768px cal-md //>=992px cal-lg //>=1200px 2、字体颜色及背景颜色字体 text-muted ...

2019-12-16 21:34:53 1577

原创 PHP中require与include的区别

1. require 常用于引入重要的文件，若引入失败会直接影响到当前整个脚本（影响后续代码执行），引入失败报Error（严重）错误。 2. include 常用于引入普通文件，若引入失败不会对当前脚本有较大的影响（不会影响到后续代码的执行），引入失败报Warning（警告）错误。 3. require_once 避免重复引入，其他规则同require 4. include_once 避免...

2019-12-15 23:38:23 214

原创 laravel框架实现分页效果

一、index.html里的代码 1. 页码进行渲染 //渲染页码 function loadPage(pageCount){ //清空原有的分页标签 $('.pagination li').remove() //上一页 var pre=`<li> <a href="#" aria-label="Previous"&gt...

2019-12-12 23:40:11 1007

原创前后端分离开发中的laravel

在实际的开发当中，前端和后端的开发会同步进行后台人员新建laravel项目，编写控制器和模型（视图），用于向前端同学提供数据，或者收集前端同学提供的数据前端人员新建web或者android或者ios 等项目，用于获取后台人员提供的数据，渲染界面前端和后端程序之间使用 ajax 的方式交互数据 1. 新建项目新建前端项目 news_client 和后端laravel项目 news_se...

2019-12-11 21:12:49 1536

原创 jquery刷新页面

下面介绍全页面刷新方法：有时候可能会用到 window.location.reload()刷新当前页面. parent.location.reload()刷新父亲对象（用于框架） opener.location.reload()刷新父窗口对象（用于单开窗口） top.location.reload()刷新最顶端对象（用于多开窗口）下面再介绍一些javascript基本函数 1.document....

2019-12-09 23:01:00 335

原创 Laravel框架实现案例之文章类型CRUD（增删改查）

文章类型CRUD 1. 生成数据库 1.1 创建数据库迁移文件 php artisan make:migration create_post_types_table 1.2 运行数据库迁移 php artisan migrate 2. 创建模型 php artisan make:model Post_Type 创建模型注意事项表名为复数形式，模型名称为单数形式表名如果是多个单词组...

2019-12-09 22:46:37 633

原创 Laravel框架实现案例之文章CRUD（文章增删改查）

1. 创建名为news的数据库 2. 创建名为news的项目 PS D:\developer\laravel> composer create-project --prefer-dist laravel/larave/ news 3 配置数据库连接首先在 .env中配置数据库连接信息 DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=33...

2019-12-08 23:45:46 1035

原创 MVC

1.概念理解 MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑 MVC 是一种使用 MVC（Model View Controller 模型-视图-控制器...

2019-12-05 01:42:52 349

原创面向对象之单例模式

单例模式单例模式确保某个类只有一个实例例如：PHP一个主要应用场合就是应用程序与数据库打交道的场景，在一个应用中会存在大量的数据库操作，针对数据库句柄连接数据库的行为，使用单例模式可以避免大量的new 操作。因为每次new操作都会消耗系统和内存的资源。简单一句话就是，为了避免创建多个实例浪费资源，实行单例模式。 1.注意将构造方法定义为private,这样在类的外部就无法通过new的方式...

2019-12-02 18:17:26 290

原创面向对象之static(静态)

static(静态) 静态属性静态方法静态类 1、静态属性在类中使用static修饰在类中使用self::属性名称的方式访问静态属性在类的外部使用对象：：属性名称或者类型：：属性名称的方式访问静态属性只能是标量类型，不能使用表达式、另一个变量、函数返回值或指向一个对象可以不实例化对象而直接访问（类：：属性或类：：方法）不能通过一个类的实例化对象来访问静态属性默...

2019-12-02 16:53:19 383

原创 __autoload()

1、概念 __autoload()方法并不是一个魔术方法，但是这个方法非常有用，当实例化或继承一个不存在的类，会自动调用__autodoad(),同时将该类的类名作为参数。在实际的开发当中，一个类会放到一个专门的php文件中，而且这个文件的名称一般会加class后缀 2、例题 2.1Women.class.php class Women{ publiC function work(){ ...

2019-12-01 20:29:18 288

原创面向对象的三大特征及用法案例

三大特证封装继承多态 1、封装封装可以最大限度的保护类的内部细节，也就是说尽量不让类的调用着知道类的内部都有哪些属性，哪些方法。使用3p修饰符和gusic魔术方法来实现类的封装。 1.1 gusic魔术方法 __get（属性名）：当在类外部访问非公有成员属性时，自动调用，并且，参数传入要获取的成员属性的名称，返回获取的属性值。 __unset(属性名)：当在类的外部销毁非公有成员属性...

2019-12-01 15:36:53 778

原创面向对象编程之类/对象

一、类/对象解说万物皆为对象，每个人类都是一个对象，面向对象的核心就是，让对象帮我们实现功能对象：具有一定功能和特征的单个事物，就是对象类：具有相同功能的特征的对象的抽象，就是类类与对象的关系:对象是类的实例化，类是对象的抽象化。二、定义类与对象实例化定义类时以class开头定义类，类名的首字母要求大写 class School{ //成员属性 ...

2019-11-28 23:38:00 222

Web_front的博客