zerobaek-CSDN博客

原创使用UMI仿今日头条首页

创建UMI项目全局安装uminpm install umi -g全局安装create-uminpm install create-umi -g使用create-umi指令create-umi安装依赖npm i启动项目npm start修改配置文件umi 允许在.umirc.js或config/config.js（二选一，.umir...

2019-09-03 21:09:42 300

原创 react基础

如何将react文件引用到项目上面引入.js文件来使用React缺点：需要用script标签引入外部被拆分的js文件页面，导致页面加载慢，性能低，维护性差通过脚手架工具来编码脚手架工具是前端开发过程中的辅助工具，会自动构建大型项目的开发流程和目录，允许我们以一定的方式实现js文件的相互引用，更方便的对项目进行管理，但是在脚手架里面写的代码不能直接运行，需要脚手架工具帮我们编译，编译出来...

2019-08-20 20:23:15 267

原创模仿京东页面

css样式总结尽量不要使用通配符清除样式，要清除样式在boby标签选择器里面清除，因为通配符会影响子类继承父类的样式导航栏可以用无序列表来做不定宽高的元素，可以使用min-width、min-height 关于伪元素与使用伪元素的元素盒子，伪元素使用定位的时候，元素盒子会作为父元素，伪元素只能使用绝对定位文本不换行，多余字用省略号代替，涉及三个属性white-space、t...

2019-08-12 10:43:12 1029 1

原创 offset、scroll、client三大家族

offsetoffsetHeight、offsetWidth一套方便的获取元素尺寸的办法，可以检测盒子的宽高包括宽高本身，padding，border。不包括marginoffsetHeight = height+padding+border;(不加margin)offsetWidth = width+padding+border;(不加margin)<div cl...

2019-07-31 09:44:32 195

原创 SVN学习

什么是版本控制：版本管理就是管理更新的历史记录，它给我们提供了一些在软件开发过程中必不可少的功能，例如：记录一款软件添加或更改源代码的过程回滚到特定阶段，恢复误删除的文件合并多人协作的文件等多人协同，文件传输版本控制分类：集中式：SVN分布式：GitSVN：SVN 全称 Apache Subversion，是一个开放源代码的集中式版本管理系统。在 2000 年...

2019-06-01 21:41:00 319

原创 vue学习十二：axios学习

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios常用的api：在html代码中添加一些按钮辅助验证：<button onclick="getaxios()">getaxios</button><button onclick="postaxios()">postaxios</butto...

2019-05-22 18:36:46 155

原创 vue学习十一：vuex状态管理模式

为什么要使用vuex：整站有很多数据和状态，由很多组件拼成，组件间可能要共享一些状态，比如登录、注册部分每个页面都要有，数据要进行同步更新，状态很多的时候，通过事件触发也不切实际，所以出现了状态管理vuex 是 Vue 配套的公共数据管理工具，它可以把一些共享的数据，保存到 vuex 中，方便整个程序中的任何组件直接获取或修改我们的公共数据props、data和vuex的区别：V...

2019-04-19 20:55:10 185

原创 es6学习七：Promise

Promise出现的原因：封装一个方法，给一个要读取文件的路径，这个方法要能读取文件，并将内容返回普通读取文件的方式：fs.readFile(path.join(__dirname, './files/1.txt'), 'utf-8', (err, dataStr) => { if (err) throw err console.log(dataStr)})自己封...

2019-04-15 16:23:45 112

原创 vue学习十：基于 Vue.js 的移动端组件库Mint-UI的学习

Mint-UI官方文档安装：# Vue 1.xnpm install mint-ui@1 -S# Vue 2.0npm install mint-ui -S在main.js导入所有的 MIntUI 组件：// 导入 Mint-UIimport MintUI from 'mint-ui' //把所有的组件都导入进来// 这里可以省略 node_modules 这一层目...

2019-04-11 16:43:53 269

原创 react学习七：ant design的简单使用

ant design官网安装包：npm install antd --save导入包：import { DatePicker } from 'antd'引入样式：import 'antd/dist/antd.css'; 引入样式的时候要注意一个问题，是不是在webpack的配置文件中使用了css模块化，如果使用了css模块化，那么这个引入的样式还是会起不了作用，所...

2019-03-27 21:25:06 338

原创 react学习六：react路由

react-routerreact-router-dom路由的基本使用安装包yarn add react-router-dom导入路由模块import ReactDOM from 'react-dom'HashRouter 表示一个路由的跟容器，将来，所有的路由相关的东西，都要包裹在 HashRouter 里面，而且，一个网站中，只需要使用一次 HashRouter 就...

2019-03-27 21:03:34 210

原创 react学习五：升级评论列表案例

