TT建站之路--vue專案基礎框架搭建【01】

TSY發表於2018-09-22
Vue框架

上篇文章就說過，要搞個網站玩玩，結果4個月過去了，現在才動手，哎呀。。。。。。覺得自己身為程式設計師三四年了，是時候搞一個屬於自己獨立開發的專案出來，暫定小說型別網站。促使我做這件事主要有以下幾方面的原因：

1：同步更新文章可以鍛鍊自己的文字輸出能力。 2：寫文章的同時，可以加深自己對知識點的理解。 3：自己寫的專案，想怎麼搞就怎麼搞，可以把最新瞭解到的技術毫無顧忌的用到專案實踐當中。

說幹就幹，然後也就有了本系列文章，這將記錄我從零開始建站的全過程，包括前端搭建、後臺搭建、資料庫設計。技術選型分為：前端選擇VUE，後臺還沒考慮好，JAVA或者GO（在我沒有確定之前，各位看到這篇文章的小夥伴可以提提意見喲），資料庫MySQL。

一、使用vue cli腳手架初始化專案。 首先安裝vue cli，推薦使用vue cli3+，開啟CMD輸入如下命令：

npm install -g @vue/cli
複製程式碼

然後使用cli建立一個專案

vue create hxkj-novel    //hxkj-novel 為專案名
複製程式碼

建立完成後，用開發工具開啟，開發工具我這邊使用的是webStorm，個人感覺用起來比較順手。開啟之後嘞，就會發現專案的目錄結構如下：

│  node_modules                 
│  package-lock.json
│  package.json      //專案配置檔案
├─public
│      favicon.ico  //網站圖示
│      index.html  //入口HTML檔案
└─src
    │  App.vue
    │  main.js    //入口JS檔案，一般全域性定義都在這裡面
    ├─assets      //靜態資源放置目錄
    │      logo.png
    └─components  //元件放置目錄
            HelloWorld.vue
複製程式碼

二、接下來就是做一些基本的配置了。 1、配置代理 因為這個專案我打算做前後端分離模式，所以，在開發過程中必然會遇到跨域的問題，然後呢，就得解決這個問題啦，那就是配置反向代理嘍。 在專案的根目錄下新建 vue.config.js 檔案，自 Vue CLI 3 開始，專案中所有的配置資訊都寫在這個檔案中。 配置資訊如下：

//vue.config.js
module.exports = {
    devServer: {
        proxy: {// 設定代理
            '/tsy': {
                target: 'http://www.hxkj.vip',//設定呼叫的介面域名和埠號
                changeOrigin: true,//開啟跨域訪問：在本地會建立一個虛擬服務端，然後傳送請求的資料，並同時接收請求的資料，這樣服務端和服務端進行資料的互動就不會有跨域問題
                ws: true,// 是否啟用websockets
                pathRewrite: {
                    '^/tsy': ''
                }
            }
        }
    }
}
複製程式碼

2、配置路由攔截器 我們可以通過路由攔截做什麼?我認為最主要的便是對許可權的控制,比如有的頁面需要登入了才能進入,有些頁面不同身份渲染不同.這個專案我引入了 mint ui 框架,所以我是結合 mint ui 中 messageBox 元件來處理的。由於路由攔截器跟路由路徑配置我是分開來寫的，一共用到兩個檔案。下面簡單的配置一下登入攔截：

//router.js檔案配置示例
import Vue from 'vue'
import VueRouter from 'vue-router'
import {routes} from "./routes"
import {MessageBox} from 'mint-ui'

Vue.use(VueRouter)

const router = new VueRouter({
    routes
})

router.beforeEach((to, from, next) => {
    if (to.matched.some(r => r.meta.requireAuth)) { //判斷該頁面是否需要登入後才能進入
        // 判斷是否登入
        if (store.getters.isLogin) { //已登入狀態  不攔截
            next();
        } else {//未登入狀態  攔截並重定向到登入頁
            MessageBox.confirm('請登入您的賬號！', '溫馨提示').then(action => {
                if (action == 'confirm') {
                    next({
                        path: '/login',
                        query: {redirect: to.fullPath}
                    })
                }
            }).catch(e => {
                console.log(e)
            });
        }
    } else {
        next();
    }
})

