Vue全家桶+SSR+Koa2全栈开发美团网

[MrZWH]

<script>
import {mapActions} from 'vuex'
export default {
    methods: mapActions([
        'increment',
        'decrement'
    ])
}
</script>

Koa2 基础

• koa-generator
  • npm install -g koa-generator
  • koa2 -e project
• async 和 await 语法
• koa2 中间件
• koa2 路由
• redis 基础
• cookie 和 session
• mongoose 基础

自定义中间件

function pv(ctx) {
    global.console.log('pv')
}

module.exports = function() {
    return async function(ctx, next) {
        px(ctx)
        await next()
    }
}

mongoose

• mongodb 的概念/安装
  • www.runoob.com/mongodb/mongodb-osx-install.html
  • mac 推荐 brew 安装
  • which mongod
  • mongod
• mongodb 可视化工具 RoBo 3T 的安装及应用
  • robomongo.org
• mongoose 的作用
  • https://mongoose.shujuwajue.com
• mongoose 的应用

命令行发送 POST 请求

curl -d 'name=lilei&age=26' http://localhost:3000/addPerson

redis

• redis 的概念 & 安装
  • 服务端用来存储 session 的快速存取型数据库
  • www.runoob.com/redis
  • redis-server
  • npm i koa-generic-session koa-redis
• redis 的应用场景
• redis 的用法

const Kos - require('koa')
const session = require('koa-generic-session')
const Redis = require('koa-redis')

const app = new Koa()
app.keys = ['keys', 'keyskeys'] // 给 session 做加密处理的
app.use(session({
    key: 'mt',
    prefix: 'mtpr',
    store: new Redis() // 没写就默认存储在内存
}))

查看 redis

命令行中输入：

redis-cli
keys *
get <上一步得到的key值>

Nuxt.js 基础

Nuxt.js 概述

• 基于 vue2 框架
• 包含 vue router
• 可以支持 vuex （included only when using the store option）
• vue server renderer (excluded when using mode: 'spa')
• vue-meta

安装

https://zh.nuxtjs.org 使用koa2去做项目：

vue init nuxt-community/koa-template <project>

nrm npm 源管理工具

Vue SSR 工作原理

新安装方式（2.0.0）

1. npm install -g npx
2. npx create-nuxt-app project-name

开发

element-ui

发送邮箱验证码

• 开启 qq 邮箱 smtp 服务
• import nodeMailer from 'nodemailer'

passport

• npm i koa-passport passport-loal

整合koa

• import bodyParser from 'koa-bodyparser'
• import session from 'koa-generic-session'
• import json from 'koa-json'

注册

对中文名进行编码：encodeURIComponent(username) this.$axios 对密码进行加密：npm i crypto-js

查询城市拼音分类

需要安装 汉字->拼音 的库：npm i js-pinyin

import pyjs from 'js-pinyin'
let p
let c
let d = {}
city.forEach(item => {
    p = pyjs.getFullChars(item.name).toLocaleLowerCase().slice(0,1)
    c = p.charCodeAt(0)
    if (c > 96 && c < 123) {
        if (!d[p]) {
            d[p] = []
        }
        d[p].push(item.name)
    }
})
for(let [k, v] of Object.entries(d)) {
    blocks.push({
        title: k.toUpperCase(),
        city: v
    })
    blocks.sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0))
    self.block = blocks
}