Vue 学習インストールの依存関係とデータ ソース

今日は、小さなバックエンド管理システムを紹介します。興味のある友人は、それについて学ぶことができます。インスピレーションを与えることができれば幸いです。

1. プロジェクトの構築と依存関係のインストール

構築プロジェクトは vue-cli スキャフォールディングを使用して構築されます。npm、cnpm、および vue-cli の知識の基礎は、インターネットですが、あまり多くはありません。理解するのが難しいのは、内部の設定ファイルです。最初に理解したときは非常に苦労しました。設定ファイルが多すぎることを心配する必要はありません。これらは主に、将来のオンライン パッケージ化のための設定の問題です。ここでの主な焦点は、依存関係をインストールする方法です。依存関係は、プロジェクトを実行するために必要なモジュールです。たとえば、axios を使用してデータを取得する場合は、対応するモジュールをインストールする必要があります。プロジェクトの依存関係は、ルート ディレクトリの package.json ファイルにあります。私のプロジェクトで使用される依存関係パッケージは次のとおりです:

"dependencies": {
"axios": "^0.18.0",
"echarts": "^4.2.1",
"element-ui": "^2.7.2",
"mockjs": "^1.0.1-beta3",
"vue": "^2.5.2",
"vue-awesome": "^3.5.1",
"vue-particles": "^1.0.9",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.1"
},

最初のプロジェクトのビルド後、vue や vue-router などのいくつかの依存関係パッケージが追加されます。 , はプロジェクトの初期化に使用されます。axios やデータを取得するために必要な UI デザイン フレームワーク要素 ui など、プロジェクトで作業するときに使用する必要がある他の依存関係パッケージを決定した場合は、そこに名前とバージョンを直接書き込むことができます。 , ^ は、記号の後の最初の数字で始まるバージョンの最新バージョンと一致することを意味します。これを記述した後、ターミナルで npm install または npm i を使用してこれらの依存関係をインストールすると、node_modules フォルダーがルートに表示されます。このフォルダーはすべて依存パッケージ ファイルです。何も変更する必要がありますが、もちろん削除しないでください。誤って削除した場合は、もう一度 npm i してください。

他に使用する必要のあるモジュールが不明な場合は、Web ページを作成するときに考えたり、ネットで検索したりして、別途導入を検討してください。 ** (モジュール名) ターミナルのインストール方法では、インストールされたモジュール名が package.json ファイルの依存関係に自動的に表示されます。

関連チュートリアル: vue ビデオ チュートリアル

2. データ ソースについて

プロジェクトのデータはどこから来たのですか? これは初めてのことです。そして最後に よく悩む質問です。実際、フロントエンドの場合、プロジェクト データはすべて、サポートするバックエンド プログラムから取得される必要があります。フロントエンドとバックエンドが分離された後、バックエンドはプロジェクト オーナーから提供された元のデータを処理し、提供します。それをフロントエンドの外部データ API インターフェイスに送信します。このインターフェイスは両当事者によって合意されています。戻りステータス、エラー コード、形式や名前などです。ただし、実際には も同時に開発されます。つまり、開発プロセス中にフロントエンドで使用されるデータは、Web 上で実際のパフォーマンスが発揮されるかどうかを確認するために、ニーズに応じてシミュレーションする必要があります。ページはニーズを満たします。もちろん、他人が処理したデータと同等のネットワークAPIインターフェースもいくつかありますので、それぞれの利用ルールに従ってご利用いただけます。

vue でデータを取得するには、vue-resource の this.$http.get/post、jQuery の $.ajax、axios の this.$axios.get/post、fetch など、さまざまな方法があります。メソッドは待ちます。これらのメソッドはそれぞれ実行可能です。習得する必要がある基本は、依然として post/get リクエスト メソッドです。ただし、このメソッドの簡単な使用方法にとどまります。ここではこれについては詳しく説明しません。ただ話します。いくつかのデータについては、こちらのソースを参照してください。

1. vue Scaffolding プロジェクトではモック データを使用できます。Mock.js はランダムにシミュレーション データを生成します。公式 Web サイトのアドレスは http://mockjs.com/ です。次のように、プロジェクト内で少量のモック データのみを使用します。

