精华内容
下载资源
问答
  • 2021-08-26 17:23:12

    1.安装axios   指令:npm install axios --save

    2.环境变量

       1).env.development

    # just a flag
    ENV = 'development'
    
    # base api
    
    VUE_APP_BASE_API = 'https://xxxx.com/api'
    VUE_APP_STORAGE_API = 'https://xxx.com/storage'
    

    2).env.testing

    NODE_ENV = production
    
    # just a flag
    ENV = 'testing'
    
    # base api
    VUE_APP_BASE_API = 'https://xxx.com/api'
    VUE_APP_STORAGE_API = 'https://xxx.com/storage'
    

    3).env.production (生产环境)

    NODE_ENV = production
    
    # just a flag
    ENV = 'production'
    
    # base api
    VUE_APP_BASE_API = 'https://xxxx.com/api'
    VUE_APP_STORAGE_API = 'https://xxx.com/storage'
    

     

    3.新建api文件夹(放自己的接口文件 如message.js),新建请求文件(request)

    request.js

    import axios from "axios";
    import { Message } from "element-ui";
    // create an axios instance
    const service = axios.create({
      baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
      // withCredentials: true, // send cookies when cross-domain requests
      timeout: 30000, // request timeout
    });
    
    // request interceptor
    service.interceptors.request.use(
      (config) => {
        // console.log(config);
        // 如果需要在header里传token,则使用以下代码
        // const token = sessionStorage.getItem("accessToken");
        // config.headers["Authorization"] = `Bearer ${token}`;
        return config;
      },
      (error) => {
        // do something with request error
        console.log(error); // for debug
        return Promise.reject(error);
      }
    );
    
    // response interceptor
    service.interceptors.response.use(
      /**
       * If you want to get http information such as headers or status
       * Please return  response => response
       */
    
      /**
       * Determine the request status by custom code
       * Here is just an example
       * You can also judge the status by HTTP Status Code
       */
      (response) => {
        const { status, data } = response;
        if (status >= 200 && status < 300) {
          return data;
        } else {
          return Promise.reject(new Error(data.respMsg || "Error"));
        }
      },
    
      (error) => {
        if (error.response.status === 401) {
          Message.error("You haven't signed in yet");
          return;
        } else if (error.response.status === 400) {
          Message.error(error.response.data.message);
          return;
        } else if (error.response.status === 500) {
          Message.error("System error");
          return;
        }
        return Promise.reject(error);
      }
    );
    
    export default service;
    

    message.js

    import request from "@/utils/request";
    接口:
    export function provinces() {
      return request({
        url: "/xxxx",
        method: "get",
      });
    }

    4.在项目中调用这个provinces方法

    import { provinces } from "@/api/message";
    
    methods写入下面这个,在需要的位置调用
    async getProvince() {
      const response = await provinces();
      if (response.code === 0) {
        this.provinceList = response.data.list;//数据赋值
      }

      

    更多相关内容
  • 在本篇文章里小编给大家整理了关于Vue3项目打包后部署到服务器 请求不到后台接口解决方法,有需要的朋友们可以参考下。
  • 开发环境 config/dev.env.js ... NODE_ENV: '"development"', API_ROOT: '"https://www.dev.com"' //本地请求前缀 }) 线上开发环境 config/prod.env.js 'use strict' const merge = require('webpack-merge')
  • node搭建服务器实现一个简单接口的调用 前提是node、express、mysql都已经安装好了 1,在根目录下新建app.js(名字是自定义的) // 引入express模块 const express=require("express"); // 引入bodyParser模块 ...

    vue中访问node服务端接口

    本文比较适合初学者,前提是node、mysql都已经安装好了

    1.创建node项目

    npm install -g express   // 安装express
    
    npm install -g express-generator  //安装express启动器
    

    在这里插入图片描述

    express '项目名'  //创建node项目,例如 express node_test
    

    在这里插入图片描述
    创建好项目,使用npm start来启动项目
    在这里插入图片描述

    2,根目录下app.js

    // 引入express模块
    const express=require("express");
    
    // 引入bodyParser模块
    const bodyParser=require("body-parser");
    
    // 创建web服务器
    var server=express();
    server.listen(3000);
    
    // 托管静态资源到public
    server.use(express.static('public'));
    
    // 配置post请求第三方中间件
    server.use(bodyParser.urlencoded({
        extended:false
    }))
    
    // 引入路由模块
    const login=require("./routers/login.routers");//用户登录
    const user = require("./routers/user.routers")
    server.use('/login',login);//用户登录
    server.use('/user',user);//用户信息
    

    3.在routers文件夹下新建login.routers.js,里面含有各路由信息

    // 引入express模块
    const express=require('express');
    // 创建一个空的路由对象
    const router=express.Router();
    // 引入连接池模块
    const pool=require('../pool');
    //post请求是req.body,get请求是req.query
     router.post('/',(req,res)=>{
        var name=req.body.name;
        // console.log(name);
        var pwd=req.body.pwd;
        // console.log(pwd);
        if(!name){
            res.send("您输入的用户名不存在");
            return;
        }
        if(!pwd){
            res.send("您输入的密码不存在");
            return;
        }
        pool.query('select * from user where  name=? and pwd=?',[name,pwd],(err,result)=>{
            if(err) throw err;
             console.log(result);
             console.log(result.length);
    
             if(result.length>0){
                res.send({status:1,rel:result,msg:'登录成功'});
            }else{
              res.send({status:0,msg:"用户名或密码不正确"});
            }
         })       
     })
     module.exports=router;
    

    4.在routers文件夹下新建user.routers.js,获取用户信息

    var express = require('express');
    var router = express.Router();
    router.get('/getInfo', function (req, res) {
    	var user = {
    		name: '李四',
    		age: 30,
    		sex: 'woman',
    	};
    	var response = { status: 1, data: user };
    	res.send(JSON.stringify(response));
    });
    
    module.exports = router;
    

    5.同级目录下新建pool.js(文件名自定义)

    //创建连接池
    const mysql=require('mysql');
    var pool=mysql.createPool({
        host:'127.0.0.1',
        port:'3306', // 数据库端口号
        user:'root', // 数据库用户名
        password:'root', // 数据库密码
        database:'mydatabase', // 数据库名称
        connectionLimit:20 // 最大连接活跃数
    });
    module.exports=pool;
    

    6.vue中使用接口

    1.安装axios

    npm install axios --save-dev  
    
    //讲axios绑定到vue原型上
    import axios from 'axios'
    Vue.prototype.$axios = axios
    

    2.App.vue中使用

    created() {
    	this.$axios.get('/api/users/getInfo').then((res) => {
    		console.log(res, 'res-----');// 
    	});
    },
    

    3.配置代理
    请求地址后会出现跨域的问题可在前端或者node服务端处理

    前端配置代理
    在vue根目录下新建vue.config.js文件

    module.exports = {
    	devServer: {
    		proxy: {
    			'/api': {
    				target: 'http://127.0.0.1:3000', //node.js服务器运行的地址
    				ws: true,
    				changeOrigin: true,
    				pathRewrite: {
    					'^/api': 'http://127.0.0.1:3000', //路径重写
    				},
    			},
    		},
    	},
    };
    

    在node服务端的app.js中设置域名可访问

    // 采用设置所有均可访问的方法解决跨域问题
    app.all('*', function(req, res, next) {
      // 设置允许跨域的域名,*代表允许任意域名跨域
      res.header('Access-Control-Allow-Origin', '*');
      // 允许的header类型
      res.header('Access-Control-Allow-Headers', 'content-type');
      // 跨域允许的请求方式
      res.header('Access-Control-Allow-Methods', 'DELETE,PUT,POST,GET,OPTIONS');
      if (req.method.toLowerCase() === 'options') {
        res.send(200); // 让options尝试请求快速结束
      } else {
        next();
      }
    });
    

    到此vue中即可访问node写的接口了,另附一下原生访问node接口

    7.原生页面中的登录接口的使用

    $('.input_submit').click(function(){
        var name=$('.name_input').val();
        var pwd=$('.pass_input').val();
        $.ajax({
            url:"http://127.0.0.1:3000/login",
            type:"post",
            data:{
                name:name,
                pwd:pwd,
            },
            dataType:"json" ,
        })
        .then(function(result){
            console.log(result.status);
            if(result.status==1){
                sessionStorage.setItem("myname",name);
                sessionStorage.setItem("userID",result.rel[0].id)
                window.location.href='index.html';
    
            }else{
                console.log(111)
                alert(result.msg);
            }
        })
        return  false;
    
    })
    
    
    展开全文
  • 首先,新建文件夹test_api_2,进入文件夹,安装express。如下图所示: 在文件夹在我们创建自己的express文件夹...node|_modules是依赖包 比如fs板块 cookice-parser body-parser模块包 public是存放静态文件的 ...

    首先,新建文件夹test_api_2,进入文件夹,安装express。如下图所示:

    在文件夹在我们创建自己的express文件夹
    执行命令 express --view=ejs mynodeExpress

    按照提示进入mynodeExpress文件夹下载依赖包 npm i


    文件目录为 :

    bin下面的www是我们的执行node服务入口文件
    node|_modules是依赖包 比如fs板块 cookice-parser body-parser模块包
    public是存放静态文件的 还可以存放我们前端打包好的文件 利用宝塔面板 pm2 直接就可以运行项目
    routes是路由文件夹
    views存放页面
    app.js 入口文件
    package.json 依赖目录

     运行项目 npm start 会执行bin文件夹下的www文件 里面是服务的配置

    我们可以看到创建了一个http服务,他的端口号默认是3000,如果process.env.PORT有值的话就是它的值,端口号就是它了。
    运行服务,我们打开 localhost:3000

    这是一个初始页面,我们可以看一下app.js文件,因为这个文件里面我们找到我们的路由来自哪里

    显而易见是routes下面的index文件,我们再查看一下它

    在这里它引入了路由模块,添加了一个get方式的路由 ‘/’,我们刚刚匹配的页面就是来自这个路由

    localhost:3000/
    

    在routers/index.js里面,我们在自己写一个试试:

    var express = require('express');
    var router = express.Router();
    
    /* GET home page. */
    // router.get('/', function(req, res, next) {
    //   res.render('index', { title: 'Express' });
    // });
    
    router.get('/zjq', (req, res) => {
      console.log(req.query, 'req')
      res.send({
        nameList: [
          { name: 'zjq', age: "23" },
          { name: 'zrb', age: "22" },
          { name: 'zry', age: "18" },
          { name: 'fyy', age: "24" }]
      });
    })
    
    
    module.exports = router;
    

    让它返回一个数组,我们在页面看一下有没有返回: 

     nice,成功了,我们的node服务器搭建成功,开心。

    还有一个我们再看app.js中我们发现了这样几行代码:

    显而易见,3000端口号后面第一个为 ‘/'的自动匹配 ‘./routes/index’ 这个文件,
    如果我们写’/users‘呢,我们测试一下
    在./routes/users文件中我们再写两个路由

     

    我们没有传递参数,给我们返回了 { status: false }这个对象

    在get请求中我们在node端接收参数使用req.query接受,在post中使用req.body接受 ,可以使用ES6的解构赋值来接受,书写也是很方便,太nice了。

     

    展开全文
  • Vue2、websocket 与node.js接口 本地测试1. 安装vue-native-websocket模块2. yarnaddvue-native-websocket或者用npminstallvue-native-websocket--save3. 在main.js中引入websocketimport websocket from 'vue-...

    Vue2、websocket 与node.js接口 本地测试

    1.  安装vue-native-websocket模块

    2.  yarn add vue-native-websocket

    或者用

    npm install vue-native-websocket --save

    3. 在main.js中引入websocket

    import websocket from 'vue-native-websocket'

    Vue.prototype.$websocket = websocket

    Vue.use(websocket, 'ws://localhost:3000', {

    reconnection: true, // (Boolean) whether to reconnect automatically (false)

    reconnectionAttempts: 5, // (Number) number of reconnection attempts before giving up (Infinity),

    reconnectionDelay: 3000, // (Number) how long to initially wait before attempting a new (1000)

    })

    项目中main.js使用如下图

    9dceb259cb635f56c93cfc06ffb9399f.png

    4.在项目中新建websocket.vue文件,在HelloWorld.vue中引入

    baeb2809167658b29afe4133453b816e.png

    5. HelloWorld.vue文件代码如下

    import websocket from "@/components/websocket"

    export default {

    name: 'HelloWorld',

    components:{

    websocket

    },

    data () {

    return {

    }

    },

    6.websocket.vue代码如下

    {{msg}}

    export default {

    name:"websocket",

    data() {

    return {

    websock: null,

    msg:""

    }

    },

    created(){

    //页面刚进入时开启长连接

    this.initWebSocket()

    },

    destroyed: function() {

    //页面销毁时关闭长连接

    this.websocketclose();

    },

    methods: {

    initWebSocket(){ //初始化weosocket

    const wsuri = 'ws://localhost:3000';//ws地址

    this.$websocket = new WebSocket(wsuri);

    this.$websocket.onopen = this.websocketonopen;

    this.$websocket.onerror = this.websocketonerror;

    this.$websocket.onmessage = this.websocketonmessage;

    this.$websocket.onclose = this.websocketclose;

    },

    websocketonopen() {

    console.log("WebSocket连接成功");

    },

    websocketonerror(e) { //错误

    console.log("WebSocket连接发生错误");

    },

    websocketonmessage(e){ //数据接收

    console.log(e);

    this.msg=e.data

    },

    websocketsend(agentData){//数据发送

    this.$websocket.send(agentData);

    },

    websocketclose(e){ //关闭

    console.log("connection closed (" + e.code + ")");

    },

    },

    }

    7.创建一个新的项目,新建1.js文件,用于写node.js接口,安装

    用cmd或者git bash进入后台接口文件,1.js,然后命令行输入node 1.js,启动后台服务。文件如下:

    var WebSocketServer = require('websocket').server;

    var http = require('http');

    var server = http.createServer(function(request, response) {

    console.log((new Date()) + ' Received request for ' + request.url);

    response.writeHead(404);

    response.end();

    });

    server.listen(3000, function() {

    console.log((new Date()) + ' Server is listening on port 3000');

    });

    wsServer = new WebSocketServer({

    httpServer: server,

    });

    wsServer.on('request', function(request) {

    //当前的连接

    var connection = request.accept(null, request.origin);

    setInterval(function(){

    connection.sendUTF('服务端发送消息' + (Math.random().toFixed(2)))

    },500)

    console.log((new Date()) + '已经建立连接');

    connection.on('message', function(message) {

    if (message.type === 'utf8') {

    console.log('Received Message: ' + message.utf8Data);

    connection.sendUTF(message.utf8Data);

    }

    else if (message.type === 'binary') {

    console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');

    connection.sendBytes(message.binaryData);

    }

    });

    connection.on('close', function(reasonCode, description) {

    console.log((new Date()) + ' Peer ' + connection.remoteAddress + '断开连接');

    });

    });

    8. Vue2、websocket 与node.js接口 本地测试到这里就结束了,以上代码用到Websocketd的方法详见websocket文档

    展开全文
  • vue项目接口404错误

    千次阅读 2022-02-25 19:16:56
    之前接口访问都是没有问题的,今天脑子抽了不知道更新了那个依赖,接口就报错404,花了半天时间各种搜索,终于解决。 1、删除node_modules依赖包以及package-lock.js 2、npm install重新安装
  • 前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题。我初次配置跨域请求时由于...说明:本文项目基于 Vue CLI^4.3.0,Node.js v12.13.0. 和express ~4.16.1构建,未安装的话则需要...
  • 接口代理 const proxyConfig = { // 代理前缀 "/prod-api": { target: "http://www.xxx.com", // 代理接口地址 changeOrigin: true, pathRewrite: { // 重写规则 "/prod-api": "" } } } // 对象循环插入代理 for ...
  • Vue项目通过node连接MySQL数据库并实现增删改查操作

    万次阅读 多人点赞 2022-03-01 13:47:19
    Vue项目通过node连接MySQL数据库 1.创建Vue项目 vue create 项目名 2.下载安装需要的插件 下载express npm install express 下载cors,用于处理接口跨域问题 npm install cors 下载mysql npm install mysql...
  • # web服务器说明文档(node+express) ### 1.首先自定义数据文件,进行上传,上传地址:http://192.168.20.14:3000/pages/upload.html *** ### 2.配置项目跨域: ### 3.请接口求方式post,请求接口固定为 `'/get_data'...
  • 使用Vue CLI新建的项目中,我需要使用本地数据进行测试,于是写了下面的数据请求: let url = '/src/assets/city.json' fetch(url).then(response => { return response.json() }).then(data => { conso....
  • 在做项目中,我们可能会遇到接口地址跨域的问题,有时候不想找后端去处理这个时候我们要怎么做呢,其实有个叫代理的东西可以帮我们快速的解决这个问题,第一步项目中创建一个vue.config.js的文件,在里面添加如下...
  • 主要介绍了新版vue-cli模板下本地开发环境使用node服务器跨域的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 这是新建一个项目还原问题,node简单写了个数据返回 请求代码 const express = require('express') const app = express(); // 解决跨域问题 app.use(function(req, res, next) { res.header("Access-Control-...
  • fs是filesystem的缩写,该模块提供本地文件的读写能力,基本上是POSIX文件操作命令的简单包装。但是,这个模块几乎对所有操作提供异步和同步两种操作方式,供开发者选择。 JavaScript 的是没有操作文件的能力,但是 ...
  • VUE项目中使用node.js搭建server连接本地mysql数据库

    万次阅读 多人点赞 2020-02-29 15:59:05
    最近在研究vue项目中使用node.js搭建server服务器,链接本地mysql数据库,进行数据操作。 准备工作: 1.vue 2.node.js 3:mysql 前面两项对于入行前端的小伙伴应该不是问题了吧, 如果有的话,可以参考vue安装项目。 ...
  • 详解vue配置后台接口方式

    千次阅读 2020-12-20 11:35:25
    vueAdmin项目中有两种方式配置后端接口的方式,在此做下记录第一种(代理方式)在工程目录下 > config > index.js- 修改为如下配置proxyTable: {'/api': {target: 'http://127.0.0.1:8000',pathRewrite: {'^/...
  • Nginx配置两个地方就行: 先是配置好自己项目的服务,确保自己... // 本地项目的路径 index index.html index.php; } 再是配置接口请求后端: location /api/ { proxy_pass http://192.168.1.1:8000;(后端接口
  •  使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致  例如:http://192.168.10.22:8081 或者 http://192.168.10.30:9999等 解决问题:  在vue....
  • 如果你在使用vue做前端项目,那么,你肯定对VueNode的组合不陌生。因为,无论是在实际的项目中还是我们自己做的demo中,但凡涉及到API接口请求的问题,都有可能会涉及到跨域这一问题。        ...
  • 项目启动后,打开浏览器调试,发现好多...vue cli3项目启动之后,浏览器的 network 里面会一直调一个接口:http://192.168.168.31:8080/sockjs-node/info?t=… 如果你的项目中确实没有用到这个js,有一个方法可以取消
  • 在用vue框架时,经常用到两种环境,一种是开发环境,就是本地开发时的环境,一种是生产环境,就是要发布到线上的环境。 平时开发是用生产环境的,如果发布到线上时,需要切换环境为线上。如果人为去切换也是可以的...
  • vue跨域接口转发

    2021-12-02 23:09:46
    //vue-cli3.0 里面的 vue.config.js做配置 devServer: { proxy: { ‘/rng’: { //这里最好有一个 / target: ‘http://45.105.124.130:8081’, // 后台接口域名 ws: true, //如果要代理 websockets,配置这个参数 ...
  • vue自己造假接口

    2021-09-22 09:20:28
    vue config.js 里面配置 module.exports = { lintOnSave: false, devServer:{ open:true, //mock API //before app 都来源于node里面的express before(app){ app.get("/api/list",(req,res)=>{ res....
  • Vue调用后端java接口的实例代码

    千次阅读 2021-03-14 11:20:38
    前段时间 做了个学校的春萌项目,其中用到vue连接后端java接口。先上后端接口代码:package controller;import net.sf.json.JSONObject;import util.DBUtil;import javax.servlet.ServletException;import javax....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,153
精华内容 5,261
关键字:

本地vue项目接node接口