SSR笔记

发表于 | 分类于 | | 阅读次数:
字数统计: 470 字 | 阅读时长 ≈ 2 分钟

SSR笔记

koa2

  1. 安装

    1
    npm install -g koa-generator

  2. 通过脚手架搭建项目

    1
    koa2 -e demo

    -e 表示使用ejs模板

  3. npm install和npm run dev运行

mongodb

下载安装，并配置环境变量

安装教程http://www.runoob.com/mongodb/mongodb-window-install.html

使用robo 3T进行可视化管理

注意配置环境变量

mongoose

Mongoose是在node.js环境下对mongodb进行便捷操作的对象模型工具

运行安装

1
npm install mongoose

redis

安装教程http://www.runoob.com/redis/redis-install.html

注意配置环境变量

nuxt

  1. 脚手架搭建项目

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

  2. 修改package.json，升级依赖包

    backpack-core升级到0.8.3

    eslint升级到3.19.0

    eslint-loader升级到2.1.1

nuxt的思想是创建即配置

pages文件夹存放页面。components文件夹存放公共组件。layout存放模板。

相当于

相当于

声明layout: ‘search’指定使用search模板

接口定义

server下写接口，创建interface/city.js:

1
2
3
4
5
6
7
8
9
10
11
import Router from 'koa-router'

const router = new Router({
  prefix: '/city'
})

router.get('/list', async (ctx) => {
  ctx.body = ['北京', '天津']
})

export default router

server/index.js里引入：

1
2
3
import cityInterface from './interface/city'

app.use(cityInterface.routes()).use(cityInterface.allowedMethods())

数据渲染

  1. 客户端获取数据
1
2
3
4
5
6
7
async mounted() {
  // 客户端取
  let {status, data: {list}} = await axios.get('/city/list')
  if (status === 200) {
    this.list = list
  }
}

  1. asyncData处理组件相关数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    async asyncData() {
      // 服务端下发，script标签，window上挂载数据
      let {status, data: {list}} = await axios.get('http://localhost:3000/city/list')
      if (status === 200) {
        return {
          list
        }
      }
    }

脚手架

1
npx create-nuxt-app <项目名>

如果npx报错，可先全局安装create-nuxt-app

1
2
npm install -g create-nuxt-app
create-nuxt-app my-app

server/index.js下，使用的是require，如果改成import会出错，办法：

package.json 中，在scripts的dev和start下追加 –exec babel-node，并创建babel指令集.babelrc

1
2
3
{
  "presets":["es2015"]
}

安装

1
npm install babel-preset-es2015