1   Mock.mock(/login/, {
2     data: {
3       userId: "@integer(1,10)",
4       "nickname|1": ["Amy", "Michael", "Jack", "John", "Albert","Norton"],
5     },
6   });

ここでは、mock.js を main.js にインポートする必要があります。上記のコードは次のとおりです。データが要求されたときにアクセスされます。「ログイン」アドレス。外部にニックネームを提供します。ニックネームは次の配列でランダムに生成されます。他のランダムに生成されたコンテンツが必要な場合は、自分でシミュレートしてください。関連チュートリアル:

js ビデオ チュートリアル

2. コンポーネントのデータ内でデータを直接定義します。これは、次のような最も簡単な方法です。 #

  data() {
    return {
      introduction: [
        "登录页有粒子动态效果，采用VueParticles，各项参数设置可参看https://www.jianshu.com/p/53199b842d25；",
        "登录后的昵称是用mock数据做的，mock.js需要在main.js中导入；",
        "左侧导航栏是根据element-ui的导航写的，直接可用index跳转，顶部导航为ui的面包屑导航；",
        "天气预报采用的echarts，需要导入使用，样式应该可以更美观，此处只做了基础的改变，数据为网上找的一个接口，部分城市可能无数据；",
        "文本编辑vue-quill-editor需要在main.js中导入，仅在编辑页做了变化示例，后期可考虑传值到父组件，可插入图片；",
        "表格操作是根据某后台管理系统的网页仿写的，有增删改查等功能，选择管理员和一般用户按钮可以看到不同的菜单，使用watch监测数据变化；",
        "新闻资讯也是网上找的数据接口，设置自动获取时间改变接口的时间参数每天自动刷新，开发时设置proxyTable代理进行跨域；",
      ]
    };
  },

主な注意点は、データは return で返される必要があるということです。return でラップされていないデータはプロジェクト内でグローバルに表示され、変数汚染の原因となります。return を使用した後は、データ内の変数のみが表示されます。現在のコンポーネントで有効になり、他のコンポーネントには影響しません。これは、関数内のそれぞれの異なるインスタンスの概念と同様です。

