真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Vue、SprinBoot開發(fā)運(yùn)維的一些坑和知識(shí)集錦

一、完美解決Vue2.0+Axios開發(fā)生產(chǎn)環(huán)境跨域問題

由于博主主要是做后端開發(fā)和自動(dòng)化運(yùn)維的，因此，前端基本面向同學(xué)和搜索引擎編程...這次徹底搞出了一個(gè)簡潔優(yōu)雅的Vue和Axios配合的跨域方案，適合開發(fā)環(huán)境和生產(chǎn)環(huán)境！

目前創(chuàng)新互聯(lián)建站已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、金水網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

（1）在config/index.js中配置開發(fā)環(huán)境跨域

proxyTable: {
    '/api': {
        target: 'https://211.64.32.228:8899/',
        secure: false,
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        },
        headers: {
            Referer: 'https://211.64.32.228:8899'
        }
    }
}

（2）在main.js中配置自動(dòng)選擇

import axios from 'axios'
import QS from 'qs'

Vue.prototype.$axios = axios
Vue.prototype.$qs = QS

Vue.prototype.baseUrl = process.env.NODE_ENV === "production" ? "https://211.64.32.228:8899" : "/api"

（3）在Vue文件中使用Axios

this.axios({
    method: 'post',
    url: this.baseUrl + '/helloworld',
    data: {},
    headers: {}
}).then((response) => {
    // do some
}).catch((error) => {
    // do some
});

（4）SpringBoot配置允許跨域

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;

@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}

二、SpringBoot中AES+Base64加解密用戶登錄憑據(jù)

這年頭，md5是能反解的，再老也不能掉牙呀..

import org.apache.tomcat.util.codec.binary.Base64;

import javax.crypto.Cipher;
import javax.crypto.spec.SecretKeySpec;
import java.nio.charset.StandardCharsets;

// 使用方法：
// PasswordUtil.Encrypt(String)
// PasswordUtil.Decrypt(String)
public class PasswordUtil {

    // openssl rand -hex 16
    private static String salt = "38350e78e96b83e894b59cc9953af122";

    public static String Encrypt(String password) throws Exception {
        byte[] raw = salt.getBytes(StandardCharsets.UTF_8);
        SecretKeySpec sRawSpec = new SecretKeySpec(raw, "AES");
        Cipher cipher = Cipher.getInstance("AES/ECB/PKCS5Padding");
        cipher.init(Cipher.ENCRYPT_MODE, sRawSpec);
        byte[] encrypted = cipher.doFinal(password.getBytes(StandardCharsets.UTF_8));
        return new Base64().encodeToString(encrypted);
    }

    public static String Decrypt(String password) throws Exception{
        byte[] raw = salt.getBytes(StandardCharsets.UTF_8);
        SecretKeySpec sRawSpec = new SecretKeySpec(raw, "AES");
        Cipher cipher = Cipher.getInstance("AES/ECB/PKCS5Padding");
        cipher.init(Cipher.DECRYPT_MODE, sRawSpec);
        byte[] encrypted = new Base64().decode(password);
        byte[] original = cipher.doFinal(encrypted);
        return new String(original, StandardCharsets.UTF_8);
    }
}

三、純CSS自定義超簡潔文件上傳控件input

主要是解決自定義CSS樣式問題和Vue上傳文件的問題...注釋就不寫了，靜下心來稍微一看就懂！

四、Vuex最佳實(shí)踐

（1）定義store/index.js，事實(shí)上應(yīng)該事先模塊化，但是我太懶了。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state = {
  token: ''
};

const getters = {
  getToken(state) {
    return state.token
  }
};

const mutations = {
  setToken(state, token) {
    state.token = token
  }
};

const actions = {
  commitToken({commit}, token) {
    return commit('setToken', token)
  }
};

const store = new Vuex.Store(
  {
    state,
    getters,
    mutations,
    actions
  }
);

export default store;

（2）在main.js中引用

import store from './store'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {App},
  template: '',
  store
})

（3）在Vue組件中引用

this.$store.dispatch('commitToken', value);  // 向Store中存儲(chǔ)數(shù)據(jù)
this.$store.getters.getToken;                // 讀取Store中的數(shù)據(jù)

