我的博客

本文将通过实战项目，教会您搭建管理系统的注册与登录界面，简单易学，并提供相应的前端源码下载。该源码中的登录与注册页面组件还可嵌入到项目中直接使用。- 主要技术栈如下：1. vue-cli脚手架2. vue-router路由3. element组件库4. vscode编辑器5. vetur+eSLint+prettier插件

Vue基础篇一：编写第一个Vue程序Vue基础篇二：Vue组件的核心概念Vue基础篇三：Vue的计算属性与侦听器Vue基础篇四：Vue的生命周期（秒杀案例实战）Vue基础篇五：Vue的指令Vue基础篇六：Vue使用JSX进行动态渲染Vue提高篇一：使用Vuex进行状态管理Vue提高篇二：使用vue-router实现静态路由Vue提高篇三：使用vue-router实现动态路由Vue提高篇四：使用Element UI组件库Vue提高篇五：使用Jest进行单元测试Vue提高篇六： 使用Vet

Vue基础篇一：编写第一个Vue程序Vue基础篇二：Vue组件的核心概念Vue基础篇三：Vue的计算属性与侦听器Vue基础篇四：Vue的生命周期（秒杀案例实战）Vue基础篇五：Vue的指令Vue基础篇六：Vue使用JSX进行动态渲染Vue提高篇一：使用Vuex进行状态管理Vue提高篇二：使用vue-router实现静态路由Vue提高篇三：使用vue-router实现动态路由Vue提高篇四：使用Element UI组件库Vue提高篇五：使用Jest进行单元测试Vue提高篇六： 使用Vet

Vue基础篇一：编写第一个Vue程序Vue基础篇二：Vue组件的核心概念Vue基础篇三：Vue的计算属性与侦听器Vue基础篇四：Vue的生命周期（秒杀案例实战）Vue基础篇五：Vue的指令Vue基础篇六：Vue使用JSX进行动态渲染Vue提高篇一：使用Vuex进行状态管理Vue提高篇二：使用vue-router实现静态路由Vue提高篇三：使用vue-router实现动态路由Vue提高篇四：使用Element UI组件库Vue提高篇五：使用Jest进行单元测试Vue提高篇六： 使用Vet

Vue基础篇一：编写第一个Vue程序Vue基础篇二：Vue组件的核心概念Vue基础篇三：Vue的计算属性与侦听器Vue基础篇四：Vue的生命周期（秒杀案例实战）Vue基础篇五：Vue的指令Vue基础篇六：Vue使用JSX进行动态渲染Vue提高篇一：使用Vuex进行状态管理Vue提高篇二：使用vue-router实现静态路由Vue提高篇三：使用vue-router实现动态路由Vue提高篇四：使用Element UI组件库Vue提高篇五：使用Jest进行单元测试Vue提高篇六： 使用Vet

1、在新闻列表中引入无限滚动加载功能，并关联自动加载方法。3、向接口获取数据成功后，重新渲染新闻列表。2、在底部放入加载条，显示。

- 在上一篇文章中，我们实现了一个简易版的头条新闻，这次我们做个改进。- 加入新闻频道，可以让用户选择不同的频道，阅读新闻。

Vue基础篇一：编写第一个Vue程序Vue基础篇二：Vue组件的核心概念Vue基础篇三：Vue的计算属性与侦听器Vue基础篇四：Vue的生命周期（秒杀案例实战）Vue基础篇五：Vue的指令Vue基础篇六：Vue使用JSX进行动态渲染Vue提高篇一：使用Vuex进行状态管理Vue提高篇二：使用vue-router实现静态路由Vue提高篇三：使用vue-router实现动态路由Vue提高篇四：使用Element UI组件库Vue提高篇五：使用Jest进行单元测试Vue提高篇六： 使用Vet

Vue基础篇一：编写第一个Vue程序Vue基础篇二：Vue组件的核心概念Vue基础篇三：Vue的计算属性与侦听器Vue基础篇四：Vue的生命周期（秒杀案例实战）Vue基础篇五：Vue的指令Vue基础篇六：Vue使用JSX进行动态渲染Vue提高篇一：使用Vuex进行状态管理Vue提高篇二：使用vue-router实现静态路由Vue提高篇三：使用vue-router实现动态路由Vue提高篇四：使用Element UI组件库Vue提高篇五：使用Jest进行单元测试Vue提高篇六： 使用Vet

