Vue Learning-Installationsabhängigkeiten und Datenquellen

Heute werde ich ein kleines Backend-Managementsystem mit Ihnen teilen, das Sie kennenlernen kann.

1. Bauprojekt- und Installationsabhängigkeiten

Das Bauprojekt wird mit Vue-Cli-Gerüst aufgebaut. Die Wissensbasis über npm, cnpm und vue-cli ist in weiten Teilen zu finden das Internet, aber nicht zu viel beschrieben. Was schwer zu verstehen ist, sind die darin enthaltenen Konfigurationsdateien, als ich es zum ersten Mal lernte. Es besteht kein Grund, sich über zu viele Konfigurationsdateien in der Zukunft Gedanken zu machen. Der Schwerpunkt liegt hier auf der Installation von Abhängigkeiten. Dies sind Module, die zum Ausführen eines Projekts erforderlich sind. Wenn Sie beispielsweise Axios zum Abrufen von Daten verwenden, müssen Sie die entsprechenden Module installieren. Die Projektabhängigkeiten befinden sich in der Datei package.json im Stammverzeichnis. Die folgenden Abhängigkeitspakete werden von meinem Projekt verwendet:

"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"
},

Nach der ersten Projekterstellung werden einige Abhängigkeitspakete wie vue und vue-router angezeigt Wenn Sie die anderen Abhängigkeitspakete bestimmen, die bei der Arbeit an einem Projekt verwendet werden müssen, z. B. Axios und das UI-Design-Framework element-ui, das zum Abrufen von Daten benötigt wird, können Sie den Namen und die Version direkt dort schreiben , wobei ^ bedeutet, dass die neueste Version mit der ersten Zahl nach dem Symbol übereinstimmt. Nachdem Sie dies geschrieben haben, können Sie diese Abhängigkeiten mit npm install oder npm i im Terminal installieren. Anschließend wird der Ordner node_modules im Stammverzeichnis angezeigt In diesem Ordner befinden sich alle abhängigen Paketdateien. Wir müssen nichts ändern, aber natürlich nicht löschen. Wenn es versehentlich gelöscht wird, npm i erneut.

Wenn Sie sich bei einigen anderen Modulen, die Sie verwenden müssen, nicht sicher sind, denken Sie beim Erstellen einer Webseite daran oder suchen Sie online danach, und überlegen Sie dann, sie separat einzuführen. Verwenden Sie bei der Einführung npm install ** (Modulname) in der Terminal-Installationsmethode, der installierte Modulname wird automatisch in den Abhängigkeiten der Datei package.json angezeigt.

Verwandte Tutorials: Vue-Video-Tutorial

2. Über die Datenquelle

Woher kommen die Daten im Projekt? Dies ist mein erstes und abschließend Eine oft problematische Frage. Tatsächlich sollten für das Front-End alle Projektdaten aus dem unterstützenden Back-End-Programm stammen. Nach der Trennung von Front-End und Back-End verarbeitet das Back-End die vom Projekteigentümer bereitgestellten Originaldaten Es wird an die externe Daten-API-Schnittstelle des Frontends gesendet. Diese Schnittstelle wird von beiden Parteien vereinbart, z. B. ein gewisser Rückgabestatus, ein Fehlercode, ein bestimmtes Format oder ein Name usw. Allerdings wird tatsächlich gleichzeitig entwickelt, das heißt, die vom Front-End während des Entwicklungsprozesses zu verwendenden Daten müssen zuerst entsprechend den Anforderungen simuliert werden , um zu sehen, ob ihre tatsächliche Leistung auf dem Die Webseite erfüllt die Anforderungen. Natürlich gibt es auch einige Netzwerk-API-Schnittstellen, die den von anderen verarbeiteten Daten entsprechen und gemäß ihren Nutzungsregeln verwendet werden können.

Es gibt viele Möglichkeiten, Daten in Vue abzurufen, wie zum Beispiel diese.$http.get/post von vue-resource, $.ajax von jQuery, this.$axios.get/post von axios und fetch Methode warten. Die Grundlage, die es zu beherrschen gilt, ist die Post/Get-Request-Methode. Ich werde hier jedoch nicht näher darauf eingehen einige Daten hier.

1. Das Vue-Gerüstprojekt kann Scheindaten verwenden, die zufällig Simulationsdaten generieren. Die offizielle Website-Adresse lautet http://mockjs.com/. Ich verwende im Projekt nur eine kleine Menge Scheindaten wie folgt:

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

Hier müssen Sie Mock.js in main.js importieren, und der obige Code ist Wenn die Daten angefordert werden, wird auf die „Login“-Adresse zugegriffen, die der Außenwelt einen Spitznamen liefert, der zufällig im folgenden Array generiert wird. Wenn Sie andere zufällig generierte Inhalte benötigen, simulieren Sie diese selbst. Verwandte Tutorials: js-Video-Tutorial

2. Definieren Sie Daten direkt in den Daten der Komponente. Dies ist der einfachste Weg, wie folgt:

  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代理进行跨域；",
      ]
    };
  },

Zu beachten ist vor allem, dass Daten, die nicht mit return umschlossen sind, im Projekt global sichtbar sind und nach der Verwendung von return Variablen verursachen werden in der aktuellen Komponente wirksam und wirken sich nicht auf andere Komponenten aus, ähnlich dem Konzept jeder einzelnen Instanz in einer Funktion.

3. Verwenden Sie das vuex Data Management Warehouse. Dies wird im Allgemeinen verwendet, wenn die Daten großer Projekte relativ komplex sind. Ich habe es nicht für das Projekt auf GitHub verwendet, aber ich habe es auch auf einer kleinen Seite verwendet Ich habe zum ersten Mal mit dem Lernen begonnen. Die Lernadresse lautet https://vuex.vuejs.org/zh/. Hauptsächlich die fünf großen Blöcke „State“, „Getter“, „Action“, „Mutations“ und „Module“ sowie die ersten paar ihrer Hilfsfunktionen. Ich habe sie selbst noch nicht sehr gründlich studiert und muss noch mehr studieren.

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
});

Code anzeigen

Der obige Code ist eine sehr einfache Statusverwaltung, bei der ein Lagerhaus separat definiert und im Status definiert wird Daten, Getter zum Abrufen von Statusdaten entsprechen berechneten Eigenschaften, Mutationsmethodenfunktion und Aktion zum Ausführen von Mutationen. Schließlich können die Daten in diesem Speicher in der Komponente mithilfe der Methode this.$store.dispatch("addPerson", data), hauptsächlich der Dispatch-Methode, verwendet werden.

　　这种方法在上线时如果数据复杂也建议使用这种方法，将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/地址。

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

 

Das obige ist der detaillierte Inhalt vonVue Learning-Installationsabhängigkeiten und Datenquellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!