export default router;
複製程式碼
//routes.js檔案配置示例
import Home from '../components/home/Home'
import HomePage from '../components/home/HomePage'
import HomeMine from '../components/home/HomeMine'

export const routes = [
    {
        path: '/', name: 'home', component: Home, redirect: '/home/index', children: [
        {path: '/home/index', name: 'homePage', component: HomePage, meta: {title: '雜湊小說網'}},
        // 需要登入才能進入的頁面可以增加一個meta屬性--requireAuth: true
        {path: '/home/mine', name: 'homeMine', component: HomeMine, meta: {title: '我的', requireAuth: true}}
    ]
    }
]
複製程式碼

3、配置http攔截器 如果需要統一處理所有http請求和響應，那麼就得用上 axios 的攔截器。通過配置http response inteceptor，當後端介面返回401 Unauthorized（未授權），就讓使用者重新登入。具體配置資訊如下：

//http.js檔案配置示例
import store from './store/store'
import axios from 'axios'
import router from './router/router'

// http request 攔截器
axios.interceptors.request.use(
    config => {
        if (store.state.token) {  // 判斷是否存在token，如果存在的話，則每個http header都加上token
            config.headers.Authorization = `token ${store.state.token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });

// http response 攔截器
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 返回 401 清除token資訊並跳轉到登入頁面
                    store.commit(types.LOGOUT);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }
        return Promise.reject(error.response.data)   // 返回介面返回的錯誤資訊
    });
複製程式碼

4、配置路由按需載入 按需載入，顧名思義-即在需要的時候進行載入，隨用隨載。在以往開發單頁應用的經驗中，發現，如果沒有應用按需載入，運用webpack打包後的檔案將會非常的大，簡直恐怖如斯，這樣就造成進入首頁時，需要載入的內容過多，延時過長，不利於使用者體驗，首頁卡個10幾秒，闊怕呀。而運用懶載入則可以將頁面進行劃分，需要的時候載入頁面，可以有效的分擔首頁所承擔的載入壓力，減少首頁載入用時。慣例，出示配置程式碼：

//routes.js檔案配置示例
const Home = resolve => require(['../components/home/Home'], resolve)
const HomePage = resolve => require(['../components/home/HomePage'], resolve)
const HomeMine = resolve => require(['../components/home/HomeMine'], resolve)

export const routes = [
    {
        path: '/', name: 'home', component: Home, redirect: '/home/index', children: [
        {path: '/home/index', name: 'homePage', component: HomePage, meta: {title: '雜湊小說網'}},
        {path: '/home/mine', name: 'homeMine', component: HomeMine, meta: {title: '我的'}}
    ]
    }
]
複製程式碼

假如又遇到一個問題，不想要每個路由都單獨載入，需要按模組載入，那當然也是沒有問題的，配置資訊如下：

//routes.js檔案配置示例
//這裡以首頁模組為例
const Home = r => require.ensure([], () => r(require('../components/home/Home')), 'home')//home 就是改模組的名字，相同模組使用同一個名字就好
const HomePage = r => require.ensure([], () => r(require('../components/home/HomePage')), 'home')
const HomeMine = r => require.ensure([], () => r(require('../components/home/HomeMine')), 'home')

export const routes = [
    {
        path: '/', name: 'home', component: Home, redirect: '/home/index', children: [
        {path: '/home/index', name: 'homePage', component: HomePage, meta: {title: '雜湊小說網'}},
        {path: '/home/mine', name: 'homeMine', component: HomeMine, meta: {title: '我的'}}
    ]
    }
]
複製程式碼

現在呢，基本的框架就搭建好了，剩下的就是編碼了。真的希望自己這次能夠堅持下來吧！！！

轉載請註明出處：www.jianshu.com/p/504fd2d78… 作者：TSY

喜歡的話，可以關注下我的微信公眾號

微信公眾號

相關文章