上篇文章就说过，要搞个网站玩玩，结果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.jsmodule.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: '我的'}}
]
}
]
作者：_TSY_
链接：https://www.jianshu.com/p/504fd2d78542
随时随地看视频