3. vuex データ管理ウェアハウスを使用します。これは通常、大規模なプロジェクトのデータが比較的複雑な場合に使用されます。GitHub 上のプロジェクトでは使用しませんでしたが、小規模なページでも使用しました。最初に学習を開始しました。パス、学習アドレスは https://vuex.vuejs.org/zh/ です。主に、State、Getter、Action、Mutations、Module の 5 つの主要なブロックと、その補助関数の最初のいくつかのマップですが、私自身あまり深く勉強していないので、まだまだ勉強する必要があります。

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
    person: [{
        name: '张三',
        age: '23',
        sex: '男',
        likes: '篮球',
        introuce: '',
        }, 
      {
        name: '李四',
        age: '25',
        sex: '男',
        likes: '游泳',
        introuce: ''
      },
      {
        name: '王五',
        age: '24',
        sex: '男',
        likes: '乒乓',
        introuce: ''
      },
      {
        name: '马六',
        age: '22',
        sex: '男',
        likes: '排球',
        introuce: ''
      },
      {
        name: '周星星',
        age: '27',
        sex: '男',
        likes: '羽毛球',
        introuce: ''
      },
      {
        name: '李丽',
        age: '21',
        sex: '女',
        likes: '看书',
        introuce: ''
      },
      {
        name: '付兰',
        age: '21',
        sex: '女',
        likes: '看电影、游泳',
        introuce: ''
      },
    ]
}
    const getters = {   
      showList(state){
        for (let i = 0; i < state.person.length; i++) { 
        state.person[i].introduce = &#39;我叫&#39;+state.person[i].name+&#39;，我今年&#39;+state.person[i].age+&#39;岁了，我的爱好是&#39;+state.person[i].likes   
        }  
        return state.person
      }
    };

    const mutations = {
      add(state,data){
        state.person.push(data)
      },
      del(state,i){
        state.person.splice(i,1)
      },
      edit(state,{index,data}) {  
        state.person.splice(index,1,data)
      },
    };


 
    const actions = {
      addPerson({commit},data){
        commit(&#39;add&#39;,data)
      },
      delPerson({commit},data){
        commit(&#39;del&#39;,data)
      },
      editPerson({commit},data){
        commit(&#39;edit&#39;,data)
      },
    };

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
});

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
    person: [{
        name: '张三',
        age: '23',
        sex: '男',
        likes: '篮球',
        introuce: '',
        }, 
      {
        name: '李四',
        age: '25',
        sex: '男',
        likes: '游泳',
        introuce: ''
      },
      {
        name: '王五',
        age: '24',
        sex: '男',
        likes: '乒乓',
        introuce: ''
      },
      {
        name: '马六',
        age: '22',
        sex: '男',
        likes: '排球',
        introuce: ''
      },
      {
        name: '周星星',
        age: '27',
        sex: '男',
        likes: '羽毛球',
        introuce: ''
      },
      {
        name: '李丽',
        age: '21',
        sex: '女',
        likes: '看书',
        introuce: ''
      },
      {
        name: '付兰',
        age: '21',
        sex: '女',
        likes: '看电影、游泳',
        introuce: ''
      },
    ]
}
    const getters = {   
      showList(state){
        for (let i = 0; i < state.person.length; i++) { 
        state.person[i].introduce = &#39;我叫&#39;+state.person[i].name+&#39;，我今年&#39;+state.person[i].age+&#39;岁了，我的爱好是&#39;+state.person[i].likes   
        }  
        return state.person
      }
    };

    const mutations = {      add(state,data){
        state.person.push(data)
      },
      del(state,i){
        state.person.splice(i,1)
      },
      edit(state,{index,data}) {  
        state.person.splice(index,1,data)
      },
    };


 
    const actions = {      addPerson({commit},data){
        commit(&#39;add&#39;,data)
      },
      delPerson({commit},data){
        commit(&#39;del&#39;,data)
      },
      editPerson({commit},data){
        commit(&#39;edit&#39;,data)
      },
    };

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
});

コードの表示

上記のコードは、非常に単純な状態管理です。別の倉庫ストアが状態に定義されています。 . Data、Stateデータを取得するGetterが計算属性、Mutationsメソッド関数、Mutationを実行するActionに相当します。最後に、このストアのデータは、メソッド this.$store.dispatch("addperson", data) (主にディスパッチ メソッド) を使用してコンポーネント内で使用できます。

　　这种方法在上线时如果数据复杂也建议使用这种方法，将State里数据的通过相关axios等方法获取。

　　4.网络API数据，网络上有很多开源的API，也有一些收费的API，这些API一般以json或者jsonp的格式存在。收费的主要需要注意一般都有跨域问题存在。

　　开发时的跨域在根目录下的config文件夹下的index.js中配置，找到proxyTable配置，在module.exports的dev里面

    proxyTable: {
      '/api': {  //代理地址  
        target: 'http://api01.idataapi.cn:8000/article',  //需要代理的地址  
        changeOrigin: true,  //是否跨域  
        secure: false,    
        pathRewrite: {  
            '^/api': ''   //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉  
        },
    }
    },

　　这样在获取数据时api就是代表了http://api01.idataapi.cn:8000/article这个网站，然后通过拼接得到正确的数据接口。this.$axios.get('api’ + url)，这个url是接口后一部分的网址，注意与api之间的'/'，如果前面有后面则不要加，如果没有后面开始就要加。这样开发状态下代理跨域就完成了。

　　线上的跨域其实如果是有后端系统的项目，一般有后端服务器端设置，上线后其实都在同一域，不存在跨域，如果需要跨域，一般由后端来解决也方便些。但是如果实在没办法，那网上找了也有很多其他方法，我主要采用的是nginx反向代理的方法。将前端代码打包后放到nginx服务器，在nginx配置里设置代理即可。如下：

        location /api/ {
            rewrite ^/b/(.*)$ /$1 break;
            add_header 'Access-Control-Allow-Origin' '*';
            proxy_pass http://api01.idataapi.cn:8000/article/;
        }

　　这个配置在nginx安装后的目录下的config文件夹nginx.conf文件里下，在 server里添加上述代码，即表示了用api代理http://api01.idataapi.cn:8000/article/地址。

　　以上这些内容，真的是说起来可以算知道，但是自己遇到问题的时候真的好困难，一个自学者的悲哀吧，就算网上有人回复了，其实有时候也看不到你到底哪里出错了，还是要靠自己。

 

以上がVue 学習インストールの依存関係とデータ ソースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。