Dépendances d'installation et sources de données de Vue Learning

Aujourd'hui, je vais partager avec vous un petit système de gestion backend. Les amis intéressés pourront en apprendre davantage. J'espère que cela pourra vous inspirer.

1. Projet de construction et dépendances d'installation

Le projet de construction est construit à l'aide d'échafaudages vue-cli. La base des connaissances npm, cnpm et vue-cli peut être trouvée dans de vastes zones sur le site. Internet, mais pas trop décrit. Ce qui est difficile à comprendre, ce sont les fichiers de configuration à l'intérieur. Cela a demandé beaucoup d'efforts lorsque je l'ai appris pour la première fois. Il n'y a pas lieu de s'inquiéter d'un trop grand nombre de fichiers de configuration. Il s'agit principalement de problèmes de configuration pour l'empaquetage en ligne à l'avenir. L'objectif principal ici est de savoir comment installer les dépendances. Les dépendances sont des modules nécessaires à l'exécution d'un projet. Par exemple, si vous utilisez axios pour obtenir des données, vous devez installer les modules correspondants. Les dépendances du projet se trouvent dans le fichier package.json dans le répertoire racine. Voici les packages de dépendances utilisés par mon projet :

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

Après la construction initiale du projet, certains packages de dépendances, tels que vue et vue-router. , sont utilisés pour l'initialisation du projet. Si vous déterminez les autres packages de dépendances qui doivent être utilisés lorsque vous travaillez sur un projet, tels que axios et l'élément-ui du cadre de conception d'interface utilisateur nécessaire pour obtenir des données, vous pouvez y écrire directement le nom et la version. , où ^ signifie correspondre à la dernière version de la version commençant par le premier chiffre après le symbole ; après avoir écrit ceci, vous pouvez installer ces dépendances par npm install ou npm i dans le terminal, puis le dossier node_modules apparaîtra à la racine. Ce dossier contient tous les fichiers de package dépendants, non. Nous devons modifier quoi que ce soit, mais bien sûr, ne le supprimez pas. S'il est accidentellement supprimé, npm i à nouveau.

Si vous n'êtes pas sûr des autres modules que vous devez utiliser, pensez-y lorsque vous créez une page Web ou recherchez-les en ligne, puis envisagez de les présenter séparément. Lorsque vous les présentez, utilisez npm. install ** (nom du module) dans la méthode d'installation, le nom du module installé apparaîtra automatiquement dans les dépendances du fichier package.json.

Tutoriels associés : Tutoriel vidéo Vue

2. À propos de la source de données

D'où proviennent les données du projet ? et final Une question souvent troublée. En fait, pour le front-end, les données du projet doivent toutes provenir du programme back-end de support. Une fois le front-end et le back-end séparés, le back-end traite les données originales fournies par le propriétaire du projet et fournit. à l'interface API de données externe du front-end. Cette interface est convenue par les deux parties, comme un état de retour, un code d'erreur, un format ou un nom, etc. Cependant, est en fait développé en même temps, c'est-à-dire que les données qui doivent être utilisées par le front-end pendant le processus de développement doivent d'abord être simulées en fonction des besoins pour voir si leurs performances réelles sur le la page Web répond aux besoins. Bien entendu, il existe également des interfaces API réseau, qui sont équivalentes aux données traitées par d'autres, et vous pouvez les utiliser selon leurs règles d'utilisation.

Il existe de nombreuses façons d'obtenir des données dans vue, comme ceci.$http.get/post de vue-resource, $.ajax de jQuery, this.$axios.get/post d'axios, et fetch méthode attendre. Chacune de ces méthodes est réalisable. La base qu'il faut maîtriser reste la méthode post/get request. Cependant, je m'en tiendrai seulement à la simple utilisation de cette méthode, je n'en parlerai pas en profondeur ici. quelques données ici.

1. Le projet d'échafaudage vue peut utiliser des données fictives. Mock.js génère des données de simulation de manière aléatoire. L'adresse du site officiel est http://mockjs.com/. Je n'utilise qu'une petite quantité de données fictives dans le projet, comme suit :

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

Ici, vous devez importer mock.js dans main.js, et le code ci-dessus est accessible lorsque les données sont demandées. Adresse de connexion, fournissant un surnom au monde extérieur, qui est généré aléatoirement dans le tableau suivant. Si vous avez besoin d'un autre contenu généré aléatoirement, simulez-le vous-même. Tutoriels associés : Tutoriel vidéo js

2. Définir les données directement dans les données du composant C'est la manière la plus simple, comme suit :

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

La principale chose à noter est que les données doivent être renvoyées avec return. Les données qui ne sont pas enveloppées avec return seront globalement visibles dans le projet et provoqueront une pollution variable après l'utilisation de return, les variables dans les données ne le seront que ; prend effet dans le composant actuel et n'affectera pas les autres composants, similaire au concept de chaque instance différente dans une fonction.

3. Utiliser l'entrepôt de gestion de données vuex. Ceci est généralement utilisé lorsque les données de grands projets sont relativement complexes. Je ne l'ai pas utilisé sur le projet sur GitHub, mais je l'ai également utilisé sur une petite page lorsque. J'ai d'abord commencé à apprendre Pass, l'adresse d'apprentissage est https://vuex.vuejs.org/zh/. Principalement les cinq gros blocs State, Getter, Action, Mutations et Module, ainsi que les premières cartes de ses fonctions auxiliaires, je ne l'ai pas étudié très en profondeur moi-même et j'ai encore besoin d'étudier davantage.

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

Voir le code

Le code ci-dessus est une gestion d'état très simple, définissant un magasin-entrepôt séparément, défini dans State Données, Getter pour obtenir les données d'état sont équivalentes aux attributs calculés, fonction de méthode Mutations, action pour exécuter des mutations. Enfin, les données de ce magasin peuvent être utilisées dans le composant, en utilisant la méthode this.$store.dispatch("addPerson", data), principalement la méthode de dispatch.

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

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

 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!