写后台管理系统，估计有不少人遇过这样的需求：根据后台数据动态添加路由和菜单。 为什么这么做呢？因为不同的用户有不同的权限，能访问的页面是不一样的。 在网上找了好多资料，终于想到了解决办法。 动态生成路由利用 vue-router 的 addRoutes 方法可以动态添加路由。 先看一下官方介绍： router.addRoutes router.addRoutes(routes: Array<RouteConfig>)动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。 举...
一、前言 vuejs中的事件绑定，使用<v-on:事件名 = 函数名>来完成的，这里函数名是定义在Vue实例中的methods对象中的，Vue实例可以直接访问其中的方法。 二、事件绑定方式 1、 直接在标签中写js方法 <button v-on:click="alert（'hi'）">执行方法的第一种写法</button> 2、调用method的办法 <button v-on:click="run()">执行方法的第一种写法</button><button @click="run()">执行方法的 简写 写法</button> export default { d...
1.写本文的背景 因为程序的调试非常重要，程序猿可以利用好的调试方法去查找定位自己的问题所在之处。从而，达到纠正自己程序错误的地方，健壮自己的程序，让问题变得越来越少，程序变得越来越健康。故作此文，而且日后会将实用的调试程序方法不断进行迭代更新。 2.调试与测试 调式与测试实际有异曲同工之妙，只不过对象不同。测试面向的是产品级，系统级；而调试往往是程序里的某一部分，某个方法，某个属性或者对象。最终效果也很...
错误大全为了测试各种异常处理技巧，我故意触发三种类型的错误。 第一种：引用一个不能存在的变量： <div id="app" v-cloak> Hello, {{name}} </div>上述代码运行后不会抛出错误，但是在控制台会有[Vue warn]消息。你可以在Codepen查看例子完整代码。 第二种：将变量绑定到一个被计算出来的属性，计算的时候会抛出异常。 <div id="app" v-cloak> Hello, {{name2}} </div> <script> const app = new Vue({ el:#app, computed:{ name...
VueConf ，尤大说， Vue 支持 Ts 了，网上关于 Vue + Ts 的资料有点少， 楼主踩了一个星期坑，终于摸明白了 修饰器 的玩法，下面我们就来玩下 Vue 的 decorator 吧 1，data 值的声明 在这里 public 声明的是公有属性， private 声明的是私有属性，私有属性要带 下划线 蓝色框里的内容是声明组件，在每个组件创建时都要带上， Components 中的写法如下 上面是 普通写法 ，下面是 懒加载写法 2.@Prop 父组件传值给子组件 父组件...
jwt 持久化验证前端篇，node 配置详情请移步这里 我用的是vue3，下面是 src 的目录用到的依赖验证思路 Home 页写登录，然后在 About 页获取到登录名。 登录成功缓存 token，进入About页时，通过判断是否有 token 来判断是否登录/登录超时 登录页 在登录页输入用户名和密码，将其提交到vuex // src/views/Home.vue<template><div class="home"><input type="text" v-model="user" placeholder="账号"><input type="text" v-model="p...
前言 这篇博文不会教你怎么安装vue，但会告知安装过程中可能遇到的5个问题 5个报错 ①：若使用vue -V查询是否安装vue时提示没有找到指令，可能是你没有安装vue-cli脚手架（vue-cli可快速创建vue项目） ②：vue安装淘宝镜像时报错，提示无效的配置，必须是完整合法的http地址，原因是我在url前面加了1个空格，这里不要有空格 注：安装淘宝镜像后，需要用到npm的地方都可以用cnpm替换，但建议安装模块和插件用cnpm，打包和启...
这个主题，早在一年前就已经创建，也写了一些内容，碍于在应用上体验始终不够完美，一直只存着草稿。 经过多个平台实践，多次迭代，一些功能加了又减了，最后还是回归了最精简的版本，已适用于大部分的场景，若有需要，可自行扩展。 关键逻辑使用 keep-alive 来缓存各标签页通过 vue-router 的 beforeEach 方法来更新标签信息通过 vuex 来保存标签信息通过 vuex 来使关闭页不被缓存核心代码定义 vuex 的跨页变量（store/index.js) ...
简介 实现功能 自定义文本自定义类型(默认，消息，成功，警告，危险)自定义过渡时间使用vue-cli3.0生成项目toast全局组件编写 /src/toast/toast.vue <template><div class="app-toast"v-if="isShow":class="{info: type=== info,success: type=== success,wraning: type=== wraning,danger: type=== danger}">{{text}}</div> </template> <style scoped> .app-toast {position: fixed;left: 50%;top: 50%;background: #ccc;padding...
一：freeMarker的使用 1：java后台使用freeMarker是通过Model，将值传给前端： 如： @Controller public class MobileNewsFreeMarkerController {@RequestMapping("page/test")public String Test(Model model,HttpServletRequest request){//获取项目路径 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+""+request.getContextPath()+"/";//将页面路径通过model传给前台mo...
1.使用线上的阿里iconfont图标库 1.打开 iconFont官网 选择自己喜欢的图标，并且添加购物车 2.点击购物车，添加至项目 3 生成链接4在我们的vue项目中，找到index.html文件，引入css样式，记住这里要放上你的链接地址 5接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个。 2但是考虑网络及用户体验 阿里iconfont下载本地使用 1 阿里iconfont图标直接下载到本地 2 在assets文件下创建iconfo...
业务需求，进入页面的时候，网页有个默认标题，加载的网页内容不同时，标题需要变更. 例:功能授权，功能授权(张三). Vue下有很多的方式去修改网页标题，这里总结下解决此问题的几种方案: 一、最笨方案 结合业务直接在Vue生命周期函数 created 和 mounted 中，给 document.title赋值。 <script> import axios from axios export default {created () {document.title = 功能授权},mounted() {axios.get(***).then((d)=>{document.ti...
在进入一个页面的时候，一般在获取数据的同时，会先显示一个 loading ，等请求结束再隐藏 loading 渲染页面，只需要用一个属性去记录请求的状态，再根据这个状态去渲染页面就好了 async handler() {this.loading = trueawait fetch()this.loading = false }虽然是很简单的功能，可是要处理的地方多的时候，还是很繁琐的，就想着能不能统一设置处理请求的 loading ，然后页面根据 loading 的状态决定要显示的内容，就根据自己的想法...
前言 今天跟后台对接一个接口，接受到一个加密的值，说是通过gzip加密过的，然后就蒙蔽了， 赶紧上百度找了一下资料，通过一篇文章（原文在底部）发现有个js库可以解密，就下载轻松解密了 实现代码 poko.js可至Github下载 https://github.com/nodeca/pako or npm install pako import pako from pako // 一个是加密：window.btoa()，一个是解密：window.atob() function decode(encodedData) {// 先 base64编码 // 加密：window.b...
在项目中经常会遇到需要将不同的二维码放到一张通用图片上，提供用户下载 简单来说，就是利用canvas将同等比例的二维码在图片上叠加，生成海报 1. 设置相应比例一般来说海报背景都是固定的，可以直接放在public文件夹，二维码可根据后台返回数据，也可用canvas生成，在此不多赘述 import posterBgImg from ../public/images/poster_bg.png;// 海报底图 import qrcodeImg from ../public/images/qrcode.png;// 二维码 export defaul...