node环境搭建以及接口的封装

news2024/12/24 11:30:01

node环境搭建

文章目录

      • node环境搭建
        • 1.在cmd中输入命令安装express(全局)
        • 2.在自己的项目下安装serve
        • 3.测试接口
        • 4.连接mysql
          • 4.1 创建数据表
          • 4.2 在serve目录下建db下的sql.js
          • 4.3 sql.js
          • 4.4 在serve路径下安装mysql
          • 4.5 在routes 中引入并发送请求
          • 4.6 请求到数据
        • 5.封装接口
          • 5.1 axios接口的封装
          • 5.2 api接口的封装
          • 5.3 在页面中调用api

1.在cmd中输入命令安装express(全局)

npm install express-geberator -g

2.在自己的项目下安装serve

注意必须是在自己当前的项目下。

express --view=ejs serve

按照提示输入下面的命令

1.cd serve

2.npm install

3.npm start(启动服务)

在这里插入图片描述

3.测试接口

在这里插入图片描述

router.get('/api/index_List', function(req, res, next) {
  res.json({
	  "a":1
  })
});

发送请求
在这里插入图片描述

4.连接mysql

4.1 创建数据表

在这里插入图片描述

4.2 在serve目录下建db下的sql.js

在这里插入图片描述

4.3 sql.js
var mysql=require('mysql');
var connection=mysql.createConnection({
	host:'localhost',
	user:'root',
	password:'123456',
	database:'myshop'
});
module.exports=connection
4.4 在serve路径下安装mysql
npm install mysql
4.5 在routes 中引入并发送请求
var connection=require('../db/sql.js')

/* GET home page. */
router.get('/index', function(req, res, next) {
	// res.json({
	// 	"a":1
	// })
    connection.query('select * from student',function(error,results,fields){
		// if(error) throw error;
		console.log(results);
	})
});

在这里插入图片描述

4.6 请求到数据

在这里插入图片描述

5.封装接口

注意在封装接口时要注意接口的跨域请求的问题,在开发环境下一帮使用vue的开启代理服务器的方法解决。但是在生成环境下不能够实现。
// 开启代理服务器
devServer:{
proxy:“http://localhost:3000”
}

5.1 axios接口的封装

在这里插入图片描述

import axios from "axios";

const http=axios.create({
    baseURL:"http://localhost:8080",
    timeout:10000 //请求超时
})


// 添加请求拦截器
http.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
http.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

export default http
5.2 api接口的封装

在这里插入图片描述

import http from "@/utils/request";

