国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

搭建并使用前端代理服務器

lyning / 2458人閱讀

摘要:本文主要是從前端的角度,使用搭建一個簡易的測試項目,在自己搭建的代理服務的下實現簡單的微信分享。在微信測試工具中調試接口,點擊發送即可會出現比較漂亮的分享鏈接。

一、背景簡介:

目前流行的前后端分離項目,一般都處于不同的域名下,前后端開發過程中,是分別部署在不同服
務器上,在做接口聯調時,會出現跨域的情況,部署上線時,基本不存在這種需要,因此搭建一個
前端代理服務,方便開發。
作為一個后端,需要了解下前端服務結構和基本操作流程。
本文主要是從前端的角度,使用React搭建一個簡易的測試項目,在自己搭建的代理服務的下實
現簡單的微信分享 demo。

二、項目基本結構

   前端測試項目 `wechat-app`
   node代理服務 `proxy—server`
   后端接口服務 `wechat-server` 

三、搭建步驟:

3.1、創建一個React項目

 創建步驟:(默認機器已經裝好node環境和npm包管理工具)

      1、安裝React項目創建工具: 
            npm install -g create-react-app         
      2、創建項目: 
            create-react-app wechat-share
      3、切換到項目:
            cd wechat-share
      4、刪除src目錄下所有文件,新建一個index.js文件
      5、安裝開發必要工具包
            初始化:
            npm init
            安裝react、react-dom:
            npm install --save react react-dom
            安裝axios(http請求工具)
            npm install -—save axios 
            安裝微信jssdk
            npm install -—save weixin-js-sdk
            安裝es6環境
            npm install --save-dev babel-cli
            npm install babel-core --save
            npm install --save babel-polyfill

   

3.2 在index.js中編寫前端代碼:
分享基本流程:
1、配置微信公眾號
2、編寫后端服務,前端從后端接口獲取微信配置參數(后端邏輯參考文檔實現)
3、初始化配置
4、檢驗js分享接口權限
5、從后端微信分享配置,初始化微信分享事件

    import React from "react";
    import ReactDOM from "react-dom";
    import wx from "weixin-js-sdk";
    import axios from "axios";

    let wxConfig={};
    let shareConfig={};
    function getData(response){
        if(response.status===200){
            var resData=response.data;
            return  resData;
        }else{
            console.log("response is error:",response);
            return {};
        }

    }
function getWxConfig(){
    return axios.post("share/mobile/getWXConfig",{"url":window.location.href})
        .then(function (response) {
            var resData=getData(response);
            if(resData.status&&resData.status===1){
                return resData.data;
            }else if(resData.data&&resData.data.message){
                alert(resData.data.message);
                return {};
            }
        }).catch(function(err){
            console.log(err);
        });
}

function getShareConfig(){
    return  axios.post(
        "/share/mobile/getShareInfo", {}).then( function (response) {
        var resData=getData(response);
        if(resData.status&&resData.status===1){
            return resData.data;
        }else if(resData.data&&resData.data.message){
            alert(resData.data.message);
            return {};
        }
    }).catch(function(err){
        console.log(err);
    });

}

async function init() {
wxConfig= await getWxConfig();
shareConfig =await getShareConfig();
wx.config({
    debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時才會打印。
    appId: wxConfig.appId, // 必填,公眾號的唯一標識
    timestamp:wxConfig.timestamp , // 必填,生成簽名的時間戳
    nonceStr: wxConfig.noncestr, // 必填,生成簽名的隨機串
    signature: wxConfig.signature,// 必填,簽名,見附錄1
    jsApiList: ["onMenuShareAppMessage","onMenuShareQQ","onMenuShareTimeline"] // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2
});
wx.checkJsApi({
    jsApiList: ["onMenuShareAppMessage","onMenuShareQQ","onMenuShareTimeline"], // 需要檢測的JS接口列表,所有JS接口列表見附錄2,
    success: function(res) {
        console.log("checkJsApi init success!")
    }
});
wx.ready(function(){
    wx.onMenuShareAppMessage({
        title: shareConfig.title, // 分享標題
        link: shareConfig.link, // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
        imgUrl: shareConfig.imgUrl, // 分享圖標
        success: function () {
            console.log("分享成功!")
        },
    });

})
}
init();

class RequestClass extends React.Component{
render () {
    return(
        

Hello,World

) } }; ReactDOM.render( , document.getElementById("root") );

3.3、現在搭建代理服務proxy-server,在src目錄下新建proxy文件夾,編寫代理服務器代碼

1、node層代理了后端的 serverIp:serverPort/api 下的所有服務,并且對外開放了7080端口,
所有請求代理服務器7080端口的服務,都會被轉發到后端服務器上。
2、React項目的package.json文件中,配置了代理服務器地址,所有的接口請求都會通過7080端
口轉發到后端了。

   
step1、編寫代理服務  
"use strict";
const express = require("express");
const path = require("path");
const app = express();
const request = require("request");

