基于gulp搭建后台（json-server）

最新推荐文章于 2024-09-04 07:09:42 发布

原创最新推荐文章于 2024-09-04 07:09:42 发布 · 1.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#gulp搭建后台 #ajax请求自己的后台数据 #gulp #json-server #前端搭建自己的后台

移动端项目构建专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用json-server快速创建本地JSON数据服务。包括全局安装json-server工具、创建独立的JS文件作为服务器端实现、启动服务器并设置端口、以及在前端项目中通过代理访问这些JSON数据。

1、全局安装json-server -g

 2、新建一个js文件，不需要被其他js引入，只做服务器端

 上面的配置如下图所示，
 list
 就是后台数据

具体可以参照 json-server 官方：https://www.npmjs.com/package/json-server

3、找到前面新建的js文件，启动后台，端口号为9000

下面表示启动成功，地址为http://localhost:9000,

访问的资源在http://localhost:9000/list.php

下面在gulpfile 进行代理

 
 通过ajax访问得到数据，请忽略其他的data,，只关注url，通过自己的服务器访问自己写的json数据

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

正方形的轮子

关注关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

基于gulp的前端自动化环境搭建

zhenghao35791的专栏

02-17

3571

基于gulp的前端自动化环境搭建创建git目录安装第三方依赖管理工具bower 安装angular 安装gulp 批量安装gulp插件编写gulp子任务编写剩余gulp任务 html任务 json任务 css任务 js任务 image任务 clean任务 build总任务 serve任务基于gulp的前端自动化环境搭建创建git目录新建文件夹webapp，右键git bash here

前端自动化构建基础，以及相关插件使用（gulp篇）

觉醒法师的专栏

01-30

636

互联网的不断发展推动了web前端技术快速的向前，各种前端库或框架百花齐放。自动化构建是将源代码利用工具自动转换成用户可以使用的目标文件的过程，将复杂且重复性任务交给程序脚本自动完成，从而减小我们开发的工作量，加快开发速度。这里咱们先了解下gulp的使用，给咱们开发前端页面带了哪些便捷之处。

参与评论您还未登录，请先登录后发表或查看评论

gulp-json-server:运行 json-server 的 Gulp 插件

05-29

gulp-json-服务器 Gulp插件运行。注意：这是在非常早期的开发中，在稳定版本之前可能会发生重大变化。执照 :copyright:

Gulp开发服务器

weixin_45047039的博客

11-18

340

Gulp开发服务器一、安装browser-sync二、创建服务器三、启动服务器四、了解一些服务器配置以及热更新一、安装browser-sync yarn add browser-sync --dev 二、创建服务器 const browserSync = require("browser-sync") const bs = browserSync.create() // 创建一个开发服务器三、启动服务器 // 启动服务 const serve = () => { bs.init({ //

使用gulp的服务器插件 gulp-server 开启一个服务器

全栈小菜鸟

08-24

1152

前端很多时候我们要启动一个服务器去访问打包后的静态文件，放。太重，使用其他的第三方工具也很重，幸运的是，我们有。然后就开启成功了 😄😄😄😄😄😄😄，就是简单。这种功能强大的工具链，直接看下面代码…

gulp-webserver组件

lhp0906的博客

05-06

4097

Framework 7，运行环境组建，简单易用，不用运行apache及其他环境，节省系统资源，效率工作。

gulp-server:API 服务器的 Gulp 集成

07-13

吞咽服务器 API 服务器的 Gulp 集成吞咽任务 help - 显示可用命令列表 dev - 运行开发工作流更改时的 lint 文件对更改运行单元测试在更改时运行 api 端点测试 build - 运行完整的构建工作流程 lints 文件运行单元测试运行 api 端点测试运行代码覆盖率报告运行 api 基准测试运行 api 负载测试运行复杂性报告运行成本分析生成变更日志生成待办事项生成贡献者文件生成文档生成 api-explorer lint - lint 源文件 test - 运行单元测试、api 端点测试和代码覆盖率 comp - 运行复杂性报告和成本分析 load - 运行 api 负载测试 bench - 运行 api 基准测试 explorer - 生成 api 资源管理器 docs - 生成 api 文档 api-endpoint-test

毕业设计: 旅游旅游网站，基于gulp-webpack,react,react-router,redux

02-08

需要后台提供json数据 ,旅游旅游网站，基于webpack,react,react-router,redux. 包含前端页面和/admin路由的后端页面启动运行:npm install安装依赖包前端启动: gulp 或者 npm run dev 前端构建: gulp ...

