Vue.jsが開発した読書WebAPP

前言

初学者js、公式サイトのドキュメントははっきり書いていて、見るのは難しくありません.ことわざにもあるように、うそばかり言っている.プログラム猿は新しいことを学んだほうが効果的だ.最初は音楽系をやりたいと思っていましたが、毎日歌を聴いていましたが、音楽系が多すぎることに気づきました.私はもう何をしても面白くありません.考えてみると、やはり本を読むようにしましょう.これはまだ少ない人がやっています.探してみたら追書神器のapiしか出てこなかったし、起点とかのapiが見つからなかった.最終的な効果はapiデータの制限のため、起点中国語網app、起点中国語網web端、および追書神器web端を参考にして、自分の考えを加えて作ったものです.プロジェクトの小さなアイコンはアリババのベクトルアイコンライブラリIconfontを使用しています.

テクノロジースタック

Vue2 + vuex + vue-router + webpack + ES6 + axios + sass

ソースアドレス

https://github.com/XNAL/ReadMore

プロジェクトの実行

git clone https://github.com/XNAL/ReadMore
cd ReadMore
npm install

npm run dev（       ：http://localhost:8080）

npm run build （        dist           ：      ，   nginx，           ）

説明

は現在、最初のバージョンのみが作成されており、最適化が必要な詳細な問題もあり、その後もメンテナンス更新が継続されます.何か問題が発見されたら、フィードバックにも連絡してください.

やったほうがいいと思ったら、役に立ちます.「start」を歓迎します.

開発中に発生したいくつかの問題

複数のサブコンポーネントループ、親コンポーネントがロード状態(精選ページ)

をどのように処理するか

           `this.$emit`     ，                 loading。

ページジャンプ後のactiveタグ

     url.indexOf   ，      vue-router exact     。

サードパーティapiインタフェースを呼び出すときのドメイン間の問題

1.     proxyTbale

     config/index.js     ：
    
    '/api': {
        target: 'http://api.zhuishushenqi.com',
        changeOrigin: true,
        pathRewrite: {                
            '^/api': ''
        }   
    }
    

2.         nginx  

    nginx   ：
    
    location /api/ {
            proxy_pass http://api.zhuishushenqi.com/;
        }

3.          `/api`     

サーバ導入後のvue-routerの仮想ルーティングは、リフレッシュ時に404ページ表示されます。

  nginx  ：

location / {
        try_files $uri $uri/ @router;          //     
        root /home/don/book;
        index index.html;
}
    
location @router {                          //     
    rewrite ^.*$ /index.html last;          //     
}                                           //     

アクセスアドレス

アドレスにアクセスしてください:http://www.tdon.site/read-more/(pc端はchrome携帯モードでプレビューしてください)

は、次のQRコード

をスキャンする.

部分スクリーンショット

私の本棚

せんたく

ぶんかつ

の順位を決める

書籍の詳細

本を読む

検索