axios

在实际应用中，往往需要一个报表列表页，支持表单数据的添加或修改，操作完毕后关闭子页并刷新列表页面，效果如下图 主页面代码关键代码： 1）在主页面引入待弹出modal页的组件 < productEditModal :show ="{'showModal': showModal, 'productId': productId}" @on-close ="closeModal" ></ productEditModal > <script> import productEditModal from '@/content/productEdit' // 数据源列表 export default { components: { productEditModal }, ... </script> 2）在主页面中定义弹窗和关闭弹出的函数，其中，showModal、productId为定义的变量，将会传入弹出子页，分别代表是否弹出页和传入到子页面主键值 methods: { // 关闭弹框，赋值父页面 closeModal (resVal) { console.log( '子组件传来的值：' + resVal) this .showModal = resVal.isClose if (resVal.isRefresh) { this .getList() } }, // 弹出页面

本次应用效果如 点击“修改”触发表格行编辑： 编辑行各单元格内容，完毕后点击保存按钮更新编辑内容至表格数据源。 对行单元格的编辑通过公用方法 renderTableColumn 来渲染，若需对单元格做验证则需要再次扩展。 renderTableColumn 的代码如下：其中， editName 是待编辑单元格临时存储变量的字符串，columnName是当前单元格对应的key renderTableColumn (editName, columnName, h, { row, index }) { let edit if ( this .editTableIndex === index) { this [editName] = row[columnName] edit = [h('Input' , { props: { value: row[columnName] }, on: { input: (val) => { this [editName] = val } } })] } else { edit = row[columnName] } return h('div' , [edit]) }, 完整代码如下： <template> <div style="padding:32px 64px"> <h1>可编辑行</h1> <Button type="primary" @click

1. 前言 　　物联网平台，需要有一个类似大屏看板的功能。 　　找了一圈，发现阿里已经有对应的DataV产品，但是那个价格有点贵啊。所以找了这个【http://datav.jiaminghi.com/demo/】，这看起来也是挺不错的。就是需要了解一些前端Vue。说到前端，我之前好久就想入门了。断断续续看视频，写Demo，写小程序。但都处于入门阶段。而且前端变化太快了。半年没看，就各种更新了。不过还是迟早要学的。 2. 安装环境 　　安装IDE，这里推荐VSCode，然后安装Vetur 插件 　　Google Chrome 浏览器 安装 Vue.js Devtools 一个Vue的调试工具 　　安装 npm 　　请到这里下载 https://nodejs.org/en/download/ 1 #现在npm 仓库的网络已经很不错了，如果还不行，那可以使用cnpm 2 # 安装淘宝镜像 3 npm install -g cnpm --registry=https: // registry.npm.taobao.org 4 #安装 vue-cli 全局安装vue- cli脚手架 5 npm install -g vue- cli 6 #查看是否安装成功 7 vue - V 8 #安装 @vue/cli- init 9 npm install -g @vue/cli- init 10

现在前端基本不是vue技术栈就是react技术栈。 vue技术栈最常用的就是element-ui的ui框架了。 在项目中，我们经常会碰到这种需求：批量上传文件 element-ui 确实也为我们提供了<el-upload>这样的组件，同事也暴露了很多的属性和方法供我们使用。 但是很多人却碰到了这样的问题：项目需求是批量上传，但是为什么自己上传的时候，也成功了，但是却是一张一张上传的，这种上传方式有时候并不违背我们的需求，但有时又不是我们需要的。那么，怎么解决批量上传并携带参数呢，我这里写了一个demo， 可供大家参考： 1 < template > 2 < div > 3 < el-form > 4 < el-form-item > 5 < el-upload 6 ref ="upload" 7 action ="/as" 8 multiple 9 :http-request ="handleUpload" 10 :auto-upload ="false" 11 :limit ="20" > 12 < el-button size ="small" type ="primary" > 点击上传 </ el-button > 13 < div slot ="tip" class ="el-upload__tip" > 只能上传jpg/png文件，且不超过500kb </ div >

最近我们公司用vue搞事情，我们就用了Node和Vue写了个博客园的移动端WebApp，想拿出来与大家分享下，也谈谈我遇到的坑。由于时间问题，目前还剩“闪存”，“博问”这两块还没做完。先分享下截图吧。 我呢，就从技术，部署，以及遇到的坑来讲吧，当然啦,首先要感谢博客园官方提供接口，以及客服人员对于我的“邮箱轰炸”，还回复我的问题。致以大大的感谢。 说说我使用的技术吧 开发工具：vs code 前端：vue，vue-cli3.0 vant(ui框架)，webpack，less 后端：博客园官方api 部署：nginx，云服务器 技术就是这么简单，开发工具就不讲了，前端采用脚手架构建而成，就不用自己累死累活去配置，这个时代真好。然后再使用vant的UI框架构建样式界面，webpack打包嘛，less专注样式咯，后端就完全是博客园的api了，拿来即用，不过接口要申请下权限。前后端的请求，我采用的是“axios”,使用它的拦截器做了不少事。然后部署的话，我呢，就生成静态了，然后用nginx部署在阿里云服务器上了。 技术想讲的就这些，vue是基础，若是vue不懂，可以去我之前的文章看看，不过呢，我更建议去官方文档上去学习，其他的也是，我只是比较喜欢写写文章。由这些技术，我就构建了一个webapp。 我遇到的大坑 token问题 博客园的接口采用的是OAuth2的形式