前两周有位同学，在后台发私信，希望能实现一个简易的留言板，这周就带领大家来进行实战。

vue实现移动端购物车页面

我们有时候需要在有限空间内，循环播放同一类型的图片、文字等内容。比如首页轮播图片，商品信息循环播放等，这种效果统称为<kbd>走马灯</kbd>。

上一期的实战，我们借助ECharts开源可视化图表库实现一个疫情折线图。本期我们将引入计数器，结合上期实现的折线图，创建一个动态仪表盘。

Vue实战，带你学会使用ECharts绘制疫情折线图。

系列文章目录Vue基础篇一：编写第一个Vue程序Vue基础篇二：Vue组件的核心概念Vue基础篇三：Vue的计算属性与侦听器Vue基础篇四：Vue的生命周期（秒杀案例实战）Vue基础篇五：Vue的指令Vue基础篇六：Vue使用JSX进行动态渲染Vue提高篇一：使用Vuex进行状态管理Vue提高篇二：使用vue-router实现静态路由Vue提高篇三：使用vue-router实现动态路由Vue提高篇四：使用Element UI组件库Vue提高篇五：使用Jest进行单元测试Vue提高篇六

系列文章目录Vue基础篇一：编写第一个Vue程序Vue基础篇二：Vue组件的核心概念Vue基础篇三：Vue的计算属性与侦听器Vue基础篇四：Vue的生命周期（秒杀案例实战）Vue基础篇五：Vue的指令Vue基础篇六：Vue使用JSX进行动态渲染Vue提高篇一：使用Vuex进行状态管理Vue提高篇二：使用vue-router实现静态路由Vue提高篇三：使用vue-router实现动态路由Vue提高篇四：使用Element UI组件库Vue提高篇五：使用Jest进行单元测试Vue提高篇六

文章目录一、需求一、需求公司内部存在大量的设备保修保养文件，

系列文章目录《SpringBoot整合SpringSecurity实现权限控制（一）：实现原理》《SpringBoot整合SpringSecurity实现权限控制（二）：权限数据基本模型设计》《SpringBoot整合SpringSecurity实现权限控制（三）：前端动态装载路由与菜单》《SpringBoot整合SpringSecurity实现权限控制（四）：角色管理》《SpringBoot整合SpringSecurity实现权限控制（五）：用户管理》《SpringBoot整合SpringSe

系列文章目录《SpringBoot整合SpringSecurity实现权限控制（一）：实现原理》《SpringBoot整合SpringSecurity实现权限控制（二）：权限数据基本模型设计》《SpringBoot整合SpringSecurity实现权限控制（三）：前端动态装载路由与菜单》《SpringBoot整合SpringSecurity实现权限控制（四）：角色管理》《SpringBoot整合SpringSecurity实现权限控制（五）：用户管理》《SpringBoot整合SpringSe

系列文章目录《SpringBoot整合SpringSecurity实现权限控制（一）：实现原理》《SpringBoot整合SpringSecurity实现权限控制（二）：权限数据基本模型设计》《SpringBoot整合SpringSecurity实现权限控制（三）：前端动态装载路由与菜单》《SpringBoot整合SpringSecurity实现权限控制（四）：角色管理》《SpringBoot整合SpringSecurity实现权限控制（五）：用户管理》《SpringBoot整合SpringSe

系列文章目录《SpringBoot整合SpringSecurity实现权限控制（一）：实现原理》《SpringBoot整合SpringSecurity实现权限控制（二）：权限数据基本模型设计》《SpringBoot整合SpringSecurity实现权限控制（三）：前端动态装载路由与菜单》《SpringBoot整合SpringSecurity实现权限控制（四）：角色管理》《SpringBoot整合SpringSecurity实现权限控制（五）：用户管理》本文目录一、前言二、需求分析三、后端

系列文章目录《SpringBoot整合SpringSecurity实现权限控制（一）：实现原理》《SpringBoot整合SpringSecurity实现权限控制（二）：权限数据基本模型设计》《SpringBoot整合SpringSecurity实现权限控制（三）：前端动态装载路由与菜单》《SpringBoot整合SpringSecurity实现权限控制（四）：角色管理》本文目录一、前言一、前言...

系列文章目录《SpringBoot整合SpringSecurity实现权限控制（一）：实现原理》《SpringBoot整合SpringSecurity实现权限控制（二）：权限数据基本模型设计》《SpringBoot整合SpringSecurity实现权限控制（三）：前端动态装载路由与菜单》本文目录一、前言一、前言...

