qq_27474555的博客

7、在组件中发送mock请求（譬如调用调用 reqgetBannerList 函数）该属性是一个工具类，用于生成各种随机数据。在mock文件夹下创建json文件和mock服务器。5、新建网络请求 mockRequests.js。创建mock服务器，设置响应体，就用数据。banner.json：（轮播图数据）2、Mock.Random属性。4、引用mock服务。6、创建网络请求函数。

vue2安装命令：npm i vuex@3。vue3安装命令：npm i vuex@4。按“加一”按钮，显示的数据加1.注意应安装和Vue对应的版本。3、添加vuex的引用。2、创建vuex文件。

其中3指版本号，vue版本要和vue-router版本配套，否则安装会有错误。创建2个页面Home和Login。在main.js中修改。在App.vue中修改。

Axios基于promise网络请求库，作用于node.js和浏览器中（即同一套代码可以运行在node.js和浏览器中)，在服务器中他使用原生node.js http,在浏览器端则使用XMLHttpRequest。它的顺序是：在lib/defaults.js中找到的库默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。如果你的环境不支持 ES6 Promise，你可以使用polyfill。在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

或者 yarn add @wangeditor/editor-for-vue@next。或者 yarn add @wangeditor/editor-for-vue。2、将WangEditor封装成组件WangEditor.vue。1、在Vue项目中安装WangEditor。

中文字符的分页模糊查询本项目采样springboot+Vue+Mybatis-plus+MySql框架

1、什么是Vuex?Vuex是专门为Vue.js设计的状态管理库，采用集中方式管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式变化。简而言之，就是采用全局模式，将组件的共享状态抽离出来管理，使组件树中每一个位置都可以获取共享的状态或触发行为。Vuex的核心概念有State, Getter, Mutation, Action, Module。下面简要介绍：State定义共享状态，即变量；Getter是基于state的派生状态，可理解为组件中的计算属性；Mutation是更改状态的唯一

1、问题window.open('http:\\www.mscims.com', '_blank')在本地、HTTP部署情况下，显示正常；但在HTTPS 部署情况下，链接地址变为https:\\www.haxada.com\www.mscims.com2、解决办法使用<a>标签，具体如下：<a href="https:\\www.mscims.com" target="_blank">应用入口<i class="el-icon-magic-stick el-icon-

1、程序代码<el-button type="primary" @click="cimsInputClick">应用入口<i class="el-icon-magic-stick el-icon--right"></i></el-button>2、问题<i class="el-icon-magic-stick el-icon--right"></i>在本地正常显示，但部署后不显示。3、原因在/build/webpack.base

1、跳转外部链接并覆盖当前页<el-button type="primary" @click="cimsInputClick">应用入口</el-button>cimsInputClick () { window.location.href = 'https:\\www.mscims.com' }2、跳转不覆盖当前页面，在新窗口打开<el-b...

1、安装vue-print-nb插件npm install vue-print-nb --save2、在main.js文件中引入插件import Print from 'vue-print-nb'Vue.use(Print)3、编写程序 <div style="width: 37%" align="center"> <div id="printTest" s...

