'Vue旅行小账本（二）'

Vue旅行小账本

闲来无事，学习了一段时间的Vue，顺带着把axios vuex vue-router也整体走了一遍，但是一直苦于没有合适的练手项目，直到最近看到微信小程序版的旅行小账本，才发现这个项目才是我一直寻找的。话不多说，直接进入主题。

前期准备，首先大体上看了一遍小程序版的旅行小账本的页面和基本交互，大致确定了技术方案
因为页面结构简单，所以没有使用vue的ui库，选取了vue-cli进行开发，vue-cli进行rem适配和其他的一些细节，这里我就不再多讲了，大家有兴趣可以看我另一篇博文。Vue将px转化为rem
在数据获取方面，选取了很火的axios，因为没有后台程序，所以数据接口暂时用easy-mock来进行模拟，
数据的存储，没有后台接口可用，暂时使用vuex进行存储。

首页

首页效果
首先从vuex中获取需要展示的旅行列表，

1
2
3
4
5
6
7
8
9
10
11
12
13
_getData() {
    let self = this;
    
    if (!self.$store.state.appIndex.travelList.length) {
        self.noData = true;
        setTimeout(function() {
            self.noData = false;
        }, 3000)
    } else {
        self.travelList = self.$store.state.appIndex.travelList;
        self.noData = false;
    }
},

vuex中的配置，这里我采用了把用户数据保存在localStorage中，不过现在还没有进行优化，这里其实可以把localStorage设置为有时效的，设置一段日期让localStorage清除掉，而不是永久保存。（后期优化点）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import { Local } from '../../utils/storage'
import uuid from '../../utils/utils'
const appIndex = {
    state: {
        travelList:(function(){
            var travelList;
            if(Local.get('TRAVEL_LIST')){
                travelList = Local.get('TRAVEL_LIST');
            }else{
                travelList =[];
            }
            return travelList
        })()
    },
    actions: {
        getTravelInfo ({commit},params) {
            commit('GET_TRAVEL_INFO',params);
        },
        saveTravelInfo({commit},params){
            commit('SAVE_TRAVEL_INFO',params)
        }
    },
    mutations: {
        GET_TRAVEL_INFO (state) {
             Local.get('TRAVEL_LIST')?state.travelList=state.travelList.push(Local.get('TRAVEL_LIST')):state.travelList=[];
        },
        SAVE_TRAVEL_INFO(state,travelObj){
            travelObj.travelId=uuid(12,16);
            state.travelList.push(travelObj);
            Local.set('TRAVEL_LIST',state.travelList);
        }
    }
}
export default appIndex

用户点击添加旅行笔记
首页效果

添加

在进入到添加页面时，我们需要选图，选取背景图片，在这里是后台配置好的背景选择图片，在这里展示给用户，让用户进行选择，如果用户不选择，那么用默认图片替代，这里用户选择完毕的数据可以存储到vuex中，共享给其他页面使用，从而解决了页面之间传递数据的问题。
添加

然后输入需要录入的笔记，进行旅游活动的描述
添加

最后添加到vuex中的travelList中，根据数据的变化来动态地更新页面，在这里有一个点，是使用swiper时，设置 observer，自动初始化swiper

1
2
3
4
5
6
7
8
9
10
11
swiperFun() {
           let self = this;
           let swiper = new Swiper('.swiper-container', {
               direction: 'horizontal',
               slidesPerView: "auto",
               centeredSlides: true,
               spaceBetween: 20,
               observer: true, //修改swiper自己或子元素时，自动初始化swiper
               observeParents: true //修改swiper的父元素时，自动初始化swiper
           });
       },

添加

展开全文 >>

Vue旅行小账本 （一）

Vue旅行小账本

闲来无事，学习了一段时间的Vue，顺带着把axios vuex vue-router也整体走了一遍，但是一直苦于没有合适的练手项目，直到最近看到微信小程序版的旅行小账本，才发现这个项目才是我一直寻找的。话不多说，直接进入主题。

前期准备，首先大体上看了一遍小程序版的旅行小账本的页面和基本交互，大致确定了技术方案
因为页面结构简单，所以没有使用vue的ui库，选取了vue-cli进行开发，vue-cli进行rem适配和其他的一些细节，这里我就不再多讲了，大家有兴趣可以看我另一篇博文。Vue将px转化为rem
在数据获取方面，选取了很火的axios，因为没有后台程序，所以数据接口暂时用easy-mock来进行模拟，
数据的存储，没有后台接口可用，暂时使用vuex进行存储。

easy-mock进行数据模拟

模拟数据的接口
easy-mock可用很简单地模拟和管理接口非常方便，就拿我们的启动页来说吧
我这里的大致方案是，在路由里进行配置，当项目初始化时，进入启动页面，再由启动页面设置定时器，到时间跳转到首页，下面是具体方案和优化

