TT建站之路--vue專案基礎框架搭建【01】
上篇文章就說過，要搞個網站玩玩，結果4個月過去了，現在才動手，哎呀。。。。。。覺得自己身為程式員三四年了，是時候搞一個屬於自己獨立開發的專案出來，暫定小說型別網站。促使我做這件事主要有以下幾方面的原因：
1：同步更新文章可以鍛鍊自己的文字輸出能力。
2：寫文章的同時，可以加深自己對知識點的理解。
3：自己寫的專案，想怎麼搞就怎麼搞，可以把最新瞭解到的技術毫無顧忌的用到專案實踐當中。
說幹就幹，然後也就有了本系列文章，這將記錄我從零開始建站的全過程，包括前端搭建、後臺搭建、資料庫設計。技術選型分為：前端選擇 VUE ，後臺還沒考慮好， JAVA 或者 GO （在我沒有確定之前，各位看到這篇文章的小夥伴可以提提意見喲），資料庫 SQL/">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: '我的'}}
]
}
]
現在呢，基本的框架就搭建好了，剩下的就是編碼了。真的希望自己這次能夠堅持下來吧！！！
轉載請註明出處： ofollow,noindex">https://www.jianshu.com/p/504fd2d78542
作者：TSY
喜歡的話，可以關注下我的微信公眾號
微信公眾號