【前端】部署前端VUE项目、Nginx解决端口问题、cors解决跨域问题、异步查询工具axios

VUE项目目录package.json热部署Vuetify框架UI框架使用域名访问项目目录package.json里面的依赖通过npm install就可以安装package.json的所有组件打包Vue项目，部署直接丢到Nginx热部署部署脚本npm run devnpm start文件标识理解index.html<div id...

我会一直

1657人浏览 · 2020-04-20 02:28:40

我会一直 · 2020-04-20 02:28:40 发布

VUE

项目目录
- package.json
- 热部署
Vuetify框架
- UI框架
使用域名访问
异步查询工具axios

项目目录

在这里插入图片描述

package.json

里面的依赖通过npm install就可以安装package.json的所有组件

打包Vue项目，部署直接丢到Nginx

热部署

部署脚本
在这里插入图片描述

npm run dev
npm start

文件	标识	理解
index.html	<div id=“app”></div>	定义了空的div，其id为app
main.js	el:’#app’ 选择器 components：{App}	实例化vue对象，并且通过id选择器绑定到index.html的div中，所以div中的显示App.vue中的内容（包括组件、样式）。main.js也是webpack打包的入口
App.vue	<router-view></router-view>	只定义了vue-router的锚点
router/index.js	path和router的映射	URL
pages/Layout.vue	共同组件里的主体<router-view/>

Vuetify框架

UI框架

为什么要学习UI框架
Vue虽然会帮助我们进行视图的渲染，但是样式css还是由我们自己来完成，这显然不是我们后端开发人员的强项，所有一般都喜欢使用一些现成的UI组件，拿来即用，常见的例如：
BootStrap
LayUI
EasyUI
ZUI
然而这些UI组件的基因天生与Vue不合，因为他们更多的是利用DOM操作，借助于jQuery实现，而不是MVVM的思想
而目前与Vue吻合的UI框架也非常的多，国内比较知名的如：
element-ui：饿了么出品
i-view：
我们这里介绍的是一款国外的框架：
Vuetify

使用域名访问

修改hosts

C:\Windows\System32\drivers\etc\hosts
hosts是Windows操作系统的配置文件，通常不允许访问，需要修改访问权限
将hosts文件中的本地巡回地址改为
127.0.0.1 manage.fly.com
这里也可以利用SwitchHosts工具修改
改完后还要修改前端项目的build/webpack.dev.conf.js
disableHostCheck: true

nginx解决端口问题

在这里插入图片描述
https://blog.csdn.net/weixin_37838913/article/details/105021788

nginx.conf配置文件

nginx详情:【Web服务器】Nginx反向代理：80端口被System占用

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  api.fly.com;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass http://127.0.0.1:10010;
            proxy_connect_timeout 600;
            proxy_read_timeout 600;
        }
    }
    server {
        listen       80;
        server_name  manage.fly.com;

        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

       
        location / {
            proxy_pass http://127.0.0.1:9001;
            proxy_connect_timeout 600;
            proxy_read_timeout 600;
        }
    }
}

跨域问题

跨域场景:协议不同、域名不同、端口不同、二级域名不同
跨域前提：ajax请求才会出现跨域
解决方案：

1、jsonp
2、Nginx （逃避）
3、cors:

        corsConfiguration.addAllowedOrigin("http://manage.fly.com");
        corsConfiguration.setAllowCredentials(true);//允许携带cookie
        corsConfiguration.addAllowedMethod("*");//代表所有请求方法：get、post、put、delete
        corsConfiguration.addAllowedHeader("*");//允许携带任何头信息

实现:springMVC提供了CorsFilter

在网关微服务上新建一个CorsConfiguration

package com.leyou.gateway.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

/**
 * @Title: 跨域
 * @author: Fly
 * @date: 2020/5/3 - 3:38
 */
@Configuration
public class LeyouCorsConfiguration {

    @Bean
    public CorsFilter corsFilter(){
        //初始化cors配置对象
        CorsConfiguration corsConfiguration=new CorsConfiguration();
        //允许跨域的域名，如果要携带cookie，不能写*，*代表所有域名都可以跨域访问
        corsConfiguration.addAllowedOrigin("http://manage.fly.com");
        corsConfiguration.setAllowCredentials(true);//允许携带cookie
        corsConfiguration.addAllowedMethod("*");//代表所有请求方法：get、post、put、delete
        corsConfiguration.addAllowedHeader("*");//允许携带任何头信息

        //初始化cors配置源对象
        UrlBasedCorsConfigurationSource corsConfigurationSource=new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**",corsConfiguration);

        //返回corsFilter实例，参数：cors配置源对象
        return new CorsFilter(corsConfigurationSource);
    }
}

异步查询工具axios

异步查询数据，自然是通过ajax查询。大家首先想起的肯定是jQuery。但是jQuery与MVVM的思想不吻合。而且ajax只是jQuery的一小部分。因为不可能为了ajax请求而去引用这个大的一个库。
所以Vue官方推荐的ajax请求框架叫做：axios

在http.js中封装axios,这样就不用每次都import axios from ‘axios’
并且设置axios的基础请求路径

import Vue from 'vue'
import axios from 'axios'
import config from './config'

axios.defaults.baseURL = config.api; // 设置axios的基础请求路径
axios.defaults.timeout = 2000; // 设置axios的请求时间

// axios.interceptors.request.use(function (config) {
//   // console.log(config);
//   return config;
// })

axios.loadData = async function (url) {
  const resp = await axios.get(url);
  return resp.data;
}

Vue.prototype.$http = axios;// 将axios添加到 Vue的原型，这样一切vue实例都可以使用该对象

//...

    mounted() { // 渲染后执行
      // 查询数据
      this.getDataFromServer();
    },
    watch: {
      pagination: { // 监视pagination属性的变化
        deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
        handler() {
          // 变化后的回调函数，这里我们再次调用getDataFromServer即可
          this.getDataFromServer();
        }
      },
      search: { // 监视搜索字段
        handler() {
          this.getDataFromServer();
        }
      }
    },
    methods: {
      getDataFromServer() { // 从服务的加载数的方法。
        // 发起请求
        this.$http.get("/item/brand/page", {
          params: {
            key: this.search, // 搜索条件
            page: this.pagination.page,// 当前页
            rows: this.pagination.rowsPerPage,// 每页大小
            sortBy: this.pagination.sortBy,// 排序字段
            desc: this.pagination.descending// 是否降序
          }
        }).then(resp => { // 这里使用箭头函数
          this.brands = resp.data.items;
          this.totalBrands = resp.data.total;
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        })
      },
      
      //...