页面路由的配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import Vue from 'vue'
import Router from 'vue-router'
const Index = resolve => require(['view/index/index'], resolve)
const startUp = resolve => require(['view/start-up/start-up'], resolve)
const addTravelInfo = resolve => require(['view/add-travel-info/add-travel-info'], resolve)
const chioceTravelBg = resolve => require(['view/chioce-travel-bg/chioce-travel-bg'], resolve)
const travelInfo = resolve => require(['view/travel-info/travel-info'], resolve)
const travelPayInfo = resolve => require(['view/travel-pay-info/travel-pay-info'], resolve)
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/startUp'
    },
    {
      path: '/startUp', // 启动页面只显示5秒
      name: 'startUp',
      component: startUp
    },
    {
      path: '/Index', // 首页入口
      name: 'Index',
      component: Index
    },
    {
      path: '/addTravelInfo', // 添加旅行账单页面
      name: 'addTravelInfo',
      component: addTravelInfo
    },
    {
      path: '/chioceTravelBg', // 选择背景图片
      name:'chioceTravelBg',
      component: chioceTravelBg
    },
    {
      path:'/travelInfo/:id',  //详情页面
      name:'travelInfo',
      component:travelInfo
    },
    {
      path:'/travelPayInfo',   //新增开支页面
      name:'travelPayInfo',
      component:travelPayInfo
    }
  ]
})

在进入页面时我们需要进行数据的获取，使用axios进行了简单的封装，获取easy mock的接口数据，这里只是一个简单的数据获取与展示，easy mock的本质就是随机的数据，刚好页面启动页每次需要获取的数据都是随机的，所以使用起来很方便。
下面这里是easy mock数据格式的写法，模拟随机返回一个对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{
  "data": {
    'status': 200,
    'image|1': [{
        'imgUrl': 'static/start-up-1.jpg',
        'imgAlt': '悬崖大海',
        'imgAuthor': '学涯'
      },
      {
        'imgUrl': 'static/start-up-2.jpg',
        'imgAlt': '远方的旅行',
        'imgAuthor': '桃花'
      },
      {
        'imgUrl': 'static/start-up-3.jpg',
        'imgAlt': '朦胧乡村',
        'imgAuthor': '季青'
      },
      {
        'imgUrl': 'static/start-up-4.jpg',
        'imgAlt': '心中的旅行',
        'imgAuthor': '薛慧'
      },
      {
        'imgUrl': 'static/start-up-5.jpg',
        'imgAlt': '心中的孤岛',
        'imgAuthor': '忘记'
      },
      {
        'imgUrl': 'static/start-up-6.jpg',
        'imgAlt': '宁静的古堡',
        'imgAuthor': '凌燕'
      }
    ]
  }
}

###优化
接口数据渲染方面进行了基本的优化，easy mock的数据请求速度比较慢，很容易由于页面在渲染时图片链接暂时没有，导致图片盒子在页面上有一条边框，不是很美观，所以这里进行了判断，如果链接请求不回来的话，不让img标签显示。
优化

启动页面跳转到首页，前期也是由于，考虑到请求接口时，网络状况不太好，如果一进入页面就执行定时器，那么很有可能，页面上的图片还没加载出来，就直接跳转到了首页，所以我们这里进行了优化处理，当数据请求成功以后，再执行定时器。
优化

最终显示的页面效果
效果

展开全文 >>

Vuex

要想使用Vuex，我们必须先要明白Vuex是用来干嘛的，这里是官方给出的一个解释：
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
也就是说Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

Vuex组成

1、state 用来存储数据和数据共享
2、mutation 用来注册改变数据状态（不能进行异步操作）
3、getters 用来对共享数据进行过滤操作
4、action 解决异步改变共享数据

Tips

1、this.$store ： 我们可以通过 this.$store 在vue的组件中获取
vuex的实例。

2、State ： vuex中的数据源，我们可以通过 this.$store.state 获取
我们在vuex中声明的全局变量的值。

3、Getter： 相当于vue中的computed ， 及计算属性， 可以用于监听、
计算 state中的值的变化

4、Mutation： vuex中去操作数据的方法 （只能同步执行）

5、Action： 用来操作 Mutation 的动作 ， 他不能直接去操作数据源，
但可以把mutation变为异步的

6、Module： 模块化，当你的应用足够大的时候，你可以把你的vuex分成多个
子模块

Vuex的基本思想
Vuex

vue的视图都是由数据驱动的，也就是说状态(state)里面的数据是动态变化的，而要改变状态内数据的唯一的方法就是通过mutation!也就是说mutation内可以存放一些改变状态的逻辑方法！这也是Vuex设计的一个特点，处理数据的逻辑和视图进行分离！

在项目中的使用

首先我们新建一个文件夹用来存放vuex的所有文件
然后新建一个index.js文件，用来引用和声明vuex，这里我使用modules进行模块化的引入和管理，便于后期代码维护，我们
我们在代码中分别注册了，state、getters、mutations、actions。
Vuex
这样我们就可以在任何一个 component中通过 this.$store.dispatch(‘getArticle’, {id: this.$route.params.id})来进行操作
Vuex
然后是getters.js,Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Vuex

