湖南长沙前端开发与培训－通途工作室-前端开发,技术培训,动效研究,求职信息

用VUE+localstorage+lodash.js实现购物车本地存储

作者:admin 日期:2017-10-12

在任何一个购物页面，只要购买了商品，就可以将购买量存储到缓存，实现跨页面共享数据。这个原理也可以用来管理其它较复杂的跨页面结构。

demo地址：

http://258754.cn/2017/jyg/shop.html

http://258754.cn/2017/jyg/sku_detail.html?id=1

几个技术要点：

使用js-storage这个js库来实现对localstorage的读写及判断，比自己写原生要简单。因为localstorage默认存储是字符形式，如果要存储对象、数据这些，还要自己写转换，用库就简单得多了。另外还用isEmpty对“空结构”做判断。
基于VUE做了一个单独的mixin_cart，要引入购物车的页面都可以使用这个mixin
用一个数据结构(cart)来完整的映射“购物车”,针对它写了一些API:

init_cart----从local读数据来形成cart
get_cart_item_count----得到某件商品的购买量
write_cart------新建/改写商品数据
sum_cart-------汇总购买量
clear_cart------待加

使用watch监听页面中的数据变化，一旦发生变化，就扫描数据结构，把购买量的变化使用write_cart映射到cart-->并存储到localstorage。注意watch监听数组或是对象这样的复杂结构，要使用handler+deep: true写法。
一些算法使用了lodash.js，比如：
- 查找符合条件的商品-- _.find
- 从数组中删除商品---_.pull
- 汇总商品购买量------_.sumBy

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 149

VUE中用refs实现父子通讯的新方法

作者:admin 日期:2017-09-30

例子：http://258754.cn/2017/read2/test_component.html

用refs父子通讯的新方法，比用emit要方便。主要思路是用refs去读取子组件的内部值，调用内部函数。之前真不知道可以这样用，直到我读到这篇文章--Vue.js 组件样式指南（英文）：

https://github.com/pablohpsilva/vuejs-component-style-guide

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 137

近期VUE及周边笔记--YDUI框架

作者:admin 日期:2017-09-24

YDUI是基于vue2.0的一个功能齐全的UI框架，就我个人的应用范围来说，比element ui更适合我的需要。可能他的组件配置并没有ele那么强大而齐全，但是简练的风格反而更适合于中小移动端项目。

我主要使用这些组件：

flexible组件，用于rem-px单位转换，默认单位是10，好转脑子。
弹窗，只有几个参数，适用于不复杂的情况。
日期选择器，weui风格的，从底部向上弹出。
滚动加载（yd-infinitescroll）
数字动画（CountUp）

其它的一些组件，别的库中也有，或是可以自己手写出来，并不是完全依赖。

要注意的事及BUG：

1、这个库的版本更新很快，如果发现参数无效等奇怪的情况，请先检查版本。比如yd-infinitescroll的不同版本写法就不一样。

2、flexible组件，对于窗口宽度的变化是有范围的。

Javascript代码

//ydui.flexible.js，以下的11.2会在宽420像素以上停止变化，改为21.2后，会在768像素以上才停
return n.style.fontSize = 5 * Math.max(Math.min(t / 750 * 20, 21.2), 8.55) + "px", e

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 218

近期VUE及周边笔记--easy mock

作者:admin 日期:2017-09-24

