林鑫_-CSDN博客

原创 vue-manage-system : Vue2 后台管理系统解决方案

基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案。 github地址：https://github.com/lin-xin/vue-manage-system demo地址：http://blog.gdfengshuo.com/example/work/项目截图默认皮肤浅绿色皮肤前言之前在公司用了Vue + El...

2017-03-08 10:56:30 6576 7

原创 vue-manage-system 更新，后台管理系统开发更简单

近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。

2024-04-22 15:43:49 710 2

原创 vue3 + tsrpc +mongodb 实现后台管理系统

之前上线了一个vue后台管理系统，有小伙伴问我有没有后端代码，咱只是个小前端，这就有点为难我了。不过不能辜负小伙伴的信任，nodejs也可以啊，废话不多说，开搞！后端采用 TSRPC 框架实现 API 接口，前端采用后台管理系统框架，数据库采用 mongodb。TSRPC 是专为 TypeScript 设计的 RPC 框架，经千万级用户验证。适用于 HTTP API、WebSocket 实时应用、NodeJS 微服务等场景。有兴趣深入了解可以参考TSRPC官方文档。

2024-01-15 14:44:01 1390

原创 vue-manage-system 后台管理系统开发总结

前言vue-manage-system，一个基于 Vue.js 和 element-ui 的后台管理系统模板，从2016年年底第一个commit，到现在差不多两年了，GitHub上也有了 5k star，也是这些让我有了持续更新的动力，其中也踩了很多坑，在这总结一下。github地址：vue-manage-system线上地址：blog.gdfengshuo.com/example/...

2018-09-12 20:06:13 7395 10

原创 vue.js 组件之间传递数据

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。如何传递数据也成了组件的重要知识点之一。组件组件与组件之间，还存在着不同的关系。父子关系与兄弟关系（不是父子的都暂称为兄弟吧）。

2017-07-10 08:37:32 1160

原创移动端图片上传旋转、压缩的解决方案

在手机上通过网页 input 标签拍照上传图片，有一些手机会出现图片旋转了90度的问题，包括 iPhone 和个别三星手机。这些手机竖着拍的时候才会出现这种问题，横拍出来的照片就正常显示。因此，可以通过获取手机拍照角度来对照片进行旋转，从而解决这个问题。

2017-07-06 09:22:43 1372

原创 sChart.js：一个小型简单的图表库

sChart.js 作为一个小型简单的图表库，没有过多的图表类型，只包含了柱状图、折线图、饼状图和环形图四种基本的图表。麻雀虽小，五脏俱全。sChart.js 基本可以满足这四种图表的需求。而它的小，体现在它的体积上，代码只有 8kb，如果经过服务器的Gzip压缩，那就更小了，因此不用担心造成项目代码冗余。

2017-07-04 09:09:35 2338

原创 HTML5 进阶系列：文件上传下载

HTML5 中提供的文件API在前端中有着丰富的应用，上传、下载、读取内容等在日常的交互中很常见。而且在各个浏览器的兼容也比较好，包括移动端，除了 IE 只支持 IE10 以上的版本。想要更好地掌握好操作文件的功能，先要熟悉每个API。

2017-07-03 08:52:39 629

原创微信小程序之购物车功能

以往的购物车，基本都是通过大量的 DOM 操作来实现。微信小程序其实跟 vue.js 的用法非常像，接下来就看看小程序可以怎样实现购物车功能。

2017-07-01 11:16:20 3377

原创 HTML5 进阶系列：拖放 API 实现拖放排序

HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素，必须设置该元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。

2017-05-02 09:17:46 427

原创 HTML5 进阶系列：indexedDB 数据库

在 HTML5 的本地存储中，有一种叫 indexedDB 的数据库，该数据库是一种存储在客户端本地的 NoSQL 数据库，它可以存储大量的数据。从上篇：HTML5 进阶系列：web Storage ，我们知道 web Storage 可以方便灵活的在本地存取简单数据，但是对于大量结构化存储，indexedDB 的优势就更加明显。接下来我们来看看 indexedDB 如何存储数据。

2017-04-27 09:37:56 460

原创 HTML5 进阶系列：web Storage

