blog之前端篇

1. 初始化项目

① vue init webpack blog //然后一直回车，或者不用e2e, test, unit

② 修改package.json

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "node app.js",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
  }

安装express框架，在根目录下创建app.js，和用express4.0创建的模板差不多，关键在于以下代码

app.use("/*", express.static(path.join(__dirname, "dist")));

这样开启服务后就可以访问打包后的dist文件夹下面的index.html

③ 添加global文件夹全局配置

修改config/index 文件下的开发端口，改成可全局配置

port: config.devHotPort, //默认为监听8080

2. 获取36氪资讯

 由于是服务端渲染的，采用以往的http+cheerio模块是获取不到动态生成的网页的，所以需要安装cnpm install phantom --save;然后再用cheerio格式化；

具体的教程可以看npm官网的首个例子，或者我GitHub上的代码；

getSight(req, res) {
    let url = "http://36kr.com/", content, instance, page, status;
    let message = [];

    //文件格式{sightList : [], expire: ''}
    return file.readFile('files/mySelf/sightCache.json').then( result => {
        //缓存两个小时
        if(result.expire && (Date.now() - result.expire) < 7200000){
            message = result.sightList;
            return{
                data: message,
                str: "获取每日资讯列表"
            }
        }else{
            return phantom.create().then( result => {
                instance = result;
                return result.createPage()
            }).then( result => {
                page = result;
                return page.open(url)
            }).then( result => {
                if(result = "success"){
                    return page.property('content');
                }else{
                    this.paramError('url');
                }
            }).then( result => {
                content = result;
                return instance.exit();
            }).then( result => {
                let $ = cheerio.load(content, {decodeEntities: false});
                $("li.real_time_wrapper").each(function(){
                    //console.log($(this).find('span.title').text())
                    message.push({
                        title : $(this).find('span.title').text(),
                        brief : $(this).find('div.show-content').text()
                    })
                });
                let tempStr = {
                    sightList :  message,
                    expire       :  Date.now()
                };
                return file.writeFile('files/mySelf/sightCache.json', JSON.stringify(tempStr))

            }).then( result => {
                return{
                    data: message,
                    str: "获取每日资讯列表"
                }
            })
        }
    })
}

static readFile(path){
    return new Promise( (resolve, reject) => {
        if(!fs.existsSync(path)){
            //fs.writeFileSync(path,'')没必要，且创建后，很奇怪发现上面17行return不了
            return resolve({})
        }
        let readstream = fs.createReadStream(path);
        let bufArr = [];
        let bufLen = 0, buf;
        return readstream.on('data', chunk => {
            bufArr.push(chunk);
            bufLen += chunk.length;
        }).on('end', () => {
            try{
                buf = Buffer.alloc(bufLen);
                for(let i = 0, pos = 0; i<bufArr.length&&pos<bufLen; i++){
                    bufArr[i].copy(buf,pos);
                    pos += bufArr[i].length;
                }
                let result = buf.toString();
                if(result.length > 0 && result.indexOf('{') > -1){
                    return resolve(JSON.parse(result))
                }else{
                    return resolve(result)
                }
            }catch( e ){
                log.error( e.message, "readFile" );
                reject( e );
            }
        })
    }).catch( e => {
        log.error( e.message, "readFile" );
        throw new Error( code.fileSysError.code );
    });
}

3. axios进行http请求以及通过webpack设置代理(因为项目运行时前后端各占用一个端口)

webpack也是通过http-proxy-middleware包实现http代理

//跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{}部分。
dev: {
    env: require('./dev.env'),
    port: config.devHotPort,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
        [config.proxyPrefix]: {
            target: 'http://localhost:' + config.port,
            changeOrigin: true,
            pathRewrite: {
                ['^'+config.proxyPrefix]: ''
            }
        }
    },
    cssSourceMap: false
  }
}

//在开发环境中进行配置，不能为空字符串，不然前端不会热更新，只会请求服务端代码，配置代理从而前后端都能热加载，生产环境记得改为“”；
axios.interceptors.request.use(function(config) {
        if(globalConfig.proxyPrefix){
            config.url = globalConfig.proxyPrefix + config.url;
        }
        return config;
    },
    function(error) {
        // Do something with request error
        return Promise.reject(error);
    }
);

安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use，只能每个需要发送请求的组件中即时引入；

为了解决这个问题，有两种开发思路，一是在引入 axios 之后，修改原型链；二是结合 Vuex，封装一个 aciton。

import axios from 'axios'
Vue.prototype.$ajax = axios

