IT人如何打造個性化的我的網站（在線簡歷）

時間 2019-11-06

原文原文鏈接

前言

衆所周知，IT行業人員在求職時，若是擁有本身的技術博客和我的網站多少是能夠加些分的，由於這也是IT人的技術證實之一。內容豐富的技術博客就沒必要多少了，每每技術博客大神市場上可能是供不該求的，並且技術博客出彩主要是在內容經營上，至於博客自己直接到各大技術平臺註冊一個便可，固然有興趣的朋友想要自建我的博客也不是很難，好比能夠用很是流行的GitHub Pages進行搭建，最主要是能夠免費。而我的網站是主要是用來展現信息，功能比博客系統要簡單的多，搭建過程比博客系統也要容易的多，並且對運行環境的要求也特別簡單，不少時候只要瀏覽器便可開發和運行。接下來咱們就來搭建一個在線簡歷類型的我的網站做爲案例進行講解。喜歡這個模板的朋友也能夠直接修改JSON文件的我的信息定製本身專屬的簡歷網站。javascript

在線演示：http://139.196.87.48:9002/brilliant/css

選擇模板

首先多多百度、谷狗一下，尋找到一款心儀的模板，注意關注一下模板使用的技術要適合本身爲宜，以運行環境簡單爲宜，最好是純HTML，只要一個瀏覽器就能夠查看。html

若是是使用到bootstrap、vue、angular等相關技術的模板，就可能須要在修改或安裝部署的時候對相關技術有所瞭解了，下面是我模板之家找到的一款我的網站模板。前端

模板提供：模板之家vue

模板名稱：亮綠色前端工程師web簡歷模板java

下載地址：http://www.cssmoban.com/cssthemes/7585.shtmlgit

整個網站簡潔美觀，顏色清新，富有個性化，使用的技術也比較簡單，只要用瀏覽器就能直接查看，很適合用來打造我的網站。web

網站包含基礎信息、工做經驗、教育經歷、專業技能、做品展現等模塊，咱們能夠根據本身的須要進行適當添加、刪除和修改。ajax

基礎信息

基礎信息頁面。json

工做經驗

工做經驗頁面。

專業技能

專業技能頁面。

業務分析

1.爲了方便定製信息，咱們決定把頁面展現信息集中抽取到JSON文件，頁面讀取JSON文件信息進行展現。

2.將信息都抽取到JSON文件，當咱們須要定製或修改簡歷信息的時候直接修改對應的JSON文件便可生效。

3.通常咱們除了中文簡歷，有時也須要用到英文簡歷，因此咱們的目標還要能支持中英文簡歷能夠切換。

4.根據需求增刪和修改模塊，好比這裏咱們刪除不須要的客戶評價，增長一個項目經驗的時間線類型模塊。

抽取信息

根據上面連接下載模板後，利用編輯器打開下載好的項目。

項目結構很是簡單，主要是一個HTML文件，一個CSS文件。

咱們新建兩個.json文件，分別收集中英文簡歷的相關信息。

讀取信息

接下來咱們從JSON文件讀取信息顯示到頁面。由於咱們作中英文切換時須要改變頁面顯示，因此咱們選用Vue來進行數據綁定。

另外因爲有些瀏覽器的跨域限制，在讀取本地JSON文件時會出現跨域問題，因此這裏須要借用客戶端跨域技術JSONP來處理。

下載Vue

下載 Vue.min.js ，放置到本地，以下圖所示。

引入Vue

打開 index.html，在頁面直接引入就直接可使用了。

固然若是不想下載，你也能夠直接使用CDN.

下推薦國外比較穩定的兩個 CDN，國內還沒發現哪一家比較好，目前仍是建議下載到本地。

Staticfile CDN（國內） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

加載JSON

首先在JSON文件的外圍加上JSONP的回調方法，如中文的加上 zh_cn({json info})。

然在在頁面添加一個 zh_cn 同名函數，這樣在json載入後，就會調用 zh_cn 這個函數。

zh_cn.json

en_us.json

而後在頁面引入兩個json文件，注意引用語句必須放置在回調函數以後。由於文件加載成功以後會進行回調，因此回調函數得先存在。

<script src="assets/language/en_us.json"></script>
<script src="assets/language/zh_cn.json"></script>

兩個回調方法，將中英文簡歷信息加載並存入 localStorage，而且在初始化頁面和中英文切換時根據需求讀取中文或英文簡歷信息。

    <script type="text/javascript">
        function en_us(data) {
            window.localStorage.setItem("en_us", JSON.stringify(data))
        }
        function zh_cn(data) {
            window.localStorage.setItem("zh_cn", JSON.stringify(data))
            var vm = new Vue({
                name: 'resume',
                el: '#container',
                data: {
                    lang:'zh_cn',
                    language:null,
                    basicInfo:null,
                    experiences:null,
                    projects:null,
                    education:null,
                    skills:null,
                    portfolio:null,
                    contact:null
                },
                methods: {
                    changeLanguage: function () {
                        var zh_cn = 'zh_cn'
                        var en_us = 'en_us'
                        if(this.lang == zh_cn) {
                            this.lang = en_us
                            this.language = "Chinese"
                        } else {
                            this.lang = zh_cn
                            this.language = "英文簡歷"
                        }
                        var data = window.localStorage.getItem(this.lang)
                        if(data != null) {
                            data = JSON.parse(data)
                            this.basicInfo = data.basicInfo
                            this.experiences = data.experiences
                            this.projects = data.projects
                            this.education = data.education
                            this.skills = data.skills
                            this.portfolio = data.portfolio
                            this.contact = data.contact
                        }
                    }
                },
                mounted:function(){
                    this.changeLanguage()
                }
            })
        }
    </script>