上篇文章就说过，要搞个网站玩玩，结果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: '我的'}}
]
}
]
现在呢，基本的框架就搭建好了，剩下的就是编码了。真的希望自己这次能够坚持下来吧！！！
转载请注明出处：https://www.jianshu.com/p/504fd2d78542
作者：TSY
喜欢的话，可以关注下我的微信公众号
微信公众号
网友评论