Vue學習之安裝依賴與數據來源

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

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

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

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 = '我叫'+state.person[i].name+'，我今年'+state.person[i].age+'歲了，我的愛好是'+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('add',data)
 },
 delPerson({commit},data){
 commit('del',data)
 },
 editPerson({commit},data){
 commit('edit',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 = '我叫'+state.person[i].name+'，我今年'+state.person[i].age+'歲了，我的愛好是'+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('add',data)
 },
 delPerson({commit},data){
 commit('del',data)
 },
 editPerson({commit},data){
 commit('edit',data)
 },
 };

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

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

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