框架学习小结

vue

export和export default

在Es6中使用 export default 和 export 向外暴露成员

module.exports 和 exports 暴露导出模块
使用var 名称=require(‘模块标识符’) 引入模块

export default{} 和 export 向外暴露成员
import 模块名称 from ‘模块标识符’
import ‘表示路径’

注：
1、在一个模块中, export default 只允许 向外 暴露1次
2、在使用export 向外暴露成员, 只能使用{} 的形式来接收,这种型形式 叫做 按需导出
3、在使用export 导出成员, 如果 要换个名称 来接收, 可以使用 as关键字 起别名

路由嵌套

嵌套路由就是在一个被路由过来的页面下可以继续使用路由，嵌套也就是路由中的路由的意思。

比如在vue中，我们如果不使用嵌套路由，那么只有一个<router-view>，但是如果使用，那么在一个组件中就还有<router-view>，这也就构成了嵌套。
　　
1、为什么要使用嵌套路由？

就比如在一个页面中， 在页面的上半部分，有三个按钮，而下半部分是根据点击不同的按钮来显示不同的内容，那么我们就可以在这个组件中的下半部分看成是一个嵌套路由，也就是说在这个组件的下面需要再来一个<router-view>， 当我点击不同的按钮时，他们的router-link分别所指向的组件就会被渲染到这个<router-view>中。

<div id="app">
  <router-view></router-view>
</div>

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        }
         // ...其他子路由     
      ]
    }
  ]
})    

vue-cli（vue脚手架）

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目

全局安装 vue-cli ，在命令提示窗口执行：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

您可以使用以下命令检查您的版本是否正确：

vue --version

创建项目

vue create hello-world // hello-world 项目名称

组件传值

父组件向子组件传值
使用props传值==> 在调用子组件中 自定义一个属性 :name=‘msg’
在子组件中 才会使用props 属性 来获取 传递过来的数据
子组件向父组件传值
在子组件中 使用$emit调用 一个自定义的事件
$emit(‘父组件绑定的事件’)
@自定义事件名称=‘函数名’
实现这个函数
兄弟组件的传值
1，首先创建一个事件总线，例如bus，作为一个通讯的桥梁；
2，在需要传值的组件中，通过emit触发一个自定义事件，并传递参数；3，在接收数据的组件中，通过emit触发一个自定义事件，并传递参数；3，在接收数据的组件中，通过on监听自定义事件，并处理传递过来的参数；
另外：
1、兄弟组件之间与父子组件之间的数据交互，两者相比较，兄弟组件之间的通信其实和子组件向父组件传值有些类似，其实他们的通信原理都是相同的，例如子向父传值也是emit和emit和on的形式，只是没有eventBus，但若我们仔细想想，此时父组件其实就充当了bus这个事件总线的角色。
2、这种用一个Vue实例来作为中央事件总线来管理组件通信的方法只适用于通信需求简单一点的项目，对于更复杂的情况，Vue也有提供更复杂的状态管理模式Vuex来进行处理。

插槽slot的应用

解决了组件之间 插入元素显示的问题

vue-router

实现路由分发

• 在入口文件中 导入 vue-router
• 需要手动安装 Vue.use(路由对象)
• 挂载在vue实例上
• 单独封装路由模块: router.js===>路由的分发
• 路由对象的实例 中 设置 routes属性 数组
  path和component

注：若是一个路由分发多个组件用components挂载

vuex

vuex 解决任何组件之间通讯的问题
注意: vuex不是随意的应用, 因为主要针对于大型应用程序开发
小型应用程序 不推荐使用 因为比较繁琐.
而小型应用程序 多 使用 session 或是 cookie 等技术 解决组件之间传值问题

vuex结构:

        const state={}   // 定义数据  存储了一些变量
        const mutations={} // 定义方法的实现==>更新state中的状态
        const actions={}  // 提交 方法 到  mutations中 实现

        export default new Vuex.Store({
            //  单一的 store仓库 
                state,
                mmutations,
                actions
            //  多个store仓库===>命名空间(namespaced)
            modules:{
                // 第一次仓库,
                // 第二个仓库
            }
        })

        // 比如  第一个仓库的导出如下:
        export default {
            namespaced:true,
            state,
            mutations,
            actions
        }

koa2 框架 (后台框架)

async await 的用法

async 函数返回一个 Promise 对象，当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。

function getNum(num){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(num+1)
        }, 1000)
    })
}
const func = async ()=>{
    const f1 = await getNum(1)
    const f2 = await getNum(f1)
    console.log(f2) 
  // 输出3 
}
func()

koa路由封装

const Router = require('koa-router')
const koa = require('koa')
let app = new koa();

const home = new Router();
home.get('/',async (ctx) => {
    ctx.body = '这是home';
})

const page = new Router();
page.get('/404',async (ctx) => {
    ctx.body = 'page 404';
})

const golbel = new Router();
golbel.get('/',async (ctx) => {
    ctx.body = '这是golbel';
})

const router = new Router();

router.use('/',home.routes(),home.allowedMethods());
router.use('/page',page.routes(),page.allowedMethods());
router.use('/golbel',golbel.routes(),golbel.allowedMethods());

app.use(router.routes(),router.allowedMethods())

app.listen(3000,() => {
    console.log('runing......')
})

注：async /await 需要在function外部书写async，在内部需要等待执行的函数前书写await即可

cookie和session

标题什么是Cookie