使用模块式引入不同页面的状态，可以方便后期的代码维护，以用户登录为例，我们建立user.js,然后通过mutation进行模块化管理，在user.js进行我们用户状态的管理。

Vuex
这里我们可以使用mapGetters将getter 映射到局部计算属性：
Vuex

展开全文 >>

JS节流防抖函数

JS节流防抖函数

JS节流防抖函数我们在很多场景都会用到，例如：在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验特别差。这里我们就可以采用debounce（防抖）和throttle（节流）的方式来减少函数调用频率，从而提升用户体验。

html中的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
<script>
    var num = 1;
    var content = document.getElementById('content');
    function handle() {
        content.innerHTML = num++;
    };
    function debounce(func, wait) {
        var timeout;
        return function () {
            var context = this;
            var args = arguments;
            if (timeout) clearTimeout(timeout);
        
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    };
    window.addEventListener('scroll', debounce(handle, 1000));
</script>

在上述代码中，div 元素绑定了 mousemove 事件，当鼠标在 div（灰色）区域中移动的时候会持续地去触发该事件导致频繁执行函数。效果如下
防抖函数
可以明显地看到，在没有通过其它操作的情况下，函数被频繁地执行导致页面上数据变化特别快。所以，接下来让我们来看看防抖和节流是如何去解决这个问题的。

防抖函数

防抖函数（debounce）：当持续多次触发事件时，约定一定时间段内如果没有再次触发事件，那么事件处理函数才会执行一次，如果在设定时间到来之前，用户又一次触发了事件，那么就重新开始计时。如下图，当持续触发scroll事件时，并不马上执行handle函数，当1000毫秒内没有再次触发scroll事件时，才会延时触发scroll事件。
防抖函数

我们可以来实现一个简单防抖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function debounce(func, wait) {
    var timeout;
    return function () {
        var context = this;
        var args = arguments;
        if (timeout) clearTimeout(timeout);
        
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

这里防抖还可以分为两种：‘立即执行防抖函数’和‘非立即执行防抖函数’

1、立即执行防抖函数
立即执行的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function debounce(func,wait) {
    var timeout;
    return function () {
        var context = this;
        var args = arguments;
        if (timeout) clearTimeout(timeout);
        var callNow = !timeout;
        timeout = setTimeout(function(){
            timeout = null;
        }, wait)
        if (callNow) func.apply(context, args)
    }
}

效果如下
立即执行防抖函数

2、非立即执行防抖函数
非立即执行的意思是触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function debounce(func, wait) {
    var timeout;
    return function () {
        var context = this;
        var args = arguments;
        if (timeout) clearTimeout(timeout);
        
        timeout = setTimeout(function(){
            func.apply(context, args)
        }, wait);
    }
}

先看看效果
立即执行防抖函数

可以看到，在触发事件后函数 1 秒后才执行，而如果我在触发事件后的 1 秒内又触发了事件，则会重新计算函数执行时间。

上述防抖函数的代码还需要注意的是 this 和 参数的传递

1
2
var context = this;
var args = arguments;

防抖函数的代码使用这两行代码来获取 this 和 参数，是为了让 debounce 函数最终返回的函数 this 指向不变以及依旧能接受到 e 参数。

在实际开发过程中，我们需要根据不同的场景来决定我们需要使用哪一个版本的防抖函数，一般来讲上述的防抖函数都能满足大部分的场景需求。但我们也可以将非立即执行版和立即执行版的防抖函数结合起来，实现最终的双剑合璧版的防抖函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
function debounce(func,wait,immediate) {
    var timeout;
    return function () {
        var context = this;
        var args = arguments;
        if (timeout) clearTimeout(timeout);
        if (immediate) {
            var callNow = !timeout;
            timeout = setTimeout(function(){
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}

节流函数

节流函数（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。如下图，持续触发scroll事件时，并不立即执行handle函数，每隔1000毫秒才会执行一次handle函数。

节流函数

函数节流主要有两种实现方法：时间戳和定时器。

节流throttle代码（时间戳）：

1
2
3
4
5
6
7
8
9
10
11
12
13
function throttle(func, wait) {
    var previous = 0;
    return function() {
        var now = Date.now();
        var context = this;
        var args = arguments;
        if (now - previous > wait) {
            func.apply(context, args);
            previous = now;
        }
    }
}

效果是这样的
节流函数时间戳

可以看到，在持续触发事件的过程中，函数会立即执行，并且每 1s 执行一次。
节流throttle代码（定时器）:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function throttle(func, wait) {
    var timeout;
    return function() {
        var context = this;
        var args = arguments;
        if (!timeout) {
            timeout = setTimeout(function(){
                timeout = null;
                func.apply(context, args)
            }, wait)
        }
    }
}

使用方式同上，效果如下
节流函数定时器

可以看到，在持续触发事件的过程中，函数不会立即执行，并且每 1s 执行一次，在停止触发事件后，函数还会再执行一次。
我们应该可以很容易的发现，其实时间戳版和定时器版的节流函数的区别就是，时间戳版的函数触发是在时间段内开始的时候，而定时器版的函数触发是在时间段内结束的时候。
同样地，我们也可以将时间戳版和定时器版的节流函数结合起来，得到最终版节流函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/**
 * @desc 函数节流
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param type 1 表时间戳版，2 表定时器版
 */
function throttle(func, wait ,type) {
    if(type===1){
        var previous = 0;
    }else if(type===2){
        var timeout;
    }
    return function() {
        var context = this;
        var args = arguments;
        if(type===1){
            var now = Date.now();
            if (now - previous > wait) {
                func.apply(context, args);
                previous = now;
            }
        }else if(type===2){
            if (!timeout) {
                timeout = setTimeout(function(){
                    timeout = null;
                    func.apply(context, args)
                }, wait)
            }
        }
    }
}

展开全文 >>

Vue:将px转化为rem

Vue:将px转化为rem

1、下载lib-flexible

1
npm i lib-flexible --save

2、引入lib-flexible

在main.js中引入lib-flexible

1
import 'lib-flexible/flexible'

3、设置meta标签

通过meta标签，设置设备宽度以及缩放比例

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

4、安装px2rem-loader

1
npm install px2rem-loader

5、配置px2rem-loader

在build文件中找到util.js，将px2rem-loader添加到cssLoaders中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }
}

同时，在generateLoaders方法中添加px2remLoader

1
2
3
4
5
6
7
8
9
10
11
function generateLoaders (loader, loaderOptions) {
    const loaders = [cssLoader,px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
}

6、重启，一切ok~

1
npm run dev

展开全文 >>

'用户注册登录（二）'

后台的搭建

前面介绍了用户登录注册的前台页面，现在我们开始来介绍一下后台接口的实现。

后台的一些依赖包
后台的包依赖
项目文件组成
后台项目文件组成
我们新建一个app.js用来引入Koa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
const Koa = require('koa')
const app = new Koa()
const json = require('koa-json')
const onerror = require('koa-onerror')
const bodyparser = require('koa-bodyparser')
const logger = require('koa-logger')
const {check_token} = require('./utils/token')
// error handler
onerror(app)
// middlewares
app.use(bodyparser({
  enableTypes:['json', 'form', 'text']
}))
app.use(json())
app.use(logger())
app.use(require('koa-static')(__dirname + '/public'))
// 添加token 验证中间件
app.use(check_token);
// logger
app.use(async (ctx, next) => {
  const start = new Date()
  await next()
  const ms = new Date() - start
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
})
// routes
const index = require('./routes/index')
app.use(index.routes(), index.allowedMethods())
// error-handling
app.on('error', (err, ctx) => {
  console.error('server error', err, ctx)
});
module.exports = app

这里是用户登录注册的接口实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
const User = require('../db').User;
// const Comment = require('../db').Comment
const sha1 = require('sha1');
const { PWD_ENCODE_STR} = require('../utils/config');
const {create_token, check_token_code} = require('../utils/token');
const xss = require('xss')
module.exports = {
  // 用户注册
  async register(ctx, next){
    let {user_name = '', user_id =　'', user_pwd = '', re_user_pwd = '', avatar = "", code = '', code_token = ''} = ctx.request.body;
    try {
      if(user_name == '' || user_id == "" || user_pwd == ""){
        ctx.body = {
          code: 401,
          msg: "注册失败，请填写完整表单!"
        }
        return;
      }
      if(avatar == ''){
        ctx.body = {
          code: 401,
          msg: "注册失败，请上传头像!"
        }
        return;
      }
      if(user_pwd.length < 5){
        ctx.body = {
          code: 401,
          msg: '注册失败，密码最少为5位！'
        }
        return;
      }
      if(user_pwd != re_user_pwd){
        ctx.body = {
          code: 401,
          msg: "注册失败，2次密码输入不一致!"
        }
        return;
      }
      
      // 验证码判断
      let mark = await check_token_code({token:code_token,code});
      if(!mark){
        ctx.body = {
          code: 401,
          msg: '登录失败，验证码错误!'
        }
        return;
      }
      // 判断 user_id 是否重复
      let res = await User.find({user_id});
      if(res.length != 0){
        ctx.body = {
          code: 409,
          msg: '注册失败，登录账号重复了，换一个吧！'
        }
        return;
      }
      user_pwd = sha1(sha1(user_pwd + PWD_ENCODE_STR));
      // 防止xss攻击， 转义
      user_name = xss(user_name);
      let token = create_token(user_id);
      let user = new User({user_id,user_name,user_pwd,avatar,token});
      res = await user.save();
      if(res.user_id != null){
        ctx.body = {
          code: 200,
          msg: "注册成功!",
          data: {
            user_id: res.user_id,
            user_name,
            avatar,
            token,
          }
        }
      }else{
        ctx.body = {
          code: 500,
          msg: "注册失败，服务器异常!"
        }
      }
    }catch (e){
      console.log(e);
      ctx.body = {
        code: 500,
        msg: "注册失败，服务器异常！"
      }
    }
  },
  // 用户登录
  async login(ctx, next){
    let {user_id = '', user_pwd = '' , code = "" , code_token = ''} = ctx.request.body;
    try {
      if(user_id == '' || user_pwd == ''){
        ctx.body = {
          code: 401,
          msg: "登录失败，请输入登录账号或密码!"
        }
        return;
      }
      // 验证码判断
      let mark = await check_token_code({token:code_token,code});
      if(!mark){
        ctx.body = {
          code: 401,
          msg: '登录失败，验证码错误!'
        }
        return;
      }
      user_pwd = sha1(sha1(user_pwd + PWD_ENCODE_STR));
      let res = await User.find({user_id,user_pwd});
      if(res.length == 0){
        ctx.body = {
          code: 401,
          msg: '登录失败，用户名或者密码错误!'
        }
        return;
      }
      let token = create_token(user_id);
      res[0].token = token;
      res[0].save();
      ctx.body = {
        code: 200,
        msg: "登录成功!",
        data: {
          user_id: res[0].user_id,
          user_name: res[0].user_name,
          avatar: res[0].avatar,
          token
        }
      }
    } catch(e){
      console.log(e); 
      ctx.body = {
        code: 500,
        msg: '登录失败，服务器异常!'
      }
    }
  },
  //获取用户头像
  async getAvatar(ctx,next){
    let user_id = ctx.params.id;
    try{
      let res = await User.find({user_id});
      ctx.body = {
        code: 200,
        msg: '获取用户头像成功',
        data: {
          userAva: res
        }
      }
    }catch(e) {
     console.log(e);
     ctx.body = {
       code: 500,
       msg: "获取用户头像失败，服务器异常，请稍后再试！"
     }
   }
  }
}

验证码的实现，使用gd-bmp插件来生成验证码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
const BMP24 = require('gd-bmp').BMP24;
const {create_token} = require('../utils/token');
const Checkcode = require('../db').Checkcode;
module.exports = {
  // 验证码获取
  async checkcode(ctx, next){
    try {
      let {code,img} = makeCapcha();
      let token = create_token(code);
      await new Checkcode({token,code}).save();
      ctx.body = {
        code: 200,
        msg: '获取验证码成功！',
        data: {
          token,
          img: "data:image/bmp;base64," + img.getFileData().toString('base64')
        }
      }
    } catch(e){
      console.log(e);
      ctx.body = {
        code: 500,
        msg: '获取验证码失败！'
      }
    }
  }
}
function rand(min, max) {
  return Math.random()*(max-min+1) + min | 0; //特殊的技巧，|0可以强制转换为整数
}
function makeCapcha() {
  var img = new BMP24(100, 40);
  img.drawCircle(rand(0, 100), rand(0, 40), rand(10 , 40), rand(0, 0xffffff));
  //边框
  img.drawRect(0, 0, img.w-1, img.h-1, rand(0, 0xffffff));
  img.fillRect(0, 0, 100, 40, 0x252632);
  // img.fillRect(rand(0, 100), rand(0, 40), rand(10, 35), rand(10, 35), rand(0, 0xffffff));
  img.drawLine(rand(0, 100), rand(0, 40), rand(0, 100), rand(0, 40), rand(0, 0xffffff));
  //return img;
  //画曲线
  var w=img.w/2;
  var h=img.h;
  var color = rand(0, 0xffffff);
  var y1=rand(-5,5); //Y轴位置调整
  var w2=rand(10,15); //数值越小频率越高
  var h3=rand(4,6); //数值越小幅度越大
  var bl = rand(1,5);
  for(var i=-w; i<w; i+=0.1) {
      var y = Math.floor(h/h3*Math.sin(i/w2)+h/2+y1);
      var x = Math.floor(i+w);
      for(var j=0; j<bl; j++){
          img.drawPoint(x, y+j, color);
      }
  }
  var p = "ABCDEFGHKMNPQRSTUVWXYZ3456789";
  var str = '';
  for(var i=0; i<4; i++){
      str += p.charAt(Math.random() * p.length |0);
  }
  var fonts = [BMP24.font12x24, BMP24.font16x32];
  // var fonts = [BMP24.font8x16, BMP24.font12x24, BMP24.font16x32];
  var x = 15, y=8;
  for(var i=0; i<str.length; i++){
      var f = fonts[Math.random() * fonts.length |0];
      y = 8 + rand(-5, 5);
      img.drawChar(str[i], x, y, f, rand(0xaaaaaa, 0xffffff));
      x += f.w + rand(2, 8);
  }
  return {code:str,img}
}

后台只是实现了一些简单的交互接口，希望后期对后台的使用能够丰富起来

展开全文 >>

用户登录注册（一）

最近一直想尝试一下前后台都由自己来写的项目，但是由于刚接触到Mongdb，所以先尝试做一个小项目，思来想去，就拿前端最基本的注册登录来试一下手吧。环境的搭建和Mongdb数据库的可视化软件配置，我这里就不做多的描述了。

服务端语言的选择

因为前期对node.js学习了一段时间，在选择后台框架时，就选择了Koa，因为使用起来比较方便，文档很全面。

首先来介绍一下Koa,Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造， 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。

话不多说，先看前台页面的搭建

前台页面的搭建

采用基本的Vue-cli进行基本结构的搭建，因为只是一个登陆注册的页面，所以页面结构很简单，一个首页，注册页、登陆页，以及一个下单页面。
先来看一下首页的效果图
首页的效果图
首页这里点击立即下单，判断用户如果有没有登陆，如果vuex中存在用户的token,那么页面直接跳转到下单页面，如果vuex中没有存在用户的token，或者存储用户的token已经过期，那么提示用户你还没有登陆，请先登录再进行下单。

提示用户登录

1
2
3
4
5
6
7
8
9
10
11
order(){
      //获取store里面的token
        let token = store.state.user.token;
        if(token){
          //如果存在token，说明已经登录，跳往下单页面
           this.$router.push('/Order');
        }else{
          this.modalShowOneBtn=true;
          this.modalOneBody='您还没有登录，请先登录，再进行下单操作！'
        }
    }

用户登录
验证码由后台直接生成base64的地址，然后前台进行获取，点击图片进行验证码的切换

1
2
3
4
5
6
7
8
9
10
11
12
async get_check_code() {
                let res = await this.$http.api_get_checkcode();
                let {
                    code,
                    msg,
                    data = {}
                } = res.data;
                if (code == 200) {
                    this.img_base64 = data.img;
                    this.user.code_token = data.token;
                }
            }

用户如果已经有账号，那么在输入账号的时候，可以异步获取用户的头像，提升用户的使用体验。
用户头像获取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
async get_user_avatar(id) {
               let res = await this.$http.api_getAvatar(id);
               // console.log(res.data);
               let {
                   code,
                   msg,
                   data
               } = res.data;
               if (code == 200) {
                   if(data.userAva.length!==0){
                       this.userAvatar = data.userAva[0].avatar;
                   }else{
                       this.userAvatar = require('../assets/logo.png');
                   }                  
               }
           },

如果没有账号可以随时进行注册，这里用户可以上传头像，我采用了vue-cropper插件进行用户头像的裁剪。
用户注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
upload_img(e) {
                let obj = e.target;
                let file = obj.files[0];
                let temArr = file.name.split(".");
                let file_suffix = temArr[temArr.length - 1];
                if (file_suffix != 'jpg' && file_suffix != 'png' && file_suffix != 'jpeg') {
                    this.$toast.center('上传图片失败，目前只支持jpg,png,jpeg的图片!');
                    return;
                }
                let reader = new FileReader();
                let _self = this;
                reader.onload = function(ev) {
                    _self.cropperData.img = ev.target.result;
                    _self.cropper_box_mark = true;
                }
                reader.readAsDataURL(file);
            }

展开全文 >>

Vue的世界

Vue实例上的属性

Vue实例上的属性

组件树

$parent：用来访问组件实例的父实例
$root: 用来访问当前组件树的根实例
$children:用来访问当前组件实例的直接子组件实例
$refs:用来访问ref指令的子组件

Dom访问

$el：用来挂载当前组件实例的dom元素
$els：用来访问$el元素中使用了v-el指令的DOM元素

数据访问

$data：用来访问组件实例观察的数据对象
$options：用来访问组件实例化时的初始化选项对象

DOM方法的使用

$appendTo(elementOrSelector, callback)：将el所指的DOM元素插入目标元素
$before(elementOrSelector, callback)：将el所指的DOM元素或片段插入目标元素之前
$after(elementOrSelector, callback)：将el所指的DOM元素或片段插入目标元素之后
$remove(callback)：将el所指的DOM元素或片段从DOM中删除
$nextTick(callback)：用来在下一次DOM更新循环后执行指定的回调函数

event方法的使用

1.监听
$on(event, callback)：监听实例的自定义事件
$once(event, callback)：同上，但只能触发一次
$watch(property,callback(new, old)): 监听属性的变化，拿到变化前后的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
         // 第一种写法
watch: {
  text(new, old) {
    console.log(`${new}：${old}`);
  }
}
// 第二种写法
const unWatch = this.$watch('text',(new,old)=>
  console.log(`${new}：${old}`);
})
// 2秒后销毁 unWatch
setTimeout(()=> {
  unWatch();
},2000)
// 两种写法的结果一样，只是第二种需要在组件销毁手动销毁$watch

2.触发
$dispatch(event,args)：派发事件，先在当前实例触发，再沿父链一层层向上，对应的监听函数返回false停止
$broadcast(event,args)：广播事件，遍历当前实例的$children，如果对应的监听函数返回false，就停止
$emit(event, args)：触发事件
3.删除
$off(event, callback)：删除时间监听
4.其他
$forceUpdate()：强制组件刷新
$set(ele,attr,value)：给对象设置属性
$delete(ele,attr,value)：删除对象属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div id="app">
      <p>{{obj.a}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj:{}
    };
  }
  mounted(){
    let i = 0;
    setInterval(()=> {
      i++;
      // 第一种
      this.obj.a = i ;
      // obj.a没有定义，vue是无法监听到这个属性的变化，所以页面的值也不会变化，这时可以用$forceUpdate进行强制渲染，当然不推荐这种用法
      this.$forceUpdate();
      
      // 第二种
      this.$set(this.obj,'a',i);
    },1000)
  }
}
</script>

v-model 的修饰符

来自官网的例子：

1..number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

1
<input v-model.number="age" type="number">

这通常很有用，因为即使在 type=”number” 时，HTML 输入元素的值也总会返回字符串。

2..trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

1
<input v-model.trim="msg">

3..lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步(当输入框失去焦点)：

1
2
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

数组和对象要特别注意的

1. 数组
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

1
2
3
4
5
6
7
var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：

1
2
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
1
2
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：

1
vm.$set(vm.items, indexOfItem, newValue)

为了解决第二类问题，你可以使用 splice：

1
vm.items.splice(newLength)

2. 对象
Vue 不能检测对象属性的添加或删除：

1
2
3
4
5
6
7
8
9
var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：

1
2
3
4
5
6
7
var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

你可以添加一个新的 age 属性到嵌套的 userProfile 对象：

1
Vue.set(vm.userProfile, 'age', 27)

你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：

1
vm.$set(vm.userProfile, 'age', 27)

有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

1
2
3
4
Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

你应该这样做：

1
2
3
4
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

computed 计算属性

计算属性的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div id="app">
    <p>{{name}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      firstName: 'Fin',
      lastName: 'Get',
    };
  },
  computed: {
    name() {
      return `${this.firstName}${this.lastName}`
    }
  }
}
</script>

双向绑定的计算属性与Vuex

1
2
3
4
5
6
7
8
9
10
11
12
13
// vuex state是无法直接修改的，官方给出了 v-model 的解决方案
<input v-model="message">
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

如果在方法或者生命周期中使用了计算属性，则必须设置一个set

watch 监听器

watch 简单使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: { // watch 方法最初绑定的时候，它是不会执行的，只有变化了才会执行
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})
watch: { 
// 声明一个handler，这样在初始化时就会执行一次 handler
  firstName: {
    handler(val) {
      this.fullName = val + ' ' + this.lastName
    },
    immediate: true
  }
}

