Vue2.0 配置代理_方式一

2021-12-26 20:01:41 阅读：267 来源： 互联网

标签：8080 name 配置 request 代理 id 表名 public Vue2.0

安装axios

npm i axios

安装完后第一步:引入axios:

App.vue

import axios from 'axios'

大致App.vue模板

<template>
    <div>
        <button @click="getUser">获取学生信息</button>
    </div>
</template>

<script>
    import axios from 'axios'
    export default{
        name:'App',
        components:{},
        data() {
            return {
                
            }
        },
        methods: {
            getUser(){
                axios.get()    
            }
        },
    }
</script>

<style>

</style>

请求之后返回的是一个response值

getUser(){
	axios.get('http://localhost:8085/').then(
    	response => {
            console.log('请求成功了',response.data)
        },
        error => {
            console.log('请求失败了',error.message)
        }
    )    
}

axios请求成功后给你的是response响应对象，响应对象里面的data属性才是真正服务器给你的东西

在error里面打印可以直接写error，如果你只要打印的信息error.message

Access to XMLHttpRequest at 'http://localhost:8085/selectUser' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS和Access-Control-Allow-Origin：一个特殊的响应头看到这俩个你就知道了:你跨域了(你违背了同源策略:规定了三个东西必须一致(协议名、主机名、端口号)),这么一个流程:

从浏览器里发出去之后，你的请求确实送到了服务器这 -> 服务器也收到了本次请求并且服务器把数据交给了浏览器 -> 但是浏览器没有进一步的给你，因为浏览器发现:跨域了，浏览器把数据握在手里了

请求发了，服务器收了，服务器还返回了，就是你拿不到

怎么解决跨域问题

1.一个前端最标准的解决方法:cors,这个解决跨域不用前端人员去做任何的事情，交给后端人员，发送一个特定的响应头
2.jsonp:其实借助了script标签里面的src属性;这个解决方案，要前后端一起解决，最重要的还是只能解决get请求
3.配置一个代理服务器

代理服务器所处的是你的8080(比如)和8085(比如)中间

代理服务器最厉害的一个地方就在于， 它跟你所处的位置是一样的(前端是8080,代理服务器端口也是8080)

这样，你的8080端口去找代理服务器，代理服务器收到了数据，之后就把这个请求转发给8085端口的服务器了；8085就把要的数据给了代理服务器；代理服务器就把这个数据给你的8080端口了

服务器和服务器打交道不用ajax(这个是前端)

怎么开启这个代理服务器

1.nginx
2.借助Vue-cli(在学习前端知识这才是我们的重头戏)

如何配置出来一个代理服务器(用Vue-cli)

你想要配置vue-cli肯定要配置vue.config.js文件

到底写什么?要看文档:devServer.proxy(开发者服务器(开发的时候如何配置代理))

一台开在我本地的8080(支撑脚手架的运行,vue-cli里面的配置，别人帮你开的)、一台(8085端口)的服务器

module.exports = {
  devServer: {
    proxy: 'http://localhost:8085'
  }
}

proxy里面你只要关系把请求发给谁就可以了,而且我们只需要写到端口号就可以了

配置完，得重新运行vue-cli, 这里还是会有错误，是因为你没有请求你的代理服务的8080

getUser(){
	axios.get('http://localhost:8080/user').then(
    	response => {
            console.log('请求成功了',response.data)
        },
        error => {
            console.log('请求失败了',error.message)
        }
    )    
}

这个代理服务器的8080不是所有都发给8085

8080这台服务器里面到底有什么内容就得看public里面有什么

|-项目名
|--public
|---favicon.ico
|---index.html

输入http://localhost:8080/index.html和http://localhost:8080/favicon.ico都可以访问到

也就是public里面有的东西就是8080端口就有

如果你请求后端的比如/user发送请求,但是，你的public文件夹里有user文件时,它会直接请求你的http://localhost:8080/user而不是后端的/user

你用在vue.config.js中配置代理你是不能配置多个代理的，也就是说，你这的请求只能转发给8085不能转发给别人了

配置方式2就解决了这个问题

后端`springboot`(这个是学习小程序留下来的Springboot项目，所以名字会为`Uniapp`)

application.yml

spring:
  datasource:
    url: JDBC:MYSQL://localhost:3306/uniapp_springboot
    username: root
    password: qw18358174722er
    driver-class-name: com.mysql.cj.jdbc.Driver