前端网络访问，主流方案就是 Ajax，Vue 也不例外，在 Vue2.0 之前，网络访问较多的采用 vue-resources，Vue2.0 之后，官方不再建议使用 vue-resources ，这个项目本身也停止维护，目前建议使用的方案是 axios。今天松哥就带大家来看看 axios 的使用。 axios 引入 axios 使用步骤很简单，首先在前端项目中，引入 axios： npm install axios -S 装好之后，按理说可以直接使用了，但是，一般在生产环境中，我们都需要对网络请求进行封装。 因为网络请求可能会出错，这些错误有的是代码错误导致的，也有的是业务错误，不管是哪一种错误，都需要开发者去处理，而我们不可能在每一次发送请求时都去枚举各种错误情况。 因此我们需要对前端请求进行封装，封装完成后，将前端错误统一处理，这样，开发者只需要在每一次发送请求的地方处理请求成功的情况即可。 请求封装 在 axios 中，我们可以使用 axios 自带的拦截器来实现对错误的统一处理。 在 axios 中，有请求拦截器，也有响应拦截器。 请求拦截器中可以统一添加公共的请求参数，例如单点登录中前端统一添加 token 参数。 响应拦截器则可以实现对错误的统一处理。 另外一个需要注意的地方则是错误的展示需要使用一种通用的方式，而不可以和页面绑定（例如，登录失败，在用户名

十、徒手撸一个vue下拉左侧二级导航 先附上最终效果图： vue代码： <div class="dropdown-menu-explore" v-on:mouseover="addDropdownContent(this)" v-on:mouseout="removeDropdownContent(this)" > <span class="dropdown-menu">探索</span> <span class="dropdown-menu-arrow"></span> <div class="dropdown-content" v-bind:style="{display:activeDisplay}"> <div class="dropdown-menu-content" id="dropdown-menu-content"> <ul> <li v-for="(list,index) in lists" v-bind:key="index" v-on:mouseover="addListContent(index)" v-on:mouseout="removeListContent(this)" > <router-link to>{{list.message}}</router-link> <ul class="dropdown-menu-content-list" v

Vue.js面试题整理 一、什么是 MVVM ？ MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象（桥梁）。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 二、 mvvm 和 mvc 区别？它和其它框架（ jquery ）的区别是什么？哪些场景适合？ mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验

1、vue中 key 值的作用 key 的特殊属性主要用在 Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。 有相同父元素的子元素必须有 独特的key 。重复的key会造成渲染错误。 最常见的用例是结合 v-for: 1 2 3 < ul > < li v-for="item in items" :key="item.id">...</ li > </ ul > 它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用: 完整地触发组件的生命周期钩子 触发过渡 1 2 3 < transition > < span :key="text">{{ text }}</ span > </ transition > 当 text 发生改变时，<span> 会随时被更新，因此会触发过渡。 2、vue中子组件调用父组件的方法 子组件调用父组件的方法可以使用this.$emit() 3、vue等单页面应用及其优缺点 优点： 1、具有桌面应用的即时性、网站的可移植性和可访问性。 2、用户体验好、快，内容的改变不需要重新加载整个页面。 3、基于上面一点，SPA相对对服务器压力小。

中台 课堂笔记 什么是中台 以拍电影为例： 我们看到的前台就是产出的电影本身，后台是整个拍摄组，那么中台就相当于横店影视城，提供可复用的场景来供后台使用，比如拍古装、民国片对应的场景，来产出不同的电影。 前台：所见即所得 后台：复杂逻辑 中台：拥有可复用的场景的平台 中台的作用/特点 减少重复劳动、赋能、平台化 中台的划分 主要分为：前台与后台之间的中台、技术中台、业务中台、组织中台 举例： GraphQL、FireBase、Kubernetes、PostgREST、LeanCloud等 除此之外还有两种特殊的 孵化中台的中台：例如Spark、Storm等，可以孵化语音识别、人脸识别的AI中台，而这些孵化的中台可以给其它项目来用 调度中台的中台：比如淘宝会把很多中台产出的项目合成到一个时间线上，这些都是需要有一个中台来调度 涉及到的代码概念 元数据（metadata）：用来描述数据的数据，比如下图中常见的请求头和响应头 高阶函数 处理函数的函数（arr.reduce） 返回函数的函数 (koa中 app.use()) Proxy server：代理服务器 ES6 Proxy: 方便开发者劫持对对象的操作 getter/setter Function call/construct 来看下面这段代码，axios，从空对象空手套白狼，来拦截get方法，一层层拦截name,method属性