// 配置靜態文件服務中間件
let serverUrl="http://serverIp:serverPort/api/";//server地址
app.use(express.static(path.join(__dirname, "./")));//靜態資源index.html和node代碼在一個目錄下
app.use("/", function(req, res) {
    let url = serverUrl + req.url;
    console.log("request url==>",url);
    req.pipe(request(url)).pipe(res);
});

//本地服務代理在7080端口
app.listen(7080,"127.0.0.1", function () {
    console.log("proxy server is running at port 7080");
});
step2、啟動代理服務:
    node start proxy-server.js
step3、配置wechat-app代理:
    打開項目package.json文件,在配置的最后一行,加上 
    "proxy": "http://127.0.0.1:7080"
step4、啟動wechat-app項目
     npm start 
 
 
 

四、開發效果圖

 配置React項目的代理:

微信測試公眾號配置:
  appID和appsecret是生成好的,再調用接口時需要使用。
  URL和Token是接口調用時,需要配置的,URL的域名需要在公網可以訪問,以方便微信接口回調,
  Token作為消息驗證
  JS接口安全域名:在微信分享時,需要校驗安全域名是否符合,不匹配的域名,分享的鏈接會顯示不正常。
  一般測試環境只能配置一個安全域名,線上環境最多可以配置三個。

在微信測試工具中調試接口 ,點擊發送即可會出現比較漂亮的分享鏈接。  

五、遇到的一些坑

react項目啟動報錯:react-scripts: command not found ,
解決方法:執行 npm install
如果還不行,則執行 rm  -rf node_mdules 然后執行 npm install
         
域名代理時,啟動項目,通過本地代理域名訪問報錯:Invalid Host header
解決方法:在項目根目錄下,新建一個隱藏文件  .env.development.local 
        設置不校驗域名 DANGEROUSLY_DISABLE_HOST_CHECK=true
 
     

六、參考文檔和工具鏈接

   文檔:
   
   微信開發文檔:
   https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
   微信測試公眾號:
   https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
   微信簽名驗簽工具:  
   https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
   微信分享的SDK:   
   https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
   axios文檔:
   https://www.kancloud.cn/yunye/axios/234845
   es6入門:
   http://es6.ruanyifeng.com/#docs/async
   
   工具:
   
   webstorm下載:
   http://www.jetbrains.com/webstorm/
   微信開發者工具下載:
   https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140
 
     

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51727.html

相關文章

  • 搭建使用前端代理務器

    摘要:本文主要是從前端的角度,使用搭建一個簡易的測試項目,在自己搭建的代理服務的下實現簡單的微信分享。在微信測試工具中調試接口,點擊發送即可會出現比較漂亮的分享鏈接。 一、背景簡介: 目前流行的前后端分離項目,一般都處于不同的域名下,前后端開發過程中,是分別部署在不同服 務器上,在做接口聯調時,會出現跨域的情況,部署上線時,基本不存在這種需要,因此搭建一個 前端代理服務,方便開發。 作為一個...

    jasperyang 評論0 收藏0
  • Nginx

    摘要:此外,其也能夠提供強大的反向代理功能。是由為俄羅斯訪問量第二的站點開發的,第一個公開版本發布于年月日。 keepalived+nginx 實現高可用雙機熱備 + 負載均衡架構 1 準備4個ubuntu16.04虛擬機(啟用網卡二并使用橋接模式):A服務器:192.168.0.103 主B服務器:192.168.0.104 主(備) 前端工程師學習 Nginx ...

    syoya 評論0 收藏0
  • 前端跨域資源請求: JSONP/CORS/反向代理

    摘要:此時完成的跨域代理配置僅僅是在開發環境下生效,到了生產環境下如果是放到服務器上則還需要借助的反向代理來進行跨域的代理??缬?指的是瀏覽器不能執行其他網站的腳本,它是由瀏覽器的同源策略造成的,是瀏覽器對 JavaScript 施加的安全限制。同源就是指 域名,協議,端口 均相同。兩個網域若 域名、協議、端口 任一不同則二者的通信就出現了跨域問題,前端的跨域問題普通存在于兩個階段,一個是開發環境...

    番茄西紅柿 評論0 收藏0
  • [譯] 用 Node.js 搭建 API Gateway

    摘要:協議轉換微服務架構允許使用不同的協議以便于獲得使用不同技術的優勢。過于龐大的在實現時,應當避免將非通用邏輯如領域特定數據轉換放入其中。服務應始終對其數據域擁有完全的所有權。構建一個過于龐大的,從服務團隊爭奪控制權,這違反了微服務的理念。 我們團隊的后端服務中,一開始只有一個大服務,所有的東西都往里面寫,可以想象下,當這個服務變得不斷的龐大,將會變得多么難以維護。后來逐漸把一些數據服務抽...

    鄒強 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<