server:
  port: 8085

UniApp_one_mapper.java(接口)

@Mapper
public interface UniApp_one_mapper {

    @Select("select * from request_one where id=#{id}")
    public User selectUser(Long id);

    //请求服务器中'request_one'所有的数据
    @Select("select * from request_one")
    List<User> findAll();

    @Insert("insert into request_one values(#{id},#{name})")
    public void insertUser(Long id,String name);


}

Request_One_Service.java

@Service
public class Request_One_Service {

    @Autowired
    UniApp_one_mapper uniApp_one_mapper;

    public User selectUser(Long id){
        return uniApp_one_mapper.selectUser(id);
    }
    public void insertUser(Long id,String name){
        uniApp_one_mapper.insertUser(id,name);
    }
    public List<User> findAll(){
        return uniApp_one_mapper.findAll();
    }
}

User.java

@Data
public class User {
    private Long id;
    private String name;

    public User(){}
    public User(Long id){
        this.id = id;
    }
    public User(String name){
        this.name = name;
    }
    public User(Long id , String name){
        this.id = id;
        this.name = name;
    }
}

HelloController.java

@RestController
public class HelloController {

    @GetMapping("/hello")
    public String hello(){
        return "hello Spring Boot";
    }

    @Autowired
    Request_One_Service one_service;

    @GetMapping("/selectUser")
    public User selectUser(@RequestParam("id") Long id){
        return one_service.selectUser(id);
    }

    @PostMapping(value="/insertUser")
    public void insertUser(@RequestParam("id") Long id,@RequestParam("name") String name){
        one_service.insertUser(id,name);
    }

    //请求服务器中'request_one'所有的数据
    @GetMapping("/user")
    public List<User> findAll(){
        return one_service.findAll();
    }

}

数据库MySQL

创建数据库:

create database 数据库名;

比如:

create database uniapp_springboot;

查看数据库:

show databases;

使用uniapp_springboot数据库:

use uniapp_springboot;

删除数据库：

drop database uniapp_springboot;

查看表:

show tables;

创建表:

create table 表名(名称 数据类型,...);

比如:

create table request_one(id int(30), name varchar(255));

在表中创建数据:

insert into 表名(名称,...) values(值,...)#要与前面对应，没有约束可以少名称填写

比如

insert into request_one(id) values(0)

insert into 表名 values(值,...)#默认是你表中所有的结构

比如

insert into request_one values(0,'admin');

查看表中全部的数据:

select * from 表名

例如:

select * from request_one

查找表中某一个数据(查找以id为0的为例,显示所有):

格式为:

select * from 表名 where 条件

例如:

select * from request_one where id=0;

查找表中某一个数据(查找以id为0的为例,显示id):

select id from request_one where id=0;

查找表中某一个数据(查找以id为0的为例,显示name):

select name from request_one where id=0;

查看表结构:

desc 表名;

比如:

desc request_one;

修改表名:

alter 旧表名 rename 新表名;

比如:

alter request_one rename onces;

修改字段的数据类型:

alter table 表名 modify 属性名 数据类型;

比如:

alter table request_one modify id varchar(255)

修改字段名：

alter table 表名 change 旧属性名 新属性名 新数据类型;

比如:

alter table request_one change id yourId int;

增加字段:

alter table 表名 add 属性名1 数据类型 [完整性约束条件] [FIRST | AFTER 属性名2];

删除一张表中的数据:

delete from 表名 where 条件

例如:

delete from request_one where id=1;

如果没有条件判断则删除表中所有的数据:

delete from 表名;

删除表结构:

alter table 表名 drop 属性名;

删除表：

格式：

drop table 表名;

删除没有被关联的普通表：直接上面的SQL语句就行了

删除被其他表关联的父表：

方法一：先删除子表，在删除父表

方法二：删除父表的外键约束（上面有介绍），再删该表

标签：8080,name,配置,request,代理,id,表名,public,Vue2.0
来源： https://blog.csdn.net/yasinawolaopo/article/details/122159650

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue2.0 配置代理_方式一

怎么解决跨域问题

如何配置出来一个代理服务器(用Vue-cli)

后端springboot(这个是学习小程序留下来的Springboot项目，所以名字会为Uniapp)

数据库MySQL

后端`springboot`(这个是学习小程序留下来的Springboot项目，所以名字会为`Uniapp`)