Cookie意为“甜饼”，是由W3C组织提出，最早由Netscape社区发展的一种机制。目前Cookie已经成为标准，所有的主流浏览器如IE、Netscape、Firefox、Opera等都支持Cookie。

由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。怎么办呢？就给客户端们颁发一个通行证吧，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。

Cookie实际上是一小段的文本信息。客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。
　　
设置Cookie的所有属性

除了name与value之外，Cookie还具有其他几个常用的属性。每个属性对应一个getter方法与一个setter方法

属 性 名	描 述
String name	该Cookie的名称。Cookie一旦创建，名称便不可更改
Object value	该Cookie的值。如果值为Unicode字符，需要为字符编码。如果值为二进制数据，则需要使用BASE64编码
int maxAge	该Cookie失效的时间，单位秒。如果为正数，则该Cookie在maxAge秒之后失效。如果为负数，该Cookie为临时Cookie，关闭浏览器即失效，浏览器也不会以任何形式保存该Cookie。如果为0，表示删除该Cookie。默认为–1
boolean secure	该Cookie是否仅被使用安全协议传输。安全协议。安全协议有HTTPS，SSL等，在网络上传输数据之前先将数据加密。默认为false
String path	该Cookie的使用路径。如果设置为“/sessionWeb/”，则只有contextPath为“/sessionWeb”的程序可以访问该Cookie。如果设置为“/”，则本域名下contextPath都可以访问该Cookie。注意最后一个字符必须为“/”
String domain	可以访问该Cookie的域名。如果设置为“.google.com”，则所有以“google.com”结尾的域名都可以访问该Cookie。注意第一个字符必须为“.”
String comment	该Cookie的用处说明。浏览器显示Cookie信息的时候显示该说明
int version	该Cookie使用的版本号。0表示遵循Netscape的Cookie规范，1表示遵循W3C的RFC 2109规范

Cookie的有效期

Cookie的maxAge决定着Cookie的有效期，单位为秒（Second）。Cookie中通过getMaxAge()方法与setMaxAge(int maxAge)方法来读写maxAge属性。

如果maxAge属性为正数，则表示该Cookie会在maxAge秒之后自动失效。浏览器会将maxAge为正数的Cookie持久化，即写到对应的Cookie文件中。无论客户关闭了浏览器还是电脑，只要还在maxAge秒之前，登录网站时该Cookie仍然有效。下面代码中的Cookie信息将永远有效。

什么是Session

Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。

如果说Cookie机制是通过检查客户身上的“通行证”来确定客户身份的话，那么Session机制就是通过检查服务器上的“客户明细表”来确认客户身份。Session相当于程序在服务器上建立的一份客户档案，客户来访的时候只需要查询客户档案表就可以了。
　　
Session的常用方法

方 法 名	描 述
void setAttribute(String attribute, Object value)	设置Session属性。value参数可以为任何Java Object。通常为Java Bean。value信息不宜过大
String getAttribute(String attribute)	返回Session属性
Enumeration getAttributeNames()	返回Session中存在的属性名
void removeAttribute(String attribute)	移除Session属性
String getId()	返回Session的ID。该ID由服务器自动创建，不会重复
long getCreationTime()	返回Session的创建日期。返回类型为long，常被转化为Date类型，例如：Date createTime = new Date(session.get CreationTime())
long getLastAccessedTime()	返回Session的最后活跃时间。返回类型为long
int getMaxInactiveInterval()	返回Session的超时时间。单位为秒。超过该时间没有访问，服务器认为该Session失效
void setMaxInactiveInterval(int second)	设置Session的超时时间。单位为秒
void putValue(String attribute, Object value)	不推荐的方法。已经被setAttribute(String attribute, Object Value)替代
Object getValue(String attribute)	不被推荐的方法。已经被getAttribute(String attr)替代
boolean isNew()	返回该Session是否是新创建的
void invalidate()	使该Session失效

Session的有效期

由于会有越来越多的用户访问服务器，因此Session也会越来越多。为防止内存溢出，服务器会把长时间内没有活跃的Session从内存删除。这个时间就是Session的超时时间。如果超过了超时时间没访问过服务器，Session就自动失效了。

Session的超时时间为maxInactiveInterval属性，可以通过对应的getMaxInactiveInterval()获取，通过setMaxInactiveInterval(longinterval)修改。

Session的超时时间也可以在web.xml中修改。另外，通过调用Session的invalidate()方法可以使Session失效。

Nuxt框架

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。

作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

特性:

• 基于 Vue.js
• 自动代码分层
• 服务端渲染
• 强大的路由功能，支持异步数据
• 静态文件服务
• ES2015+ 语法支持
• 打包和压缩 JS 和 CSS
• HTML 头部标签管理
• 本地开发支持热加载
• 集成 ESLint
• 支持各种样式预处理器： SASS、LESS、 Stylus 等等
• 支持 HTTP/2 推送

安装

确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）：

npx create-nuxt-app <项目名>

或者用 yarn ：

yarn create nuxt-app <项目名>

它会让你进行一些选择:

1、在集成的服务器端框架之间进行选择
2、选择您喜欢的 UI 框架
3、选择您喜欢的测试框架
4、选择你想要的 Nuxt 模式 (Universal or SPA)
5、添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。
6、添加 EsLint 以在保存时代码规范和错误检查您的代码。
7、添加 Prettier 以在保存时格式化/美化您的代码。

当运行完时，它将安装所有依赖项，因此下一步是启动项目:

cd <project-name> //进入项目
npm run dev //启动项目