easy mock(https://easy-mock.com/)平台的主要作用，是用来模拟生成json文件，在后端未到位的情况下，为前端调试提供数据。我的使用方法：

1、是在开发时将ajax请求，直接指向https://easy-mock.com/mock/59a578f77b7ac306cc2fa863/api这样的远程接口，进行调试。

2、等前后端联调结束后，通过修改axios的axios.defaults.baseURL参数，将数据接口指向真实ajax地址，完成切换。

easy平台提供了丰富的mock.js语法，也可以接收并request参数，模拟真实ajax情况很逼真。比如下面这个范式，就模拟了对”/list?page=*“这样的多页请求的情况：

Javascript代码

{
res_body: function({
_req,
Mock
}) {
//page小于3，每页给出20个随机数据
if (_req.query.page < 3) {
return Mock.mock({
"page_num": 4,
"list|20": [{
"id": _req.query.page,
"tt_amount": "@float(200, 2000, 2, 2)",
"commission": "@float(200, 2000, 2, 2)",
"final_amount": "@float(200, 2000, 2, 2)"
}]
})
}
//page==3，给出6个数据，模拟末页情况
if (_req.query.page == 3) {
return Mock.mock({
"page_num": 4,
"list|6": [{
"id": _req.query.page,
"tt_amount": "@float(200, 2000, 2, 2)",
"commission": "@float(200, 2000, 2, 2)",
"final_amount": "@float(200, 2000, 2, 2)"
}]
})
}
}
}

模拟身份验证

Javascript代码

{
res_flag: function({
_req
}) {
return (_req.header.token == "1234567890")?true:false;
}
}

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 108

近期VUE及周边笔记--axios

作者:admin 日期:2017-09-24

我将ajax工具栈从vue-resource改为了axios，基本用法类似，但调用格式略有不同。比如vue-resource的response是放在res.body中，而axios放在了res.data中。

值得一提的是，axios的全局设置很方便，包括参数和拦截器。列举：

Javascript代码

// 全局基地址配置
axios.defaults.baseURL = 'https://easy-mock.com/mock/59a578f77b7ac306cc2fa863/api';
// 全局token
axios.defaults.headers = {token: window.localStorage.getItem("jyg_token")};
// 添加全局请求拦截器
axios.interceptors.request.use(function (config) {
// 给每个发出的请求后面加上php后缀
config.url = config.url + "php";
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器，比如对所有错误代码进行全局统一的出错处理
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 72

一个典型的电商购物页：VUE2.0/导航列表联动/头部自动收缩/购物车动画效果

作者:admin 日期:2017-08-08

这种结构在电商中很常见，比如饿了吗的店铺页。我边写边参考饿站。

项目地址:

http://258754.cn/2017/jyg/shop2.html

用到的主要的第三库：

1、bscroll（iscroll的一个改进版本），滑动框架。iscroll能实现的功能，比原生滚动控制要强得多。相应的API也更好用。

2、lodash用来实现各种快速数据运算。

技术要点：

1、对于iscroll的一些API的熟悉，比如如何获取滚动高度（onScroll），如何滚动到指定位置（scrollToElement）。

2、必须在dom渲染完成后，再进行iscroll定义，可使用Vue.nextTick。再比如当容器高度发生了变化，必须要refresh重建当前iscroll对象。当refresh时，必须要等容器动画完成后，方可进行。

3、最难点在于建立右侧位置模型，用于左导航与右列表的位置对照。也就是说，每次滚动行为，都会触发当前位置与位置表发生比对，以随时更新左侧导航状态。

4、在建立位置模型过程中，数次用到lodash,比如说：

// 从位置数组中，查找一个最接近当前坐标的值，然后得到“这个值对应的1、2级目录ID”
var zzz = _.findLast(this.arrPosition, function(n) {
     return n.posi<=posY;
});
this.sortA = zzz.sortA;
this.sortB = zzz.sortB;

如果不用工具函数，这种小算法写死人。

5、右侧列表是一次性载入的，可考虑做懒加载。如果列表特别长，也要考虑异步加载。

6、点击购物车的加号时，“小球落入购物车”这一效果，基本实现思路是，先算出起、终点的位置，然后用TweenMax实现动画。最后将其封装做成vue组件，以备重用。非本文重点，不做详述。

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 549

我弟弟零基础转行，在我这里学习二个月，顺利找到工作

作者:admin 日期:2017-07-26

我爱人那边的一亲戚，毕业多年，之前一直在外地工作（非IT行业）。结婚生子后下决心转行，回长沙定居。今年过完年跟前东家办了离职手续，住到我家来一门心思学前端。

历时二个月，跟我写了几个实战项目，然后边帮我做事边找工作。也面试了几家，不靠谱。最后，有一家用人单位听到他用VUE写过几个项目，连细节都没有考察，直接就录用了。老弟本来答应第二天就去上班的，结果当天下午，另一家公司提出更好的待遇---公司规模大，离家近，双休，薪水超过他的心理预期30%。我弟弟自然选择了后者，上班第一周就配了全新电脑。

最终这两家单位选择我弟，都是因为他的VUE实战经验。我估计这个框架在长沙的普及还不是很广，因此缺稀。

以下是我在知乎上面的回答：

本地多数团队还停留在多页面、ES5阶段、GULP工作流为主的阶段。针对这个市场，一般公司对前端使用VUE的要求不高，主要考察以下几点：

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 490

***落霞：你好！大牛！我现在处于转行迷茫期！有些问题想你帮我解答下，谢谢！我毕业后在上海做了三年的船舶管系生产设计，四月中旬辞职回武汉，想转前端开发，因为我姐夫是做后端的！他推荐我转前端，主要是工资比船舶设计类高！我五月份在我姐夫家根据慕课网，W3C自学了一个月前端，对html.css.Javascript基础有了些基本掌握！因为我在家呆一个月了，心理有些烦躁想出去找一个前端实习的工作，我姐夫也认同，说能找到一个公司边做边学更好，我当时想的无所谓工资多少，有公司要就行！投了好多前端实习，或0基础学习的公司，结果去面试都是培训机构！当然我也被这些培训机构洗脑了，想花2万去培训，我姐夫坚决不同意，最后我姐夫建议我把简历上前端工作经验写为半年或一年，找个小公司进去！他的一些前端同学也建议我这样！但我心理是非常排斥的！先不说骗人吧！即使有公司叫我去面试，问我一些项目经验问题，估计我就慌了！因为不是自己做的！所以我想问的问题是，是不是现在所有公司都招那种有项目经验的人！像我这种初学者都找不到工作！还有就是为了面试虚构项目经验好不好？希望你能帮我解答！谢谢！

---------------------------------------

你好。

1、我不是大牛，只算熟练工。

2、公司当然只招熟练工。假设你自己将来做了老板，你想想看，你招初学者进来做啥？-----实际项目你敢给实习生做？质量不过关，总要人擦屁股。坐在那里还占个位子和电脑。除非实习生给钱给公司。

3、越是小公司，越是要做实事的人，进去以后不会给你啥过渡期的。做不了事就走人。虚构经验不是不行，是混不过去，谁也不傻。

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 600

vue-resource1.2.0在读取非json文件时出现的问题

作者:admin 日期:2017-05-24

vue-resource1.2.0版本，发现只能读取.json后缀的文件，换个后缀就不灵了。最终找到答案：

1、把vue-resource.js升级到1.3.1

2、调用处加一句 responseType:"json",

Javascript代码

<script src="js/vue2.js"></script>
<script src="js/vue-resource1.3.1.js"></script>
var call = Vue.http({
method:'GET',
responseType:"json",
url:"mocks/news1"
});
call.then(function (e) {
console.log(e.body);
});

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 479

VUE2.0+vue-finger.js的“新闻条左滑出按钮”组件

作者:admin 日期:2017-05-18

vue-finger.js是将alloy_finger.js用于VUE2.0的一个包装小程序。在网上一直找不到跟VUE2.0很无缝搭配的组件，无奈找了个简单替代品。引用时要将两个库都引入：

XML/HTML代码

<script src="js/alloy_finger.js"></script>
<script src="js/vue-finger.js"></script>

示例图如下：

DEMO在此：http://258754.cn/2017/jzz/test_swipe.html

用F12模拟手机观看

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 627

我常用的gulpfile.js配置与sublime组件列表

作者:admin 日期:2017-05-15

我自己的gulpfile.js代码：

这样运行：

gulp --u DIRNAME

--u是自定义参数，这样可以快速建立DIRNAME目录的虚拟站点，并启动所有监听服务。当你有很多不同的目录时，这样做很方便。

Javascript代码

var gulp = require('gulp'),
// concat = require('gulp-concat'),
// uglify = require('gulp-uglify'),
// mock = require('n-mock'),
browserSync = require('browser-sync').create(),
// fileinclude = require('gulp-file-include'),
// minifyCss = require('gulp-minify-css'),
sass = require('gulp-sass')
autoprefixer = require('gulp-autoprefixer')
// directoryMap = require("gulp-directory-map")
;
gulp.task('default', function() {
var dir = gulp.env.u;
console.log( "----------------当前处理目录为：/"+ dir +"----------------" );
browserSync.init({
server: {
baseDir: dir,
index: "index.html"
}
});
// 自动刷新
gulp.watch(dir+'/*.html', function() {browserSync.reload(); });
gulp.watch(dir+'/scss/*.scss', function () {
return gulp.src(dir+'/scss/*.scss')
.pipe(autoprefixer({
browsers: [
"last 10 versions",
"last 12 Chrome versions",
"Firefox > 20",
"ie 6-8"],
cascade: true
}))
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(dir+"/css"));
});
gulp.watch(dir+'/css/*.css', function() {browserSync.reload(); });
gulp.watch(dir+'/js/common.js', function() {browserSync.reload(); });
});

我常用的sublime插件：

ColorPicker--色彩选择器

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 626

寻找IOS风格的datapicker在vue2下运行

作者:admin 日期:2017-05-06

目前我们做的几个移动端项目，使用vue2多页面方式，js文件用<script>方式引入。因为不能使用import方式引入组件，这就意味着网上大量的VUE2第三方组件，无法使用。

我一般建议，VUE2尽量使用element-ui等嫡系UI，设计样式也尽量与element贴近。但是element缺少一些组件，比如IOS风格的日期选择器（下图）。

我花了几个小时寻找这个datapicker组件，github、segmentfault，但没发现可用的第三方。山穷水尽之时，突然想起，这个组件最早出现在WEUI中，是否可以从WEUI提取？WEUI之前配合jquery使用，并没有跟VUE结合使用过，事后证明这只是我的一种错觉，WEUI本身是可以跟原生JS结合的，也就是说，可以跟VUE结合使用！

找到目标，开始写代码。但奇怪的是，datapicker没有完整的API官方文档，百度也查不到，最后还是通过谷歌翻墙，才找到答案。

WEUI的CSS还是容易改写的，我改写了部分CSS样式，以对应设计师的设计。

最后终于圆满解决！没有使用jquery。

主要代码如下：

methods:{
        clickH:function (ii) {
          var _dt = this.dtime;
          weui.datePicker({
              start:_dt[0][0],     
              end:_dt[1][0],       
              defaultValue: _dt[0],
              onConfirm: function (result) {
                  Vue.set(_dt[ii], 0, result[0]); //年
                  Vue.set(_dt[ii], 1, result[1]); //月
                  Vue.set(_dt[ii], 2, result[2]); //日
              }
          });
        },
        inquireH:function () {
          console.log('查询服务器');
        }
      },
      data: {
        pic:"images/bg1.jpg",
        dtime:[
            [2017,5,5], //日期选择器起始日期
            [2017,5,10]  //日期选择器最远可选日期
         ]
      }

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 467

关于前端求职与简历书写的一些建议--我在知乎上回复一个网友

作者:admin 日期:2017-05-02

您好，我是湖南**大学大四的学生，去年11月开始在一家创业公司实习，但是最近公司人事告诉我，公司现在发展，前端人员他们招聘了另外一个有三年经验的，人员已经够了，然后刷知乎的时候，刚好有看到您的回答，感觉您经验丰富，技术深厚，想请问一下你们最近还在招聘吗？这是我以前写的一个线上简历https://***.github.io/demo_collection/现在修改了一下，您能帮我看一下对于找到工作有什么不足吗？打扰您了，万分感谢😊

我的回答：

1、我有不少朋友在招前端，好的前端市面上很缺。

2、看了一下你的简历，给几个建议：

- 把自己做过的项目、页面拷屏界面放出来，用图、表格来说事，越多越好。光从文字上理解，无法知道项目复杂度。尤其是对一些非专业的HR来说。

- 要高度重视前端的“布局”层面的技术。jquery也好，vue也好，都不是前端的传统自留地。对于刚毕业的你来说，企业需要你的技能点，一般都是布局。就是说，你能把页面排出来就好，响应式、移动端、兼容性，如果都能做得好，你就是不会JS，也没关系。

- 把你的简历、作品全都写在一个页面里，不要让人翻来翻去。

- 写简历要分时间、分条目、分自然段。这一点你做得不好。

- 技能点、分技能，采用脑图结构写清楚。写得越细越好，粗线条的技术名词，只能说明你对此技术了解不深。比如谈及bootstrap,你需要写明，你用过boot的什么皮肤套件，了解过哪些配套的插件，用它做过几个项目，在项目中重点攻克了什么难题？---甚至可以把这些经验写成小文章。这样用人单位会觉得你是“准专业的”。如果你对此技术了解不深，那就实事求是的说说，你做了哪些学习和探索，相信你不是一片空白。

- 你现在这个网站，并没有什么亮点，建议简化成一页式在线简历。把结构和CSS好好写写、搞点交互小动画，足矣。

分类:培训与招聘 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 451