0

Vue项目中实现用户登录及token验证

在前后端完全分离的情况下,Vue项目中实现token验证大致思路如下:1、第一次登录的时候,前端调后端的登陆接口,发送用户名和密码2、后端收到请求,验证用户名和密码,验证成功,就给前端返回一个token3、前端拿到token,将token存储到localStorage和vuex中,并跳转路由页面4、前端每次跳转路由,就判断 localStroage 中有无 token ,没有就跳转到登录页面,有则跳转到对应路由页面5、每次调后端接口,都要在请求头中加token6、后端判断请求头中有无token,有token,就拿到token并验证token,验证成功就返回数据,验证失败(例如:token过期)...

阅读全文>>

0

Vue3.0新特性探索

本项目综合运用了 Vue3.0 的新特性。基于 Composition API 即 Function-based API 进行改造,配合 Vue Cli,优先体验 Vue3 特性使用单例对象模式进行组件通信使用 axios 库进行网络请求,weui 库实现 UI 界面# 安装依赖npm install# 在浏览器打开localhost:8080查看页面,并实时热更新npm run serve# 发布项目npm run build建议配合 Visual Studio Code 和 Vue 3 Snippets 代码插件Dependencies以下是项目运用到的依赖,@vue/compositio...

阅读全文>>

0

Vue3.0离能够在实际项目运行还相当遥远,2.0将长期存在项目当中

为了把 Vue.js 的源码讲明白,Vue2.0源码设计成由浅入深,分为核心、编译、扩展、生态四个方面去讲,并拆成了八个章节,如下图:第一章:准备工作介绍了 Flow、Vue.js 的源码目录设计、Vue.js 的源码构建方式,以及从入口开始分析了 Vue.js 的初始化过程。第二章:数据驱动详细讲解了模板数据到 DOM 渲染的过程,从 new Vue 开始,分析了 mount、render、update、patch 等流程。第三章:组件化分析了组件化的实现原理,并且分析了组件周边的原理实现,包括合并配置、生命周期、组件注册、异步组件。第四章:深入响应式原理详细讲解了数据的变化如何驱动视图的变...

阅读全文>>

0

Vue实战之require与import的区别和使用

我们都知道Vue之所以这么受大众喜爱的原因之一就是Vue的组件化开发模式,这样不仅提高了组件的可重用性,而且每个 Vue 组件都是Vue的实例,可接受相同的选项对象并提供相同的生命周期钩子。这就让项目调试起来更加简单方便,整个开发效果也更高,可维护性也更强,也能适合多人协同开发。我们在阅读别人项目的时候经常会看到文件中出现require和import,作用都是用来引入模块化编程使用的。那么这两个有什么区别呢?​CommonJS的由来在早期没有模块化思想时代码没有很好的编写规范,导致很多代码、逻辑重复、缺乏条理性且不易管理维护,这也让很多开发者头疼不已。随着JavaScript 社区的发展,社区...

阅读全文>>

0

微软发布TypeScript 3.7

本文译于:TypeScript团队前言我们很高兴宣布TypeScript 3.7的发布,该版本包含了很棒的新语言,编译器和工具功能。如果您还没有听说过TypeScript,那么它是一种基于JavaScript的语言,它添加了静态类型检查以及类型语法。静态类型检查可以让我们知道代码的问题,然后再尝试报告可疑的错误,从而尝试运行它。范围包括可能在代码(如42 / "hello",甚至属性名称的基本错字)中发生的类型强制。但是除此之外,TypeScript还支持一些您喜欢的编辑器中的TypeScript 和 JavaScript的完成,快速修复和重构等功能。实际上,如果您已经在使用Visual St...

阅读全文>>

0

Vue 3.0源代码已开放,98%代码由TypeScript编写

介绍Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。目前Vue3.0的源代码已经开放,不过依然处于Pre-Alpha版本,后续应该会有Alpha、Beta 等版本!Githubhttps://github.com/vuejs/vue-nextTypescript简介由于Vue最新的版本源代码几乎都是Typescript,那么学习Vue的小伙伴要想读懂源代码,那么就有必要学习和了解下Typescript了,下面是对Typescr...

阅读全文>>

0

vue-cli-service的作用是什么,如何工作的呢

使用了近一年的vue-cli, 一直都不知道npm run dev 之后发生了些什么???随手记录下学习笔记 入口 从package.json里面可以看到npm run dev其实就是vue-cli-service serve vue-cli3.0 安装的时候把vue-cli-service一并安装了,即执行了npm install vue-cli-service --save-dev 这样就可以在./node_modules/.bin目录下查看到vue-cli-service @IF EXIST "%~dp0\node.exe" ( "%...

阅读全文>>

0

基于canvas的JavaScript 二维码生成工具——QRCanvas

介绍在我们日常的开发中,特别是在现代的社会环境下,二维码的应用可谓是丰富多彩,各种各样让人眼花缭乱的二维码,可见二维码已经渗透进我们生活的方方面面,也可以说目二维码确确实实方便了我们的生活。因为作为开发人员,很多项目都会用到二维码,最多的莫过于生成二维码,而如今Web应用盛行,那么就有这样一个二维码生成的Javascript库诞生了,它仅仅依赖与canvas,因此它支持大多数浏览器以及NodeJS!PS:由于平台限制本文不展示二维码亮点QRCanvas原本是 jsqrgen,新版有几个亮点仅依赖canvas,兼容性好简单,仅仅是需要一些数据的配置定制化功能丰富支持Nodejs方便在React和...

阅读全文>>

0

使用VUE一年后

从去年年底开始接触VUE,到现在已经整整一年了。这也是我接触的第一个MVVM的框架。在这之前,我也是长期执迷于JQ大法,在项目中尝试过一些常见的UI框架:MiniUI 这是一个很好用的框架,可惜收费较贵,排除这一点,肯定是JQ时代的首选EasyUI 用过一次,复杂的API设计让我败下阵来Bootstrap 上手快,文档详细,但交互上太弱LayUI 近几年新出来的框架,功能丰富,接口简洁,很值得一试在用JQ的时候,一些功能实在难以找到适合项目,或者说是适合自己的,就自己造轮子,比如TinySelect 一个下拉选择组件,用以代替系统的 select 标签TinyForm 一个表单工具,用以读写以...

阅读全文>>

0

axios 核心源码实现原理

1. Interceptors 拦截器axios 官网中对 Interceptors 的使用方法如下: 用户可以通过 then 方法为请求添加回调,而拦截器中的回调将在 then 中的回调之前执行:// Add a request interceptoraxios.interceptors.request.use(function (config) { // Do something before request is sent return config;}, function (error) { // Do something with request error return Promi...

阅读全文>>