目标：将昊享达企业信息管理项目mscims和其客户管理平台mscimsAdmin部署在一个域名、一个服务器下。方法：说明：本方法以2个vue项目为例，mscims项目按正常情况下部署，mscimsAdmin项目按以下步骤修改。1、在文件router/index.js中添加base: ‘admin’修改前export default new Router({mode: ‘history’...

1、操作步骤（1）、使用 USB 数据线将手机与电脑相连；（2）、手机进入开发者模式，勾选 USB 调试，并允许调试；（3）、电脑打开 Chrome 浏览器，在地址栏输入：chrome://inspect/#devices 并勾选 Discover USB devices 选项（可配置）；（4）、用电脑打开页面；（5）、用手机在的Chrome 浏览器打开页面。2、MIUI10设置（...

1、添加样式绑定<div class="container" :style="{height: scrollerHeight}"></div>2、添加属性计算computed: { // 设置滚动区高度，减去头部标题和底部tabbar的高度 scrollerHeight: function() { return (window.innerH...

1、html编码<el-carousel height="600px" indicatorPosition="outside" ref="carousel" @click.native="linkTo"> <el-carousel-item class="carousel-item" v-for="item in imgs" v-bind:key="item.url...

使用scss提示错误的解决1、安装依赖项npm install node-sass --save-dev //安装node-sassnpm install sass-loader --save-dev //安装sass-loadernpm install style-loader --save-dev //安装style-loader2、解...

本例以vue为例，使用text-align: center 和margin:0 auto;实现div居中显示1、html代码<template> <div class="container"> <div class="content"> <a>这是一个内容居中的例子</a> </div>...

1. 基础知识（1）行row<el-row></el-row>（2）列col<el-col></el-col>2. Row属性2.1 栅格属性guttergutter属性来调整布局之间的宽度，即分栏间隔，实例代码如下：<el-row :gutter="20"><el-col :span="6"><div ...

1、区别Vue前端框架需要引入前端路由Vue-router，前端路由的核心在于改变视图的同时不会向后端发出请求；Vue-router中hash模式和history模式最直接的区别是在hash模式中url带“#”，而history模式是没有的；hash模式和history模式属于浏览器自身特性，Vue-router通过这两个特性来实现前端路由；1.1、hash模式hash模式地址栏的url带...

1、介绍Switch开关为element-ui中的开关控件；2、页面代码<el-switch v-model="rohs" active-color="#13ce66" inactive-color="#ff4949"></el-switch>3、JS代码<script> export default { data(...

1.基本思路在前端对请求的日期时间数据进行格式转换，在后端将参数转换成对应格式。2、前端转换程序dateConversion: function (dateValue) { let date = new Date(dateValue) let seperator1 = '-' let seperator2 = ':' let month = date.ge...

1、Steps步骤条的作用Steps步骤条引导用户按照流程完成任务的分布导航，可根据实际应用场景设定步骤，但步骤不得少于2步。2、Steps步骤条属性space: 每个 step 的间距，不填写将自适应间距。支持百分比;direction: 显示方向；active：设置当前激活步骤；finish-status：设置结束步骤的状态；simple：是否应用简洁风格；3、Step...

node-sass安装失败主要是windows平台缺少编译环境，解决办法如下：1、安装node-gypnpm install -g node-gyp2、自动安装跨平台编译器npm install --global --production windows-build-tools3、安装node-sassnpm install node-sass如果安装跨平台编译器出现问题，直接在C:...

如果页面的加载时间过长，大部分用户会放弃访问该网站。用户访问网页的等待时间，有80%是发生在浏览器前端，如何对前端进行优化具有重要的意义。实现网站功能并不难，但要做出高性能、用户体验好的网站并不容易。1.Web前端优化方法1.1减少页面访问所产生的http连接次数 页面所产生的http连接次数是影响网站性能的一个关键瓶颈，在设计时可从以下方面考虑： （...

1、介绍Autoprefixer是一款自动管理浏览器前缀的插件，可以解析css文件并且添加前缀到css内容里，使用Can I Use(caniuse网站)的数据决定哪些前缀是需要的。该插件css解析器采用postcss，使用Browserslist库，可以对浏览器的版本做精确设置。2、工具特点（1）、写纯净的css，不必学习特殊语言（如Sass），也不必记住其使用环境；（2）、与最新的规则...

vue路由跳转方式有四种，具体如下：1、router-link1.1.不带参数<router-link :to="{name:'home'}"><router-link :to="{path:'/home'}"name,path都行，建议用name，因为router-link中链接如果是'/'开始，就是从根路由开始，如果开始不带'/'，则从当前路由开始1.2.带参数&...

1、安装url-search-params-polyfillnpm install --save url-search-params-polyfill2、在需要URLSearchParams的文件引入import 'url-search-params-polyfill'

1、路由懒加载路由懒加载简单来说就是访问到当前页面才会加载相关资源，提高页面加载速度。{ path: '/login', name: 'login', component: resolce => require(['@/pages/login'], resolve)}2、引入CDN细心的同学会发现，项目打包完成后dist文件中有个vendor xxxx.js文件，此文件由引入...

1、代码axios.post('/user',{ firstName:'Guo', lastName:'Hu'}) .then(function(response){ console.log(response);}) .catch(function(error){ console.log(error);});...

1、安装babel-polyfillnpm install --save babel-polyfill安装成功后在package.json中显示相关依赖；2、在main.js中引入babel-polyfillimport 'babel-polyfill'3、在index.html中加入以下代码（选择项）<meta http-equiv="X-UA-Compatible" conte...

1、html代码<div v-for="(item, index) in routes" :index="item.index"> <div v-if="item.children"> <el-submenu :index="index"> <template slot="title">...

1. 让网页适应屏幕宽度1.1.在网页代码的头部加入 <meta name="viewport" content="width=device-width,initial-scale=1" /> 网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%1....

vue中computed计算属性应用1、html页面<template><div><el-form> <el-form-item v-model="count"> <el-input v-model="count.count1"></el-input> </el-form-item> ...

axios在vue中的应用1、login.vue&lt;template&gt;&lt;div id="login"&gt;&lt;form&gt;&lt;label for="username"&gt;用户名&lt;/label&gt;&lt;input type="text" v-model.trim="loginData.userna

vue分页表格添加序号（每页连续排序）1、解决思路          获取到数据，使用forEach为每一项动态添加index属性。2、具体实现2.1、页面显示&lt;el-table :data = "tableData" border&gt;&lt;el-table-column prop="index" label="序号" align="center"&gt;&l

1. 对vue项目进行配置（前端以Vue为例）config/index.js中配置proxyTable: {      '/user':{        target:'http://127.0.0.1:9001',        pathRewrite:{          '^/user':''        }      }    },2、对后台添加CorsConfig（...

1、token验证基本流程基于token的身份验证方法，在服务端不需要存储用户的登陆记录，基本流程如下：客户端使用用户名和密码请求登陆；服务端收到请求，验证用户名与密码；验证成功，服务端会签发一个token，把这个token发送给客户端；客户端收到token，把它存储起来（Cookie、Loacal Storage、session storage）;客户端每次向服务端请求资源的时候，需...

axios是一个基于promise的HTTP库，可以用在浏览器和node.js中1、特征：（1）、从浏览器中创建XMLHttpRequests；（2）、在node.js创建http请求；（3）、支持Promise API；（4）、拦截请求和响应；（5）、转换请求数据和响应数据；（6）、取消请求；（7）、自动转换JSON数据；（8）、客户端支持防御XSRF；2、支持浏览器Chr...

1、前端控制权限1.1、前端控制权限的优点（1）、提升突破权限的门槛；（2）、过滤越权请求，减轻服务端压力；（3）、提升用户体验；2、权限控制权限控制实现对路由、视图、请求的控制；用路由控制实现动态菜单，控制思路有两个：（1）、挂载全部路由，每次路由跳转前做校验；（2）、只挂载用户拥有的路由，从前端路由着手控制；通常采用方案（1），初始化只有登录路由的应用，用户登录后动态添加路...

Message 消息提示常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。从顶部出现，3 秒后自动消失。1、不同状态用来显示「成功、警告、消息、错误」类的操作反馈。<template> <el-button :plain="true" @click="open2">成功</el-button> ...