HTML5 的 web Storage 存储方式有两种：localStorage 和 sessionStorage。这两种方式都是通过键值对保存数据，存取方便，不影响网站性能。他们的用法相同，存储时间不同。 localStorage 的数据保存在本地硬件上，可以永久保存，可以手动调用api清除数据。sessionStorage 保存在 session 对象中，会在浏览器关闭时被清除。

2017-04-26 09:09:28 306

原创 gulp自动化压缩合并、加版本号解决方案

虽然网上有很多的 gulp 构建文章，但是很多都已经随着 gulp 插件的更新无法运行了。因此，我写了这个比较简单的构建方案。这个方案主要是为了实现js/css的压缩合并、自动添加版本号和压缩html。

2017-04-26 08:48:02 914

原创提高 webpack 构建 Vue 项目的速度

最近有人给我的 Vue2 后台管理系统解决方案提了 issue ，说执行 npm run build 构建项目的时候极其慢，然后就引起我的注意了。在项目中，引入了比较多的第三方库，导致项目大，而每次修改，都不会去修改到这些库，构建却都要再打包这些库，浪费了不少时间。所以，把这些不常变动的第三方库都提取出来，下次 build 的时候不再构建这些库，这样既可大大缩短构建时间。

2017-04-05 08:48:27 2137

原创 Vue.js 插件开发详解

前言随着 Vue.js 越来越火，Vue.js 的相关插件也在不断的被贡献出来，数不胜数。比如官方推荐的 vue-router、vuex 等，都是非常优秀的插件。但是我们更多的人还只停留在使用的阶段，比较少自己开发。所以接下来会通过一个简单的 vue-toast 插件，来了解掌握插件的开发和使用。

2017-03-29 08:52:04 435 1

原创 JavaScript 中闭包的详解

闭包是什么在 JavaScript 中，闭包是一个让人很难弄懂的概念。ECMAScript 中给闭包的定义是：闭包，指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。是不是看完这个定义感觉更加懵逼了？别急，我们来分析一下。闭包是一个函数闭包可以使用在它外面定义的变量闭包存在定义该变量的作用域中好像有点清晰了，但是使用在它外面定义的变量是什么意思，我们先来看看变

2017-03-22 08:46:38 501

原创 JavaScript 中 apply 、call 的详解

apply 和 call 的区别ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法，它们的应用非常广泛，它们的作用也是一模一样，只是传参的形式有区别而已。apply( )apply 方法传入两个参数：一个是作为函数上下文的对象，另外一个是作为函数参数所组成的数组。var obj = { name : 'linxin'}function func(firstNa

2017-03-20 09:32:37 389

原创 JavaScript 中 this 的详解

this 是 js 中定义的关键字，它自动定义于每一个函数域内，但是它的指向却让人很迷惑。在实际应用中，this 的指向大致可以分为以下四种情况。1.作为普通函数调用当函数作为一个普通函数被调用，this 指向全局对象。在浏览器里，全局对象就是 window。

2017-03-20 09:28:43 249

原创 Vuex 模块化实现待办事项的状态管理

在vue里，组件之间的作用域是独立的，父组件跟子组件之间的通讯可以通过prop属性来传参，但是在兄弟组件之间通讯就比较麻烦了。vuex正是为了解决这个问题，让多个子组件之间可以方便的通讯。

2017-03-15 08:50:30 776

原创精通gulp常用插件

本文主要展示的是gulp常用插件的使用方法和用途，通过对插件的熟练运用达到精通gulp。不定期更新。可以到github上面下载DEMO github地址：lin-xin/gulp-plugins匹配符 *、**、！、{}gulp.src('./js/*.js') // * 匹配js文件夹下所有.js格式的文件gulp.src('./js/**/*.js')

2017-02-15 17:39:24 608

原创基于vue2.0+vuex+localStorage开发的本地记事本

本文采用vue2.0+vuex+localStorage+sass+webpack，实现一个本地存储的记事本。兼容PC端和移动端。在线预览地址：DEMO功能说明支持回车添加事件支持事件状态切换添加事件 -> 进入未完成列表未完成 -> 已完成(勾选checkbox)未完成 -> 已取消(点击取消按钮)已完成 -> 未完成(取消勾选checkbox)已取消 -> 未完成(点击恢复按钮

2017-02-15 17:35:49 788

林鑫