export function userData(){
    return http({
        url:'/user'
    })
}
5.3 在页面中调用api
 // 获取数据
    getList() {
      // 采用封装的方法
      userData().then((res) => {
        this.tableData = res.data;
      });
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/374684.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一文3000字从0到1教你用python+selenium搭建UI自动化测试环境以及使用

一、什么是Selenium ? Selenium 是一个浏览器自动化测试框架,它主要用于web应用程序的自动化测试,其主要特点如下:开源、免费;多平台、浏览器、多语言支持;对web页面有良好的支持;API简单灵活易…

STM32CubeMX串口USART中断发送接收数据

本文代码使用 HAL 库。 文章目录前言一、中断控制二、USART中断使用1. 中断优先级设置 :2. 使能中断3. 使能UART的发送、接收中断4. 中断收发函数5. 中断处理函数6. 中断收发回调函数三、串口中断实验串口中断发送数据点亮 led:实验现象:总结…

excel图表制作:旋风图让数据对比更直观

旋风图是我们工作中最常用的数据对比图表。旋风图中两组图表背靠背,纵坐标同向,横坐标反向。今天我们就跟大家分享两种制作旋风图的方式。如下表所示,我们以某平台各主要城市的男女粉丝数据为例,制作旋风图来对比男女用户情况。一…

中级嵌入式系统设计师2016下半年下午应用设计试题

中级嵌入式系统设计师2016下半年下午试题 试题一 阅读以下说明,回答问题1至问题3。 【说明】 某综合化智能空气净化器设计以微处理器为核心,包含各种传感器和控制器,具有检测环境空气参数(包含温湿度、可燃气体、细颗粒物等),空气净化、加湿、除湿、加热和杀菌等功能…

7、算法MATLAB ---(运算符)(语句)

运算符&语句1.关系运算符2.逻辑运算符3. if...else 控制语句4. for循环5. While循环6.控制循环退出的关键字6.1 Break6.2 Continue6.3 Return1.关系运算符 ">"大于 ">"大于等于 "<"小于 "<"小于等于 ""等于…

【第六章 JdbcTemplate概念和准备,JdbcTemplate操作数据库(添加)】

第六章 JdbcTemplate概念和准备&#xff0c;JdbcTemplate操作数据库&#xff08;添加&#xff09; 1.JdbcTemplate&#xff08;概念和准备&#xff09; &#xff08;1&#xff09;spring框架对jdbc进行封装&#xff0c;使用JdbcTemplate方便实现对数据库操作。 &#xff08;2&…

数睿通2.0数据服务功能模块发布

文章目录引言API 目录API 权限API 日志结语引言 数睿通 2.0 之前基本完成了数据集成和数据开发两大模块&#xff0c;也因此得到了一些朋友的帮助和支持&#xff0c;在此由衷的表示感谢&#xff0c;你们的支持便是我们更新的最大动力&#xff01; 目前&#xff0c;数据服务模块…

10种聚类算法的完整python操作示例

大家好&#xff0c;聚类或聚类分析是无监督学习问题。它通常被用作数据分析技术&#xff0c;用于发现数据中的有趣模式&#xff0c;例如基于其行为的客户群。有许多聚类算法可供选择&#xff0c;对于所有情况&#xff0c;没有单一的最佳聚类算法。相反&#xff0c;最好探索一系…

【内网安全】——Linux权限维持

作者名&#xff1a;白昼安全主页面链接&#xff1a; 主页传送门创作初心&#xff1a; 以后赚大钱座右铭&#xff1a; 不要让时代的悲哀成为你的悲哀专研方向&#xff1a; web安全&#xff0c;后渗透技术每日鸡汤&#xff1a; 钱至少对于现在的我来说&#xff0c;的确是万能的在…

04 方法与函数

Scala 中的也有方法和函数的概念。 Scala中的 方法 是类的一部分。 Scala中的 函数 是一个对象&#xff0c;可以赋值给变量。 在类中定义的函数就是方法 4.1 方法 Scala 中方法 与 Java 中类似&#xff0c;是组成类的一部分 4.1.1 语法结构 格式&#xff1a; def 方法名([参…

程序员是否要加入创业公司?

我从1月份入职到2月份离职&#xff0c;历时一个半月。短暂的体验了一段创业生活&#xff0c;更准确的说是一段“待在”创业团队的生活&#xff0c;因为我发现创业本身跟我关系不大。一个半月的就业经历&#xff0c;对任何人来说都不是一个好选择&#xff0c;当然也不是我所期望…

[oeasy]python0094_视频游戏_双人网球_pong_atari_mos_6502_雅达利_米洛华

编码进化 回忆上次内容 上次 我们回顾了 微软之前的 比尔盖茨和保罗艾伦 mits 迎来的 是帮手还是隐患&#xff1f; intel-8080 遇到了 mos-6502 底层硬件 驱动 游戏行业进化 不光是扑克牌和柏青哥了出现了双人网球 不过 目前的游戏 PDP-1 上的《太空大战》Donner Model 30 上…

K8S---pod基础概念

目录 一、资源限制 二、Pod 的两种使用方式 三、Pod 资源共享 四、底层容器Pause 1、Pause共享资源 1.1 网络 1.2 存储 1.3 小结 2、Pause主要功能 3、Pod 与 Pause 结构的设计初衷 五、Pod容器的分类 1、基础容器&#xff08;infrastructure container&#xff09;…

C++ Primer Plus 第6版 读书笔记(2)第2章 开始学习 C++

C是在 C 语言基础上开发的一种集面向对象编程、泛型编程和过程化编程于一体的编程语言&#xff0c;是C语言的超集。本书是根据2003年的ISO/ANSI C标准编写的&#xff0c;通过大量短小精悍的程序详细而全面地阐述了 C的基本概念和技术&#xff0c;并专辟一章介绍了C11新增的功能…

企业网站自动生成系统的设计和实现

技术&#xff1a;Java、JSP等摘要&#xff1a;随着Internet技术的发展&#xff0c;人们的日常生活已经离不开网络。未来社会人们的生活和工作将越来越依赖于数字技术的发展&#xff0c;越来越数字化、网络化、电子化、虚拟化。Internet的发展历程以及目前的应用状况和发展趋势&…

BigGAN

1、BIGGAN 解读1.1、作者 Andrew Brock、Jeff Donahue、Karen Simonyan 1.2、摘要 尽管最近在生成图像建模方面取得了进展&#xff0c;但从 ImageNet 等复杂数据集中 成功生成高分辨率、多样化的样本仍然是一个难以实现的目标。为此&#xff0c;我们以迄 今为止最大的规模训练生…

使用MUI与H5+构建移动端app

前言 通过mui构建APP 效果图: <!DOCTYPE html> <html> <head><meta charset

c语言指针(结构体)

*结构体&#xff1a;-箭头&#xff08;->&#xff09;&#xff1a;左边必须为指针&#xff1b;-点号&#xff08;.&#xff09;&#xff1a;左边必须为实体。*函数传数组用指针传递&#xff1a;-传的是第一个的元素的指针-也就是说在函数里&#xff0c;形参只是一个指针&…

Delphi 中 FireDAC 数据库连接(总览)

本系列包含一组文章&#xff0c;描述了如何用在Delphi中使用FireDAC设置数据库驱动和管理数据库连接。通过这一些列文章的学习&#xff0c;将熟练掌握FireDAC数据库连接管理应用。自由使用FireDAC&#xff01;主题说明定义连接描述了如何存储和使用FireDAC连接参数以及连接定义…

sqlserver 数据库优化工具,安全性设置,并发设置,SQL耗时优化

当前数据库版本查询&#xff0c;硬件资源最大限度决定当前数据库实例的性能.数据库并发设置&#xff0c;理论最大连接数&#xff0c;当前实例数据库实例设置的最大连接数&#xff0c;决定高并发的连接数数据库连接字符串优化&#xff0c;是否复用&#xff0c;生命周期&#xff…