三、通过VueRouter来实现组件之间的跳转提供了3种方式实现跳转：①直接修改地址栏中的路由地址<!doctype html><html><head><meta charset="UTF-8"><title></title><script src="js/vue.js"></script><!-- 引入文件 --><script src="js/vue-router.js"></script></head><body><div id="container"><p>{{msg}}</p><!--通过router-view指定盛放组件的容器 --><router-view></router-view></div><script>var testLogin = Vue.componen...
页面效果如下<template><div><h1>首页</h1><section class="floor-nav" id="floorNavList"><!-- 左侧楼层 --><ul class="nav-list"><li class="nav-list-item" v-for="(item, index) in floorNav" :key="item.id" @click="setFloorNavMountClick(index)">{{ item.name }}</li></ul></section><!-- 右侧的内容区域 --><section class="floor-item" v-for="item in floorList" :key="item.id"><div class="floor-item-box"><h2>{{ it...
后端：<!--token--><dependency><groupId>com.auth0</groupId><artifactId>java-jwt</artifactId><version>3.4.0</version></dependency>/*** @author ：ZWQ* @version ：1.0* @date ：2019/10/16 - 18:52* @description ：*/@Service publicclass TokenService {public String getToken(User user) {Date start = new Date();long currentTime = System.currentTimeMillis() + 60* 60 * 1000;//一小时有效时间Date end = new Date...
效果图片：页面代码： 1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5<meta charset="UTF-8"> 6<meta name="viewport" content="width=device-width, initial-scale=1.0"> 7<!-- 添加公共样式 --> 8<link rel="stylesheet" href="./css/gload.css"> 9<!-- 添加单页面样式 -->10<link rel="stylesheet" href="./css/index.css">11<title>面试题</title>12</head>1314<body>15<div id="app">16<!-- 页面开头区域，搜索框 -->17<div...
1. 扩展Select组件，注册新的组件（global-components.js文件中进行）import Vue from ‘vue‘; import { Upload } from ‘view-design‘;// 扩展组件 // 拖拽文件上传时检测文件个数（单文件上传，拖拽大于一个报错） const MyUpload = Vue.extend(Upload).extend({methods: {onDrop(e) {this.dragOver = false;if (this.itemDisabled) { return; }/* -- 新加 -- */if (!this.multiple && e.dataTransfer.files.length > 1) {this...
vue项目中登录页面用户登录成功后，会把用户信息存储到cookie中，然后跳转进入首页，当用户没有登录时，直接输入页面地址会经过路由守卫检测cookie中是否存在用户信息，如果不存在，重定向到登录页让用户进行登录。接下来从配置cookie方法开始。首先在项目中新建util/cookie.js文件作为存放cookie方法的js 在cookie.js中写进如下代码，该代码封装的三个方法，setCookie:存储cookie； getCookie:读取cookie； clearCookie:删除指定...
一、什么是token token的意思是“令牌”，是服务端生成的一串字符串，作为客户端进行请求的一个标识。当用户第一次登录后，服务器生成一个token并将此token返回给客户端，以后客户端只需带上这个token前来请求数据即可，无需再次带上用户名和密码。简单token的组成；uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign（签名，token的前几位以哈希算法压缩成的一定长度的十六进制字符串。为防止token泄露）。二、token的...
实现方式: 主要是在相互通信的兄弟组件之中，都引入一个新的vue实例，然后通过分别调用这个实例的事件触发事件广播 和监听来实现通信和参数传递。需求: a页面tree的增删改后，数据还是之前的老数据，要求b页面的tree的数据也要更新。A页面: 绑定事件，并通过eventBus.$emit触发。 增加 window.eventBus.$emit(‘getTreeData‘,1) getTreeData(){ // 获取节点数据window.eventBus.$emit(‘getTreeData‘,1)axios.get(‘getpro/getT...
<template><div id="app"><input type="text" v-model=‘todo‘ @keydown="doAdd($event)"/><hr><br><h2>进行中</h2><ul><li v-for="(item,key) in list" v-if="!item.checked"><input type="checkbox" v-model="item.checked" @change="saveList()"/> {{item.title}} -- <button @click="removeData(key)">删除</button></li></ul><br><br><h2>已完成</h2><ul><li v-for="(item,key) in list" v-if="item.checked"><input type...
需求：开发h5活动页 需要呈现效果是 自下往上循环滚动n条数据页面布局：<div class="scrollBar"><div :class="[‘winDetails‘, {‘animate-up‘: animateUp}]"><p v-for="item in lotteryAllList" :key="item.id">恭喜{{renderLockerPhone(item.userName)}}获得{{item.giveAmount/100}}元</p> </div></div>scss:.scrollBar {width: 31rem;height: 3.2rem;display: flex;align-items: center;background-color: rgb(255,34,0);b...
花了整整一周时间，尝试过很多种方法，终于找到了最佳的解决方案（对我来说最佳），为了祭奠逝去的一周，也为了释放激动的情绪，现在不得不写篇博客了。直接上重点：第一步：//在APP.vue里面写上keepalive，可以实现缓存（keep-alive是什么？查看官方文档） 第二步：//在router的index.js里面给需要缓存的页面加上meta参数 第三步：//在APP.vue里面写，当页面路由发生变化时，将相应页面的滚动位置记录下来，在页面updated时读取并...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><script src="https://cdn.jsdelivr.net/npm/vue"></script><title>拖拽</title><style>*{margin: 0;padding: 0;}#box{background: red;width: 100px;height: 100px;position: absolute;}</style></head><body><div id="app"><div id="...
<template> <div class="main"> <el-col :span="2"> <el-upload class="upload-demo" :action="upUrl" accept=".xls,.xlsx" :data="upData" :on-success="upSuccess" :on-error="upError" :limit="1" > <el-button type="primary" icon="el-icon-upload">导入Excel</el-button> </el-upload> </el-col> </div></template><script>import { common...
上个月写了一篇文章是 express+mongodb+vue 实现增删改查. 只是简单的实现了增删改查功能，那么今天是在那个基础之上做了扩展，首先实现的功能有如下：1. 支持注册，登录功能，用户可以注册完成后，进行登录，登录完成后会进入到列表增删改查页面。2. 支持session会话，也就是说设置了多长时间登录过期，如果用户没有登录，直接进查询列表页面，会重定向到登录页面去，如果用户登录了后，把浏览器关掉，直接输入列表查询页面，会直...
<template> <div> <el-button type="text" @click="dialogFormVisible = true">添加栏目</el-button> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="id" label="ID" > </el-table-column> <el-table-column prop="cname" label="栏目名称" ></el-table-column><el-table-columnprop="type"label="栏目类型"></el-table-co...