Vue learning installation dependencies and data sources-JS Tutorial-php.cn

Today, I will share with you a small backend management system. Friends who are interested can learn about it. I hope it can inspire you.

1. Building Projects and Installing Dependencies

The construction project is built using vue-cli scaffolding. The basis of npm, cnpm, and vue-cli knowledge can be found in large areas on the Internet, but not too much. described. What is difficult to understand is the configuration files inside. It took a lot of effort when I first learned it. There is no need to worry about too many configuration files. These are mainly some configuration issues for online packaging in the future. The main focus here is how to install dependencies. Dependencies are modules needed to run a project. For example, if you use axios to obtain data, you need to install the corresponding modules. The project dependencies are in the package.json file in the root directory. The following are the dependency packages used by my project:

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

Copy after login

After the initial project build, some dependency packages, such as vue and vue-router, are used for project initialization. If you determine the other dependency packages that need to be used when working on a project, such as axios and the UI design framework element-ui needed to obtain data, you can directly write the name and version there, where ^ means matching the The latest version of the version starting with the first number after the symbol; after writing this, you can install these dependencies by npm install or npm i in the terminal, and then the node_modules folder will appear in the root directory. This folder is all dependent package files, no We need to modify anything, but of course don't delete it. If it is accidentally deleted, just npm i again.

If you are not sure about other modules that need to be used, think of them when you are making a web page or search for them online, and then consider introducing them separately. When introducing them, use npm install ** (module name) in the terminal. Installation method, the installed module name will automatically appear in the dependencies of the package.json file.

Related tutorials: vue video tutorial

2. About the data source

Where does the data in the project come from? This is my first and final A often troubled question. In fact, for the front-end, the project data should all come from the supporting back-end program. After the front-end and back-end are separated, the back-end processes the original data provided by the project owner and provides it to the front-end's external data API interface. This interface is agreed upon by both parties. Okay, such as some return status, error code, some format or name, etc. However, is actually developed at the same time, that is, the data to be used by the front-end during the development process needs to be simulated according to the needs to see whether its actual performance on the web page meets the needs. Of course, there are also some network API interfaces, which are equivalent to data processed by others, and you can use them according to their usage rules.

There are many ways to obtain data in vue, such as this.$http.get/post of vue-resource, $.ajax of jQuery, this.$axios.get/post of axios, and fetch method wait. Each of these methods is feasible. The basis that needs to be mastered is still the post/get request method. However, I only stay at the simple use of this method. I will not go into this in depth here. I will just talk about some data here. source.

1. The vue scaffolding project can use mock data. Mock.js randomly generates simulation data. The official website address is http://mockjs.com/. I only use a small amount of mock data in the project, as follows:

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

Copy after login

Here we need to import mock.js in main.js, and the above code is accessed when data is requested. login" address, providing a nickname to the outside world, which is randomly generated in the following array. If you need other randomly generated content, simulate it yourself. Related tutorials: js video tutorial

2. Define data directly in the data of the component. This is the simplest way, as follows:

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

Copy after login

The main thing to note is that data must be returned with return. Data that is not wrapped with return will be globally visible in the project and will cause variable pollution. After using return, the variables in the data will only take effect in the current component and will not affect other components. , similar to the concept of each different instance in a function.

　3. Use vuex data management warehouse. This is generally used when the data of large projects is relatively complex. I did not use it in the project on GitHub, but I also used it in a small page when I first started learning. Pass, the learning address is https://vuex.vuejs.org/zh/. Mainly the five major blocks of State, Getter, Action, Mutations, and Module, as well as the first few of its auxiliary functions map. I haven’t studied it very deeply myself, and I still need to study more.

import Vue from &#39;vue&#39;;
import Vuex from &#39;vuex&#39;;
Vue.use(Vuex);
const state = {
    person: [{
        name: &#39;张三&#39;,
        age: &#39;23&#39;,
        sex: &#39;男&#39;,
        likes: &#39;篮球&#39;,
        introuce: &#39;&#39;,
        }, 
      {
        name: &#39;李四&#39;,
        age: &#39;25&#39;,
        sex: &#39;男&#39;,
        likes: &#39;游泳&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;王五&#39;,
        age: &#39;24&#39;,
        sex: &#39;男&#39;,
        likes: &#39;乒乓&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;马六&#39;,
        age: &#39;22&#39;,
        sex: &#39;男&#39;,
        likes: &#39;排球&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;周星星&#39;,
        age: &#39;27&#39;,
        sex: &#39;男&#39;,
        likes: &#39;羽毛球&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;李丽&#39;,
        age: &#39;21&#39;,
        sex: &#39;女&#39;,
        likes: &#39;看书&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;付兰&#39;,
        age: &#39;21&#39;,
        sex: &#39;女&#39;,
        likes: &#39;看电影、游泳&#39;,
        introuce: &#39;&#39;
      },
    ]
}
    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
});

Copy after login

import Vue from &#39;vue&#39;;
import Vuex from &#39;vuex&#39;;
Vue.use(Vuex);
const state = {
    person: [{
        name: &#39;张三&#39;,
        age: &#39;23&#39;,
        sex: &#39;男&#39;,
        likes: &#39;篮球&#39;,
        introuce: &#39;&#39;,
        }, 
      {
        name: &#39;李四&#39;,
        age: &#39;25&#39;,
        sex: &#39;男&#39;,
        likes: &#39;游泳&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;王五&#39;,
        age: &#39;24&#39;,
        sex: &#39;男&#39;,
        likes: &#39;乒乓&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;马六&#39;,
        age: &#39;22&#39;,
        sex: &#39;男&#39;,
        likes: &#39;排球&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;周星星&#39;,
        age: &#39;27&#39;,
        sex: &#39;男&#39;,
        likes: &#39;羽毛球&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;李丽&#39;,
        age: &#39;21&#39;,
        sex: &#39;女&#39;,
        likes: &#39;看书&#39;,
        introuce: &#39;&#39;
      },
      {
        name: &#39;付兰&#39;,
        age: &#39;21&#39;,
        sex: &#39;女&#39;,
        likes: &#39;看电影、游泳&#39;,
        introuce: &#39;&#39;
      },
    ]
}
    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
});

Copy after login

View Code

The above code is a very simple state management. A separate warehouse store is defined in the State. Data, Getter to obtain State data is equivalent to calculated attributes, Mutations method function, Action to execute Mutations. Finally, the data in this store can be used in the component, using the method this.$store.dispatch("addPerson", data), mainly the dispatch method.

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

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

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

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

Copy after login

　　这样在获取数据时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 &#39;Access-Control-Allow-Origin&#39; &#39;*&#39;;
            proxy_pass http://api01.idataapi.cn:8000/article/;
        }

Copy after login

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

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

The above is the detailed content of Vue learning installation dependencies and data sources. For more information, please follow other related articles on the PHP Chinese website!