- 博客(36)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 《web开发： Vue （vue-router）路由》
一、vue-router 路由1. 路由的基本概念与原理路由是一个比较广义和抽象的概念，路由的本质就是对应关系 在开发中，路由分为：后端路由 ， 前端路由2. 后端路由 概念：根据不同的用户 URL 请求，返回不同的内容 本质：URL 请求地址与服务器资源之间的对应关系1.路由的基本概念与原理1.1 路由2. SPA（Single Page Application） 后端渲染（存在性能问题） Ajax前端渲染（前端渲染提高性能，但是不支...
2021-02-26 11:56:43
218
原创 《web开发： Vue webpack 加载器与单文件组件》
一、webpack 中的加载器<1>. 通过 loader 打包非 js 模块在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块，其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！loader 加载器可以协助 webpack 打包处理特定的文件模块，比如： less-loader 可以打包处理 .less 相关的文件 sass-loader 可以打包处理 .scs...
2021-02-26 11:24:14
171
原创 《web开发： Vue 脚手架（vue-cli）、Element-UI 组件库》
一、脚手架（vue-cli）1.Vue 脚手架的基本用法Vue 脚手架用于快速生成 Vue 项目基础架构，其官网地址为：https://cli.vuejs.org/zh/1. 安装 3.x 版本的 Vue 脚手架：npm install -g @vue/cli基于3.x版本的脚手架创建vue项目// 1. 基于 交互式命令行 的方式，创建 新版 vue 项目 vue create my-project // 2. 基于 图形化界面 的方式，创建 新版 vue 项目...
2021-02-24 18:06:54
264
原创 《web开发： Vue webpack介绍与安装》
一、webpack1. webpack 概述webpack 是一个流行的前端项目构建工具（打包工具），可以解决当前 web 开发中所面临的困境。 webpack 提供了友好的模块化支持，以及代码压缩混淆、处理 js 兼容问题、性能优化等强大的功能，从而让程序员把 工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。 目前绝大多数企业中的前端项目，都是基于 webpack 进行打包构建的。2.webpack 的基本使用<1>. 创建列表隔行变色项...
2021-02-24 17:59:21
158
原创 《web开发： Vue 插槽》
一、Vue 插槽1.组件插槽的作用父组件向子组件传递内容1. 单独的事件中心管理组件间的通信 事件中心组件A 组件B触发触发监听监听Contents目 ◆ 组件化开发思想◆ 组件注册◆ Vue调试工具用法◆ 组件间数据交互◆ 组件插槽◆ 基于组件的案例4. 组件间数据交互5.1 组件插槽的作用⚫ 父组件向子组件传递内容<alert-box>hi</alert-box><alert-box&g...
2021-02-23 18:39:34
220
原创 《web开发： Vue 组件间数据交互》
一、Vue 组件间数据交互1. 组件内部通过props接收传递过来的值Vue.component(‘menu-item', {props: ['title'],template: '<div>{{ title }}</div>'})2. 父组件通过属性将值传递给子组件<menu-item title="来自父组件的数据"></menu-item><menu-item :title="title"></menu-it..
2021-02-23 13:30:19
207
原创 《web开发： Vue 调试工具vue-devtools》
一、调试工具vue-devtools5. Vue调试工具① 克隆仓库② 安装依赖包③ 构建④ 打开Chrome扩展页面⑤ 选中开发者模式⑥ 加载已解压的扩展，选择shells/chrome
2021-02-23 13:29:50
290
原创 《web开发： Vue Vuex介绍与使用》
一、Vuex介绍与使用1.组件之间共享数据的方式父向子传值：v-bind 属性绑定子向父传值：v-on 事件绑定兄弟组件之间共享数据： EventBus $on 接收数据的那个组件 $emit 发送数据的那个组件2.Vuex 是什么Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。3.使用 Vuex 统一管理状态的好处① 能够在 vuex 中集中管理共享的数据，易于开发和后期维护② 能够高效地实...
2021-02-22 16:48:21
222
原创 《web开发： Vue Promise 用法》
一、Promise 用法1.异步调用异步效果分析 定时任务 Ajax 事件函数 多次异步调用的依赖分析 多次异步调用的结果顺序不确定 异步调用结果如果存在依赖需要嵌套2.Promise 概述Promise 是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息使用 Promise 主要有以下好处： 可以避免多层异步调用嵌套问题(回调地狱) Promise 对象提供了简洁的API，使得控制异步操作更加容易 参考...
2021-02-22 16:35:24
342
原创 《web开发： Vue 深入响应式原理》
一、深入响应式原理1.如何追踪变化当你把一个普通的 JavaScript 对象传入 Vue 实例作为data选项，Vue 将遍历此对象所有的 property，并使用Object.defineProperty把这些 property 全部转为getter/setter。Object.defineProperty是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因 这些 getter/setter 对用户来说是不可见的，但是在内部它们让 ...
2021-02-22 15:03:50
138
原创 《web开发： Vue 监听器、过滤器、生命周期》
一、监听器1. 侦听器的应用场景数据变化时执行异步或开销较大的操作watch: {firstName: function(val){// val表示变化之后的值this.fullName = val + this.lastName;},lastName: function(val) {this.fullName = this.firstName + val;}}2. 侦听器的用法数据侦听器数据一旦发生变化就通知侦听器所绑定方法侦听器绑定方法案例：验证用
2021-02-18 15:05:30
154
原创 《web开发： Vue 表单操作、自定义指令、计算属性》
一、表单操作1. 表单域修饰符⚫ number：转化为数值⚫ trim：去掉开始和结尾的空格⚫ lazy : 将input事件切换为change事件<input v-model.number="age" type="number">1. 为何需要自定义指令？内置指令不满足需求5. Vue常用特性5.3 自定义指令Vue.directive('focus' {inserted: function(el) {// 获取元素的焦点el.focus();}}).
2021-02-18 15:04:26
240
原创 《web开发： Vue 组件开发》
一、组件开发1. 组件化开发思想1.1 现实中的组件化思想体现⚫ 标准⚫ 分治⚫ 重用⚫ 组合1. 组件化开发思想1.2 编程中的组件化思想体现1. 组件化开发思想1.3 组件化规范: Web Components⚫ 我们希望尽可能多的重用代码⚫ 自定义组件的方式不太容易（html、css和js）⚫ 多次使用组件可能导致冲突官网：https://developer.mozilla.org/zh-CN/docs/Web/Web_ComponentsWeb Comp
2021-02-18 15:03:58
207
原创 《web开发： Vue 条件、列表渲染》
一、条件渲染3.7 分支循环结构1. 分支结构⚫ v-if⚫ v-else⚫ v-else-if⚫ v-show2. v-if与v-show的区别⚫ v-if控制元素是否渲染到页面⚫ v-show控制元素是否显示（已经渲染到了页面）二、列表渲染3. 循环结构⚫ v-for遍历数组<li v-for='item in list'>{{item}}</li><li v-for='(item,index) in list'>..
2021-02-18 14:40:22
135
原创 《web开发： Vue 事件、属性样式绑定》
一、样式绑定1. class样式处理⚫ 对象语法<div v-bind:class="{ active: isActive }"></div>⚫ 数组语法<div v-bind:class="[activeClass, errorClass]"></div>2. style样式处理⚫ 对象语法<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></d
2021-02-18 14:37:01
147
原创 《web开发： Vue 模板语法》
一、Vue 模板语法1. 模板语法概述把数据填充到HTML标签中1. 如何理解前端渲染？2. 前端渲染方式⚫ 原生js拼接字符串⚫ 使用前端模板引擎⚫ 使用vue特有的模板语法3. 原生js拼接字符串基本上就是将数据以字符串的方式拼接到HTML标签中，前端代码风格大体上如右图所示缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来var d = data.weather;var info = document.getElemen
2021-02-10 00:07:21
181
原创 《web开发： Vue 介绍与基本使用》
一、Vue 介绍与基本使用1. Vue概述官网：https://cn.vuejs.org/v2/guide/ 尤雨溪：Vue.js的创建者2014年2月，Vue.js正式发布 2015年10月27日，正式发布1.0.0 2016年4月27日，发布2.0的预览版本Vue：渐进式JavaScript框架声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建⚫ 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue⚫ 灵活：在一个库和一套完整框架之..
2021-02-10 00:01:26
211
原创 《web开发： 大事件项目：（后台开发）三》
三、文章分类管理4.4.1 新建 ev_article_cate 表4.1.1 创建表结构文章分类表结构4.1.2 新增两条初始数据文章分类表结构4.2 获取文章分类列表4.2.0 实现步骤1. 初始化路由模块2. 初始化路由处理函数模块3. 获取文章分类列表数据4.2.1 初始化路由模块1. 创建 /router/artcate.js 路由模块，并初始化如下的代码结构：2. 在 app.js 中导入并使用文章分类的路由模块：4.2.2 初始化路由处理函数模...
2021-02-07 17:49:57
255
原创 《web开发： 大事件项目：（后台开发）二》
3.3 重置密码3.3.0 实现步骤1. 定义路由和处理函数2. 验证表单数据// 定义 id, nickname, emial 的验证规则const id = joi.number().integer().min(1).required()const nickname = joi.string().required()const email = joi.string().email().required()1234// 验证规则对象 - 更新用户基本信息exports...
2021-02-04 18:40:31
170
原创 《web开发： 大事件项目：（后台开发）一》
Headline大事件后台 API 项目，API 接口文档请参考 https://www.showdoc.cc/escook?page_id=37071587612152171. 初始化1.1 创建项目1. 新建 api_server 文件夹作为项目根目录，并在项目根目录中运行如下的命令，初始化包管理配置文件：2. 运行如下的命令，安装特定版本的 express ：3. 在项目根目录中新建 app.js 作为整个项目的入口文件，并初始化如下的代码：1.2 配置 cors 跨域...
2021-02-04 18:40:04
735
原创 《web开发： （Node.js）身份认证 Session、JWT 》
一、前后端身份认证1. Web 开发模式目前主流的 Web 开发模式有两种，分别是： ① 基于服务端渲染的传统 Web 开发模式 ② 基于前后端分离的新型 Web 开发模式2. 服务端渲染的 Web 开发模式服务端渲染的概念：服务器发送给客户端的 HTML 页面，是在服务器通过字符串的拼接，动态生成的。因此，客户端不需要使用 Ajax 这样的技术额外请求页面的数据服务端渲染的优缺点优点：① 前端耗时少。 因为服务器端负责动态生成 HTML 内容，浏览器只需要直接渲染页面即可。
2021-02-04 16:55:42
942
原创 《web开发： Ajax 防抖和节流》
一、防抖和节流1. 什么是防抖防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时 如王者荣耀回城，每次回城肯定要重新计算，并且是有n秒的延迟执行过程，再回城期间不管你按了多少次回城，都是以最后的一次来计算2. 防抖的应用场景用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源3.什么是节流节流策略（throttle），顾名思义，可以减少...
2021-02-04 13:49:50
243
原创 《web开发： Ajax 同源策略和跨域JSONP》
一、同源策略和跨域JSONP1.什么是同源如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源 例如，下表给出了相对于 http://www.test.com/index.html 页面的同源检测：（端口号不写默认是80）2. 什么是同源策略同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能 MDN 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制 通..
2021-02-04 11:55:35
172
原创 《web开发： （Node.js）数据库介绍与安装使用》
一、数据库介绍1. 数据库的基本概念1.1 什么是数据库数据库（database）是用来组织、 存储和管理数据的仓库。当今世界是一个充满着数据的互联网世界， 充斥着大量的数据。 数据的来源有很多，比如出行记录、消费记录、浏览的网页、发送的消息等等。除了文本类型的数据，图像、音乐、声音都是数据。为了方便管理互联网世界中的数据，就有了数据库管理系统的概念（简称：数据库）。用户可以对数据库中的数据进行新增、 查询、 更新、 删除等操作。1. 数据库的基本概念1.2 常见的数据库及分类市面上的
2021-02-03 19:48:07
247
原创 《web开发： （Node.js）模块化》
一、Node.js 模块化1. 模块化的基本概念1.1 什么是模块化模块化是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说，模块是可组合、分解和更换的单元。2. 编程领域中的模块化编程领域中的模块化，就是遵守固定的规则，把一个大文件拆成独立并互相依赖的多个小模块。把代码进行模块化拆分的好处：① 提高了代码的复用性② 提高了代码的可维护性③ 可以实现按需加载1. 模块化的基本概念1.2 模块化规范模块化规范就是对代码进行模块化的拆分与组.
2021-02-02 17:51:07
123
原创 《web开发： （微信小程序）WePY 框架介绍与安装》
一、WePY 框架介绍与安装1. 什么是 WePYWePY 是腾讯官方出品的一个小程序快速开发框架，对原生小程序的开发模式进行了再次封装，更贴近于MVVM 架构模式，并支持ES6/7的一些新特性，同时语法风格更接近于 Vue.js，WePY 框架能够提高小程序的开发效率 注意：WePY 只是小程序的快速开发框架之一，市面上还有诸如 mpvue 之类的小程序开发框架也比较流行2. 为什么要使用 WePYWePY 相比于原生小程序开发，拥有众多的开发特性和优化方案，例如： 开发风格接...
2021-02-02 15:58:48
876
原创 《web开发： （微信小程序）WePY 框架开发规范 》
一、WePY 框架开发规范1. 自定义默认首页1. 创建 home 首页在 src -> pages 目录下，创建 home.wpy 页面，并创建页面的基本代码结构，示例代码如下：<template></template><script>import wepy from 'wepy'export default class Home extends wepy.page { config = {} method...
2021-02-02 15:20:56
227
原创 《web开发： （微信小程序）自定义组件》
一、自定义组件1. 创建组件① 在项目的根目录中，鼠标右键，创建 components -> test 文件夹 ② 在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component” ③ 为新建的组件命名之后，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss 注意：尽量将不同的组件，存放到单独的文件夹中，从而保证清晰的目录结构2. 引用组件① 在需要引用组件的页面中，找到页面的...
2021-02-02 15:09:08
169
原创 《web开发： （微信小程序）网络数据请求》
一、网络数据请求1. 配置服务器域名每个微信小程序需要事先设置一个通讯域名，小程序只可以跟指定的域名进行网络通信。 服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置，配置时需要注意： 域名只支持 https (request、uploadFile、downloadFile) 和 wss (connectSocket) 协议 域名不能使用 IP 地址或 localhost 域名必须经过 ICP 备案 服务器域名一个月内可申请5次修改2. 跳过域名校...
2021-02-02 15:02:52
260
原创 《web开发： （微信小程序）页面导航》
一、页面导航1.导航到非 `tabBar` 页面非 `tabBar` 页面指的是没有被当作 `tabBar` 进行切换的页面- 案例代码：```javascript<navigator url="/pages/about/about">跳转到 about 页面</navigator>```- 注意事项 - `url` 属性设置需要跳转的路径 - 页面路径应该以 / 开头， - 路径必须提前在 `app.json` 的 `pages` 节点...
2021-02-02 14:59:21
177
原创 《web开发： （微信小程序）页面渲染和事件》
一、页面渲染1. 条件渲染1. wx:if在小程序中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：<view wx:if="{{condition}}"> True </view>也可以用 wx:elif 和 wx:else 来添加一个 else 块：<view wx:if="{{length > 5}}"> 1 </view><view wx:elif="{{length &g...
2021-02-02 14:47:04
686
原创 《web开发： （微信小程序）wxs 脚本》
一、wxs 脚本1. 什么是 wxswxs（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构2. wxs 的注意点 没有兼容性：wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行 与 javascript 不同：wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致 隔离性：wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文...
2021-02-01 18:51:57
667
原创 《web开发： （微信小程序）数据与事件绑定》
一、数据绑定1. 如何定义页面的数据小程序中每个页面，由4部分组成，其中 .js 文件内可以定义页面的数据、生命周期函数、其它业务逻辑； 如果要在.js文件内定义页面的数据，只需把数据定义到 data 节点下即可；示例代码如下：Page({ data: { info: 'init data', // 字符串类型的数据 array: [{msg: '1'}, {msg: '2'}] // 数组类型的数据 }})1. 数据绑定与事件绑定1.1...
2021-02-01 17:52:15
211
原创 《web开发： （微信小程序）配置文件》
一、微信小程序配置文件1. 使用全局配置文件app.json1.1 app.json配置文件的作用小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，它决定了页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。在app.json配置文件中，最主要的配置节点是： pages 数组：配置小程序的页面路径 window 对象：用于设置小程序的状态栏、导航条、标题、窗口背景色 tabBar 对象：配置小程序的tab栏效果2. 使用全局配置文件...
2021-02-01 16:20:43
275
原创 《web开发： （微信小程序）结构和组件》
一、微信小程序结构和组件小程序的结构与配置Contents目 小程序的结构和组件 小程序中的样式 使用全局配置文件app.json 使用页面配置文件page.json 小程序的生命周期1. 小程序的结构和组件1.1 小程序项目的结构├── pages ······································ 【目录】存放所有的小程序页面│ │── index ······························...
2021-02-01 16:10:18
231
QTcpThreadPoolServiceTest
2020-12-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人