库库好困-CSDN博客

原创 vue第13天：使用Vue脚手架搭建项目、项目介绍、产品开发流程、创建项目、使用Git管理项目、创建login组件-配置路由、项目基础：公共样式处理、在线图标库、rem插件配置、目录别名的配置

vue 脚手架使用脚手架搭建项目全局安装yarn global add @vue/cli 如果装不上 => 用 npm i @vue/cli -gvue -V 查看版本创建项目vue create 项目名先cd到项目目录, 再启动:yarn serve / npm run serve脚手架中配置webpack新建 vue.config.js 自动启动浏览器, 配置了端口号vue.config.js 中配置的内容, 会覆盖默认 vue-c

2020-09-07 17:43:44 405

原创 vue第14天：昨天的补充说明，项目基础配置：公共样式、rem插件以及配置、目录别名配置，登录页：布局、封装输入框以及按钮组件：基本结构、传参处理、校验规则、输入框提示信息的显示和隐藏

补充说明自动保存关掉vscode 左上角 => 自动保存不要勾以后注意: ctrl + s 保存代码缩进用两格缩进默认自动补逗号, 在 .prettierrc 加一行配置代码{ "semi": false, "singleQuote": true, "trailingComma": "none"}vue create 创建项目失败, 报错原因: node-sass 仓库资源下载失败, 默认这个资源在国外解决:yarn config

2020-08-09 11:40:50 498

原创 vue第12天：webpack处理Vue，webpack项目中路由的配置，Vue脚手架的使用 vue-cli：介绍、基本使用、步骤、目录说明，单文件组件的基本概念

webpack处理vuevue单文件组件的介绍single-file components(单文件组件) ，文件扩展名为 .vue 的文件，需要安装vetur插件以前定义组件非常麻烦, 需要写 template模板, 在里面需要写模板字符串, 但有了单文件组件就不用了单文件组件文档优势：完整语法高亮CommonJS 模块组件作用域的 CSS单文件组件的结构说明<template> <div> <h1>这是单文件组件的模板内容</

2020-08-05 20:51:07 429

原创 vued第11天：webpack-loaders的配置：处理css、less、图片、打包输出目录、清除目录插件，webpack开发服务器，生产环境和开发环境，ES6模块化使用

webpackwebpack - loaders 的配置webpack默认只认识 js 文件和 json文件, 但是webpack 可以使用 loader 来加载预处理文件, 允许webpack也可以打包 js之外的静态资源。所以webpack如果要处理其他文件类型, 记得要先配置对应的 loader没有css-loader的报错演示require('./css/base.css')报错图演示:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bxC5UswQ-1

2020-08-04 11:10:27 467

原创 Vue第10天笔记：Vue动画（了解）、yarn命令的安装、webpack：介绍、基本步骤使用、npm中 --save和 --save-dev的区别、scripts的使用、配置到文件中、自动生成插件

前一天复习1. 自定义指令 (1) 定义使用 Vue.directive(指令名, 指令的配置对象) (2) 五个钩子函数 bind inserted update (3) 钩子函数的参数 el 指令所在的元素 binding 指令相关的信息对象 (1) name 指令名 (2) value 指令值 (3) arg 指令的参数 (4) modifiers 指令的修饰符2. 动画 vue中的动

2020-08-03 21:42:53 1096

原创 Vue第9天：路由：底部todos案例、自定义指令：认识、五个钩子函数、钩子函数的参数、自定义指令的使用、Vue动画（了解）：过渡实现、动画实现

