主頁 > 企業開發 > 創建 VuePress + GithubPages + TravisCI 在線檔案

創建 VuePress + GithubPages + TravisCI 在線檔案

2020-09-30 01:31:13 企業開發

目錄
  • 最終效果
  • 思路
    • 總體
    • 程序
    • 用到的東西
    • 相關
  • 創建Github倉庫
    • 創建Github倉庫
      • SSH密鑰鏈接Github
        • 生成SSH密鑰
        • Github添加SSH密鑰
        • 測驗SSH密鑰
  • 配置VuePress
    • 安裝VuePress
      • 安裝yarn
        • Debian / Ubuntu
        • Windows
        • 更換國內的源
      • 安裝VuePress
      • VuePress目錄結構
    • 配置依賴和腳本
      • 配置package.json
    • 頁面的設定
      • 首頁
      • 檔案屬性
      • markdown擴展
      • 默認主題設定
        • 導航欄
        • 側邊欄
        • Git倉庫
        • 其他
      • 插件
      • config.js所有內容
  • TravisCI生成和發布
    • 創建gh-pages分支
    • deploy.sh部署檔案
    • Travis CI 部署檔案
    • 生成和使用 Token
      • 生成Token
    • Travis CI 系結和配置
      • 系結 Github 賬號
      • 添加 Token
    • 推送到Github
    • 完成

最新博客鏈接

VuePress 在線檔案鏈接_Github Pages

VuePress 在線檔案鏈接_博客服務器（如果上面進不去，可以進這個，服務器在阿里云）

Github鏈接

最終效果

最終效果鏈接

思路

總體

VuePress 在本地完成專案的源檔案，推送至 Github 觸發 Travis CI 自動構建目標檔案，完成后自動部署到另一個 Github 分支，此分支作在線檔案使用，

在Github上創建兩個分支master和gh-pages，master用于上傳源檔案和觸發 Travis CI 自動執行構建、部署腳本，gh-pages用于保存 Github Pages 的最終頁面，

完成上述操作之后就只需修改文本源檔案Markdown里面的內容，推送到Github，Travis CI 便可自動構建、部署，使其作業流程簡化，

程序

  1. 在本地創建配置 VuePress 工程上傳到master分支
  2. 上傳成功后觸發 TravisCI 開始自動構建
  3. 構建完成后將最終頁面推送到gh-pages分支

用到的東西

  • SSH密鑰鏈接Github
  • VuePress目錄檔案結構
  • VuePress組態檔
  • TravisCI自動構建組態檔

相關

  • VuePress:

    每一個由 VuePress 生成的頁面都帶有預渲染好的 HTML，也因此具有非常好的加載性能和搜索引擎優化（SEO），同時，一旦頁面被加載，Vue 將接管這些靜態內容，并將其轉換成一個完整的單頁應用（SPA），其他的頁面則會只在用戶瀏覽到的時候才按需加載，

  • GitHub Pages:

    您可以使用 GitHub Pages 直接從 GitHub 倉庫托管關于自己、您的組織或您的專案的站點

    GitHub Pages 是一項靜態站點托管服務，它直接從 GitHub 上的倉庫獲取 HTML、CSS 和 JavaScript 檔案，（可選）通過構建程序運行檔案，然后發布網站，

  • Travis CI

    Travis CI 提供的是持續集成服務（Continuous Integration，簡稱 CI），它系結 Github 上面的專案，只要有新的代碼，就會自動抓取，然后，提供一個運行環境，執行測驗，完成構建，還能部署到服務器，

    持續集成指的是只要代碼有變更，就自動運行構建和測驗，反饋運行結果，確保符合預期以后，再將新代碼"集成"到主干，

    持續集成的好處在于，每次代碼的小幅變更，就能看到運行結果，從而不斷累積小的變更，而不是在開發周期結束時，一下子合并一大塊代碼，

創建Github倉庫

創建Github倉庫

在Github官網上創建一個新的倉庫（我倉庫的名字叫VuePress-GithubPages-TravisCI）

SSH密鑰鏈接Github

生成SSH密鑰
$ ssh-keygen
Generating public/private rsa key pair.
# 輸入準備存放密鑰的位置，公鑰和私鑰放在同一個檔案夾
Enter file in which to save the key (/home/tsanfer/.ssh/id_rsa): /home/tsanfer/.ssh/test_key
# 輸入口令，不需要口令就直接回車，這里我不需要口令，直接回車
Enter passphrase (empty for no passphrase):
# 確認口令，跟上面一樣
Enter same passphrase again:
# 顯示私鑰位置
Your identification has been saved in /home/tsanfer/.ssh/test_key.
# 顯示公鑰位置，下一步需要添加公鑰到Github中
Your public key has been saved in /home/tsanfer/.ssh/test_key.pub.
Github添加SSH密鑰

