【 Web前端开发 】
分享
扫一扫
文章平均质量分 86
本专栏全面讲解Web前端开发整个体系架构，从基础部分 HTML、CSS、JavaScript 逐步进阶 Ajax、Node、Vue、微信小程序，React，Angular. 全系列动态图演示效果
优惠券已抵扣
余额抵扣
还需支付
¥199.90
¥299.90
购买须知?
本专栏为图文内容，最终完结不会低于15篇文章。
订阅专栏，享有专栏所有文章阅读权限。
本专栏为虚拟商品，基于网络商品和虚拟商品的性质和特征，专栏一经购买无正当理由不予退款，不支持升级，敬请谅解。
HarkerYX
学习各类技术优快云博客专家！
热爱日系指弹！
目前就职新能源汽车行业！
展开
-
CSS3 3D转换
一、CSS3 3D转换我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子特点：近大远小 物体后面遮挡不可见 当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果1. 三维坐标系三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的 x轴：水平向右 注意： x 右边是正值，左边是负值 y轴：垂直向下 注意： y 下面是正值，上面是负值 z轴：垂直屏幕 注意： 往外面是正值，往里面是负值 （z轴相当于我们看手机，眼镜和手机直接垂直的轴就是z轴，手...原创 2021-04-19 13:27:34 · 219 阅读 · 0 评论
-
CSS3 新功能
一、CSS3新特性新增的CSS3特性有兼容性问题，ie9+才支持 移动端支持优于 PC 端 不断改进中 应用相对广泛 现阶段主要学习：新增选择器和盒子模型以及其他特性1. CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素1. 属性选择器 2. 结构伪类选择器 3. 伪元素选择器 注意：类选择器、属性选择器、伪类选择器，权重为 10①. 属性选择器 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选...原创 2021-04-19 13:23:46 · 219 阅读 · 0 评论 -
CSS 高级技巧（界面样式、文字省略号、布局技巧）
一、CSS 高级技巧之界面样式所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验更改用户的鼠标样式 表单轮廓 防止表单域拖拽1. 鼠标样式 cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状li {cursor: pointer; }<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...原创 2021-04-19 13:21:40 · 206 阅读 · 0 评论 -
Web学习导图
本专栏全面讲解Web前端开发整个体系架构，从基础部分 Html、Css、JavaScript 逐步进阶 Ajax、Node、Vue、微信小程序，全系列动态图演示效果 博客禁止转载、贩卖！ 订阅博客学员请私信我，分享博客中的代码、工具VSCode 配置HTML HTML 介绍 HTML 语法结构 ...原创 2021-04-14 16:18:19 · 480 阅读 · 0 评论 -
小程序商城项目七
12. 确认订单12.1 修改确认订单页面的标题<script>import wepy from 'wepy'import mix from '@/mixins/order.js'export default class extends wepy.page { config = { // 设置当前页面的标题 navigationBarTitleText: '确认订单' } mixins = [mix]}</script>12...原创 2021-06-22 16:45:41 · 429 阅读 · 0 评论 -
小程序商城项目六
10. 加入购物车10.1 为加入购物车按钮绑定单击事件处理函数 为 加入购物车 按钮，绑定单击事件处理函数： <van-goods-action-button text="加入购物车" type="warning" bind:click="addToCart" /> 在 methods 中定义对应的事件处理函数： // 点击按钮，把商品添加到购物车列表中addToCart() { // 获取到当前商品的所有信息 console.log(this.goo..原创 2021-06-22 16:44:43 · 381 阅读 · 0 评论 -
小程序商城项目五
8. 商品列表8.1 处理请求参数 在 goods_list.js 中定义 data 节点，并定义对应的请求参数： data = { // 查询关键词 query: '', // 商品分类的Id cid: '', // 页码值 pagenum: 1, // 每页显示多少条数据 pagesize: 10} 在 onLoad() 生命周期函数中，处理 query 和 cid 的值，并发起数据请求： onLoad(o...原创 2021-06-22 16:43:40 · 276 阅读 · 0 评论 -
小程序商城项目四
interceptor 拦截器6.1 介绍 wepy 中的拦截器可以使用WePY提供的全局拦截器对原生API的请求进行拦截。具体方法是配置API的config、fail、success、complete回调函数。参考示例：import wepy from 'wepy';export default class extends wepy.app { constructor () { // this is not allowed before super()原创 2021-06-22 16:42:23 · 223 阅读 · 0 评论 -
小程序商城项目三
4. 优化4.1 把页面的业务逻辑抽离到单独的 mixin 文件中为了精简每个小程序页面的代码，可以将 script 中的业务逻辑，抽离到对应的 mixin 文件中，具体步骤： 在 src -> mixins 文件夹中，新建与页面路径对应的 .js 文件，并初始化基本的代码结构如下： import wepy from 'wepy'// 注意，必须继承自 wepy.mixinexport default class extends wepy.mixin {} 在对应原创 2021-06-18 18:34:48 · 210 阅读 · 0 评论 -
小程序商城项目二
首页1、为异步 API 启用 Promise 功能原创 2021-06-18 18:31:36 · 197 阅读 · 0 评论 -
小程序商城项目一
1、初始化项目 运行 wepy init standard heima_ugo 命令，初始化小程序项目 运行 cd heima_ugo 进入项目根目录 运行 npm install 安装所有依赖项 运行 wepy build --watch 命令，开启 wepy 项目的实时编译功能 打开微信开发者工具，加载 wepy 项目并查看效果 解决 ESLint 语法报错问题 ...原创 2021-06-18 18:25:43 · 249 阅读 · 0 评论 -
（微信小程序）生命周期
我是表哥Harker，表妹我来咯~今天讲解小程序中的生命周期1、什么是生命周期生命周期（Life Cycle）是指一个对象从 创建 -> 运行 -> 销毁 的整个阶段，强调的是一个时间段 例如：张三出生，表示这个人生命周期的开始 ，张三死亡，表示这个人生命周期的结束 ，中间张三的一生，就是张三的生命周期 我们可以把每个小程序运行的过程，也概括为生命周期： 小程序的启动，表示生命周期的开始 小程序的关闭，表示生命周期的结束 中间小程序运行的过程，就是小程...原创 2021-06-16 18:02:25 · 878 阅读 · 0 评论 -
大事件项目：（前台开发）四
文章分类1、创建并显示文章分类页面1. 创建 /article/art_cate.html 页面，并初始化如下的UI结构：2. 定义 /assets/css/article/art_cate.css 美化样式：3. 修改 index.html 中对应的 <a> 链接：2、获取并使用模板引擎渲染表格的数据1. 在页面底部导入模板引擎：2. 定义模板：3. 发起请求获取数据：3、使用layer.open实现弹出层效果1....原创 2021-06-02 14:40:44 · 265 阅读 · 0 评论 -
大事件项目：（前台开发）三
1. 文章类别1.1 点击编辑按钮展示修改文章分类的弹出层1. 为编辑按钮添加 btn-edit 类名如下：2. 定义 修改分类 的弹出层：3. 通过 代理 的形式，为 btn-edit 按钮绑定点击事件：<button type="button" class="layui-btn layui-btn-xs btn-edit" data-id="{{$value.Id}}">编辑</button>1<script type="text/htm...原创 2021-06-01 13:21:24 · 239 阅读 · 0 评论 -
大事件项目：（前台开发）二
1. 后台主页1.1 获取用户的基本信息1. 导入需要的脚本：2. 定义 getUserInfo 函数：1.2 渲染用户头像1. 定义 renderAvatar 函数：<!-- 导入 jQuery --><script src="/assets/lib/jquery.js"></script><!-- 导入自己封装的 baseAPI --><script src="/assets/js/bas...原创 2021-06-01 13:20:37 · 313 阅读 · 0 评论 -
大事件项目：（前台开发）一
0. 资源地址1. 线上 DEMO 项目地址：http://www.escook.cn:8086/2. 项目的 API 接口地址： https://www.showdoc.cc/escook?page_id=3707158761215217?1. 项目前期的准备工作1.1 初始化项目结构1. 将 素材 目录下的 assets 和 home 文件夹，拷贝到 code 目录下2. 在 code 目录下新建 login.html 和 index.html 页面1.2 使用GitHub管理...原创 2021-06-01 13:19:31 · 826 阅读 · 0 评论 -
（微信小程序）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-05-31 19:00:07 · 255 阅读 · 0 评论 -
（微信小程序）WePY 框架介绍与安装
一、WePY 框架介绍与安装1. 什么是 WePYWePY 是腾讯官方出品的一个小程序快速开发框架，对原生小程序的开发模式进行了再次封装，更贴近于MVVM 架构模式，并支持ES6/7的一些新特性，同时语法风格更接近于 Vue.js，WePY 框架能够提高小程序的开发效率 注意：WePY 只是小程序的快速开发框架之一，市面上还有诸如 mpvue 之类的小程序开发框架也比较流行2. 为什么要使用 WePYWePY 相比于原生小程序开发，拥有众多的开发特性和优化方案，例如： 开发风格接...原创 2021-05-31 18:59:14 · 1622 阅读 · 0 评论 -
（微信小程序）组件（数据、事件、properties）
一、自定义组件1. 创建组件① 在项目的根目录中，鼠标右键，创建 components -> test 文件夹 ② 在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component” ③ 为新建的组件命名之后，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss 注意：尽量将不同的组件，存放到单独的文件夹中，从而保证清晰的目录结构2. 引用组件① 在需要引用组件的页面中，找到页面的...原创 2021-05-31 18:58:31 · 1081 阅读 · 0 评论 -
（微信小程序）网络数据请求
一、网络数据请求1. 配置服务器域名每个微信小程序需要事先设置一个通讯域名，小程序只可以跟指定的域名进行网络通信。 服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置，配置时需要注意： 域名只支持 https (request、uploadFile、downloadFile) 和 wss (connectSocket) 协议 域名不能使用 IP 地址或 localhost 域名必须经过 ICP 备案 服务器域名一个月内可申请5次修改2. 跳过域名校...原创 2021-05-31 18:57:35 · 416 阅读 · 0 评论 -
（微信小程序）页面导航
一、页面导航1.导航到非 `tabBar` 页面非 `tabBar` 页面指的是没有被当作 `tabBar` 进行切换的页面- 案例代码：```javascript<navigator url="/pages/about/about">跳转到 about 页面</navigator>```- 注意事项 - `url` 属性设置需要跳转的路径 - 页面路径应该以 / 开头， - 路径必须提前在 `app.json` 的 `pages` 节点...原创 2021-05-31 18:56:38 · 703 阅读 · 0 评论 -
（微信小程序）页面渲染和事件
一、页面渲染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 ...原创 2021-05-31 18:55:40 · 1455 阅读 · 0 评论 -
（微信小程序）wxs 脚本
一、wxs 脚本1. 什么是 wxswxs（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构，如： test.wxs2. wxs 的注意点没有兼容性：wxs 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行 与 javascript 不同：wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致 隔离性：wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 ...原创 2021-05-31 18:54:42 · 2199 阅读 · 0 评论 -
（微信小程序）数据与事件绑定
一、数据绑定1. 如何定义页面的数据小程序中每个页面，由4部分组成，其中 .js 文件内可以定义页面的数据、生命周期函数、其它业务逻辑 如果要在.js文件内定义页面的数据，只需把数据定义到 data 节点下即可示例代码如下：Page({ data: { motto: 'Hello World', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUs..原创 2021-05-31 18:53:42 · 298 阅读 · 0 评论 -
（微信小程序）配置文件
一、全局配置文件 app.json小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，它决定了页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等1. 在app.json配置文件中，最主要的配置节点是：pages 数组：配置小程序的页面路径 window 对象：用于设置小程序的状态栏、导航条、标题、窗口背景色 tabBar 对象：配置小程序的tab栏效果2. pages （配置小程序的页面路径）pages 用于指定小程序由哪些页面组成，每一项都对...原创 2021-05-31 18:52:52 · 952 阅读 · 0 评论 -
（微信小程序）结构和组件
一、微信小程序结构1. 小程序的结构1.1 小程序项目的结构1.2 小程序页面的结构①. 小程序页面和Vue组件的对比每个.vue组件，是由 template 模板结构、script 行为逻辑、 style 样式3个部分组成的 每个小程序的页面，是由 .wxml 结构、.js 逻辑、.json 配置、.wxss 样式表 这4个文件组成的②. 小程序页面中每个组成部分的作用.wxml : 用来描述当前这个页面的结构，同时提供了类似于Vue中指令的语法 （就好比x...原创 2021-05-31 18:52:05 · 483 阅读 · 0 评论 -
（微信小程序）账号注册和开发者工具
一、微信小程序账号注册1.注册小程序开发账号官网申请开发者账号的教程：https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=181012141.1 流程步骤信息写对之后到此注册成功了，下面进行账号的一些设置1.2小程序账号设置刚注册的小程序账号，基本信息尚未被初始化，推荐进行账号设置：基本信息设置 开发者设置 成员管理基本信息设置：登录小程序...原创 2021-05-31 18:51:16 · 411 阅读 · 0 评论 -
（微信小程序）基础知识
一、微信小程序基础知识1. 微信开发概述什么是微信开发微信这个软件，提供了聊天、支付、分享、收藏等各种功能，同时用户基数庞大 微信对外开放了很多接口和能力，程序员基于这些功能进行的二次开发，叫做微信开发为什么要学习微信开发企业用人需要 自身发展需要2. 微信开放平台微信开放平台是微信对外提供微信开放接口的一个平台，这些开放出来的微信接口，供第三方的网站或App使用 平台登录地址：https://open.weixin.qq.com2.1 微信开放平台的能力...原创 2021-05-31 18:50:21 · 289 阅读 · 0 评论 -
电商后台管理系统项目 五
一、项目优化1. 生成打包报告 2. 第三方库启用 CDN 3. Element-UI 组件按需加载 4. 路由懒加载 5. 首页内容定制1. 生成打包报告打包时，为了直观地发现项目中存在的问题，可以在打包时生成报告。生成报告的方式有两种： ① 通过命令行参数的形式生成报告 // 通过 vue-cli 的命令选项可以生成打包报告 // --report 选项可以生成 report.html 以帮助分析包内容 vue-cli-service build ...原创 2021-05-28 13:17:57 · 252 阅读 · 0 评论 -
电商后台管理系统项目 四
九、商品管理商品管理模块用于维护电商平台的商品信息，包括商品的类型、参数、图片、详情等信息。通过商品管理模块可以实现商品的添加、修改、展示和删除等功能1. 商品列表实现商品列表布局效果 调用后台接口获取商品列表数据 const { data: res } = await this.$http.get('goods', { params: this.queryInfo }) if (res.meta.status !== 200) { return this.$...原创 2021-05-28 13:17:07 · 365 阅读 · 0 评论 -
电商后台管理系统项目 三
六、 权限管理1. 权限管理业务分析通过权限管理模块控制不同的用户可以进行哪些操作，具体可以通过角色的方式进行控制，即每个用户分配一个特定的角色，角色包括不同的功能权限2. 权限列表展示 <template slot-scope="scope"> <el-tag size="small" v-if="scope.row.level == 0">一级</el-tag> <el-tag type="success" size..原创 2021-05-28 13:15:52 · 256 阅读 · 0 评论 -
电商后台管理系统项目 二
三、登录/退出功能1. 登录业务流程① 在登录页面输入用户名和密码 ② 调用后台接口进行验证 ③ 通过验证之后，根据后台的响应状态跳转到项目主页2. 登录业务的相关技术点http 是无状态的 通过 cookie 在客户端记录状态 通过 session 在服务器端记录状态 通过 token 方式维持状态 （使用 token）3.登录：token 原理分析4.登录功能实现①. 登录页面的布局通过 Element-UI 组件实现布局：el...原创 2021-05-28 13:14:52 · 209 阅读 · 0 评论 -
电商后台管理系统项目 一
一、项目概述1. 基本业务概述根据不同的应用场景，电商系统一般都提供了 PC 端、移动 APP、移动 Web、微信小程序等多种终端访问方式2.电商后台管理系统的功能电商后台管理系统用于管理用户账号、商品分类、商品信息、订单、数据统计等业务功能3. 电商后台管理系统的开发模式（前后端分离）电商后台管理系统整体采用前后端分离的开发模式，其中前端项目是基于 Vue 技术栈的 SPA 项目4. 电商后台管理系统的技术选型前端项目技术栈Vue Vue-rou...原创 2021-05-28 13:13:56 · 1017 阅读 · 0 评论 -
Vue 脚手架（vue-cli）、Element-UI 组件库
一、脚手架（vue-cli）Vue 脚手架用于快速生成 Vue 项目基础架构 官网地址为：https://cli.vuejs.org/zh/1. 安装 3.x 版本的 Vue 脚手架npm install -g @vue/cli2. 基于3.x版本的脚手架创建vue项目 （2种方式，命令行和图形界面）// 1. 基于 交互式命令行 的方式，创建 新版 vue 项目 vue create my-project // 2. 基于 图形化界面 的方式，创建 新...原创 2021-05-28 13:12:34 · 339 阅读 · 0 评论 -
Vue webpack 加载器与单文件组件
一、webpack 中的加载器1. 通过 loader 打包非 js 模块在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块 其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！loader 加载器可以协助 webpack 打包处理特定的文件模块，比如：less-loader 可以打包处理 .less 相关的文件 sass-loader 可以打包处理 .scss 相关的文件 u...原创 2021-05-28 13:10:35 · 195 阅读 · 0 评论 -
Vue webpack介绍与安装
一、模块化相关规范1. 模块化概述传统开发模式的主要问题① 命名冲突 ② 文件依赖通过模块化解决上述问题 模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块 模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护2. 浏览器端模块化规范AMDRequire.js (http://www.requirejs.cn/) （过时） CMDSea.js (https:/...原创 2021-05-28 13:09:35 · 188 阅读 · 0 评论 -
Vue （vue-router）路由
一、路由1. 路由的基本概念与原理路由是一个比较广义和抽象的概念，路由的本质就是对应关系 在开发中，路由分为：后端路由 ， 前端路由2. 后端路由 概念：根据不同的用户 URL 请求，返回不同的内容 本质：URL 请求地址与服务器资源之间的对应关系3. SPA（Single Page Application）后端渲染（存在性能问题） Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作） SPA（Single Page Application...原创 2021-05-28 13:08:29 · 234 阅读 · 0 评论 -
Vue Vuex介绍与使用
一、Vuex介绍与使用1.组件之间共享数据的方式父向子传值：v-bind 属性绑定 子向父传值：v-on 事件绑定 兄弟组件之间共享数据： EventBus $on 接收数据的那个组件 $emit 发送数据的那个组件2.Vuex 是什么Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享 没有vuex时候，组件直接数据共享都要传来传去，本来此组件没用到也时常当做传递数据的中间人，这样非常的不好，vuex出现方便了管理，把需...原创 2021-05-28 13:07:26 · 225 阅读 · 0 评论 -
Vue 接口调用：fetch、axios、async、await
一、fetch接口1. fetch基本特性Fetch API 提供了一个获取资源的接口（包括跨域请求）。任何使用过XMLHttpRequest的人都能轻松上手，而且新的 API 提供了更强大和灵活的功能集 更加简单的数据获取方式，功能更强大、更灵活，可以看做是xhr的升级版 （http协议） 基于Promise实现 fetch()必须接受一个参数——资源的路径。无论请求成功与否，它都返回一个 Promise 对象，resolve 对应请求的Response。你也可以传一个可选的第二个参...原创 2021-05-28 13:05:37 · 322 阅读 · 0 评论 -
Vue Promise 用法
一、前后端交互模式1. 接口调用方式原生 ajax 基于 JQuery 的ajax fetch axios 2. URL 地址格式格式：schema://host:port/path?query#fragment schema：协议。例如http、https、ftp等 host：域名或者IP地址 port：端口, http默认端口80，可以省略 path：路径, 例如/abc/a/b/c query ：查询参数，例如 uname=lisi&age=12 f...原创 2021-05-28 13:04:37 · 339 阅读 · 0 评论