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

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. C++学习 之 程序的组成部分（部分知识笔记）

    1.预处理器编译指令#include: 预处理器是在程序编译前运行的工具.预处理器编译指令是向预处理器发送的命令,总是以#为标识,include便是其中常见的一种,用于引用文件,比如:iostream ...

  2. python 基础（十八）--shutil模块

    shutil模块 shutil.copyfileobj(src,dst):只拷贝文件内容,需要open文件:目标文件不存在时创建,存在时覆盖 shutil.copyfileobj(open('old. ...

  3. 树莓派驱动开发 helloworld

    编写Makefile ifneq ($(KERNELRELEASE),) obj-m := MiniX.o else KDIR := /home/hi/pi/kernel/linux/ all: ma ...

  4. MyBatis 体系结构、根配置文件、Mapper映射文件

    一.MyBatis的体系结构 1.SqlSessionFactory对象 SqlSessionFactory对象是MyBatis的管理核心,它是单个数据库映射关系经过编译后的内存镜像,是创建SqlSe ...

  5. 怎样理解NodeList的动态集合与静态集合

    NodeList 有两种, 一种是动态集合, 一种是静态集合, 所谓动态集合, 主要是 Node.prototype.childNodes; 返回的子节点集合对文档的节点增删改会即时改变; 而静态集合 ...

  6. 01满包加记录最小路劲 L3-001. 凑零钱

    过了这么久 正确理解01背包应该从记忆化搜索开始 这里对数字的取或者不取实际上就是一个01背包的模型 不过这里要求的是满包问题 那么我们动态便利的过程需要做一点 处理只有从0开始的能够向上更新 在就是 ...

  7. 树莓派安装SSH

    1. 安装ssh sudo apt-get install openssh-server 2. 检查树莓派SSH服务是否开启 ps -e|grep ssh 3. SSH服务开启 sudo /etc/i ...

  8. 解决windows系统下ping，ipconfig不是内部或外部命令

    一般情况下,都是误删了系统变量path的值.解决方法:右击我的电脑 → 选择属性 → 选择高级系统设置 → 环境变量 → 在系统变量列表中,找到“path”环境变量双击,打开.在变量值这一栏检测下是否 ...

  9. 使用modle1（jsp+javabeans）及cookie技术实现商品展示和浏览记录

    步骤1:创建dbHelper工具类,该类主要用于获取数据库连接,采用单例模式. 步骤2:创建实体类商品类,商品表,在dao实现数据的封装处理. 步骤3:在jsp页面导入实体类,调用DAO的静态方案获取 ...

  10. Redis-ZSet常用命令

    Redis-ZSet常用命令 zadd key score member[{score member}-] 创建或设置指定key对应的有序集合,根据每个值对应的score来排名,升序.例如有命令 za ...