vue
to be fan
名乎利乎道路奔波休碌碌,来者往者溪山清净且停停
展开
-
windows下docker部署vue和spring boot以及docker-compose的使用
docker的理解首先,docker是基于linux系统的,它有两个核心images镜像和container容器,镜像就相当于你装系统时的win7系统镜像,容器就是你安装完成后的win7系统,那么docker就是在你真实的系统上,生成了多个虚拟的linux系统,它们之间互相不影响而且还很纯净,如果你想重头再来就把容器删了,用镜像再生成一个,爽哉docker desktop的安装前提:必须是win10系统以上1、下载docker客户端docker desktop,什么也不要更改一路next,强迫症不想原创 2021-11-11 11:56:21 · 3214 阅读 · 0 评论 -
AXIOS基于CORS的封装
import axios from 'axios';import { notification} from 'ant-design-vue'import Cookies from 'js-cookie'; // yarn add js-cookie// 请求baseUrlconst BASE_URL = process.env.VUE_APP_REQUEST_BASE_URLconst initInstance = function (contentType) { let in原创 2021-08-24 17:35:31 · 783 阅读 · 0 评论 -
keep-alive页面数据更新
场景:1.后台管理系统2. 所有页面都用keep-alive进行了缓存3. 当角色管理的数据变动时,需要同步更新用户管理的下拉框内容解决办法: eventBus声名一个全局委托对象// main.jsVue.prototype.$bus = new Vue();更新列表后发送事件此处用的是全局混入,可以参考AOP的使用,在列表新增,编辑或删除后触发// mixindelAfter() { // 如果当前页没有声明busEvent,则默认“list”, 根据该字段可以在不同页面做相..原创 2021-08-24 16:04:27 · 702 阅读 · 0 评论 -
spring boot图片上传和下载
图片上传流程步骤前端传送图片(base64)到服务器服务器将base64转换为byte []服务器根据存储路径生成文件,然后以流的方式写入byte[]前端请求图片服务器根据路径读取文件,以流的方式返回前端上传图片<input type="file" class="img-upload" @change="uploadChange" accept="image/*"/>uploadChange(el) { let that = this;原创 2021-06-17 19:22:48 · 1556 阅读 · 0 评论 -
vue与小程序的生命周期
VUE的生命周期创建Vue对象 | // beforeCreated监听数据 |初始化事件 | // created编译模板 | // beforeMount挂载实例 // mounted由上分析各个生命周期的情况以及可以做的事情:beforeCreated // 什么都获取不到,可以加个loading | created // 可以获取到data,methods等,但是拿不到dom原创 2021-06-15 16:47:10 · 278 阅读 · 0 评论 -
vue自定义指令,点击空白处事件
directives: { clickoutside: { bind(el, binding, vnode) { function documentHandler(e) { // 如果是元素本体则返回 if (el.contains(e.target)) return false; if (binding.expression) { // 有绑定函数,则执行 b..原创 2021-06-15 16:38:06 · 1902 阅读 · 0 评论 -
vuex状态缓存
页面一旦刷新,store就会重置,那么就需要缓存出场// app.vuecreated() { window.addEventListener("beforeunload", () => { sessionStorage.setItem( "userinfo", JSON.stringify(this.$store.state.user) ); });},改变store的结构export default {原创 2021-06-07 15:47:36 · 189 阅读 · 0 评论 -
根据权限动态加载菜单
基础路由const routes = [{ path: '/login', hidden: true, meta: { layout: 'blank' }, component: () => import( /* webpackChunkName: "user" */ '../views/user/login.vue') }, { path: '/home', name: '首页', component: Home, meta: { // 固定在头原创 2021-06-07 15:43:22 · 295 阅读 · 0 评论 -
前端页面主题颜色切换
无UI库依赖的主题切换核心思想:css3中的:root伪类选择器和var变量的应用1、定义主题变量:root { --theme-color: #ccc;}2、使用主题变量.test{ color: var(--theme-color);}3、动态改变主题document.documentElement.style.setProperty('--theme-color', '#fff');依赖于Ant Design的主题切换前提,在main.js引入的必须是它的less样原创 2021-06-07 14:12:59 · 2671 阅读 · 0 评论 -
前端Excel导出
首先,点击下载插件JavascriptexportExcel() { // 异步引入插件 require.ensure([], () => { const { export_json_to_excel, } = require("../../plugins/excelExport/Export2Excel.js"); const tHeader = ['姓名','性别','年龄']; co原创 2021-06-07 11:44:16 · 45 阅读 · 0 评论 -
前端excel导入和导出
安装依赖yarn add xlsx#### Template```html<input class="excel-import" type="file" @change="uploadChange" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/><button @click="ex原创 2021-06-07 11:04:24 · 194 阅读 · 0 评论 -
前端AOP在VUE中使用
核心AOP函数const AOP = (oldFn, before, after) => { return async function () { let args = [].slice.call(arguments); if (Object.prototype.toString.call(before) === "[object Function]") { try { // await保证异步操作的平滑原创 2021-06-04 17:47:26 · 850 阅读 · 0 评论