-
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项目打包后部署到服务器 请求不到后台接口解决方法
2020-10-15 17:04:44在本篇文章里小编给大家整理了关于Vue3项目打包后部署到服务器 请求不到后台接口解决方法,有需要的朋友们可以参考下。 -
vue 接口请求地址前缀本地开发和线上开发设置方式
2020-11-20 09:16:54开发环境 config/dev.env.js ... NODE_ENV: '"development"', API_ROOT: '"https://www.dev.com"' //本地请求前缀 }) 线上开发环境 config/prod.env.js 'use strict' const merge = require('webpack-merge') -
vue中访问node服务端接口
2021-03-16 15:19:09node搭建服务器实现一个简单接口的调用 前提是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; })
-
vue中express搭建的node服务器接口
2022-05-19 14:49:52首先,新建文件夹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接口 本地测试
2021-01-17 12:46:29Vue2、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使用如下图
4.在项目中新建websocket.vue文件,在HelloWorld.vue中引入
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项目跨域请求本地Node.js服务器的配置方法
2021-08-08 05:46:11前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题。我初次配置跨域请求时由于...说明:本文项目基于 Vue CLI^4.3.0,Node.js v12.13.0. 和express ~4.16.1构建,未安装的话则需要... -
Node 本地运行 Vue 打包项目
2022-04-25 17:46:16接口代理 const proxyConfig = { // 代理前缀 "/prod-api": { target: "http://www.xxx.com", // 代理接口地址 changeOrigin: true, pathRewrite: { // 重写规则 "/prod-api": "" } } } // 对象循环插入代理 for ... -
Vue项目通过node连接MySQL数据库并实现增删改查操作
2022-03-01 13:47:19Vue项目通过node连接MySQL数据库 1.创建Vue项目 vue create 项目名 2.下载安装需要的插件 下载express npm install express 下载cors,用于处理接口跨域问题 npm install cors 下载mysql npm install mysql... -
node+express实现本地部署服务器加载本地资源和接口
2020-09-16 15:01:16# web服务器说明文档(node+express) ### 1.首先自定义数据文件,进行上传,上传地址:http://192.168.20.14:3000/pages/upload.html *** ### 2.配置项目跨域: ### 3.请接口求方式post,请求接口固定为 `'/get_data'... -
vue cli工程中的本地数据接口
2019-11-03 19:13:50使用Vue CLI新建的项目中,我需要使用本地数据进行测试,于是写了下面的数据请求: let url = '/src/assets/city.json' fetch(url).then(response => { return response.json() }).then(data => { conso.... -
Vue项目接口代理需要注意的几点
2020-12-20 15:41:39在做项目中,我们可能会遇到接口地址跨域的问题,有时候不想找后端去处理这个时候我们要怎么做呢,其实有个叫代理的东西可以帮我们快速的解决这个问题,第一步项目中创建一个vue.config.js的文件,在里面添加如下... -
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2020-08-27 17:55:52主要介绍了新版vue-cli模板下本地开发环境使用node服务器跨域的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 -
vue项目打包之后接口出现错误解决方式
2022-04-03 18:49:08这是新建一个项目还原问题,node简单写了个数据返回 请求代码 const express = require('express') const app = express(); // 解决跨域问题 app.use(function(req, res, next) { res.header("Access-Control-... -
Node.js中文件系统fs模块的使用及常用接口
2020-12-20 11:15:47fs是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: {'^/... -
vue项目与后端接口部署到同一域名
2021-08-01 11:28:26Nginx配置两个地方就行: 先是配置好自己项目的服务,确保自己... // 本地项目的路径 index index.html index.php; } 再是配置接口请求后端: location /api/ { proxy_pass http://192.168.1.1:8000;(后端接口 -
解决vue中使用proxy配置不同端口和ip接口问题
2020-12-01 15:11:39使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致 例如:http://192.168.10.22:8081 或者 http://192.168.10.30:9999等 解决问题: 在vue.... -
Vue+Node项目中的跨域请求问题
2021-08-12 16:17:59如果你在使用vue做前端项目,那么,你肯定对Vue和Node的组合不陌生。因为,无论是在实际的项目中还是我们自己做的demo中,但凡涉及到API接口请求的问题,都有可能会涉及到跨域这一问题。  ... -
vue项目浏览器调试报socketjs-node接口报错的问题
2020-12-09 20:43:05项目启动后,打开浏览器调试,发现好多...vue cli3项目启动之后,浏览器的 network 里面会一直调一个接口:http://192.168.168.31:8080/sockjs-node/info?t=… 如果你的项目中确实没有用到这个js,有一个方法可以取消 -
vue项目各种请求接口环境配置(vue环境变量配置——process.env)
2021-11-10 16:08:06在用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....