一、基础安装参考我的另一篇随笔

https://www.cnblogs.com/zhuxingqing/p/11526558.html

另在之前的基础上引入了jquery，方便使用ajax

二、前端代码

home.html

<!DOCTYPE html>

<html>

<head>

    <title>node home</title>

</head>

<body>

    <div id="wrap">home</div>

    <button onclick="window.location.href = '/city.html'">go to city</button>

    <script type="text/javascript" src="./static/jquery/jquery.min.js"></script>

    <script type="text/javascript">

        window.onload = function () {

            var wrap = $('#wrap')

            $.ajax({

                url: '/',

                type: 'GET',

                success: function (res) {

                    if (res.errno == 0) {

                        res = res.data

                        console.log(res)

                    }

                },

                error: function (msg) {

                    console.log(msg)

                }

            })

        }

    </script>

</body>

</html>

city.html

<!DOCTYPE html>

<html>

<head>

    <title>node city</title>

</head>

<body>

    city

    <div id="wrap"></div>

    <script type="text/javascript" src="./static/jquery/jquery.min.js"></script>

    <script type="text/javascript">

        window.onload = function () {

            var wrap = $('#wrap')

            $.ajax({

                url: '/api/city',

                type: 'GET',

                success: function (res) {

                    res = JSON.parse(res.data)[0]

                    console.log(res)

                    wrap.html(res.data)

                },

                error: function (msg) {

                    console.log(msg)

                }

            })

        }

    </script>

</body>

</html>

三、node代码

var express = require('express')

var app = express()

var port = 8090

var router = express.Router()

router.get('/', function (req, res, next) {

    req.url = '/home.html'

    next()

})

app.use(router)

var apiRouter = express.Router()

apiRouter.get('/city', function (req, res) {

    res.json({

        errno: 0,

        data: '[{"data":"cityssss"}]'

    })

})

app.use('/api', apiRouter)

app.use(express.static('./'))

module.export = app.listen(port, function () {

    console.log('Listening at http://localhost:' + port + '\n')

})

四、测试效果

home页面

点击按钮去city页面

可以看到 已经将cityssss添加到wrap的div中~

访问node后端接口示例（入门）的更多相关文章

  1. 记录一次用宝塔部署微信小程序Node.js后端接口代码的详细过程

    一直忙着写毕设,上一次写博客还是元旦,大半年过去了.... 后面会不断分享各种新项目的源码与技术.欢迎关注一起学习哈! 记录一次部署微信小程序Node.js后端接口代码的详细过程,使用宝塔来部署. 我 ...

  2. 基于Node.js的微信JS-SDK后端接口实现

    做了一个网站,放到线上,用微信打开,点击分享,可是分享后发给朋友的链接卡片是微信默认自带的,如下: 这标题,描述以及图片是默认自带的,丑不说,分享给别人还以为是盗号网站呢,而接入微信的JSSDK后,分 ...

  3. 【Node.js】二、基于Express框架 + 连接MongoDB + 写后端接口

    在上节,我们讲了如何搭建express环境,现在我们说说如何通过node.js写服务接口给前端调用 1. 首先通过MongoDB建好数据库与表格 例如,我的数据库名字为db_demo,数据库表格为go ...

  4. 开发环境Vue访问后端接口教程(前后端分离开发,端口不同下跨域访问)

    原理:开发环境下的跨域:在node.js上实现请求转发,vue前端通过axios请求到node.js上,node.js将请求转发到后端,反之.响应也是,先到node.js上,然后转发vue-cil项目 ...

  5. express搭建后端请求路由，前端进行访问对应的接口 后端解决跨域

    代码在 ==>E:\nodes实战\myserve\testserve 1 express搭建后端请求路由,前端进行访问对应的接口 1) 创建项目目录 express 项目名 -e 然后按照提示 ...

  6. node.js 接口调用示例

    测试用例git地址(node.js部分):https://github.com/wuyongxian20/node-api.git 项目架构如下: controllers: 文件夹下为接口文件 log ...

  7. django学习-12.访问不同url/接口地址实现对指定数据的增删改查功能

    1.前言 通过前面博客[django学习-10.django连接mysql数据库和创建数据表]里的操作,我们已经成功在数据库[hongjingsheng_project]里创建了一张数据表[hello ...

  8. php中创建和调用webservice接口示例

    php中创建和调用webservice接口示例   这篇文章主要介绍了php中创建和调用webservice接口示例,包括webservice基本知识.webservice服务端例子.webservi ...

  9. php 接口示例

    php 接口示例: public function dev(){ $m=new Model('machine_info'); $ip=$_GET['ip']; echo $ip; //$arr=$m- ...

随机推荐

  1. 基于Opencv快速实现人脸识别（完整版）

    无耻收藏网页链接: 基于OpenCV快速实现人脸识别:https://blog.csdn.net/beyond9305/article/details/92844258 基于Opencv快速实现人脸识 ...

  2. Linux系列之putty远程登录

    在工作中,我们通常都是通过远程操作Linux服务器的,因此必须熟悉一些远程登录的软件,在此使用的是putty,在Windows上安装putty软件,通过该软件访问Linux主机. 1.远程登录步骤 1 ...

  3. HTML+CSS常用代码（笔记）

    注释标签:对代码进行说明 <!-- 单行注释,也可以对多行文字进行注释 --> 常用格式标签 <b>加粗</b> <i>斜体</i> < ...

  4. 二项式反演/minmax容斥初探

    世界是物质的,物质是运动的,运动是有规律的,规律是可以被认识的 二项式反演 \[ g_n=\sum_{i=0}^n \binom{n}if_i\Rightarrow f_n=\sum_{i=0}^n( ...

  5. MySQL5.7主从-GTID-mysqldump,xtrabackup搭建

    1.两个空库,都是row+gtid,版本为MySQL5.7.22mydb1执行:(dba_user@localhost) [(none)]> show master status;+------ ...

  6. Vasya and Endless Credits CodeForces - 1107F (二分图完美匹配)

    大意: n中贷款, 每种只能买一次, 第$i$种给$a_i$元, 要还款$k_i$个月, 每个月底还$b_i$元. 每个月可以在月初申请一种贷. 求某一时刻能得到的最大钱数.

  7. Vuex是什么?

    记得去年公司招聘前端工程师的时候,我要负责准备面试题去考验面试者,让我记忆深刻的有一件事,我看大多数面试者简历上都写了熟练掌握Vuex,然而当我问起的时候,大部分回答都支支吾吾,解释不清,而当我提起与 ...

  8. 大数据学习（2）- export、source(附带多个服务器一起启动服务器)

    linux环境中, A=1这种命名方式,变量作用域为当前线程 export命令出的变量作用域是当前进程及其子进程. 可以通过source 脚本,将脚本里面的变量放在当前进程中 附带自己写的tomcat ...

  9. 用Python+Aria2写一个自动选择最优下载方式的E站爬虫

    前言 E站爬虫在网上已经有很多了,但多数都只能以图片为单位下载,且偶尔会遇到图片加载失败的情况:熟悉E站的朋友们应该知道,E站许多资源都是有提供BT种子的,而且通常打包的是比默认看图模式更高清的文件: ...

  10. 寒武纪C++日常实习生面经（其他人面试题）

    1.C++继承方式? 答:public,protected,private三种继承方式和虚继承一共四种. 派生类可以继承定义在基类中的成员,但是派生类的成员函数不一定有权访问从基类继承而来的成员. 派 ...