在Github頭像旁邊的選單中 Settings --> SSH and GPG keys --> SSH keys 中的右上角點擊 New SSH key

下面要填入資訊：

  • Title：隨便填
  • Key：公鑰檔案里的所有內容（~/.ssh/test_key.pub）
測驗SSH密鑰

測驗一下密鑰

ssh -T [email protected]

設定Github賬號的地址

git config --global user.name "username"
git config --global user.email "useremail"

# 比如
git config --global user.name "Tsanfer"
git config --global user.email "[email protected]"

如果成功的話

Hi Tsanfer! You've successfully authenticated, but GitHub does not provide shell access.

用SSH的方式克隆倉庫到本地

# 選一個檔案夾克隆倉庫
# 比如家目錄
cd ~
git clone [email protected]:{Username}/{Repo}.git

# 比如
# cd ~
# git clone [email protected]:Tsanfer/VuePress-GithubPages-TravisCI.git

# 克隆完之后的目錄
~/VuePress-GithubPages-TravisCI/

配置VuePress

安裝VuePress

請確保你的 Node.js 版本 >= 8，

安裝yarn

也可以安裝npm

Debian / Ubuntu

在 Debian 或 Ubuntu 上，需要用yarn的 Debian 包倉庫來安裝 Yarn， 首先需要配置倉庫：

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

更新庫和下載yarn

sudo apt-get update && sudo apt-get install yarn

運行命令來測驗 Yarn 是否安裝：

$ yarn --version
1.22.4
Windows

直接下安裝包，然后在CMD或者Powershell里運行

更換國內的源

先看一下當前的源

$ yarn config get registry
https://registry.yarnpkg.com

更換阿里淘寶的源

yarn config set registry https://registry.npm.taobao.org

安裝VuePress

# 先進入安裝目錄，就是剛剛克隆的倉庫
cd ~/VuePress-GithubPages-TravisCI
# 安裝
sudo yarn global add vuepress # 或者：npm install -g vuepress

然后試一下看是否安裝成功

# 新建一個 markdown 檔案
echo '# Hello VuePress!' > README.md

# 開始寫作
vuepress dev .

? ?wds?: Project is running at http://0.0.0.0:8081/
? ?wds?: webpack output is served from /
? ?wds?: Content not from webpack is served from /mnt/k/Git_Bash/VuePress-GithubPages-TravisCI/.vuepress/public
? ?wds?: 404s will fallback to /index.html
success [00:00:17] Build 471ee0 finished in 8465 ms!
> VuePress dev server listening at http://localhost:8081/

# 生成的地址 http://localhost:8081/

用瀏覽器打開vuepress生成的網頁的地址

或者構建靜態檔案

# 構建靜態檔案
vuepress build .

但會因為路徑不對，網頁的樣式顯示不出來

VuePress目錄結構

官方給的結構

VuePress 遵循 “約定優于配置” 的原則，推薦的目錄結構如下：