复习路由: 1. 基本使用 (1) 下载 (2) 引包 (3) 创建路由实例 (4) 挂载 --------------------------- (5) 配置路由规则 const router = new VueRouter({ routes: [ { path: ..., component: ... } ]

2020-08-03 01:27:59 251

原创 Vue第8天：作用域插槽、单页应用程序与路由、vue-router基本使用、步骤，到安徽那个高亮，路由重定向、编程式导航、动态路由匹配、letao案例操作

前一天复习组件通信1. 父传子(1) 给子组件以添加html属性的方式, 传值(2) 在子组件中, 可以通过 props 接收2. 子传父(1) 在子组件中, 通过触发事件的同时传值this.$emit(事件名, 参数, …)(2) 在父组件中, 给子组件注册对应的事件, 接收参数@事件名 = ‘fatherFn’3. 非父子(1) 先创建一个都能访问到的事件总线 (空的vue实例)const bus = new Vue()(2) 在A组件中, 触发bus的自定义事件, 并传值b

2020-07-31 12:16:39 216

原创 Vue第七天：组建通信：父传子、子传父、父传子复杂类型说明；组件化开发：非父子、开关灯案例；slot插槽：前置说明、基本语法、单个slot、具名插槽

组件通信每个组件都有自己的数据, 提供在data中, data是一个函数, 保证每个组件的数据是独立的封装成组件, 数据没法玩了~组件的通讯: 父传子子传父非父子组件通信 - 父传子需求: 就想要在子组件中使用根组件的msg每个组件都有自己的数据子组件通过prop属性接收父组件通过给子组件加属性方式传值todos 列表渲染练习 - 父传子子组件中希望能用父组件的东西子组件通过 props 接收父组件通过给

2020-07-29 17:10:14 322

原创 vue第6天：过滤器的使用、处理日期格式以及参数问题。Vue的异步dom更新、Vue响应式数据的说明、响应式数据的说明、组件化开发、组件通讯：父传子，子传父，非父子

过滤器过滤器的基本使用vue提供了过滤器的语法, 可以用于格式化文本 (日期)、封装对于字符串操作的过程基本使用 => 让英文转大写定义过滤器Vue.filter(过滤器名字, 处理字符串的函数)这个函数的返回值, 就是处理完成的结果函数的第一个参数，就是需要操作的字符串使用过滤器 {{ msg | 过滤器名字 }}代码演示： <body> <div id="app"> <h1>{{ msg | up

2020-07-27 22:34:43 301

原创 Vue第5天知识点：promise：异步函数与回调函数的说明嵌套、promise基本语法、解决回调函数问题以及优化、封装axios的发送、面试题循环队列以及宏任务与微任务、async和await

promise异步函数与回调函数的说明异步函数: 定时器setTimeout, ajax (异步函数的执行, 不会阻塞主线程代码的执行)回调函数:把一个函数当成参数传递, 将来特定的时机调用, 这个函数就叫回调函数什么时候会用到回调函数, 异步的时候 ajax success errorconsole.log(1)setTimeout(function() { console.log(2) setTimeout(function() {

2020-07-26 20:42:39 865

原创 vue第4天知识点：生命周期介绍以及图解、八个钩子函数、json-server的使用：安装、提供json文件、启动接口、以及通过axios编写todomvc案例（只写了增、删、改三大功能）

生命周期与钩子函数生命周期介绍vue生命周期钩子函数简单说：一个实例从开始到最后消亡所经历的各种状态，就是一个实例的生命周期生命周期图解非常重要的图解实例生命周期函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！生命周期的钩子函数：框架提供的函数，能够让开发人员的代码，参与到组件的生命周期中。也就是说，通过钩子函数，就可以控制组件的行为注意：vue再执行过程中会自动调用生命周期

2020-07-24 20:17:51 176

原创 vue第3天知识点：计算属性的基本使用、watch监视数据的使用以及对象、数据双向绑定原理：View-Model、Model-View-vue2.0、vue2.0实现与缺点、vue3.0实现

计算属性计算属性：当计算属性依赖的数据发生改变的时候，计算属性会重新计算一次，如果计算属性依赖的属性没有发生改变，那么计算属性就不会重新计算。基本使用1、计算属性应写在computed对象中，每一个计算属性的值是一个函数并且必须有返回值。2、计算属性不可以和data中的属性重名3、计算属性在使用时，和data中属性的使用方法一样。直接用属性名不要加括号。基本语法：/*计算属性要写在computed对象中。属性值为一个函数且必须有返回值。调用计算属性时，和调用data中属性一样，不要加括号

2020-07-23 10:08:31 236

原创 vue第2天知识点：v-if和v-show、v-else和v-else-if、v-text和v-html、v-pre和v-once、v-cloak、指令总结、案例-todomvc

vue指令v-on指令https://cn.vuejs.org/v2/guide/events.html作用：绑定事件语法：v-on:click="say" or v-on:click="say('参数', $event)"简写：@click="say"说明：绑定的事件从methods中获取案例：跑马灯<a v-on:click="doSomething"></a><a @clic

2020-07-22 11:33:47 304

原创 VUE第1天：为什么要学习vue、渐进式概念、框架概念、MVVM的概念、vue基本使用步骤、插值表达式、vue指令

为什么要学习vue公司对vue有要求 BOSS直聘在主流框架：angular、vue、react中，vue最容易学习。Vue课程介绍和基本概念课程介绍vue课程安排（22天）vue基础：vue的全家桶（vue/vue-router/vuex/vue-cli）+webpack+ES6vue进阶：项目实战（移动端+PC端）vue介绍vue 中文网Vue.js 是什么vue优点：易用、灵活、高效。1、易用：已经会了 HTML、CS

2020-07-19 21:33:38 266

原创 express+mysql+session的留言板笔记

express版本的留言板源文件，有两个文件。已上传至资源。文件名称叫：express-liuyanban - express框架做的.zip 以及expressDataBase - 数据库做的.zipexpress版本的留言板1.搭建服务器1.1 准备工作1.新建express-liuyanban文件夹2.在此文件夹中新建app.js文件3.在此文件夹中新建static,并将css,images文件夹放在static文件夹中4.新建views文件夹，并将add.html,index.ht

2020-07-19 11:14:05 342

原创 node第6天笔记：展开运算符、身份认证：基本概念，cookie介绍，cookie设置，session介绍，早express中使用session认证

1.展开运算符1.1 数组的扩展简单应用let arr = [1,2,3];console.log(...arr); // 输出 1,2,3复制数组let arr = [1,2,3];// 把arr数组展开到一个新的空数组中let arr2 = [...arr];合并数组let arr = [1,2,3];let arr2 = [4,5,6];// 1.es5的方法，使用数组原生的concatarr.concat(arr2) // 输出 [1, 2, 3, 4, 5, 6

2020-07-19 10:45:59 411

原创 node.js第5天笔记：数据库基本概念、数据库的可视化操作、数据库的常见命令、node操作mysql

1.基本概念1.1 为什么要有数据库没有数据库，我们的数据都是存储在文件当中的，那么文件存储数据的缺点有：文件的安全性问题。文件不利于对数据的管理文件不利于存放海量数据文件在程序中控制不方便1.2 什么是数据库数据库，简而言之可视为电子化的文件柜——存储电子文件的处所，或是数据的仓库用户可以对文件中的数据运行增加、删除、修改、查询等操作。前端程序员只需要对数据库有一定了解即可。浏览器---->服务器---->数据库1.3 数据库的分类关系型数据库：有行和列的结构

2020-07-18 21:13:17 274

原创 Node第4天知识点：路由的概念、Express、模板引擎

1. 路由的概念1.1 什么是路由广义上来讲，路由就是映射关系。现实生活中按键 1 -> 业务查询按键 2 -> 手机充值按键 3 -> 业务办理按键 4 -> 密码服务与停复机按键 5 -> 家庭宽带按键 6 -> 话费流量按键 8 -> 集团业务按键 0 -> 人工服务在这里，路由是按键与服务之间的映射关系1.2 nodejs中的路由nodejs中的路由其实就是url地址和响应函数之间的映

2020-07-18 20:55:46 477

原创项目：博客：项目环境搭建、项目功能实现、项目包含的知识点

一. 项目环境搭建1.1 项目介绍多人博客管理系统：博客内容展示博客管理功能1.2 案例初始化1. 建立项目所需文件夹public 静态资源model 数据库操作route 路由views 模板2. 初始化项目描述文件npm init -y3. 下载项目所需第三方模块npm install express mongoose art-template express-art-template4. 创建网站服务器5. 构建模块化路由6. 构建博客管理页面模板

2020-07-18 20:05:34 612

原创 Nodejs第5天：Express框架：Express框架简介及初体验、Express中间件、Express框架请求处理、express-art-template模板引擎

Express框架目标能够使用Express创建web服务器能够使用Express处理请求参数能够使用Express处理静态资源能够使用中间件处理请求能够在Express中集成art-template模板引擎Express框架简介及初体验1.1 Express框架是什么Express是一个基于Node平台的web应用开发框架，它提供了一系列的强大特性，帮助你创建各种Web应用。我们可以使用npm install express 命令进行下载。1.2 Express框架特性提供了

2020-07-18 18:30:16 234

原创 Nodejs第4天：模板引擎artTemplate：模板引擎的基础概念、模板引擎的语法、案例

模板引擎artTemplate目标能够使用模板引擎渲染数据能够使用模板引擎进行原文输出能够使用循环输出数据能够知道如何引用子模板能够知道如何如何进行模板继承一. 模板引擎的基础概念1.1 模板引擎模板引擎是第三方模块。让开发者以更加友好的方式拼接字符串，使项目代码更加清晰、更加易于维护。// 未使用模板引擎的写法 var ary = [{ name: '张三', age: 20 }]; var str = '<ul>'; for (var i = 0; i &

2020-07-18 18:02:30 146

原创 Nodejs第3天：MongoDB数据库：数据库概述及环境搭建、MongoDB增删改查操作

MongoDB数据库目标能够安装数据库软件能够知道集合、文档的概念能够使用mongoose创建集合的方法创建集合能够对数据库中的数据进行增删改查操作一. 数据库概述及环境搭建1.1 为什么要使用数据库动态网站中的数据都是存储在数据库中的数据库可以用来持久存储客户端通过表单收集的用户信息数据库软件本身可以对数据进行高效的管理http://www.czxy.com/article?id=1http://www.czxy.com/article?id=21.2 什么是数据库

2020-07-18 17:23:19 186

原创 Nodejs第2天：请求响应原理及HTTP协议：服务器端基础概念、创建web服务器、HTTP协议、HTTP请求与响应处理、Node.js异步编程

请求响应原理及HTTP协议目标能够知道B/S软件体系结构能够搭建Web服务器能够使用获取GET、POST参数的方式获取参数能够掌握如何制作路由能够知道同步异步的概念能够知道回调函数的概念一. 服务器端基础概念1.1 网站的组成网站应用程序主要分为两大部分：客户端和服务器端。客户端：在浏览器中运行的部分，就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。服务器端：在服务器中运行的部分，负责存储数据和处理应用逻辑。1.2 Node网站服

2020-07-18 16:28:43 248

原创 node第1天：Node.js基础、模块加载及第三方包：Node.js模块化开发、系统模块、第三方模块、package.json文件、Node.js中模块的加载机制

Node.js基础目标能够知道node是什么能够安装node运行环境能够知道系统环境变量PATH的作用能够使用node环境执行代码1. node开发概述1.1 为什么要学习服务器端开发基础能够和后端程序员更加紧密的配合网站业务逻辑前置，学习前端技术需要后端奇数支撑（Ajax）扩宽知识视野，能够站在更高的角度审视整个项目1.2 服务器端开发要做的事情实现网站的业务逻辑数据的增删改查1.3 为什么选择Node使用JavaScript语法开发后端应用一些公司要求前端工

2020-07-18 15:25:13 408

原创数据可视化项目知识点以及代码演示

DAY01-可视化项目项目介绍应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。我们引入 ‘立可得’ 数据可视化项目。该项目除了使用了基础的DIV+CSS布局，还引入了一些C3技术，还引入了各类图表的绘制，以及高级的地图数据可视化案例。主要功能有：饼状图、柱状图、线形图、地图 …课程目标：实践jquery相关技术掌握echarts的基本使用使用技术完成该项目需要具备以下知识：

2020-07-15 19:55:13 1872

原创 JavaScript高级第四天笔记：继承以及正则

JavaScript高级第四天笔记01-继承现实生活中的继承，子承父业, 如儿子继承了父辈的财产，公司等程序中的继承，一个对象可以使用另一个对象中的方法或属性02-原型链继承实现继承的方式 1.原型链继承构造函数创建出来的实例对象可以直接访问（继承）原型对象上的任意成员03-原型替换把之前的原型对象替换成一个新对象，在新对象里面添加需要的成员**原型替换的问题：**会造成 constructor 属性的丢失 **解决方案：**给新的原型对象手动添加 constructor 属性即可

2020-07-15 19:39:19 148

原创 JavaScript高级第三天笔记

01-call 和 apply 使用场景参数比较少的时候，使用call更加简洁参数已经在数组或伪数组中，使用apply更合适例，求数组最大值：一行代码实现var arr = [8, 68, 25, 12, 90, 72, 66, 20];让数组arr去借用Math的max方法var res = Math.max.apply(arr, arr);//等价于：arr.max();console.log(res);02-bind方法语法var fn2 = fn.bind(thisA

2020-07-15 18:13:55 89

原创 JavaScript高级第2天：定义函数的三种方式、函数的原型链结构、完整原型链、作用域以及作用域链、函数的四种调用模式、闭包、计数器、斐波那契数列优化、三种继承方式

JavaScript高级第二天01-定义函数的三种方式1.函数声明 function：可以先调用再声明，因为预解析（把函数声明、变量声明进行提升）function fn() { //函数体 conle.log(1);}2.函数表达式：不可以先调用再声明，因为预解析只是把变量声明提升了，赋值留在原位。var fn2 = function() { conle.log(2);}fn(2);3.函数也是对象，函数也是通过构造函数new出来的 Function（大写的）（了解，工作当

2020-07-15 17:52:20 261

原创 JavaScript高级第1天（下）函数进阶：定义函数的三种方式、函数的原型链结构、完整原型链、作用域以及作用域链、函数的四种调用模式、递归函数

函数进阶定义函数的三种方式函数声明fn();//函数声明可以先调用，在声明function fn(){ console.log("这是函数声明")}函数表达式var fn = function() { console.log("这是函数表达式"); }fn();//函数表达式必须先声明，再调用构造函数Function//函数也是对象，可以使用Function构造函数new出来//相当于var fn = function(){}var fn = new Function

2020-07-15 17:30:44 215

原创 JavaScript高级第1天（上）：基础复习、对象、原型及原型链

课程介绍课程大纲基础复习串讲变量变量的作用，语法，命名规则数据类型基本数据类型复杂数据类型类型转换转换成字符串转换成数字转换成布尔值运算符算术运算符赋值运算符比较运算符逻辑运算符自增自减运算符运算符的优先级流程控制语句顺序结构分支结构循环结构数组创建数组的两种方式下标和长度取值和存值函数声明和调用形参和实参返回值对象创建对象的方式属性和方法存值和取值对象的遍历操作对象属性的两种方式

2020-07-15 17:25:13 161

原创 Node第3天知识点：在node当中使用art-template、处理GET方式传递的参数、处理POST方式传递数据、服务器端重定向、模块化

1. 在node当中使用art-template[文档]https://aui.github.io/art-template/zh-cn/docs/1.1 安装npm i art-template1.2 使用// 在项目当中引入art-template模板const template = require('art-template')// 使用template方法将数据和html标签中的结构进行绑定// template有两个参数 // 第1个参数是待渲染数据的html，要使用路径找到这

2020-07-15 14:44:59 288

原创 Nodejs第2天知识点：http模块、实现静态WEB服务器、nodemon、npm-Node包管理工具、MIME、静态网站与动态网站

学习目标能够根据不同的路径响应不同的数据掌握req与res对象中的内容能够使用nodemon能够配置mime能够使用npm下载第三方模块1.http模块1.1 创建服务器基本步骤1.引入http模块2.创建服务器实例对象3.监听端口并开启服务器4.注册事件，监听请求// 1. 引入http模块const http = require('http')// 2. 创建服务器对象const server = http.createServer()// 3. 监听端口并开启服

2020-07-12 20:11:23 303

原创 Nodejs第1天知识点：nodejs基本介绍、安装nodejs、运行nodejs程序、fs模块：FileSysten、path模块、http模块

nodejs基本介绍nodejs赋予了js在服务器端运行的能立，也允许js开发桌面端。为什么要学习nodejs为什么要学习服务端的开发？通过学习Node.js开发理解服务器开发、Web请求和响应过程、了解服务器端如何与客户端配合作为前端开发工程师（FE ）需要具备一定的服务端开发能力全栈工程师的必经之路服务器端开发语言有很多，为什么要选择nodejs降低编程语言切换的成本(nodejs实质上用的还是javascript)NodeJS是前端项目的基础设施，前端项目中用到的大量

2020-07-12 19:59:47 270

原创 ES6知识点：ES5数组的新方法，ES6中的变量、解构赋值、字符串、数组、includes、箭头函数以及对象

基本介绍ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。我们从node开始，会大量用到ES6中的一些新语法，因此在学习node之前需要先学习一下es6中提供的新语法javascript的诞生1992年底，美国国家超级电脑应用中心（NCSA）开始开发一个独立的浏览器，叫做 Mosaic。这是人类历史上第一个浏览器，从

2020-07-12 19:36:22 594

原创 GIT知识点：git安装、git三个区、git基本命令、git重置、git忽视文件、git分支操作、git分支命令、git合并冲突以及git远程仓库

Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。git的安装下载地址：https://git-scm.com/download/win注意：不要安装在中文目录不要使用桌面管理软件安装很简单，一直下一步即可。在任意的目录下右键，能看到菜单，就表示安装成功了！github账号注册：GitHub官网：https://github.com/git三个区要对某个项目使用git进行管理，需要使用 git init 命令初始化git仓库git init 会

2020-06-30 11:26:38 261

原创 JavaScript高级第二天知识点以及代码演示

1. 函数进阶1.1. 定义函数的三种方式1.函数声明 function：可以先调用再声明，因为预解析（把函数声明、变量声明进行提升）function fn() { //函数体 conle.log(1);}2.函数表达式：不可以先调用再声明，因为预解析只是把变量声明提升了，赋值留在原位。var fn2 = function() { conle.log(2);}fn(2);3.函数也是对象，函数也是通过构造函数new出来的 Function（大写的）（了解，工作当中不会使用到

2020-06-14 22:11:02 235

原创前端基础第一天：HTML常用标签知识点

学习目标理解：相对路径三种形式应用排版标签文本格式化标签图像标签链接相对路径，绝对路径的使用1. HTML常用标签首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。不会再给结构标签指定样式了。HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。1.1 排版标签排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。1）标题标签h (熟记)单词缩写： head

2020-06-12 22:17:04 1177

原创 JavaScript高级第一天知识点以及代码演示

基础复习1. 变量变量的作用：存储数据语法：声明：var num; 赋值: num = 10; 声明并赋值： var num = 100;命名规则: 1. 组成：字母、数字、_ $ 不能以数字开头 2. 区分大小写 3. 不能是保留字和关键字规范： 1. 遵守驼峰式 2. 要有含义2. 数据类型：1. 简单数据类型（值类型）：string number boolean null undefined2. 复杂数据类型（引用类

2020-06-12 21:43:04 145

原创前端基础第一天：认识WEB

目标认识WEB1. 认识网页网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。

2020-06-12 11:09:14 171

原创 jQuery第5天知识点：隐式迭代、链式编程、jQuery插件

一. jQuery补充知识点1.1. 隐式迭代1.1.1. 基本概念隐式迭代：jQuery在设置属性时会自动的遍历，因此我们不需要再遍历1.对于设置性操作来说，会把获取到的所有元素都设置上相同的操作。2. 对于获取性操作来说，只会获取到第一个元素对应的值。3. 如要每个元素都设置上不同的操作，自己手动遍历。代码演示：<body> <ul> <li>1</li> <li>2</li>

2020-06-11 22:12:03 253