Springboot + Vue 个人博客 前端配置

Springboot + Vue 个人博客 前端配置

在进行开发前 需要安装Node

在安装完Node.js后 可以选择安装 cnpm(使用国内镜像加速下载) 使用命令 npm/cnpm 安装 vue-cli4

提醒一下：

1.在使用npm/cnpm 配置环境时 建议只使用一种 不要一开始使用npm 后面就使用cnpm

2.目前网上的教程安装的版本大多是vue-cli2 命令行：npm install vue-cli -g 而我是使用vue-cli4的 命令行是：npm/cnpm install -g @vue/cli

3.安装完vue-cli4后 可以clone/download 前端代码 并使用 npm/cnpm install 生成 node_modules

目录

Springboot + Vue 个人博客 主目录
Springboot + Vue 个人博客 前端配置
Springboot + Vue 个人博客 后端配置
Springboot + Vue 个人博客 前端交换样例
Springboot + Vue 个人博客 后端交换样例

代码

Github 后端代码
Github 前端代码

如果你是想自己实现 使用Webstorm/Vscode 创建一个新项目来学习 那多少会遇到一些小问题 可能在WebStrom/Vscode 创建的目录结构会与我的不同 但可以自己创建目录/文件去补齐 当然最重要的是查阅官方文档 例如：Vue elementUi的文档最好能多看几次

一、安装环境插件

explain:

–save：将保存配置信息到pacjage.json。默认为dependencies节点中

axios: 是Promise的进一步封装 更简单调用后端Restful接口接受数据

vue-router：vue官方路由 实现路径的跳转

qs：axios会自动将数据封装成对象后端使用@RequestBody接收 如果传输比较少的数据 我建议可以使用@RequestParam来接收 而前端传输的数据需要使用 qs来进行进一步封装

element-ui: ui组件

mavon-editor: 写博客的Markdown输入框

vuex: 用于存储登录信息 但目前未完全整合

cnpm install axios --save			//ajax promise进一步封装
cnpm install vue-router --save 	    //前端路由
cnpm install qs --save-dev 		    //帮助axios传递post请求
cnpm install element-ui --save	    //elementui界面
cnpm install vuex --save			//处理登录状态
cnpm install mavon-editor --save    //markdown

二、配置文件

1. vue.config.js

explain:

devServer的配置 port:表明 前端发布后端口   Proxy：说明后端的地址和端口

module.exports = {
    /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */
    /* baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' */
    publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
    /* 输出文件目录：在npm run build时，生成文件的目录名称 */
    outputDir: 'dist',
    /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
    assetsDir: "assets",
    /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
    productionSourceMap: false,
    /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
    filenameHashing: false,
    /* 代码保存时进行eslint检测 */
    lintOnSave: true,
    /* webpack-dev-server 相关配置 */
    devServer: {
        /* 自动打开浏览器 */
        open: true,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: '0.0.0.0',
        port: 8066, 
        https: false,
        hotOnly: false,
        /* 使用代理 */
        proxy: {
            '/api': {
                /* 目标代理服务器地址 */
                target: 'http://localhost:8080',
                /* 允许跨域 */
                changeOrigin: true,
            },
        },
    },
}

2.src/main.js

explain:

src/main.js可以注册使用 cnpm/npm引入的插件 并且通过this来进行调用 Vue引入axios等等其他东西 可以查询相关的官网API进行设置

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index.js'
import axios from 'axios'
import qs from 'qs'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

Vue.use(ElementUI);
Vue.use(mavonEditor);

Vue.prototype.$axios=axios;
Vue.prototype.$qs=qs;
Vue.config.productionTip = false;


new Vue({
 el: '#app',
 router,
 store,
 render: h => h(App),
}).$mount('#app');



//路由遍历 检查是否已经登录
//to:进入到哪个路由去 from:从哪个路由离开 next:路由的控制参数
router.beforeEach(function (to, from, next) {


 /* 判断是否已经登录*/
 if(to.meta.requestAuth){
   if(store.state.user.username){
     next();
   }else{
     next({
       path: 'login',
       query: {redirect: to.fullPath}
     });
   }
 }else{
   next();
 }
});

3. src/router/index.js

explain:

路由的模式默认为：hash 在此模式下 使用elementUi的二级路由跳转刷新不会出现异常问题

路径跳转 path：表示跳转的路径 name:ES6导出的组件名 component:xxx.vue

如果传参可以使用 this.$router.query/params 传输参数 用this.$route.query/params接收

值得注意的是 使用query传参 使用path/name都可以传参 但界面刷新会失去数据 推荐使用params传参 刷新界面数据还会保留

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login';//登录
import Home from '@/components/Home';//主页
import Error from "@/components/Error";//错误
import Index from '@/components/home/Index'//主页-首页
import Article from "@/components/home/Article";//主页-文章
import ArticleDetails from "@/components/home/article/ArticleDetails";//主页-文章详情
import Study from "@/components/home/Study";//主页-学习路线
import Essay from "@/components/home/Essay";//主页-随笔
/**/
import Admin from "@/components/Admin";//管理
import AdminArticle from "@/components/admin/AdminArticle";//管理-文章列表
import AdminArticleAdd from "@/components/admin/AdminArticleAdd";//管理-文章添加
import AdminArticleEdit from "@/components/admin/AdminArticleEdit";//管理-文章修改
import AdminStudy from "@/components/admin/AdminStudy";//管理-学习路线
import AdminRole from "@/components/admin/AdminRole";//管理-角色
import AdminUserInfo from "@/components/admin/AdminUserInfo";//管理-用户信息


Vue.use(Router);

export default new Router({
    //mode: 'history',
    mode: 'hash',
    routes: [
        {path: '/', redirect: '/home'},
        {path: '/login', name: 'Login', component: Login},
        {path: '*', name: 'Error', component: Error},
        {
            path: '/home', name: 'Home', component: Home, redirect: '/index',
            children: [
                {path: '/index', name: 'Index', component: Index},
                {path: '/article', name: 'Article', component: Article},
                {path: '/article/details/:id', name: 'ArticleDetails', component: ArticleDetails},//使用 name params传参
                /*{path: '/article/details', name: 'ArticleDetails', component: ArticleDetails},*/ //使用 name/path query传参
                {path: '/study', name: 'Study', component: Study},
                {path: '/essay', name: 'Essay', component: Essay},
            ]
        },
        {
            path: '/admin', name: 'Admin', component: Admin,
            children: [
                {path: '/admin/article', name: 'AdminArticle', component: AdminArticle},
                {path: '/admin/article/add', name: 'AdminArticleAdd', component: AdminArticleAdd},
                {path: '/admin/article/edit/:id', name: 'AdminArticleEdit', component: AdminArticleEdit},
                {path: '/admin/study', name: 'AdminStudy', component: AdminStudy},
                {path: '/admin/role', name: 'AdminRole', component: AdminRole},
                {path: '/admin/userinfo', name: 'AdminInfo', component: AdminUserInfo}]
        },

    ]
})