监听对象属性的变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="demo">{{ obj.a }}</div>
<input v-model="obj.a" />
var vm = new Vue({
  el: '#demo',
  data: {
    obj: {
      a: '123'
    }
  },
  watch: {
    obj: {
      handler() {
        console.log('obj.a changed');
      },
      immediate: true,
      deep: true // 如果不加这一句，在输入框中输入值，并不会打印 obj.a changed
    }
  }
})
// 这样写就能监听到属性值的变化
watch: {
  'obj.a': {
    handler() {
      console.log('obj.a changed');
    }
  }
}

展开全文 >>

React井字小游戏

React井字小游戏

在React官方文档中，有一个很适合菜鸟练手的React项目，React井字小游戏。
在这篇教程里，主要涉及到了es6的一些语法。

现在我们这里已经搭建好一个基本的游戏模板，
你可以点击这里进行下载

首先来搭建React的基本运行环境

1、首先需要你安装最新版的node
2、点击创建新的React项目
3、删除掉src文件夹下的所有文件
4、在 src/ 文件夹下新建一个名为 index.css 的文件并拷贝 这里的 CSS 代码 到文件中。
5、在 src/ 文件夹下新建一个名为 index.js 的文件并拷贝 这里的 JS 代码 到文件中, 并在此文件的最开头加上下面几行代码：

