访问node后端接口示例（入门）
一、基础安装参考我的另一篇随笔
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后端接口示例（入门）的更多相关文章
- 记录一次用宝塔部署微信小程序Node.js后端接口代码的详细过程
一直忙着写毕设,上一次写博客还是元旦,大半年过去了.... 后面会不断分享各种新项目的源码与技术.欢迎关注一起学习哈! 记录一次部署微信小程序Node.js后端接口代码的详细过程,使用宝塔来部署. 我 ...
- 基于Node.js的微信JS-SDK后端接口实现
做了一个网站,放到线上,用微信打开,点击分享,可是分享后发给朋友的链接卡片是微信默认自带的,如下: 这标题,描述以及图片是默认自带的,丑不说,分享给别人还以为是盗号网站呢,而接入微信的JSSDK后,分 ...
- 【Node.js】二、基于Express框架 + 连接MongoDB + 写后端接口
在上节,我们讲了如何搭建express环境,现在我们说说如何通过node.js写服务接口给前端调用 1. 首先通过MongoDB建好数据库与表格 例如,我的数据库名字为db_demo,数据库表格为go ...
- 开发环境Vue访问后端接口教程(前后端分离开发,端口不同下跨域访问)
原理:开发环境下的跨域:在node.js上实现请求转发,vue前端通过axios请求到node.js上,node.js将请求转发到后端,反之.响应也是,先到node.js上,然后转发vue-cil项目 ...
- express搭建后端请求路由，前端进行访问对应的接口 后端解决跨域
代码在 ==>E:\nodes实战\myserve\testserve 1 express搭建后端请求路由,前端进行访问对应的接口 1) 创建项目目录 express 项目名 -e 然后按照提示 ...
- node.js 接口调用示例
测试用例git地址(node.js部分):https://github.com/wuyongxian20/node-api.git 项目架构如下: controllers: 文件夹下为接口文件 log ...
- django学习-12.访问不同url/接口地址实现对指定数据的增删改查功能
1.前言 通过前面博客[django学习-10.django连接mysql数据库和创建数据表]里的操作,我们已经成功在数据库[hongjingsheng_project]里创建了一张数据表[hello ...
- php中创建和调用webservice接口示例
php中创建和调用webservice接口示例 这篇文章主要介绍了php中创建和调用webservice接口示例,包括webservice基本知识.webservice服务端例子.webservi ...
- php 接口示例
php 接口示例: public function dev(){ $m=new Model('machine_info'); $ip=$_GET['ip']; echo $ip; //$arr=$m- ...
随机推荐
- matplotlib库的基本使用与折线图
matplotlib:最流行的Python底层绘图库,主要做数据可视化图表,名字取材于MATLAB,模仿MATLAB构建 基本使用: x和y的长度必须一致 figure()方法用来设置图片大小 x,y ...
- 怎样理解Node对象接口
dom中的节点都继承自Node接口, 也就是说, 所有的节点都具有Node接口所规定的属性和方法, 比如下面这个 <a> 标签, 它也继承了Node的所有属性和方法: 可以认为Node接口 ...
- lua的数据类型
Lua 是动态(弱)类型的语言,它有一下几种数据结构: nil(空) nil 类型表示一种没有任何有效值,它只有一个值 -- nil,例如打印一个没有赋值的变量,便会输出一个 nil 值: print ...
- 26-Perl 包和模块
1.Perl 包和模块Perl 中每个包有一个单独的符号表,定义语法为:package mypack;此语句定义一个名为 mypack 的包,在此后定义的所有变量和子程序的名字都存贮在该包关联的符号表 ...
- 21-Perl 发送邮件
1.Perl 发送邮件如果你的程序在 Linux/Unix 系统上运行,你就可以在 Perl 中使用 sendmail 工具来发送邮件.以下是一个简单的脚本实例用于发送邮件:#!/usr/bin/pe ...
- 解决tomcat端口冲突
1.根据8080端口号查找占用8080端口的进程 netstat -ano|findstr " 进程id:6352 2.根据进程ID查找进程名字 tasklist|findstr " ...
- vue访问本地文件404
用了vue cli3.0用axios调用本地json数据一直报404,找了半天郁闷,最后发现原因是,vue cli3.0 public 文件夹才是静态资源文件,问题解决,记录一下,以后不再踩坑.
- 在webstorm中编译less，以及压缩css
一.编译 在全局安装less npm install -g less 在webstorm setting ->tools -> filewatcher中设置 : ../css/$Fi ...
- 巧用Map缓存提升"翻译"速度
在业务编码中,很多情况都需要用到code2Name或者id2Name之间的"翻译",在我的过往经历中发现不少开发人员都是直接双重循环实现这种"翻译".如果一次& ...
- Hadoop2.7.3集群安装scala-2.12.8 和spark2.7
Apache Spark™是用于大规模数据处理的统一分析引擎. 从右侧最后一条新闻看,Spark也用于AI人工智能 spark是一个实现快速通用的集群计算平台.它是由加州大学伯克利分校AMP实验室 开 ...