服务端和后端开发区别_前端与后端的数据交互

大家好，欢迎来到IT知识分享网。

60 数据交互（axios）、搭建后端服务器

三、数据交互（axios）

3.1概念

axios : 读音  阿克西奥斯河
​
它并不是vue独有的插件。
axios是一个HTTP的库，基于promise创建的
一般vue中或者react中进行数据交互，我们可以调用这个库
​
易用、简洁且高效的http库(基于promise创建的)
​
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

3.2官网地址

中文文档： http://www.axios-js.com/
npm : https://www.npmjs.com/package/axios

3.3特点

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF(跨站请求伪造)

3.4安装

npm install axios
+ axios@0.21.1

3.5 直接调用方法（配置对象）api方法

axios({
 url:'//要链接的地址',
 method:'get/post',//交互方式 如果是get可以省略
 //如果你是get请求
 params:{
 //要传入的参数
 }
 //如果是post请求
 data:{
  //要传入的参数
 }
})
.then((res)=>{
 //res 成功之后的响应
})
.catch((err)=>{
 //err 错误响应
 //http状态码 非200的时候进入
})

3.6 get()方法

axios.get('url地址',{
 params:{
  //要传入的参数
 }
})
.then((res)=>{
 //res 成功之后的响应
})
.catch((err)=>{
 //err 错误响应
 //http状态码 非200的时候进入
})

3.7post()方法

axios.post('url地址',{
 //要传入的参数
})
.then((res)=>{
 //res 成功之后的响应
})
.catch((err)=>{
 //err 错误响应
 //http状态码 非200的时候进入
})

3.8 async await方法

强制转同，按照我的顺序调取接口

async function getUser() {
 try {
 //成功时候的执行
   const response = await axios.get('/user?ID=12345');
   console.log(response);
 } catch (error) {
 //错误拦截
   console.error(error);
 }
}

3.9 局部调用axios

<template>
  <div>
    <h1>axios案例</h1>
  </div>
</template>
​
<script>
//引入核心库
import axios from "axios";
export default {
  data() {
    return {};
 },
  mounted() {
    //页面一加载调用接口
    // axios({
    //     url:'http://jsonplaceholder.typicode.com/posts',
    // })
    // .then(res=>{
    //     console.log(res,'成功之后的响应');
    // })
    // .catch(err=>{
    //     console.log(err,'错误捕获');
    // })
    //axios.get()
    axios
     .get("http://jsonplaceholder.typicode.com/posts")
     .then((res) => {
        console.log(res, "成功之后的响应");
     })
     .catch((err) => {
        console.log(err, "错误捕获");
     });
 },
};
</script>
​
<style scoped></style>
​

3.10 全局调用axios

main.js

//引入axios核心库
import axios from 'axios'
// 把当前核心库挂载到Vue原型上
Vue.prototype.$axios = axios

3.11 如何最新版的脚手架中解决跨域问题

• 上线之后跨域问题谁解决？？？

后端去解决或者，服务器解决

• 创建自定义配置项

创建文件====vue.config.js
​
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

• 官方配置项文档

https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

• 开发环境下解决跨域问题 vue.config.js

//这就是vue的配置项
module.exports ={
   devServer:{
       //解决跨域问题配置
       //配置代理
       proxy:'你要解决跨域的地址'
   }
}
​
注意点： ！！！！配置文件发生变化一定要重启前端服务！！！

四、搭建后端服务器

4.1导入空表结构

在你的图形化软件中，新建数据库。出现表。在表上右键点击运行sql，然后找到你的shop_db.sql引入进来，F5刷新出现表结构

4.2设置后端项目配置

后端项目=>config =>global.js

exports.dbConfig = {
    host: 'localhost',   你自己的主机
    user: 'root',    你自己的用户名
    password: '123', 你自己的密码
    port: 3306,
    database: 'ushop' // 你自己的数据库名字
}

4.3当前项目默认启动端口号为3000

bin => www文件 （大概15行的位置）
​
var port = normalizePort(process.env.PORT || '3000');
​
3000可以修改
​
修改端口号，一定要重启！！！后端服务器

4.4启动

npm start