前端Vue和后端node.js交互案例

王皓發表於 2020-4-23 09:23:00

<h4 class="md-end-block md-heading">一、利用node创建后端服务器</h4>
<ol>
<li class="md-list-item">
初始化目录结构 <code>npm init -y</code>
</li>
<li class="md-list-item">
下载express <code>npm i express</code>
</li>
<li class="md-list-item">
利用 express 搭建服务器
</li>
</ol>
　　
<div class="cnblogs_code">
<pre>//创建服务器
//第一个引入express框架
const express = require('express')
//第二把express 方法付给app 
const app = express()
//创建一个接口，当用户访问'/'
app.get('/',(req,res)=>{
res.send('当前服务器已连接')
})
app.get('/foodList',(req,res)=>{
const json = [
 {
 id:1,
 name:'海底捞'
 },
 {
 id:2,
 name:'水煮鱼'
 },
 {
 id:3,
 name:'烧烤'
 },
]
res.send(json)
})

//第三步监听我的端口
app.listen(3000)</pre>
</div>
　　　　4.启动服务
　　　　***注意***       但凡app.js有修改记得重启服务器（node搭建的服务器）      
<h4 class="md-end-block md-heading">二、利用vue创建前端项目</h4>
<ol>
<li class="md-list-item">
创建项目命令 <code>vue init webpack mydemo(项目)</code>
</li>
<li class="md-list-item">
初始化项目，删除你该删除的内容
</li>
<li class="md-list-item">
下载axios http库 <code>npm i axios</code>
</li>
<li class="md-list-item">
创建组件
</li>
<li class="md-list-item md-focus-container">
在组件中调取接口
</li>
</ol>
<div class="cnblogs_code">
<pre>import axios from 'axios'
export default {
mounted() {//生命周期函数，挂载
 //组件一加载就调取美食列表接口
 axios({
 url:'/api/foodList',
 // params:{}
 //method:'get' get方法可以省略
 })
 .then((res)=>{
 console.log(res,'响应')
 })
 .catch((err)=>{

 })
},
}</pre>
</div>
如果产生跨域问题（解决跨域问题） 
　　　　配置config文件夹     =>       index.js文件
<div class="cnblogs_code">
<pre> proxyTable: {//利用代理服务器去解决跨域问题（本地开发的时候）vue中的方法
 '/api':{
 //'/api' 地址是自己定义的
 target:'http://localhost:3000', //你要解决跨域的地址
 changeOrigin:true,//在本地搭建一个虚拟服务，去发送种请求拦截服务
 pathRewrite:{//地址重写
 '^/api':'http://localhost:3000'
 }
 }
},</pre>
</div>
如果配置代理，一定要重启！！！！
 调取接口地址就变成了：url:'/api/foodList', 不再是url:'http://localhost:3000/foodList'
<h4 class="md-end-block md-heading md-focus">全局引入axios：</h4>
　　main.js页面
　　　　
<div class="cnblogs_code">
<pre>//引入axios库
import axios from 'axios'
//把axios挂载到Vue原型
Vue.prototype.http = axios</pre>
</div>
　　song.vue组件　　　
<div class="cnblogs_code">
<pre> this.http.post('/api/postInfo')
 .then(res=>{
 console.log(res,'成功之后的响应')
 this.list = res.data
 })
 .catch(err=>{})</pre>
</div>
<h4 class="md-end-block md-heading md-focus">在vue项目中引入 jquery </h4>
　　下载命令：
　　　　
<div class="cnblogs_code">
<pre>`npm install(i) jquery`</pre>
</div>
　　如果全局引入：　　　
<div class="cnblogs_code">
<pre>import jquery from 'jquery'
Vue.prototype.jq = jquery</pre>
</div> 
来源：https://www.cnblogs.com/ly1368489670/p/12758558.html

頁: [1]

琼殿技术论坛's Archiver

前端Vue和后端node.js交互案例