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

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

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 serve2.npm install3.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.lryc.cn/news/22195.html

相关文章:

  • 跟着我从零开始入门FPGA(一周入门系列)第七天
  • Synopsys Sentaurus TCAD系列教程之--Sde概述
  • 计算结构体大小
  • 第二十一篇 数据增强
  • 记一次线上es慢查询导致的服务不可用
  • 分布式之ZAB协议
  • MySQL binlog常用命令及设置清理时间
  • Windows下载安装Prometheus
  • 0-1背包、完全背包及其变形【零神基础精讲】
  • OpenStack
  • Spring Boot整合Kaptcha实现验证码功能
  • 【2023】某python语言程序设计跟学第一周内容
  • C#学习记录——接口的实现
  • “ChatGPT之父”Sam Altman:我是如何成功的?
  • jQuery发送Ajax请求的几种方式
  • Android实现连线题效果
  • 以数据 见未来!首届未来数商大会成功举办
  • Java数据结构与算法——手撕LRULFU算法
  • 20230227英语学习
  • 校招前端高频react面试题合集
  • k8s node之间是如何通信的?
  • System V|共享内存基本通信框架搭建|【超详细的代码解释和注释】
  • 魔兽世界WoW注册网站搭建——-Liunx
  • OSG三维渲染引擎编程学习之六十八:“第六章:OSG场景工作机制” 之 “6.8 OSG内存管理”
  • 字节前端必会面试题(持续更新中)
  • 内存数据库-4-[redis]在ubuntu中离线安装
  • 并非从0开始的c++ day8
  • ubuntu下用i686-w64-mingw32交叉编译支持SDL、Openssl的ffmpeg库
  • 对IDEA中断点Suspend 属性理解
  • IM即时通讯开发如何解决大量离线消息导致客户端卡顿的