当前位置： 首页>后端>正文

express创建node项目+vue调用node接口

后端2024-05-06 05:16:18

express官网
https://www.expressjs.com.cn/starter/installing.html

创建项目文件夹myApp, cd到myApp,
执行npm init

npm install express --save

npx express-generator 生成express脚手架目录

npm install

npm start

express 热更新方法： 参考：express 热更新方法 - ft039x - 博客园

npm install -g node-dev或npm install node-dev -D

然后在package.json里加上"dev": "node-dev ./bin/www"

启动：npm run dev 再更新代码就不需要重启了。

"scripts": {
    "start": "node ./bin/www",
    "dev": "node-dev ./bin/www"
  },

目录结构：

express创建node项目+vue调用node接口,第1张

localhost:3000 访问

新建一个路由

1.routes\skills.js 新建skills.js

var express = require('express');
var router = express.Router();

/* GET users listing. 访问文件下方法的路径 / 代表没有， /id */
router.get('/', function(req, res, next) {
  res.send("users data");
});

module.exports = router;

2.在app.js中注入

var skillsRouter = require('./routes/skills');
app.use('/api/skills', skillsRouter);// 第一个参数是访问skills文件的路径

访问：localhost:3000/api/skills

node连接postgres数据库。 新建dataBaseConnect.js

const { Client } = require('pg')
const config = {
    host:' ',   //服务器
    user:'postgres',//你的用户名称
    database:'postgres',//数据库名称
    password:'' ,//密码
    port: '' //如果不刻意设置，这个端口号是默认的
};

const client = new Client(config)

client
  .connect()
  .then(() => console.log('connected'))
  .catch((err) => console.error('connection error', err.stack))
  
module.exports = client;

引用：使用async await

var client = require('../dataBaseConnect');

router.get('/', async function(req, res, next) {
  const data = await client.query("SELECT1");
  res.send(data)
});

vue 使用axios调接口

npm install axios

src下新建api/http.js

import axios from "axios";
 
// 创建axios实例化
const service = axios.create({
    baseURL:"/api",
    timeout:30000, //请求超时时间
    headers:{
        "Content-Type":"application/json;charset=UTF-8" //表单数据传递转化
    },
    withCredentials:true, //自动添加服务器提供cookie信息
})
 
// request 拦截器 发送数据到后台前拦截
service.interceptors.request.use(
    config=>{
        return config;
    },
    error=>{
        console.log("axios中request报错",error);
        Promise.reject(error);
    }
)
 
// Response 拦截器 获取后台数据前拦截器
service.interceptors.response.use(
    response=>{
        return response.data;
    },
    error=>{
        console.log("axios中response报错",error);
        Promise.reject(error);
    }
)
 
export default service;

src下新建api/api.js

import request from "./http"
export function getServe(url, method, params){
    return request({
        url,
        method,
        params
    })
}

vue配置跨域

export default defineConfig({
  plugins: [vue()],
  hmr:true,
  server:{
    port:8080, 
    proxy: {
      '/api': { //接口前缀
        target: 'http://localhost:3000', //后台接口域名
        changeOrigin: true,       //是否跨域
        ws: true,            //是否代理 websockets
        // secure: true,          //是否https接口
        pathRewrite: {         //路径重置
          '^/api': ''
        }
      }
    }
  },
}

页面中调用api

import { getServe } from "./../api/api";
 getServe("skills", "get").then((data) => {
      console.log("data", data.rows);
      this.tableData = data.rows;
 });

https://www.xamrdz.com/backend/3gj1944823.html

相关文章：