CmtList.jsx:评论列表组件import React from 'react'import CMTItem from './CmtItem.jsx'import CMTBox from './CmtBox.jsx'export default class CMTList extends React.Component { constructor(props) { ...

2019-03-26 21:03:55 215

原创 react学习四：React组件

在react学习二： JSX语法的使用这篇文章中有react组件创建的两种方式组件的生命周期:概念：在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件，统称为组件的生命周期组件生命周期分为三部分：组件创建阶段：组件创建阶段的生命周期函数，有一个显著的特点：创建阶段的生命周期函数，在组件的一辈子中，只执行一次；c...

2019-03-26 18:58:28 177

原创 react学习三：渲染评论列表案例

JS打包入口文件main.js：// 导入 React包import React from 'react'import ReactDOM from 'react-dom'// 导入评论列表组件import CommentList from './components/comment1/CommentList.jsx'ReactDOM.render(<div> &l...

2019-03-24 20:28:42 287

原创 react学习二： JSX语法的使用

JSX语法出现的原因：为了在项目中不用老是使用 React 提供的 JS API 来创建虚拟DOM节点，于是React 官方，就提出了一套 JSX 语法规范，能够让我们在 JS 文件中，书写类似于 HTML 那样的代码，快速定义虚拟DOM结构JSX：符合 XML 规范的 JS 语法JSX的原理：JSX内部在运行的时候，也是先把类似于HTML 这样的标签代码，转换为了 Reac...

2019-03-21 20:32:11 1195

原创 react学习一：react基础知识

React与vue.js的对比组件化方面什么是模块化：从 **代码** 的角度，去分析问题，把我们编程时候的业务逻辑，分割到不同的模块中来进行开发，这样能够**方便代码的重用**；什么是组件化：从 **UI** 的角度，去分析问题，把一个页面，拆分为一些互不相干的小组件，随着我们项目的开发，我们手里的组件会越来越多，最后，我们如果要实现一个页面，可能直接把现有的组件拿过来进行拼接，就能...

2019-03-20 19:38:46 344

原创 webpack学习二

新建一个项目my-webpack-senior初始化项目：npm init -y使用yarn装jquery:yarn add jquery --save继续安装包依赖：yarn add webpack-cli --save--devyarn add webpack --save-devyarn add webpack-dev-server html-webpa...

2019-03-18 21:08:30 690

原创 react学习前准备二：移动App开发环境搭建

环境变量的使用作用：将需要全局使用的工具或者应用程序，配置到Path环境变量中，可以很方便的通过命令行的形式，在任何想要运行这些应用程序的地方，运行它们安装最新版本的java jdk安装jdk包修改环境变量，新增`JAVA_HOME`的系统环境变量，值为`C:\Program Files\Java\jdk1.8.0_74`，也就是安装JDK的根目录修改系统环境变量`Path...

2019-03-16 16:25:39 521

原创 react学习前准备一：移动App的初了解

什么是前端混合移动App苹果上的软件是如何开发出来的：使用的是 OC、或者使用Swift这门语言安卓平台上的软件又是如何开发出来的：使用安卓相关的语言开发的，Java，安卓的控件进行开发苹果和安卓平台上共有的软件是如何开发出来的：两组开发人员分别进行软件开发前端移动 App（Application）开发技术，去开发手机端的应用程序；前端的混合移动App开发技术，并没有使用苹果...

2019-03-14 19:36:08 239

原创 webpack与vue的结合使用

在普通网页中如何使用vue：1. 使用 script 标签，引入 vue 的包2. 在 index 页面中，创建一个 id 为 app div 容器3. 通过 new Vue 得到一个 vm 的实例在webpack 中尝试使用 Vue：将vue安装为运行依赖cnpm install vue --save-devza在main.js中导入Vue的构造函数i...

2019-03-13 16:54:50 1567 1

原创 es6学习六：export default 和 export 的使用方式

上接文章webpack与vue的结合使用在node学习四：模块化中提到过：在Node中使用 var 名称 = require('模块标识符')module.exports 和 exports 来暴露成员在 ES6中，也通过规范的形式，规定了 ES6 中如何导入和导出模块ES6中导入模块，使用 import 模块名称 from '模块标识符' import '标识路径...

2019-03-13 16:43:23 1316

原创 vue学习九：render方法渲染组件

vm实例挂载位置：<div id="app"> <p>444444</p> </div>组件模板对象：var login = { template: '<h1>这是登录组件</

2019-03-12 17:25:36 802

原创 vue学习八：watch、computed、methods选项

将firstname和lastname名称拼接案例（不使用watch选项，使用keyup事件）：vm挂载位置，使用keyup事件监视文本框数据的改变： <div id="app"> <span>firstname</span> <input type="text" v-model="firstname" @keyup=&qu

2019-03-12 16:46:42 111

原创 vue学习七：vue路由

什么是路由后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（...

2019-03-12 11:35:20 745

原创 vue学习六：vue组件

什么是组件组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；组件化和模块化的不同模块化是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；组件化是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；全局组件定义的三种方式<div id="...

2019-03-10 23:04:36 209

原创 vue学习五：vue动画

不使用vue动画实现动画效果：首先设置vue对象装载位置的html代码：<div id="app"> <input type="button" value="toggle" @click="flag=!flag">  <h3 v-if=&

2019-03-08 16:40:53 208

原创 webpack学习一

网页中的静态资源：JS：.js .jsx .coffee .ts（TypeScript 类 C# 语言）CSS：.css .less .sass .scssImages：.jpg .png .gif .bmp .svg字体文件（Fonts）：.svg .ttf .eot .woff .woff2模板文件：.ejs .jade .vue网页中引入的静态资源多了会存在什么问题：...

2019-03-07 15:09:29 335

原创 vue学习四：vue-resource 实现 get, post, jsonp请求

vue-resourcevue-resource 的配置步骤：直接在页面中，通过`script`标签，引入 `vue-resource` 的脚本文件；注意：引用的先后顺序是：先引用 `Vue` 的脚本文件，再引用 `vue-resource` 的脚本文件；<script src="./lib/vue-2.4.0.js"></script><!-- 注...

2019-02-08 23:00:19 608 2

原创 vue学习二：vue指令

v-cloak：使用 v-cloak 能够解决插值表达式闪烁的问题，不使用v-cloak的话，在用户网速不理想的时候，页面加载时会先直接显示{{message}}，然后再显示数据。<div> {{ message }}</div>因为这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如[v-cloak] { display: none } ...

2019-01-24 23:55:43 224

原创 vue学习三：vue的生命周期

Vue生命周期：什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！生命周期钩子：就是生命周期事件的别名而已；生命周期钩子 = 生命周期函数 = 生命周期事件主要的生命周期函数分类：创建期间的生命周期函数： beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性...

2019-01-24 23:54:32 257

原创 vue学习小案例（一）：品牌列表案例

演示目标区域代码（#app）：用户进行添加查询操作的区域：<div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加品牌</h3> </div> &lt

2019-01-22 00:22:18 5531

原创 vue学习一：vue基础知识

提高开发效率的发展历程：原生JS（存在兼容性问题，开发效率低） -> Jquery之类的类库（轻量级脚本语言、css兼容性、跨浏览器，但是还是有频繁操作DOM元素的缺点） -> 前端模板引擎（出现重绘和重排的问题） -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，只需要关心数据的业务逻辑，...

2019-01-14 22:35:22 407

原创 Git学习一：认识、安装、使用Git

什么是Git?Git是一款源代码管理工具(版本控制工具)为什么要管理源代码：人工的去处理不同的版本，做相应备份会很麻烦。其他的源代码管理工具有：svn,vss,vcs......Git交互协作流程：Git安装：git官网下载安装程序随便选一个文件右击鼠标会看到如下图中的内容就表示安装成功其中GUI表示Git的图形化操作界面Bash表示Git的...

2019-01-08 23:55:52 147

原创 node学习二十：调用非本地服务器的第三方接口（查询天气）

针对第三方接口进行二次封装扩展天气查询功能weather.js：导入模块：const http = require('http');导出查询天气封装好函数：exports.queryWeather = (cityCode,callback) => { let options = { protocol : 'http:', ho...

2018-12-20 21:36:54 774

原创 node学习十九：从服务器主动发送请求（基于核心模块主动发送请求）

从服务器主动发送请求http.request(options[, callback])获取百度首页信息：导入模块：const http = require('http');const path = require('path');const fs = require('fs');options 请求内容信息：let options = { hostname ...

2018-12-20 20:53:26 746

原创 node学习十八：基于后端接口的前端渲染的应用（图书管理系统）

因为使用express提供的后台接口，可以使服务器端处理完数据后交给前端渲染到页面，而不是让服务器端完整的提供一个页面，涉及到前后端交互，将会使用到ajax后台的数据处理：router.js:导入需要使用的模块：const express = require('express');const service = require('./service.js');const ro...

2018-12-20 17:23:35 440

原创 node学习十七：基于后台接口的前端渲染

两种常用的开发模式：后台渲染：通过浏览器发送请求，服务器端向浏览器端返回的是一个完整的页面基于后台接口的前端渲染：服务器端只提供数据，不提供完整的页面后台接口开发导入模块：const express = require('express');const db = require('./db.js');const app = express();express提供的js...

2018-12-17 19:23:26 293

原创 node学习十六：实现前端+后端+数据库互通

实现登录验证功能login.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录</title></head><body&

2018-12-14 21:21:18 729

原创 node学习十五：node.js操作数据库

通过node.js操作数据库的进行增删改查操作，需要借助一个包：mysql自定义一个包mydb创建入口文件index.js安装mysql：npm install mysqljs/mysql编写入口文件index.js（操作数据库基本步骤）：加载数据库驱动：const mysql = require('mysql');创建数据库连接：const connec...

2018-12-14 19:22:59 945

原创 node学习十四：node图书管理系统项目

目录结构：自定义一个包bookMan：npm init -y安装所需要的功能模块：npm install express art-template body-parser express-art-template --save在index.js文件里面完成主体配置:导入模块：const express = require('express');const t...

2018-12-13 16:56:17 797

空空如也

空空如也