1
2
3
4
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

在完成上述操作以后，可以运行cmd进行依赖的安装，运行项目以后，点击http://localhost:3000/就可以看到这样的呈现效果
呈现的效果

不过现在还没有添加功能，接下来给模板添加一些功能

1
2
3
4
5
6
7
8
//棋盘上单独的一个格子
function Square(props){
    return(
        <button className="square" onClick={props.onClick}>
                {props.value}
        </button>
    );
}

props && state

props用于各个组件之间传递数据,state用于组件内部更新状态
react推荐凡是组件通信数据都是通过props。他与state的区别在于，state是通过setState来更新的，
props是通过组件的生命周期来更新的，这意味着，组件生命周期不发生变化，props是不会变的.

子组件Square上绑定的onClick事件是从父组件Board由props.onClick属性传递过来的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//棋盘主体
class Board extends React.Component {
//这里渲染出每一个棋格
    renderSquare(i) {
        return <Square
           value={this.props.squares[i]}
           onClick={()=>this.props.onClick(i)}
           />;
    }
    render() {
        return (
            <div>
                <div className="board-row">
                     {this.renderSquare(0)}
                     {this.renderSquare(1)}
                     {this.renderSquare(2)}
                </div>
                <div className="board-row">
                     {this.renderSquare(3)}
                     {this.renderSquare(4)}
                     {this.renderSquare(5)}
                </div>
                <div className="board-row">
                     {this.renderSquare(6)}
                     {this.renderSquare(7)}
                     {this.renderSquare(8)}
                </div>
            </div>
        );
    }
}