volunteer-server

03-30

"volunteer-server"项目是一个基于JavaScript技术构建的服务器端应用，旨在为志愿者活动提供后台支持。这个项目的核心是利用JavaScript的Node.js环境来搭建服务，它利用了Node.js的非阻塞I/O和事件驱动特性，使其在...

基于Gulp与Browserify的Web开发模板

gulp-template 是一个为现代 Web 应用程序开发量身定制的项目模板，集成了 Gulp、Browserify、SASS、Bower 和 LiveReload 等主流前端构建工具和技术，旨在提升开发效率、优化工作流并实现自动化构建。该模板通过合理...

gulp-json-editor：一个用于编辑JSON对象的gulp插件

02-03

gulp-json-编辑器 gulp-json-editor是用于编辑JSON对象的插件。用法 var jeditor = require ( "gulp-json-editor" ) ; /* edit JSON object by merging with user specific object */ gulp . src ( "./manifest.json" ) . pipe ( jeditor ( { 'version' : '1.2.3' } ) ) . pipe ( gulp . dest ( "./dest" ) ) ; /* edit JSO

Gulp Webserver 使用教程

最新发布

gitblog_00602的博客

09-04

472

Gulp Webserver 使用教程项目介绍 Gulp Webserver 是一个用于搭建本地开发服务器的插件，它可以与 Gulp 一起使用，提供实时刷新浏览器、目录列表显示等功能，从而提高前端开发效率。该项目由 schickling 维护，是一个轻量级的解决方案，适用于快速搭建开发环境。项目快速启动安装首先，确保你已经安装了 Node.js 和 Gulp。然后，通过 npm 安装 gu...

Gulp前端服务器本地搭建

weixin_30336061的博客

10-23

214

前端服务器本地搭建分三阶段： 1、Node.js的安装 2、Npm环境配置 3、编写JS文件 1、Node.js安装: 　　如图所示: 　　　　　　Next: 　　　　　　选择I accept 然后Next: 　　　　　　选择安装文件的位置，然后Next: 　　　　　　Next: 　　　　　　选择Install: 　　　　　　等待安装: ...

gulp搭建项目到服务器,利用gulp搭建简单服务器，gulp标准版(示例代码)

weixin_42358827的博客

08-10

385

var gulp = require(‘gulp‘),autoprefixer = require(‘gulp-autoprefixer‘), //自动添加css前缀rename = require(‘gulp-rename‘), //文件重命名sass = require(‘gulp-sass‘), //sass的编译minifycss = require(‘gulp-minify-css‘),...

这可能是较好的gulp实战（后台thinkphp版）

大灰狼的小绵羊哥哥的博客

02-14

947

传统开发过程中http://www.imooc.com/article/3135 可能你写好了前端页面，给后台去套，你就没啥事了又或者，你可能需要在你的前端页面写上各种后台模板代码，对于我这种前端洁癖，简直不能忍！本文将介绍一种前后端分离的方式，但又能保留着前端能使用后台代码的兼容性既然决定了这种开发模式，我们最先设计的应该是从目录开始本次项目的后台是用Thi

使用 gulp-webserver 和 browser-sync 搭建本地服务器

蒲公英芽的博客

03-10

2162

搭建本地服务器的两种方式：gulp-webserver 或者 browser-sync 都可以实现浏览器的自动刷新。一、gulp-webserver gulp-webserver 是搭建本地服务器，并开启，可以用它实现自动刷新浏览器的功能。安装使用npm安装开发环境依赖 $ npm i gulp-webserver --save-dev 或者使用yarn安装开发环境依赖 $ yarn add...

Gulp

M106588L的博客

07-01

946

gulp let gulp = require("gulp"); let sass = require("gulp-sass"); let mincss = require("gulp-clean-css"); let babel = require("gulp-babel"); let uglify = require("gulp-uglify"); let server = require("...

gulp入门10：gulp-webserver搭建热加载服务器

软考鸭

05-30

910

是一个用于搭建本地开发服务器的插件，它可以与gulp一起使用，提供实时刷新浏览器、目录列表显示等功能，从而提高前端开发效率。以下是关于。

使用gulp启动服务

aithena的博客

03-20

6970

全局安装 gulp cnpm install gulp -g cnpm install -g gulp 运行服务 gulp 相关阅读： https://blog.youkuaiyun.com/seven0404/article/details/51880162