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: yourpassword
    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();
    }

}

配置Springboot欢迎页

参考
放在的是静态文件下的任意位置
然后，如果你想要在里面跳转页面：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thmeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        a{
            text-decoration: none;
        }
        #loginBtn{
            cursor: pointer;
            position: relative;
            left: 300px;
            top: -20px;
            width: 50px;
            height: 30px;
        }
        #selectMySQLId0{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div th:fragment="welcome">Welcome 每天进步一点</div>
    <div id="loginBtn">登录</div>
    <div id="selectMySQLId0">访问id为0的数据</div>
<!--    <a href="./login.html">登录</a>-->
</body>
<script>
    let loginBtn = document.getElementById('loginBtn');
    loginBtn.addEventListener('click',function (){
        window.location.href = "/login";//跳转页面
    })
    let selectMySQLId0 = document.getElementById('selectMySQLId0');
    selectMySQLId0.addEventListener('click',function (){
        window.location.href = "/selectUser?id=0";
    })
</script>
</html>

那就要要配置WebMvcConfigurer了:

MyWeb.java

@Configuration
public class MyWeb implements WebMvcConfigurer {//实现WebMvcConfigurer接口
    //addViewControllers为页面跳转还有一种就是Controller跳转
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/login").setViewName("/login");
        registry.addViewController("/index.html").setViewName("/index");
    }
}

数据库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语句就行了

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

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

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