当前位置: 首页 > news >正文

nodejs搭建服务篇章二:nodejs搭建服务的路由目录分析及前端请求demo

  • nodejs搭建服务篇章一:nodejs搭建简易原生服务和基于express框架服务

  • nodejs搭建服务篇章二:nodejs搭建服务的路由目录分析及前端请求demo

  • nodejs搭建服务篇章三:nodejs搭建服务项目目录的简单介绍及app.js文件简单说明

  • nodejs搭建服务篇章四:前端通过nodejs搭建的服务连接MySQL数据库中的数据(数据库安装,数据库管理,ajax查询数据),超多图超详细


    这个章节开始逐渐的学习下怎么请求服务端的数据:

一、什么是路由?路由分离?

  1. 路由: 所谓路由,其实就是访问路径,不同的访问路径会执行不同的处理逻辑。每个路由都可以有一个或多个处理函数,当匹配到路由时,这些函数将被执行。
  2. 路由分离: 可以根据nodejs项目文件夹routes看出,这就是存放路由文件的地方,而不是直接放到app.js中,入口文件app.js会把routes下的路由包含进来,在访问不同路由的时候,把用户的请求转发给相关的路由文件来进行处理。


    image
    image

二、前端利用ajax请求nodejs服务的数据

就以构建出routes目录下的users为例,前端请求数据:

  1. 在项目根目录,用npm start启动nodejs服务:
    image
  2. 将routes/users.js中的代码修改为自己想返回的内容:
router.get('/', function(req, res, next) {
  res.send('我是由users路由中返回的数据');
});

image
3. 按两次ctrl+c关闭服务,再重启下(再次强调,修改了服务代码重启才会生效):
image
4. 在view/index.html中写前端代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>我是html中的内容</div>
		<script type="text/javascript" src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript">
			$.ajax({
				url:'/users',
				success(res){
					console.log(res)
					alert(res)
				}
			})
		</script>
	</body>
</html>

页面中:
image


network:
image



到这里,可以看出前端请求成啦,是不是觉得服务其实也可以是很简单的东西~

相关文章:

  • 小程序权限设置:小程序下载图片保存到相册拒绝权限后,再次打开权限的解决方案
  • 自行控制loadrunner的socket协议性能测试 (转)
  • 图片懒加载:基于jQuery判断某元素是否显示在可视范围内,并实现背景图片根据随机下标进行懒加载
  • 占位图推荐:web前端开发,推荐4个常用在线占位图网址
  • MongoDB副本集搭建
  • nodejs搭建服务篇章三:nodejs搭建服务项目目录的简单介绍及app.js文件简单说明
  • 搭建rsync服务器,实现文件备份同步
  • nodejs搭建服务篇章四:前端通过nodejs搭建的服务连接MySQL数据库中的数据(数据库安装,数据库管理,ajax查询数据),超多图超详细
  • XCode升级到7后,规范注释生成器VVDocumenter插件没有用了,怎么办?
  • vue传值处理:vue中父组件通过props传值给子组件,子组件表单控件使用值,子组件改变该值时如何避免报错
  • axios的二次封装:在vue中如何灵活运用axios请求,二次封装更加灵活,更多参数可配置
  • 清理C盘内存:电脑C盘飘红了,那么如何清理垃圾文件,总结几种亲测方案
  • Part05 - (图文)NSX系列之检查NSX Controller状态
  • JSON.parse转化:如何使得一个字符串类型‘false‘等于布尔类型的false(使‘1‘===1?成立的2种处理办法,与JSON.stringify的)
  • 常用工具函数推荐:前端开发常用的工具函数(拷贝、排序、防抖、去重、合并、时间处理、DOM操作...).md
  • 【跃迁之路】【585天】程序员高效学习方法论探索系列(实验阶段342-2018.09.13)...
  • centos安装java运行环境jdk+tomcat
  • CSS3 变换
  • Hexo+码云+git快速搭建免费的静态Blog
  • js对象的深浅拷贝
  • Nodejs和JavaWeb协助开发
  • Python socket服务器端、客户端传送信息
  • ReactNative开发常用的三方模块
  • Spring技术内幕笔记(2):Spring MVC 与 Web
  • 记一次删除Git记录中的大文件的过程
  • 使用前端开发工具包WijmoJS - 创建自定义DropDownTree控件(包含源代码)
  • 首页查询功能的一次实现过程
  • 微服务框架lagom
  • 线上 python http server profile 实践
  • nb
  • #宝哥教你#查看jquery绑定的事件函数
  • (附源码)springboot优课在线教学系统 毕业设计 081251
  • (七)Knockout 创建自定义绑定
  • (转)机器学习的数学基础(1)--Dirichlet分布
  • (转载)虚函数剖析
  • *Django中的Ajax 纯js的书写样式1
  • .NET CORE 3.1 集成JWT鉴权和授权2
  • .NET MVC、 WebAPI、 WebService【ws】、NVVM、WCF、Remoting
  • .NET 常见的偏门问题
  • .NETCORE 开发登录接口MFA谷歌多因子身份验证
  • .NET下ASPX编程的几个小问题
  • .NET中的Event与Delegates,从Publisher到Subscriber的衔接!
  • /proc/stat文件详解(翻译)
  • @column注解_MyBatis注解开发 -MyBatis(15)
  • [ MSF使用实例 ] 利用永恒之蓝(MS17-010)漏洞导致windows靶机蓝屏并获取靶机权限
  • [【JSON2WEB】 13 基于REST2SQL 和 Amis 的 SQL 查询分析器
  • [1]-基于图搜索的路径规划基础
  • [Android]使用Android打包Unity工程
  • [Angular] 笔记 20:NgContent
  • [BZOJ] 1001: [BeiJing2006]狼抓兔子
  • [BZOJ2281][SDOI2011]黑白棋(K-Nim博弈)
  • [C++] 多线程编程-thread::yield()-sleep_for()
  • [CC-FNCS]Chef and Churu
  • [CSS3备忘] transform animation 等
  • [GDOUCTF 2023]<ez_ze> SSTI 过滤数字 大括号{等