Game组件里编写了我们小游戏的基本逻辑，在这里要阐述一下React的状态提升，以及它的必要性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
//Game 组件则为我们即将要编写的代码预留了一些位置
class Game extends React.Component {
//保存初始化状态
    constructor(){
        super();
        this.state={
            history:[{
                squares:Array(9).fill(null),
            }],
            stepNumber:0,
            xIsNext:true,
        }
    }
    handleClick(i){
        const history = this.state.history.slice(0, this.state.stepNumber + 1);
        const current=history[history.length-1];
        const squares=current.squares.slice();
        //const squares=this.state.squares.slice();//.slice()方法将之前的数组数据深拷贝到一个新的数组中
        if(calculateWinner(squares)||squares[i]){
            return;
        }
        squares[i]=this.state.xIsNext?'X':'O';
        this.setState({
            history:history.concat([{
                squares:squares
            }]),
            stepNumber: history.length,
            xIsNext:!this.state.xIsNext,
        });
    }
    jumpTo(step) {
        this.setState({
            stepNumber: step,
            xIsNext: (step % 2) ? false : true,
        });
    }
    render() {
        const history =this.state.history.slice(0,this.state.stepNumber+1);
        const current =history[this.state.stepNumber];
        const winner =calculateWinner(current.squares);
        const moves=history.map((step,move)=>{
                const desc=move?
                'Move #'+move:
                    'Game start';
                return(
                    <li key={move}>
                        <a href="#" onClick={()=>this.jumpTo(move)}>{desc}</a>
                    </li>
                )
        });
        let status;
        if(winner){
                status="Winner:"+winner;
        }else{
                status="Next player:"+(this.state.xIsNext?'X':'O')
        }
        return (
            <div className="game">
                <div className="game-board">
                    <Board
                        squares={current.squares}
                        onClick={(i)=>this.handleClick(i)}/>
                </div>
                <div className="game-info">
                    <div>{status}</div>
                    <ol>{moves}</ol>
                </div>
            </div>
        );
    }
}
当你遇到需要同时获取多个子组件数据，或者两个组件之间需要相互通讯的情况时，把子组件的 state 数据提升至其共同的父组件当中保存。之后父组件可以通过props 将状态数据传递到子组件当中。这样应用当中的状态数据就能够更方便地交流共享了。

