小楠子的博客

Vue框架中对ECharts图表进行自定义绘制和拖拽的实现项目需要实现自定义图表X轴和Y轴以及自己绘制图表的功能，并且可以手动拖动修改图表中线条走势。实现的效果如下：实现以上效果，HTML代码如下：<template> <div class="ddosData"> <el-form :inline="true" :model="echartsFor...

本篇讲述在Vue项目中使用Switch开关改变状态值之前给出弹窗提示项目中需求：在表格中给每项加一个状态控制按钮，点击按钮给出提示框询问用户是否确定更改状态，用户确定之后再改变Switch的开关值。HTML <el-table-column label="操作" min-width="170" align="center"> <temp...

本篇讲述vue项目打包后能看到所有源码的问题以下截图是我们打包后部署发布的项目，源码被一览无遗。解决以上问题只需要在config文件夹下的index.js文件中将productionSourceMap: true,改为productionSourceMap: false即可。再重新打包进行发布即可得到如下效果：...

点击空白部分返回上一页html部分代码需求是点击content以外的部分返回上一页，代码如下： goBack(event) { var cont = $('#content') if (!cont.is(event.target) && cont.has(event.target).length === 0) { this.$router.g...

一、安装axios:npm i axios --save二、在src目录下新建文件service.js三、在service.js文件中写入以下代码import axios from 'axios'// 创建一个拥有通用配置的axios实例,实例中的配置内容根据实际开发需求而定export const service = axios.create({ baseURL: 'http:/...

在我们开发的过程中，会根据不同的环境使用不同的接口地址，这时候就需要我们自己根据不同的环境配置不同的接口地址了。相关配置主要在config文件夹下的dev.env.js和prod.env.js两个文件，下面废话不多说直接上代码了。dev.env.js文件中的代码如下'use strict'const merge = require('webpack-merge')const prodE...

首先下载百度商桥，并注册一个账号，然后登陆这个账号。登陆进去之后是这样的界面，找到基础设置点击站点，然后点击新建站点在域名那里输入主机的IP地址，不知道IP的按下Windows+r键，输入cmd,打开cmd输入ipconfig,即可查询主机的IP地址。输入域名点击确定之后即可看到如下图所示此时点击获取代码，然后将代码一键复制将复制的代码放在vue项目中的index.html...

ElementUI的Upload组件携带表单数据进行手动上传项目需求本来是文件单独上传，再提交表单数据，请求两次接口。现在需求有变，要求在触发表单传输事件的同时上传文件，也就是提交表单数据和上传文件同步进行，请求一次接口。起初是准备使用upload组件自带的http-request来自定义事件，覆盖组件的默认上传行为，但那样需要自己重新创建formData对象之类的，感觉很麻烦，所以弃用了。...

本篇讲述在vue项目中封装ElementUI的分页组件Pagination以下是子组件，即分页组件的内容<template> <div> <el-pagination class="pagin" background layout="total, sizes, prev, pager, next, jumper" ...

本篇继上篇封装分页组件进行了优化上篇中每引用一次组件就要重复写一次改变分页页数handleCurrentChange和每页显示条数的方法handleSizeChange这两个方法，甚觉麻烦，因此进行了个小优化，将获取表格数据的方法传给分页子组件，使用callback进行数据重新渲染的调用。废话不多说，直接贴代码了，以下是分页组件中的代码<template> <div&g...

本篇讲述使用ElementUI中的Upload组件的http-request方法进行多个文件上传的同时提交表单数据上篇博客使用的是Upload携带额外参数的方法进行文件上传的同时提交表单数据，那种方法仅适用于单个文件上传的时候携带表单数据。而开发过程中一般会有多个文件上传的需求，用Upload携带额外参数，使用其自带的this.$refs.upload.submit()事件进行上传会发送多个请...

今天遇到了一个从没有遇到过的问题，点击菜单时，控制台一直在报错。报错内容如下：Uncaught (in promise) NavigationDuplicated {_name: “NavigationDuplicated”, name: “NavigationDuplicated”}；重新下载一下vue-router的包即可，npm i [email protected]即可...

现在出现的问题是X轴单位内容显示不全主要代码如下：xAxis中的name为“时长（min）”，但上图只显示了“时” grid: { left: '3%', right: '0', bottom: '3%', ...

项目中需要给图表x轴加单位，这里只给出给X轴加单位的关键代码，其他的代码和步骤可以从这篇博客获取[vue使用ECharts制作圆角柱状图](https://blog.csdn.net/RJN0814/article/details/90020981) xAxis : [ { ...

第一步：npm install --save-dev sass-loader第二步：npm install --save-dev node-sass第三步：在build文件夹中找到webpack.base.conf.js，在rules中添加以下代码 { test: /\.vue$/, loader: 'vue-loader', options:...

1.npm install less less-loader css-loader style-loader file-loader font-awesome --save2.在main.js中全局注册font-awesome import ‘font-awesome/css/font-awesome.min.css’以上两步就可以在vue项目中使用font-awesome了vue中使用局...

最近项目需要做像百度云一样的帮助中心一样的效果。要实现的功能是在后台管理系统编辑帮助文档，展示在官网给用户看。项目是用vue做的，最终选择了mavon-editor做富文本编辑器。富文本编辑器集成到项目中效果如下：集成的编辑器分为左右两部分，左边是markdown语法书写的文本内容，右侧是生成的html内容。编辑器右侧上方是添加文章的标题和所属上级，右侧下方是将添加的文章以树形菜单...

继上篇安装使用mavon-editor，本篇讲述文章回显问题使用富文本编辑器就是为了实现发布帮助文档和公告新闻类的编辑功能，文章编辑完毕自然要在页面中展示出来。文章的排版和样式自然要同在编辑器中的一样美观。然而在回显的过程中直接使用后台返回的HTML代码显示时发现和在编辑器中预览时的样式不一致于是乎查找资料后发现需要加上样式才行1.首先引入<link href="https://cd...

本篇讲述关于vue项目中权限管理和addRoutes动态加载路由问题项目中需要新增一个根据不同角色，设置不同权限，根据具体权限访问不同菜单的功能。首先分析项目需求：需要有不同的角色，角色拥有不同的权限根据权限访问菜单，那么路由需要进行动态的添加那么路由初始化时应该是只有那些不需要权限就访问的页面，比如登录注册这种。再来思考如何实现功能，方案大致有两种：4. 一是静态注册好所有的路...

本篇讲述在vue项目中使用ECharts柱状图，并利用双Y轴给图表添加右边框应项目要求，UI给的设计图给图表右边添加了右边框，而echarts中大多是无右边框，或是全部加上纵轴线，显示为网格样式，因此在这想到用双Y轴实现需求。首先确保项目中已经安装echarts并且已经引入HTML中放置一个容器即可：<div id="myChart"></div>在data中定...

先展示圆角柱状图形的效果图表中加入了右边框，关于右边框的加入，利用的是双Y轴实现的，想了解的可以看上一篇博客的代码进行操作，本篇讲述柱状图的圆角设置。主要是修改series中的配置，利用barBorderRadius属性进行圆角设置series : [ { name:'使用时长', ...

本篇讲述双柱状图堆叠展示的背景效果这里主要实现如下效果：这里主要实现了阴影和圆角柱状图以及隐藏X轴的效果，项目需求如此，便依此进行图表的自定义，下面直接贴代码，代码中会有实现目前效果的注释。首先，要确保项目中下载并且引入了echarts// 在HTML中放置一个容器<div id="myChart1"></div>第二步：在data中定义图表配置项（可以在函...

本篇讲述在vue中使用echarts的中国地图，以及对不同板块进行渐变色的设置。效果图如下：实现上图效果步骤如下：确保项目中下载了echarts，然后在main.js中引用echartsimport echarts from 'echarts'import 'echarts/map/js/china'Vue.prototype.$echarts = echarts在组件中放...

在express框架中使用axios的post方法出现报错，报跨域问题先想要解决这个问题需要自己定义请求头，并且在vue中使用qs重新实例化一个axios，这个项目使用vue做前端框架，使用express写后台接口。首先在express的app.js文件里设置携带请求头信息var app = express();app.use("*",function(req, res, next) ...