系列文章目录《SpringBoot整合SpringSecurity实现权限控制（一）：实现原理》《SpringBoot整合SpringSecurity实现权限控制（二）：权限数据基本模型设计》本文目录一、前言二、数据准备三、编写后端接口一、前言在上篇文章中我们通过 RBAC( Role-Based Access Control:基于角色的访问控制策略)进行权限模型设计，并设计了以下表：本章中前端将通过访问后端接口，拉取用户对应的权限数据，实现动态装载菜单。二、数据准备由于后

文章目录一、前言二、实现原理三、具体实现3.1 给后台方法加上权限控制3.2 后台服务在生成JWT令牌时写入用户所拥有的权限四、跟踪jwt 令牌包含权限一、前言在《手把手教你通过SpringBoot实现邮箱注册码验证》文章中实现了基于邮箱的用户登录认证。在《Vue+SpringBoot 实现用户头像上传（附前后端源码）》文章中又添加了更新用户头像的方法与功能。为了安全起见，除了以上必备的用户认证（登录）识别用户是否合法外，还需要根据权限来控制用户是否能够执行某项操作。比如说我们希望给上传用户头像的

文章目录一、背景二、Cascader 级联选择器三、element-china-area-data省市区级联数据四、前端页面增加省市选择五、 实现效果六、 前端源码一、背景在电商平台中一般会有更新用户个人信息的模块（见下图），在这个功能中，系统会要求用户填写省市区信息及详细地址，便于订单的准确配送。本文将通过Vue+SpringBoot来具体实现用户所在省市区信息的选择与保存。二、Cascader 级联选择器用户在选择省市区时，一般会选择省，再选择地市，最后选择区或县市。对于这种数据集合有清

文章目录一、背景二、vue-image-crop-upload组件三、编写前端上传头像功能四、编写后台上传用户头像接口4.1 实现前端组件上传过来的头像文件保存到服务器上4.2 将保存在服务器上的用户头像路径存放到用户信息表中4.3 编写用户更新头像信息API五、前后端联调六、源码一、背景后台系统一般会有用户个人信息的模块（见下图），为了增强用户的体验度，系统会开放自定义头像的功能，让用户可以上传自定义图片替代默认的系统头像。本文将通过Vue+SpringBoot来具体实现。二、vue-imag

文章目录一、前言二、概况三、搭建注册页面四、改造登录页面四、整体效果动画演示五、前端源码下载六、后续一、前言本文将在vue-admin-template模板基础上完成搭建注册与登录页面。文末处有完整的前端源码下载。环境准备浏览器：ChromeIDE: VS CodeNode.js 10+，npm二、概况我们先了解一下整个项目的目录结构├── build # 构建相关├── mock

一、默认样式我们使用element-ui表单的时候，一般会使用该组件的规则验证器，比如注册时会定义以下规则： <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" autocomplete="off" hide-required-asterisk="true" size="medium

系列文章目录Vue基础篇一：编写第一个Vue程序Vue基础篇二：Vue组件的核心概念Vue基础篇三：Vue的计算属性与侦听器Vue基础篇四：Vue的生命周期（秒杀案例实战）Vue基础篇五：Vue的指令Vue基础篇六：Vue使用JSX进行动态渲染Vue提高篇一：使用Vuex进行状态管理Vue提高篇二：使用vue-router实现静态路由Vue提高篇三：使用vue-router实现动态路由Vue提高篇四：使用Element UI组件库Vue提高篇五：使用Jest进行单元测试Vue提高篇六

文章目录一、Sass二、问题三、解决方案一、SassSASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护sass工具在前端开发中已经被广泛应用，我们在使用Vue3.0开发时，同样会使用此工具，简化样式库的使用。比如我们会使用一些全局变量： // variables.scss // 全局颜色 $blue:#324157; $light-blue:#3A71A8; $red:#C03639; ...又比如我们会使用混合

TypeScript基础篇一: HelloWorld TypeScriptTypeScript基础篇二: 使用TypeScript编写接口和类TypeScript基础篇三: TypeScript的命名空间TypeScript实战篇一：使用Vue-Cli脚手架创建Vue3项目TypeScript实战篇二：动手创建一个TodoList组件TypeScript实战篇三：学习Vue3组合式 API并动手实践文章目录一、组合式 API二、动手实践一、组合式 APIComposition API又称为

