Nuxt服务端渲染-Json-server api服务搭建

客官°小女子只卖身不卖艺 2022-10-17 05:56 9阅读 0赞

[https://github.com/typicode/json-server\#paginate][https_github.com_typicode_json-server_paginate]

首先全局安装

cnpm install json-server -g
    // mac下执行
    sudo cnpm install json-server -g

在目录下创建一个server文件夹，将data.json文件放在里面

{
      "posts": [
        { "id": 1, "title": "json-server", "author": "typicode" }
      ],
      "comments": [
        { "id": 1, "body": "some comment", "postId": 1 }
      ],
      "profile": { "name": "typicode" }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70][]

cd server 进入server文件夹

执行下列命令

json-server --watch data.json --port 3002

数据启动成功

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 1][]

[http://localhost:3002/jokes?\_page=2&\_limit=5][http_localhost_3002_jokes_page_2_limit_5] 表示第2页，一页5条

http://localhost:3002/jokes?&q=why 表示查询why这个字段

这说明接口已经可以使用了

[https_github.com_typicode_json-server_paginate]: https://github.com/typicode/json-server#paginate
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70]: /images/20221014/2422db6dc0fe437a8b9c167257b2d3dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70 1]: /images/20221014/4c3bcfe22a0047eb8648ed6b713271dd.png
[http_localhost_3002_jokes_page_2_limit_5]: http://localhost:3002/jokes?_page=2&_limit=5

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 Nuxt服务端渲染-命令和列表

<table style="width:500px;"> <tbody> <tr> <td>命令</td> <td>描述</td> </tr>

小灰灰/ 2022年10月17日 10:48/ 0 赞/ 223 阅读

相关 Nuxt服务端渲染-接口服务端渲染

在server里面启动server-api服务后再起一个命令行窗口，再npm run dev启动项目服务先安装axios cnpm install axios -

心已赠人/ 2022年10月17日 05:59/ 0 赞/ 233 阅读

相关 Nuxt服务端渲染-Json-server api服务搭建

[https://github.com/typicode/json-server\paginate][https_github.com_typicode_json-server

客官°小女子只卖身不卖艺/ 2022年10月17日 05:56/ 0 赞/ 10 阅读

相关 Nuxt服务端渲染-nuxt.config.js配置介绍

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm

超、凢脫俗/ 2022年10月16日 15:30/ 0 赞/ 258 阅读

相关 Nuxt服务端渲染- Nuxt目录解释

.nuxt assets 包含一些未编译的静态资源，包括LESS、SASS、JS、icon图片等 components vue组件存放目录 lay

悠悠/ 2022年10月16日 15:30/ 0 赞/ 280 阅读

相关 Nuxt服务端渲染-create-nuxt-app的安装和使用

执行 cnpm init -y 执行 cnpm install create-nuxt-app --save-dev 调用一下create-nuxt-a

我不是女神ヾ/ 2022年10月16日 15:28/ 0 赞/ 299 阅读

相关前端nuxt服务端渲染打包以及后台启动

1.到local磁盘下 cd /usr/local 2. 安装nodejs wget https://nodejs.org/dist/v8.9.1/nod

太过爱你忘了你带给我的痛/ 2022年05月27日 10:46/ 0 赞/ 513 阅读

相关 TypeScript + Webpack + Koa 搭建 React 服务端渲染

原理： 1. 利用 webpack 打包能在 node 运行的 React 代码，利用 `react-dom/server` 将 React 代码渲染成 html 字符

素颜马尾好姑娘i/ 2022年04月27日 23:06/ 0 赞/ 375 阅读

相关 Vue.js 服务端渲染Nuxt.js

官网：[https://zh.nuxtjs.org/guide][https_zh.nuxtjs.org_guide] [https_zh.nuxtjs.org_guide

╰+攻爆jí腚メ/ 2022年04月24日 15:02/ 0 赞/ 246 阅读

相关服务端渲染客户端渲染

渲染页面上的数据要发生更新服务端渲染后台语言通过一些模板引擎生成html 好处：前端耗时少（前端只负责将html进行展示），利于SEO 坏处：网络传输数据量大，

朴灿烈づ我的快乐病毒、/ 2021年09月18日 08:58/ 0 赞/ 558 阅读