.
├── docs
│   ├── .vuepress (可選的)
│   │   ├── components (可選的)
│   │   ├── theme (可選的)
│   │   │   └── Layout.vue
│   │   ├── public (可選的)
│   │   ├── styles (可選的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可選的, 謹慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可選的)
│   │   └── enhanceApp.js (可選的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

這里用到的結構

.
├── README.md     // Github專案展示檔案
├── docs     //vuepress專案根目錄
│   ├── .vuepress      //存放核心內容的檔案夾
│   │   ├── public     //存放靜態檔案，如圖片等
│   │   └── config.js     //設定頂部導航欄、側邊導航欄等專案配置的核心檔案
│   ├── pages      //存放markdown頁面的檔案
│   ├── README.md     //vuepress首頁展示用的markdown檔案
├── deploy.sh     //用于撰寫TravisCI上傳、發布的腳本檔案
├── LISENSE     //許可證檔案
├── package.json     //Node.js專案描述檔案
└── .travis.yml	//Travis CI 自動部署檔案

配置依賴和腳本

配置package.json

在 package.json 里加一些腳本和后面要用的依賴:

{
  "dependencies": {
    "@vuepress/plugin-active-header-links": "^1.3.1",
    "@vuepress/plugin-medium-zoom": "^1.3.1",
    "@vuepress/plugin-nprogress": "^1.3.1",
    "@vuepress/plugin-back-to-top": "^1.3.1",
    "vuepress": "^1.3.1"
  },
  "scripts": {
    "docs:build": "vuepress build docs",
    "docs:dev": "vuepress dev docs"
  }
}

加載依賴

yarn

命令

yarn docs:dev # 或者：npm run docs:dev
yarn docs:build # 或者：npm run docs:build

頁面的設定

首頁

/docs/README.md

---
home: true
heroImage: https://cdn-image.tsanfer.xyz/img/vuepress_githubpages_travisCI.svg
actionText: 快速上手 →
actionLink: /pages/思路.md
features:
- title: 簡潔至上
  details: 以 Markdown 為中心的專案結構，以最少的配置幫助你專注于寫作，
- title: Vue驅動
  details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 組件，同時可以使用 Vue 來開發自定義主題，
- title: 高性能
  details: VuePress 為每個頁面預渲染生成靜態的 HTML，同時在頁面被加載的時候，將作為 SPA 運行，
footer: MIT Licensed | Copyright ? 2020 Tsanfer
---

檔案屬性

/docs/.vuepress/config.js

module.exports = {
    base: '/VuePress-GithubPages-TravisCI/',    //目錄根地址，應與Github倉庫名字相同
    title: 'VuePress + GithubPages + TravisCI',    // 顯示在左上角的網頁名稱以及首頁在瀏覽器標簽顯示的title名稱
    description: '創建 VuePress + GithubPages + TravisCI 在線檔案',    // meta 中的描述文字，用于SEO
    head: [
        ['link', 
            { rel: 'icon', href: '/gamepad_game_128px.ico' }   //瀏覽器的標簽欄的網頁圖示,基地址/docs/.vuepress/public
        ],  
    ],
}

markdown擴展

/docs/.vuepress/config.js

module.exports = {
    markdown: {
        lineNumbers: true,  //是否在每個代碼塊的左側顯示行號
    },
}

默認主題設定

導航欄

/docs/.vuepress/config.js

module.exports = {
	themeConfig: {
		nav: [
            //鏈接頁面鏈接的根地址為/docs
            { text: '思路', link: '/pages/思路.md' },
            { text: '創建Github倉庫', link: '/pages/創建Github倉庫.md' },
            { text: '配置VuePress', link: '/pages/配置VuePress.md' },
            { text: '創建分支和Github pages', link: '/pages/創建分支和Github pages.md' },
            { text: 'TravisCI生成和發布', link: '/pages/TravisCI生成和發布.md' },
            { text: '博客', link: 'https://tsanfer.xyz' },
        ],
	},
}
側邊欄

/docs/.vuepress/config.js

module.exports = {
	themeConfig: {
        sidebarDepth: 2,    //側邊欄深度
        sidebar: [
            ['/pages/思路.md', '思路'],
            ['/pages/創建Github倉庫.md', '創建Github倉庫'],
            ['/pages/配置VuePress.md', '配置VuePress'],
            ['/pages/創建分支和Github pages.md', '創建分支和Github pages'],
            ['/pages/TravisCI生成和發布.md', 'TravisCI生成和發布'],
        ],
	},
}
Git倉庫

/docs/.vuepress/config.js

module.exports = {
	 themeConfig: {
		// 假定是 GitHub. 同時也可以是一個完整的 GitLab URL
        repo: 'Tsanfer/VuePress-GithubPages-TravisCI',
        // 自定義倉庫鏈接文字，默認從 `themeConfig.repo` 中自動推斷為
        // "GitHub"/"GitLab"/"Bitbucket" 其中之一，或是 "Source"，
        repoLabel: 'Github',
        // 以下為可選的編輯鏈接選項
        // 假如檔案不是放在倉庫的根目錄下：
        docsDir: 'docs/pages',
        // 假如檔案放在一個特定的分支下：
        docsBranch: 'master',
        // 默認是 false, 設定為 true 來啟用
        editLinks: true,
        // 默認為 "Edit this page"
        editLinkText: '在 Github 上編輯此頁', 
	},
}
其他

/docs/.vuepress/config.js

module.exports = {
	 themeConfig: {
		smoothScroll: true, //頁面滾動效果
        lastUpdated: '最后更新', // string | boolean
     },
}

插件

/docs/.vuepress/config.js

module.exports = {
    plugins: [
        '@vuepress/medium-zoom',    //zooming images like Medium（頁面彈框居中顯示）
        '@vuepress/nprogress',  //網頁加載進度條
        '@vuepress/plugin-back-to-top', //回傳頁面頂部按鈕
    ]
}

到這里其實已經完成配置了，可以執行 yarn docs:dev 來瀏覽配置的頁面，只是由于沒有對應的 md 檔案，打開的鏈接都會404

config.js所有內容

module.exports = {
    base: '/VuePress-GithubPages-TravisCI/',    //目錄根地址，應與Github倉庫名字相同
    title: 'VuePress + GithubPages + TravisCI',    // 顯示在左上角的網頁名稱以及首頁在瀏覽器標簽顯示的title名稱
    description: '創建 VuePress + GithubPages + TravisCI 在線檔案',    // meta 中的描述文字，用于SEO
    head: [
        ['link', 
            { rel: 'icon', href: '/gamepad_game_128px.ico' }   //瀏覽器的標簽欄的網頁圖示,基地址/docs/.vuepress/public
        ],  
    ],

    //markdown擴展
    markdown: {
        lineNumbers: true,  //是否在每個代碼塊的左側顯示行號
    },

    //默認主題配置
    themeConfig: {
        //導航欄
        nav: [
            //鏈接頁面鏈接的根地址為/docs
            { text: '思路', link: '/pages/思路.md' },
            { text: '創建Github倉庫', link: '/pages/創建Github倉庫.md' },
            { text: '配置VuePress', link: '/pages/配置VuePress.md' },
            { text: 'TravisCI生成和發布', link: '/pages/TravisCI生成和發布.md' },
            { text: '博客', link: 'https://tsanfer.xyz' },
        ],
        sidebarDepth: 2,    //側邊欄深度
        //側邊欄
        sidebar: [
            ['/pages/思路.md', '思路'],
            ['/pages/創建Github倉庫.md', '創建Github倉庫'],
            ['/pages/配置VuePress.md', '配置VuePress'],
            ['/pages/TravisCI生成和發布.md', 'TravisCI生成和發布'],
        ],

        // 假定是 GitHub. 同時也可以是一個完整的 GitLab URL
        repo: 'Tsanfer/VuePress-GithubPages-TravisCI',
        // 自定義倉庫鏈接文字，默認從 `themeConfig.repo` 中自動推斷為
        // "GitHub"/"GitLab"/"Bitbucket" 其中之一，或是 "Source"，
        repoLabel: 'Github',
        // 以下為可選的編輯鏈接選項
        // 假如檔案不是放在倉庫的根目錄下：
        docsDir: 'docs/pages',
        // 假如檔案放在一個特定的分支下：
        docsBranch: 'master',
        // 默認是 false, 設定為 true 來啟用
        editLinks: true,
        // 默認為 "Edit this page"
        editLinkText: '在 Github 上編輯此頁',

        smoothScroll: true, //頁面滾動效果
        lastUpdated: '最后更新', // string | boolean
    },

    //插件
    plugins: [
        '@vuepress/medium-zoom',    //zooming images like Medium（頁面彈框居中顯示）
        '@vuepress/nprogress',  //網頁加載進度條
        '@vuepress/plugin-back-to-top', //回傳頁面頂部按鈕
    ]
}

TravisCI生成和發布

創建gh-pages分支

這時Github已經自動部署gh-pages分支為Github pages的生成源

deploy.sh部署檔案

每當 Github 倉庫更新時，會觸發 Travis CI 執行 deploy.sh 腳本

創建一個如下的 deploy.sh 檔案（請自行判斷去掉高亮行的注釋）:

在專案根目錄下創建

.
├── README.md     // Github專案展示檔案
├── docs     //vuepress專案根目錄
│   ├── .vuepress      //存放核心內容的檔案夾
│   │   ├── public     //存放靜態檔案，如圖片等
│   │   └── config.js     //設定頂部導航欄、側邊導航欄等專案配置的核心檔案
│   ├── pages      //存放markdown頁面的檔案
│   ├── README.md     //vuepress首頁展示用的markdown檔案
├── deploy.sh     //用于撰寫TravisCI上傳、發布的腳本檔案
├── LISENSE     //許可證檔案
├── package.json     //Node.js專案描述檔案
└── .travis.yml	//Travis CI 自動部署檔案

#!/usr/bin/env sh

# 確保腳本拋出遇到的錯誤
set -e

# 生成靜態檔案
yarn docs:build

# 進入生成的檔案夾
cd docs/.vuepress/dist

# 如果是發布到自定義域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果發布到 https://<USERNAME>.github.io
# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git master

# 如果發布到 https://<USERNAME>.github.io/<REPO>
git push -f [email protected]:<USERNAME>/<REPO>.git master:gh-pages
# 比如
# git push -f [email protected]:Tsanfer/VuePress-GithubPages-TravisCI.git master:gh-pages

cd -

上面的 git 地址其實就是倉庫的SSH地址

Travis CI 部署檔案

在專案的根目錄創建一個名為 .travis.yml 的檔案

.
├── README.md     // Github專案展示檔案
├── docs     //vuepress專案根目錄
│   ├── .vuepress      //存放核心內容的檔案夾
│   │   ├── public     //存放靜態檔案，如圖片等
│   │   └── config.js     //設定頂部導航欄、側邊導航欄等專案配置的核心檔案
│   ├── pages      //存放markdown頁面的檔案
│   ├── README.md     //vuepress首頁展示用的markdown檔案
├── deploy.sh     //用于撰寫TravisCI上傳、發布的腳本檔案
├── LISENSE     //許可證檔案
├── package.json     //Node.js專案描述檔案
└── .travis.yml	//Travis CI 自動部署檔案

language: node_js
node_js:
  - lts/*
install:
  - yarn install # npm ci
script:
  - yarn docs:build # npm run docs:build
deploy:
  provider: pages
  skip_cleanup: true
  local_dir: docs/.vuepress/dist
  github_token: $GITHUB_TOKEN # 在 GitHub 中生成，用于允許 Travis 向你的倉庫推送代碼，在 Travis 的專案設定頁面進行配置，設定為 secure variable
  keep_history: true
  on:
    branch: master #這里指的是部署前的源檔案分支

上面的 github_token 需要在 Github 上生成

生成和使用 Token

生成Token

在 Settings --> Developer settings --> Personal access tokens 右上角 Generate new toekn 生成新Token 名字隨便寫，權限不清楚的可以全部選上，也可以參考我下面的配置

下面的口令只出現一次，需及時保存

Travis CI 系結和配置

系結 Github 賬號

在 Travis CI 里面 Settings ---> Repositories 點擊 Manage repositories on GitHub

選擇給權限的倉庫，為了方便也可以把所有倉庫的權限都給了

添加 Token

在專案的 Settings --> Environment Variables 中輸入 Token

language: node_js
node_js:
  - lts/*
install:
  - yarn install # npm ci
script:
  - yarn docs:build # npm run docs:build
deploy:
  provider: pages
  skip_cleanup: true
  local_dir: docs/.vuepress/dist
  github_token: $GITHUB_TOKEN # 在 GitHub 中生成，用于允許 Travis 向你的倉庫推送代碼，在 Travis 的專案設定頁面進行配置，設定為 secure variable
  keep_history: true
  on:
    branch: master #這里指的是部署前的源檔案分支
  • NAME : GITHUB_TOKEN （剛剛的 github_token: $GITHUB_TOKEN 這個變數）
  • VALUE : ****剛剛的 Token****

推送到Github

git add .
git commit -m '初步完成'
git push -f [email protected]:{Username}/{Repo}.git master

# 比如
# git push -f [email protected]:Tsanfer/VuePress-GithubPages-TravisCI.git master

完成

如果沒有 Travis CI 觸發成功，構建沒有問題的話就完成了

本文由Tsanfer's Blog 發布！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/140510.html

標籤：JavaScript

上一篇：EasyUI樹形表格顯示Json資料

下一篇：仿美團頁面-訂單頁&“我的”頁面

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入，國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求，通過反向代理或者負載均衡將請求轉發到后端，后端Transfer-Encoding優先級較高，以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差，然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成：導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議，高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計，高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz，更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置，該裝置以M國全球定位系統（GLOBAL POSITIONING SYSTEM,縮寫為GPS）或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小，只要企業想省錢，那么企業的某些服務就一定會采用外包的形式，然而看似美好又經濟的策略，其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的，最常見的就是話務/客服這種需要大量重復性、無技術性的服務，或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊，通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里，當然也會發生在其它地發，如登錄框等等也會存在注入，只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參，引數為exp 經過三層過濾執行 第一層過濾偽協議，第二層過濾帶引數的函式，第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式，相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了！

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過？就是它的諸多怪異的設定讓你每每用的時候，都可能不小心踩坑。造成程式意外出錯，卻一下子找不到問題出處，那叫一個煩透了…… 下面，我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果，首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下： 實作代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中，有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子： 1、可選鏈運算子（optional chaining operator） ?.是可選鏈運算子（optional chaining operator）。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位，它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思，中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px，即默認情況下： 1rem = 16px rem布局原理：根據CSS媒體查詢功能，更改根標簽的字體尺寸，實作rem單位隨螢屏尺寸的變化，如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標：計算屬性是如何實作的？計算屬性快取原理以及洋蔥模型的應用？在初始化Vue實體時，我們會給每個計算屬性都創建一個對應watcher，我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more

Copyright © 2010-2020 有解無憂