//然后可以在组件中调用
this.$ajax({
    method  : 'post',
    url     : '/Interface/getSight',
    data    :  {}
}).then( result => {
    switch(result.data.retcode){
        case 0:
            for(let i = 0; i < result.data.retdata.length; i++){
                self.sightStatus.push(false);
            }

            self.sightList = result.data.retdata;
            break;
    }
}).catch( err => {
    console.log(err)
})

 4. node作为代理服务器（中间层）

vue-cli 的npm start 执行的脚本是 "npm run dev"，所以和开发环境一样，上生产中，我们可以用niginx做代理服务器进行分发，在这个项目中，直接用node做代理服务器

/**
 * 作为代理服务器接口,暂未对data进行buffer二进制处理
 * @version 2017-05-29
 * @param   {string}        url         请求链接
 * @param   {object}        data        请求参数
 * @param   {string}        method      请求类型
 */
proxyRequest( req, res, url, data, method = "post"){

    let options, httpClient, tempOptions;
    tempOptions = urlParser.parse(config.serverUrl + url)
    options = {
        hostname    :   tempOptions.hostname,
        port        :   tempOptions.port,
        path        :   tempOptions.pathname,
        method      :   method,
        encoding    :   "utf-8"
    }
    options.headers = req.headers;
    //默认传递json数据
    data = JSON.stringify( data );

    switch( req.protocol ){
        case "http:":
            httpClient  =   httpNative;
        break;

        case "https:":
            httpClient  =   httpsNative;
        break;

        default:
            httpClient  =   httpNative;
    }

    return new Promise( ( resolve, reject ) => {
        let request = httpClient.request( options, function( response ){
            if( response.statusCode !== 200 ){
                reject( new Error( "httpReuest error, status : " + response.statusCode ) );
            }
            let result, buf, bufArr, bufLen;
            result  =   {
                httpVersion     :   response.httpVersion,
                httpStatusCode  :   response.statusCode,
                headers         :   response.headers,
                body            :   "",
                trailers        :   response.trailers
            };
            bufArr  =   [];
            bufLen  =   0;
            return response.on( "data", function( chunk ){
                bufArr.push( chunk );
                bufLen  +=  chunk.length;
            }).on( "end", function(){
                try{
                    buf     =   Buffer.alloc( bufLen );
                    for( let i = 0, pos = 0; i < bufArr.length && pos < bufLen; i++ ){
                        bufArr[ i ].copy( buf, pos );
                        pos     +=  bufArr[ i ].length;
                    }
                    //必须返回全部信息才能让客户端和服务器创建连接
                    //resolve( JSON.parse( buf.toString() ) );
                    result.body     =   buf.toString();
                    resolve( result );
                }catch( e ){
                    reject( e );
                }
            });
        });

        request.on( "error", error => {
            log.error( "request : " + error.message, "Http" );
            reject( error );
        });

        if( data !== null ){
            request.write( data );
        }

        request.end();
    }).catch( e => {
        log.error( e.message, "Http" );
        throw new Error( code.httpError.code );
    }).then( result => {
        let body = JSON.parse(result.body);

        //必须把把响应头返回给客户端
        for(let item in result.headers){
            res.set(item, result.headers[item])
        }
        switch( body.retcode ){
            case 0:
                result.body = body.retdata;
            break;

            case -1:
                this.paramError( body.retmsg );
            break;

            default:
                throw new Error( body.retcode );
        }
        return result;
    })
}

return this.proxyRequest(req, res, "/user/editUserInfo", {}).then( result => {
    return {
        data : result.body,
        str  : "修改用户信息"
    }
})

在本教程中，采用JWT登录验证，但不打算把后端项目放到GitHub上，所以不使用this.proxyRequest进行请求，而是this.request, 然后把JWT放在中间层进行处理

5. vuex状态管理

6. 富文本编辑器的选择（vue-quill-editor）

npm install vue-quill-editor
npm install quill

 

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import VueQuillEditor from 'vue-quill-editor'

Vue.use(VueQuillEditor)//main.js中全局引入

将其封装成一个组件

https://surmon-china.github.io/vue-quill-editor/ 官方demo给了几个例子给你快速上手

quill-image-resize-module
//用于图片resize，直接按照3.0版本在我自己实际开发过程中报modules undefined
//后面我直接引入1.0版本的，则没有问题，需要可在github复制下来

对于图片单独放到云服务器问题的，我是采用在后端处理解决的（参考：https://www.jianshu.com/p/36b144b4cef8）