在使用 JavaScript classes 时，你必须调用 super(); 方法才能在继承父类的子类中正确获取到类型的 this 。

在 React 组件的构造方法 constructor 当中，你可以通过 this.state 为该组件设置自身的状态数据。试着把棋盘格子变化的数据储存在组件的state 当中：

1
2
3
4
5
6
7
8
9
10
11
//es6中的语法，把组件中的初始化状态，保存在constructor中
constructor(){
        super();
        this.state={
            history:[{
                squares:Array(9).fill(null),
            }],
            stepNumber:0,
            xIsNext:true,
        }
    }

在constructor中存储了状态数据

handleClick用户操作的基本方法都由这里进行挂载派发，传递，然后子组件由props进行接收

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
handleClick(i){
 //这里保存着棋盘的状态历史
         const history = this.state.history.slice(0, this.state.stepNumber + 1);
         const current = history[history.length-1];
         const squares = current.squares.slice();
         //const squares=this.state.squares.slice();//.slice()方法将之前的数组数据深拷贝到一个新的数组中
         if(calculateWinner(squares)||squares[i]){
             return;
         }
         squares[i]=this.state.xIsNext?'X':'O';
         this.setState({
             history:history.concat([{
                 squares:squares
             }]),
             stepNumber: history.length,
             xIsNext:!this.state.xIsNext,
         });
     }

展开全文 >>

node第二天

package.json的作用

在这里我们要引入utility，需要在package.json中进行配置
package.json中的配置

app.js中代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//引入依赖
var express = require('express');
var utility = require('utility');
var app = express();
app.get('/', function (req, res) {
//获得请求头部
  var q = req.query.q;
  //使用md5进行加密
  var md5Value = utility.md5(q);
  res.send(md5Value);
});
app.listen(3000, function (req, res) {
  console.log('app is running at port 3000');
});

这里我们在cmd中运行app.js，但是这次不同的地方在于，我们访问的网页地址需要作出一些变化
访问 http://localhost:3000/?q=alsotang 完成
结果如下

浏览器效果

题外话

如果直接访问 http://localhost:3000/ 会抛错

可以看到，这个错误是从 crypto.js 中抛出的。

这是因为，当我们不传入 q 参数时，req.query.q 取到的值是 undefined，utility.md5 直接使用了这个空值，导致下层的 crypto 抛错。

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

乐于分享,喜欢环境音乐,爱看动漫,偶尔写写技术博客的小程一枚...