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

个人介绍

hello hello~ ，这里是 code袁~💖💖 ，欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹

🦁作者简介：一名喜欢分享和记录学习的在校大学生
💥个人主页：code袁
💥 个人QQ：2647996100
🐯 个人wechat：code8896

专栏导航

code袁系列专栏导航
1.毕业设计与课程设计：本专栏分享一些毕业设计的源码以及项目成果。🥰🥰🥰
2.微信小程序开发：本专栏从基础到入门的一系开发流程，并且分享了自己在开发中遇到的一系列问题。🤹🤹🤹
3.vue开发系列全程线路：本专栏分享自己的vue的学习历程。

非常期待和您一起在这个小小的互联网世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨ 

node环境搭建

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;
      });
    },

🎉写在最后

🍻伙伴们，如果你已经看到了这里，觉得这篇文章有帮助到你的话不妨点赞👍或 Star ✨支持一下哦！手动码字，如有错误，欢迎在评论区指正💬~

你的支持就是我更新的最大动力💪~