TypeScript基础篇一: HelloWorld TypeScriptTypeScript基础篇二: 使用TypeScript编写接口和类TypeScript基础篇三: TypeScript的命名空间TypeScrpit实战篇一：使用Vue-Cli脚手架创建Vue3项目TypeScrpit实战篇二：动手创建一个TodoList组件文章目录一、项目重构二、TodoList组件一、项目重构在上篇文章中已经用脚手架创建了一个Vue3的基础项目，现在我们动手改建这个项目，删除一些不需要的页面，将

TypeScript基础篇一: HelloWorld TypeScriptTypeScript基础篇二: 使用TypeScript编写接口和类TypeScript基础篇三: TypeScript的命名空间TypeScrpit实战篇一：使用Vue-Cli脚手架创建Vue3项目文章目录一、背景二、安装vue-cli三、创建项目四、项目结构一、背景Vue3 Beta版已经发布：Vue3 的源码就是用 TypeScript 编写的，更好的 TypeScript 支持也是这一次升级的亮点。本文章将使用V

文章目录一、接口和类1.1 接口1.2 类二、实际案例2.1 List接口2.2 ArrayList类实现List接口2.3 编写测试实例一、接口和类TypeScript 是面向对象的 JavaScript，我们可以使用TypeScript支持面向对象的所有特性，比如 类、接口等。1.1 接口接口是一系列抽象方法的声明，TypeScript的接口定义如下：// PascalCase形式为接口命名interface List { // 方法声明 add() ...}接

文章目录一、背景二、基本安装二、编写程序运行一、背景前端程序员为了学习Vue3.0框架，不可避免地会涉及TypeScript语言。在语言学习过程中我们希望能搭建一个简便的开发环境，省时也省力。本文将介绍用Vscode使用Code Runner扩展插件，搭建简便的TypeScript调试运行环境。二、基本安装安装Node和Npm (下载链接)> node -v v10.15.3> npm -v6.4.1安装TypeScript> npm install

系列文章目录Vue基础篇一：编写第一个Vue程序Vue基础篇二：Vue组件的核心概念Vue基础篇三：Vue的计算属性与侦听器Vue基础篇四：Vue的生命周期（秒杀案例实战）Vue基础篇五：Vue的指令Vue基础篇六：Vue使用JSX进行动态渲染Vue提高篇一：使用Vuex进行状态管理Vue提高篇二：使用vue-router实现静态路由Vue提高篇三：使用vue-router实现动态路由Vue提高篇四：使用Element UI组件库Vue提高篇五：使用Jest进行单元测试Vue提高篇六

系列文章目录Vue基础篇一：编写第一个Vue程序Vue基础篇二：Vue组件的核心概念Vue基础篇三：Vue的计算属性与侦听器Vue基础篇四：Vue的生命周期（秒杀案例实战）Vue基础篇五：Vue的指令Vue基础篇六：Vue使用JSX进行动态渲染Vue提高篇一：使用Vuex进行状态管理Vue提高篇二：使用vue-router实现静态路由Vue提高篇三：使用vue-router实现动态路由Vue提高篇四：使用Element UI组件库Vue提高篇五：使用Jest进行单元测试Vue提高篇六

系列文章目录Vue基础篇一：编写第一个Vue程序Vue基础篇二：Vue组件的核心概念Vue基础篇三：Vue的计算属性与侦听器Vue基础篇四：Vue的生命周期（秒杀案例实战）Vue基础篇五：Vue的指令Vue基础篇六：Vue使用JSX进行动态渲染Vue提高篇一：使用Vuex进行状态管理Vue提高篇二：使用vue-router实现静态路由Vue提高篇三：使用vue-router实现动态路由Vue提高篇四：使用Element UI组件库Vue提高篇五：使用Jest进行单元测试Vue提高篇六

系列文章目录Vue基础篇一：编写第一个Vue程序Vue基础篇二：Vue组件的核心概念Vue基础篇三：Vue的计算属性与侦听器Vue基础篇四：Vue的生命周期（秒杀案例实战）Vue基础篇五：Vue的指令Vue基础篇六：Vue使用JSX进行动态渲染Vue提高篇一：使用Vuex进行状态管理Vue提高篇二：使用vue-router实现静态路由Vue提高篇三：使用vue-router实现动态路由Vue提高篇四：使用Element UI组件库Vue提高篇五：使用Jest进行单元测试Vue提高篇六