原文网址：前后端分离简单项目--蚂蚁博客--前端部分_IT利刃出鞘的博客-CSDN博客

简介

说明

        本文介绍我从0开发的前后端分离的简单项目--蚂蚁博客。本博文介绍前端部分。

        本项目是一个全栈项目，使用主流、前沿的技术栈开发，项目虽小，五脏俱全。

        后期我会出一个视频，详细讲解本项目。视频录完后会将链接贴到本文。

项目介绍

见：前后端分离简单项目--蚂蚁博客--简介_IT利刃出鞘的博客-CSDN博客

项目源码

gitee地址：https://gitee.com/knifeedge/ant_blog

ant_frontend目录是前端部分的代码。

技术栈

1. vue（^2.6.11）
2. vue-router（^3.2.0）
3. vuex（^3.4.0）
4. element-uI（^2.15.0）
5. github-markdown-css（^4.0.0）
6. markdown-it（^12.0.4）
7. mavon-editor（^2.9.1）

项目结构

概述

1. 业务部分（views文件夹）：按模块进行划分；
2. 公共部分（axio.js, permission.js）：全局请求拦截、全局响应拦截，权限处理（是否加token）
3. 组件部分（components文件夹）：侧边栏、顶栏
4. 插件部分（router、store文件夹）：vue-router插件、vuex插件

项目概览

依赖及配置

依赖

package.json

{"name": "ant-frontend","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"},"dependencies": {"axios": "^0.21.1","core-js": "^3.6.5","element-ui": "^2.15.0","github-markdown-css": "^4.0.0","markdown-it": "^12.0.4","mavon-editor": "^2.9.1","vue": "^2.6.11","vue-router": "^3.2.0","vuex": "^3.4.0"},"devDependencies": {"@vue/cli-plugin-babel": "^4.5.0","@vue/cli-service": "^4.5.0","vue-template-compiler": "^2.6.11"},"browserslist": ["> 1%","last 2 versions","not dead"]
}

配置

开发服务器配置

vue.config.js

module.exports = {devServer: {proxy: {'/': {target: 'http://localhost:9000/',// ws: true,changeOrigin: true}}}
}

业务部分

主页

Home.vue

登录页

Login.vue

用户页

UserHome.vue（用户主页）

UserList.vue（用户列表） 

UserProfile.vue（用户信息）

博客页

BlogList.vue（博客列表页）

BlogDetail.vue（博客详情页）

BlogEdit.vue（博客编辑页）

公共部分

axio.js（请求拦截、响应拦截）

import axios from 'axios'
import Element from 'element-ui'
import router from './router'
import store from './store'
import Auth from "@/common/Auth";// axios.defaults.baseURL = "http://localhost:8081"// 请求拦截
axios.interceptors.request.use(config => {// 统一设置请求参数if (store.state.token) {config.headers[Auth.HEADER_NAME] = store.state.token}return config;
})// 响应拦截
axios.interceptors.response.use(response => {let res = response.data;if (res.code === 1000) {return response} else {Element.Message.error('失败：' + response.data.msg);return response;}},error => {console.log(error)Element.Message.error('失败：' + error.response.data.message);if (error.response.data) {error.message = error.response.data.msg}if (error.response.status === 401) {store.commit("REMOVE_INFO")router.push("/login")}Element.Message.error(error.message)return Promise.reject(error)}
)

permission.js（控制权限（是否传token参数）） 

import router from "./router";// 路由判断登录 根据路由配置文件的参数
router.beforeEach((to, from, next) => {if (to.matched.some(record => (!record.meta.notRequireAuth))) { // 判断该路由是否需要登录权限const token = localStorage.getItem("token")console.log("token:" + token)if (token) { // 判断当前的token是否存在； 登录存入的tokenif (to.path === '/login') {} else {next()}} else {next({path: '/login'})}} else {next()}
})

组件部分

LeftAside.vue（左侧边栏）

TopHeader.vue（顶栏）

插件部分

router/index.js（路由插件）

作用

        vue-router插件，我们在浏览器上输入url时，它可以定位到前端代码里指定的页面。

代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import BlogDetail from '../views/blog/BlogDetail.vue'
import BlogEdit from '../views/blog/BlogEdit.vue'
import Home from "@/views/Home";Vue.use(VueRouter)const routes = [
/*  {path: '/',name: 'Index',redirect: { name: 'Home' }}, */{path: '/',name: 'Home',component: Home}, {path: '/login',name: 'Login',component: Login,meta: {notRequireAuth: true}},{path: '/:userName',name: 'UserHome',// 懒加载component: () => import('../views/user/UserHome'),meta: {notRequireAuth: true}},{path: '/blog/add', // 注意放在 path: '/blog/:blogId'之前name: 'BlogAdd',component: BlogEdit,},{path: '/blog/:blogId',name: 'BlogDetail',component: BlogDetail,meta: {notRequireAuth: true}},{path: '/blog/:blogId/edit',name: 'BlogEdit',component: BlogEdit}
];const router = new VueRouter({// mode: 'history',base: process.env.BASE_URL,routes
})
export default router

store/index.js（vuex插件）

说明

        vuex可以用来跨组件共享数据。详见：Vue--Vuex--使用/教程/实例_IT利刃出鞘的博客-CSDN博客

代码

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {token: localStorage.getItem("token"),userInfo: JSON.parse(localStorage.getItem("userInfo")),// userInfo: JSON.parse(sessionStorage.getItem("userInfo")),},mutations: {// setSET_TOKEN: (state, token) => {state.token = tokenlocalStorage.setItem("token", token)},SET_USERINFO: (state, userInfo) => {state.userInfo = userInfolocalStorage.setItem("userInfo", JSON.stringify(userInfo))// sessionStorage.setItem("userInfo", JSON.stringify(userInfo))},REMOVE_INFO: (state) => {state.token = ''state.userInfo = {}localStorage.setItem("token", '')localStorage.setItem("userInfo", JSON.stringify(''))// sessionStorage.setItem("userInfo", JSON.stringify(''))}},getters: {// getgetUser: state => {console.log("getUser:" + JSON.stringify(state));return state.userInfo},getHasLogin: state => {return state.token !== ''}},actions: {},modules: {}
})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！