Vue学习笔记

MVVM

Model-View-ViewModule
通过listener和 bind实现双向绑定

SPA

单页应用single page web application
通过url中的#（类似于锚点）来实现路由转换，不刷新页面。
我们可以用如下代码修改成history模式(当前为Hash模式)：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Main
    }
  ]
})
//Hash: 使用URL的hash值来作为路由。支持所有浏览器。 
//History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式 
//Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制进入这个模式。

这样子URL中的#号就被去除了。

前后端分离的开发模式。

1.设计师设计页面设计稿
2.前端工程师和后端工程师以及其他技术人员约定项目开发接口规范
3.后端工程师按照约定接口规范开发相应接口
4.前端工程师开发页面，并对接后端接口（可能先期采用假接口以及假数据，根据约定的字段使用假数据）开发页面

部分HTTP状态码

200 OK

400 Bad Request

报文中存在语法错误

401 Unauthorized

403 Forbidden

访问被拒绝

404 Not Found

500 Internal Server Error

部分请求方法

理解为四种方法，除GET外的方法具体如何处理和返回取决于服务器端如何设置，可脱离标准定义。

POST

向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。

GET

请求指定的页面信息，并返回实体主体。

DELETE

请求服务器删除指定的页面。

PUT

从客户端向服务器传送的数据取代指定的文档的内容。

动态路由匹配

官方文档

配置 webpack 将接口代理到本地

在Vue-cli的config/index.js 文件中，找到以下代码：

dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    cssSourceMap: false
  }

其中，proxyTable: {}, 这一行，就是给我们配置代理的。

根据 cnodejs.org 的接口，我们把这里调整为：

proxyTable: {
  '/api/v1/**': {
    target: 'https://cnodejs.org', // 你接口的域名
    secure: false,
    changeOrigin: false,
  }
}

这样配置好后，就可以将接口代理到本地了。

Vue与iOS

使用WebViewJavascriptBridge

特定代码引入main.js，再在需要的组件中编写函数方法。

具体参照这里

两个将来可能有用的函数

// 自定义判断元素类型JS
function toType (obj) {
  return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
// 参数过滤函数
function filterNull (o) {
  for (var key in o) {
    if (o[key] === null) {
      delete o[key]
    }
    if (toType(o[key]) === 'string') {
      o[key] = o[key].trim()
    } else if (toType(o[key]) === 'object') {
      o[key] = filterNull(o[key])
    } else if (toType(o[key]) === 'array') {
      o[key] = filterNull(o[key])
    }
  }
  return o
}

Vue引入Echart

步骤

1,npm i -D echarts;
2,在main.js中引入
3,在所需模块中创建实例

注意事项

1,可按需引入模块
2,在钩子函数 mounted()内写echart代码
基本教程
官方文档

分包

缓解/解决webpack打包过大的问题

CDN外部引入，必要模块引入，Uglify插件，减少无用代码。
去掉 map 文件
编辑/config/index.js文件，找到如下键值对并修改为 false
productionSourceMap: false,

关于KOA的笔记

应用

npm init -y 初始化项目生产package.json文件

var http = require('http')
http.createServer((request,response) => {
  console.log(request.url)
  response.writeHead(200)
  response.write('这里是node服务器')
  response.end()
}).listen(8080)

文件操作

const fs = require('fs')
fs.readFile(path,fn) //读取文件  异步读取
fs.readFileSync('./test.txt') //同步读取

koa

const Koa = require('koa')
const app = new Koa()
app.use((ctx) => {
  console.log(ctx)
  ctx.body = 'hello koa'
})
app.listen(8080,() => {
  console.log('运行在localhost:8080')
})

koa2-cors跨域请求

const cors = require('koa2-cors')
app.use(cors({
  origin: function(ctx) {
    if (ctx.url === '/test') {
      return false;
    }
    return '*';//允许来自所有域名的请求
  },
  exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
  maxAge: 5,
  credentials: true,
  allowMethods: ['GET', 'POST', 'DELETE'],
  allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}));