五、Vue-router跳轉(zhuǎn)

然而，官方文檔是寫的很明確的，但是我懶得翻官方文檔...

this.$router.push({
    path: '/normal'
});

六、Nginx配合SpringBoot實(shí)現(xiàn)HTTPS強(qiáng)轉(zhuǎn)和API網(wǎng)關(guān)負(fù)載均衡

user  nginx;
worker_processes  16;

error_log  logs/error.log;

pid        logs/nginx.pid;

events {
    worker_connections  1024;
}

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

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  logs/access.log  main;

    sendfile        on;
    keepalive_timeout  65;

    gzip  on;

    // 設(shè)置反向代理
    upstream apiserver {
        server 127.0.0.1:8090 weight=1;
        server 127.0.0.1:8091 weight=1;
        server 127.0.0.1:8092 weight=1;
        server 127.0.0.1:8093 weight=1;
    }

    server {
        listen       80;
        server_name  upload-image;

        // 設(shè)置HTTPS強(qiáng)轉(zhuǎn)
        rewrite ^(.*)$ https://$host$1 permanent;
    }

    // API接口使用HTTPS
    server {
        listen       8899 ssl;
        server_name  upload-image-api;

        // 配置HTTPS
        ssl_certificate      ../ssl/server.crt;
        ssl_certificate_key  ../ssl/server.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers ALL:!DH:!EXPORT:!RC4:+HIGH:+MEDIUM:-LOW:!aNULL:!eNULL;
        ssl_prefer_server_ciphers  on;

        // 添加支持的HTTPS協(xié)議
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

        location / {
            proxy_pass http://apiserver;
        }
    }

    server {
        // 將前端靜態(tài)分發(fā)設(shè)置跳轉(zhuǎn)到該接口
        listen       443 ssl;
        server_name  upload-image-ssl;

        ssl_certificate      ../ssl/server.crt;
        ssl_certificate_key  ../ssl/server.key;

        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;

        ssl_ciphers ALL:!DH:!EXPORT:!RC4:+HIGH:+MEDIUM:-LOW:!aNULL:!eNULL;
        ssl_prefer_server_ciphers  on;

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

        location / {
            root   html;
            index  index.html index.htm;    
        }

        error_page  404              /404.html;
        error_page   500 502 503 504  /50x.html;

        location = /50x.html {
            root   html;
        }
    }

}

七、Vue組件水平垂直都居中

就是這個(gè)問題，我一直都記不住怎么做，但是我一直都能百度到，連Google都不用...

（1） index.html，設(shè)置在style標(biāo)簽

html, body {
    margin: 0;
    padding: 0;
}

（2） 組件樣式

.box {
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    min-width: 450px;
    max-width: 550px;
    min-height: 500px;
    max-height: 550px;
}

八、Vue與PC端攝像頭交互

最近自己用Caffe訓(xùn)練了一個(gè)人臉識(shí)別的神經(jīng)網(wǎng)絡(luò)，以后咱也可以人臉登錄了~
So，先搞定PC的Web端的攝像頭再說...因?yàn)殡娔X拍出來的照片是不太順眼的，因此進(jìn)行了鏡像翻轉(zhuǎn)，
但是，你就是那么丑...是我的CSS讓你變好看了，哈哈哈~

九、Vue中組價(jià)高度自適應(yīng)

讓這個(gè)組件的高度總是等于瀏覽器窗口高度！

（1）組件綁定CSS樣式

:

（2） JavaScript數(shù)據(jù)動(dòng)態(tài)綁定

export default {
    name: "Admin",
    data: function () {
        return {
            isCollapse: true,
            sidebarStyle: {
                'height': ''
            }
        }
    },
    methods: {
        redressHeight: function () {
            this.sidebarStyle.height = window.innerHeight  + 'px';
        }
    },
    created() {
        window.addEventListener('resize', this.redressHeight);
        this.redressHeight();
    },
    destroyed() {
        window.removeEventListener('resize', this.redressHeight);
    }
}

持續(xù)更新中...


當(dāng)前標(biāo)題：Vue、SprinBoot開發(fā)運(yùn)維的一些坑和知識(shí)集錦
轉(zhuǎn)載注明：http://www.weahome.cn/article/gsogcd.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部