Node+MySQL+Vue2.0+elementUI實(shí)現(xiàn)的博客管理系統(tǒng)（一）

這篇具有很好參考價(jià)值的文章主要介紹了Node+MySQL+Vue2.0+elementUI實(shí)現(xiàn)的博客管理系統(tǒng)（一）。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

前端部分：

Vue項(xiàng)目的入口文件main.js:

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
import router from './router/index'
import Vuex from 'vuex'
import store from './store'
//完整引入
//引入ElementUI組件庫(kù)
import ElementUI from 'element-ui';
//引入ElementUI全部樣式
import 'element-ui/lib/theme-chalk/index.css';
import './assets/css/reset.css'
import api from './api/index'
import * as  echarts from 'echarts'
// 引入圖標(biāo)庫(kù)
import './assets/icon/icon.css'
import './assets/fonts/iconfont.css'
//引入mavon-editor
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// //引入動(dòng)畫
// import animate from 'animate.css'

//代碼高亮
// import '../src/plugins/hljs.js'
//引入Swiper
// import 'swiper/css/swiper.css'
import hljs from 'highlight.js';

Vue.directive('highlight', function (el) {
	let blocks = el.querySelectorAll('pre code');
	blocks.forEach((block) => {
		hljs.highlightBlock(block)
	})
})

import 'highlight.js/styles/atom-one-dark.css'
//引入音頻插件
import APlayer from 'vue-aplayer';

Vue.use(APlayer, {
	defaultCover: 'https://github.com/u3u.png',
	productionTip: true,
});

import 'swiper/swiper-bundle.css'
// 引入插件
import plugins from '../src/plugins/plugins'
Vue.use(plugins)
//引入瀑布流插件
import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
Vue.prototype.$echarts = echarts
// import { json } from 'express'
Vue.prototype.$api = api
Vue.use(ElementUI)
Vue.use(VueRouter)
Vue.use(Vuex)
Vue.use(mavonEditor)

//關(guān)閉Vue的生產(chǎn)提示
Vue.config.productionTip = false
//登錄持久化
//用戶信息
let username = localStorage.getItem('username')
if (username) {
	username = JSON.parse(username)
	store.commit('loginModule/setUser', username)
}
//管理員信息
let adminname = localStorage.getItem('lwandzxl')
if (adminname){
	adminname = JSON.parse(adminname)
	store.commit('AdminLogin/setAdmin', adminname)
}
//管理員登錄ip
let adminaddress = localStorage.getItem('lwandzxladdress')
if (adminaddress) {
	adminaddress = JSON.parse(adminaddress)
	store.commit('AdminLoginAddress/setAddress', adminaddress)
}
// let bgzxl = localStorage.getItem('bgzxl')
// if (bgzxl) {
// 	bgzxl = JSON.parse(bgzxl)
// 	store.commit('loginModule/setAdmin', bgzxl)
// }
//判斷token是否失效
import axios from 'axios' // 引入axios
Vue.prototype.$axios = axios
import Storage from '@/assets/js/storage.js'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
/* 請(qǐng)求攔截器 */

axios.interceptors.request.use(function (config) { // 每次請(qǐng)求時(shí)會(huì)從localStorage中獲取token
	let token = Storage.localGet('token')
	if (token) {
		token = 'bearer' + ' ' + token.replace(/'|"/g, '') // 把token加入到默認(rèn)請(qǐng)求參數(shù)中
		config.headers.common['Authorization'] = token
	}
	return config
}, function (error) {
	return Promise.reject(error)
})

/* 響應(yīng)攔截器 */

axios.interceptors.response.use(function (response) { // ①10010 token過(guò)期（30天） ②10011 token無(wú)效
	if (response.data.code === 10010 || response.data.code === 10011) {
		Storage.localRemove('token') // 刪除已經(jīng)失效或過(guò)期的token（不刪除也可以，因?yàn)榈卿浐蟾采w）
		router.replace({
			path: '/login' // 到登錄頁(yè)重新獲取token
		})
	} else if (response.data.token) { // 判斷token是否存在，如果存在說(shuō)明需要更新token
		Storage.localSet('token', response.data.token) // 覆蓋原來(lái)的token(默認(rèn)一天刷新一次)
	}
	return response
}, function (error) {
	return Promise.reject(error)
})


new Vue({
	el: '#app',
	render: h => h(App),
	router: router,
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

路由文件router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
/*
在原始的 Vue Router 中，當(dāng)使用 this.$router.push(location) 導(dǎo)航到一個(gè)新路由時(shí)，如果目標(biāo)路由不存在，則會(huì)拋出錯(cuò)誤。
這個(gè)代碼塊可以解決這個(gè)問(wèn)題
*/
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}

Vue.use(VueRouter)
const router = new VueRouter({
    routes: [
        {
            path: '',
            //redirect: '/home',name: 'index', 把/home設(shè)置為首頁(yè)
            redirect: '/home',
            name: 'index',
            component: () => import('../views/Layout/index'),
            children: [{
                path: '/home',
                name: 'home',
                component: () => import('../views/components/Home/Home')

            },
            {
                path: 'todos',
                name: 'todos',
                component: () => import('../components/Todos/Todos')
            },
            {
                path: 'tools',
                name: 'tools',
                component: () => import('../components/Tools/index'),
                children: [{
                    path: 'fanyi',
                    name: 'fanyi',
                    component: () => import('../components/Tools/Fanyi')
                },
                {
                    path: 'weather',
                    name: 'weather',
                    component: () => import('../components/Tools/Weather')
                },
                {
                    path: 'photos',
                    name: 'photos',
                    component: () => import('../components/Tools/Photo')
                }, {
                    path: 'word',
                    name: 'word',
                    component: () => import('../components/Tools/Word')
                },]
            },


            {
                path: 'usercenter',
                name: 'usercenter',

                meta: { isLogin: true },
                component: () => import('../../src/views/components/Usercenter/Usercenter'),
               
            },
            {
                name: 'userinfoedit',
                path: 'userinfoedit',
                component: () => import('../components/Userinfoedit/Userinfoedit')
            },
            {
                name: 'photo',
                path: 'photo',
                component: () => import('../views/components/Photo/Photo')
            },
            {
                name: 'video',
                path: 'video',
                component: () => import('../views/components/Video/Video')
            },
            {
                name: 'article',
                path: 'article',
                component: () => import('../../src/views/components/Article/Article')
            },
            {
                name: 'articleinfo',
                path: 'articleinfo',
                component: () => import('../../src/components/ArticleInfo/ArticleInfo')
            },
            {
                name: 'search',
                path: 'search',
                component: () => import('../../src/components/Search/Search')
            },
            {
                name: 'messageinfo',
                path: 'messageinfo',
                component: () => import('../../src/components/Message/MessageInfo')
            },
            ]

        },

        {
            path: '/login',
            name: 'login',
            component: () => import('../views/components/Login/Login')
        },
        {
            path: '/register',
            name: 'register',
            component: () => import('../views/components/Register/Register')
        },
        {
            path: '/adminlogin',
            name: 'adminlogin',
            component: () => import('../Admin/AdminLogin/AdminLogin')
        },
        {
            path: '/admin',
            name: 'admin',
            meta: { isAdminLogin: true },
            component: () => import('../Admin/Layout/index'),
            children: [{
                path: 'userlist',
                name: 'userlist',
                component: () => import('../Admin/User/UserList')
            },
            {
                path: 'adduser',
                name: 'adduser',
                component: () => import('../Admin/User/AddUser')
            },
            {
                path: 'updateuser',
                name: 'updateuser',
                component: () => import('../Admin/User/UpdateUser')
            },
            {
                path: 'addphoto',
                name: 'addphoto',
                component: () => import('../Admin/Photo/AddPhoto')
            },
            {
                path: 'photolist',
                name: 'photolist',
                component: () => import('../Admin/Photo/PhotoList')
            },

            {
                path: 'home',
                name: '/admin/home',
                component: () => import('../Admin/Home/Home')
            },
            {
                path: 'articlelist',
                name: 'articlelist',
                component: () => import('../Admin/Article/ArticleList')
            },
            {
                path: 'huishouzhan',
                name: 'huishouzhan',
                component: () => import('../Admin/Article/Huishouzhan')
            },
            {
                path: 'addarticle',
                name: 'addarticle',
                component: () => import('../Admin/Article/Add')
            },
            {
                path: 'editarticle',
                name: 'editarticle',
                component: () => import('../Admin/Article/Edit')
            },
            {
                path: 'comment',
                name: 'comment',
                component: () => import('../Admin/Article/Comment')
            },
            {
                path: 'system',
                name: 'system',
                component: () => import('../Admin/System/System')
            },
            {
                path: 'videolist',
                name: 'videolist',
                component: () => import('../Admin/Video/VideoList')
            },
            {
                path: 'addvideo',
                name: 'addvideo',
                component: () => import('../Admin/Video/AddVideo')
            },
            {
                path: 'message',
                name: 'message',
                component: () => import('../Admin/Message/Message')
            },
            {
                path: 'category',
                name: 'category',
                component: () => import('../Admin/Category/Category')
            },
            ]
        }

    ]
})
//獲取vuex數(shù)據(jù)
import store from '../store/index'
//用戶路由攔截
router.beforeEach((to, from, next) => {
    // to and from are both route objects. must call `next`.
    //需要登錄
    if (to.meta.isLogin) {
        let token = store.state.loginModule.userinfo.token
        if (token) {
            next()
        } else if (confirm('您還沒(méi)有登錄，確定登錄嗎？')) {
            next('/login')
            this.$router.go(-1)
        }
    } else {//不需要登錄
        next()
    }
})

export default router

登錄頁(yè)面：

Node+MySQL+Vue2.0+elementUI實(shí)現(xiàn)的博客管理系統(tǒng)（一）,mysql,elementui,數(shù)據(jù)庫(kù)

<template>
  <div class="login">
    <h3 class="title">登錄界面</h3>
    <el-form
      :model="loginForm"
      status-icon
      :rules="rules"
      ref="loginForm"
      label-width="60px"
      class="demo-loginForm"
    >
      <el-form-item label="賬號(hào)" prop="username">
        <el-input
          type="text"
          v-model="loginForm.username"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密碼" prop="password">
        <el-input
          type="password"
          v-model="loginForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('loginForm')"
          >登錄</el-button>
        <el-button @click="resetForm('loginForm')">重置</el-button>

        <span class="zhuce" @click="register">沒(méi)有賬戶？去注冊(cè)</span>
        <span class="youke" @click="zhuye">我是游客</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import jwt from "jwt-decode";
import { mapMutations } from "vuex";
export default {
  name: "Login",
  data() {
    var validateLname = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("請(qǐng)輸入賬戶??"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("請(qǐng)輸入密碼??"));
      } else {
        callback();
      }
    };
    return {
      bodyImg: "url(" + require("../../../assets/img/loginbg.jpg") + ")",
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ validator: validateLname, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  //設(shè)置背景圖片
  mounted() {
    document.body.style.backgroundImage = this.bodyImg;
    document.body.style.backgroundSize = "100%";
    //注冊(cè)成功后，跳轉(zhuǎn)登錄界面，通過(guò)讀取localStorage里的數(shù)據(jù)，使得登錄的賬戶，密碼就是注冊(cè)的賬戶，密碼
    let register = localStorage.getItem("register");
    if (register) {
      register = JSON.parse(register);
      this.loginForm.username = register.username;
      this.loginForm.password = register.password;
    }
  },
  beforeMount() {
    document.body.style.backgroundImage = "";
  },
  beforeDestroy() {
    this.$bus.$off("zxl");
  },
  methods: {
    //游客身份跳轉(zhuǎn)主頁(yè)
    zhuye() {
      this.$router.push("/");
    },
    register() {
      this.$router.push("/register");
    },
    ...mapMutations("loginModule", ["setUser"]),
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("校驗(yàn)通過(guò)", this.loginForm);
          let { username, password } = this.loginForm;
          // 請(qǐng)求登錄接口
          this.$api
            .getLogin({
              username,
              password,
            })
            .then((res) => {
              console.log("解析前", res.data);
              if (res.data.status === 200) {
                console.log("解析后", jwt(res.data.data));
                //登錄成功后：1. 存儲(chǔ)登錄信息  2. 跳轉(zhuǎn)網(wǎng)頁(yè) 3. 頂部區(qū)域顯示用戶信息  4. 持久化
                let obj = {
                  username: jwt(res.data.data).username,
                  token: res.data.data,
                  avatar: res.data.avatar,
                  email: res.data.email,
                };
                console.log("obj", obj);
                this.setUser(obj);
                //存儲(chǔ)本地
                localStorage.setItem("loginStatus", true);
                localStorage.setItem("username", JSON.stringify(obj));
                //跳轉(zhuǎn)
                this.$router.push("/home");
                this.$message({
                  message: "恭喜您，登錄成功??",
                  type: "success",
                });
                //清除注冊(cè)成功的用戶數(shù)據(jù)
                localStorage.removeItem("register");
              } else {
                //賬戶或密碼錯(cuò)誤
                this.$message({
                  message: "警告哦，賬戶或密碼錯(cuò)誤??",
                  type: "warning",
                });
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

項(xiàng)目主頁(yè)：

Node+MySQL+Vue2.0+elementUI實(shí)現(xiàn)的博客管理系統(tǒng)（一）,mysql,elementui,數(shù)據(jù)庫(kù)

<template>
  <div class="main">
    <!-- 頂部區(qū)域 -->
    <div class="header">
     <!-- <div class="logo">
        <div class="zxl"><img src="../../assets/img/logo3.png" alt="" /></div>
        <div class="lw"><img src="../../assets/img/logo2.png" alt="" /></div>
      </div> -->
      <div class="search">
        <el-input
          placeholder="請(qǐng)輸入內(nèi)容"
          v-model="val"
          @keydown.native.enter="goSearch(val.trim())"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <button class="hhh" @click="goSearch(val.trim())">搜索</button>
      </div>
      <div class="login">
        <i v-show="userinfo.username === 'admin'">歡迎超級(jí)管理員：</i>
        <i v-show="userinfo.username !== 'admin'">歡迎：</i>
        {{ userinfo.username || " 游客" }}
        <span v-show="userinfo.username" @click="loginout"
          ><i class="el-icon-loading"></i> 退出登錄</span
        >
        <span v-show="userinfo.username === ''" @click="login"
          ><i class="el-icon-loading"></i> 登錄</span
        >
        <span v-show="userinfo.username === ''" @click="register"> 注冊(cè)</span>

        <!-- <span @click="loginout"> 退出登錄</span> -->
      </div>
      <!-- <div class="light"><Light @changeBackground="changeBG"></Light></div> -->
    </div>
    <!-- 內(nèi)容區(qū)域 -->
    
    <div class="layout">
      <Leftmenu class="leftmenu"></Leftmenu>
      <Rightmenu class="rightmenu"></Rightmenu>
      <Content class="content"></Content>
      
    </div>
    <transition
      appear
      name="animate__animated animate__bounce"
      enter-active-class="animate__backInUp"
      leave-active-class="animate__backOutDown"
    >
      <div class="gotop" v-if="istop" @click="gotop">
        <img src="../../assets/img/gotop.png" alt="" />
      </div>
    </transition>
  </div>
</template>

<script>
import "animate.css";
import { mapState } from "vuex";
import { mapMutations } from "vuex";
import Fengche from "../../components/Fengche/Fengche";
import Content from "./Content";
import Leftmenu from "./Leftmenu";
import Rightmenu from "./Rightmenu";
import Light from "../../components/Light/Light";
export default {
  name: "index",
  data() {
    return {
      istop: false,
      val: "",
      bodyImg: "url(" + require("../../assets/img/bg111.jpg") + ")",
      bodyImg1: "url(" + require("../../assets/img/night.gif") + ")",
      isclick: true,
    };
  },
  components: {
    Content,
    Leftmenu,
    Rightmenu,
    Light,
    Fengche,
  },
  computed: {
    ...mapState("loginModule", ["userinfo"]),
  },
  watch: {
    isclick(val) {
      console.log("變化", val);
      if (val === true) {
        document.body.style.backgroundImage = this.bodyImg;
        document.body.style.backgroundSize = "100%";
        document.body.style.backgroundAttachment = "fixed";
      } else {
        document.body.style.backgroundImage = this.bodyImg1;
        document.body.style.backgroundSize = "100%";
        document.body.style.backgroundAttachment = "fixed";
      }
    },
  },
  // watch: {
  //   val(val, oldval) {
  //     console.log("新", val);
  //     console.log("舊", oldval);
  //     if (val !== oldval) {
  //       this.val = val;
  //     }
  //   },
  // },
  methods: {
    //搜索
    goSearch(val) {
      if (val == "") {
        return this.$message.error("錯(cuò)了哦，輸入不能為空");
      }
      this.$router.push(`/search?content=${val}`);
    },
    changeBG() {
      this.isclick = !this.isclick;
      // console.log(this.isclick);
      // document.body.style.backgroundImage = `${
      //   this.click ? this.bodyImg : this.bodyImg1
      // } `;
      // document.body.style.backgroundSize = "100%";
      // document.body.style.backgroundAttachment = "fixed";
    },
    ...mapMutations("loginModule", ["clearUser"]),
    //退出登錄
    loginout() {
      //清空vuex數(shù)據(jù)
      this.clearUser();
      //清空本地?cái)?shù)據(jù)
      localStorage.removeItem("username");
      localStorage.removeItem("loginStatus");
      //返回登錄
      this.$router.push("/login");
    },

    login() {
      this.$router.push("/login");
    },
    register() {
      this.$router.push("/register");
    },
    handleScroll(e) {
      let scrollTop =
        document.body.scrollTop || document.documentElement.scrollTop;
      if (scrollTop >= 480) {
        this.istop = true;
      }
      if (scrollTop < 480) {
        this.istop = false;
      }
      // if (e.target.scrollTop > 700) this.istop = true;
    },
    gotop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      const timeTop = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          top -=
            50;
        if (top < 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
  },
  mounted() {
    document.body.style.backgroundImage = this.bodyImg;
    document.body.style.backgroundSize = "100%";
    document.body.style.backgroundAttachment = "fixed";
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeMount() {
    document.body.style.backgroundImage = "";
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

left：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-572610.html

<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    background-color="rgba(0,0,0,0.5)"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect"
  >
    <el-menu-item index="/home">
      <i class="iconfont icon-shouye"></i>
      <span slot="title">
        <router-link to="/home"> 首頁(yè)</router-link>
      </span>
    </el-menu-item>
    <el-menu-item index="/article">
      <i class="iconfont icon-16"></i>
      <span slot="title">
        <router-link to="/article"> 文章</router-link>
      </span>
    </el-menu-item>

    <el-menu-item index="/todos">
      <i class="iconfont icon-zuozhe2"></i>
      <span slot="title">
        <router-link to="/todos"> 記事本</router-link>
      </span>
    </el-menu-item>

    <el-menu-item index="/photo">
      <i class="iconfont icon-tupian"></i>
      <span slot="title">
        <router-link to="/photo"> 相冊(cè)</router-link>
      </span>
    </el-menu-item>
    <el-menu-item index="/video">
      <i class="iconfont iconfont icon-shipin"></i>
      <span slot="title">
        <router-link to="/video"> 視頻</router-link>
      </span>
    </el-menu-item>
    <el-menu-item index="/messageinfo">
      <i class="iconfont icon-liuyanban"></i>
      <span slot="title">
        <router-link to="/messageinfo"> 留言板</router-link>
      </span>
    </el-menu-item>
    <el-menu-item index="/usercenter">
      <i class="iconfont icon-yonghuxinxi-"></i>
      <span slot="title">
        <router-link to="/usercenter"> 個(gè)人中心</router-link>
      </span>
    </el-menu-item>
    <el-menu-item index="/tools">
      <i class="iconfont icon-gongjuxiang1"></i>
      <span slot="title">
        <router-link to="/tools"> 實(shí)用工具</router-link>
      </span>
    </el-menu-item>

    <el-menu-item index="/admin/home" v-show="userinfo.username === 'admin'">
      <i class="iconfont icon-yonghu"></i>
      <span slot="title">
        <router-link to="/admin/home"> 后臺(tái)登錄</router-link>
      </span>
    </el-menu-item>
  </el-menu>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Leftmenu",
  computed: {
    ...mapState("loginModule", ["userinfo"]),
  },
  // mounted() {
  //   console.log(this.userinfo.username);
  // },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //element-ui導(dǎo)航菜單使用刷新后高亮顯示不一致完美解決辦法
    handleSelect(key, keyPath) {
      this.$router.push(key);
    },
  },
};
</script>

到了這里，關(guān)于Node+MySQL+Vue2.0+elementUI實(shí)現(xiàn)的博客管理系統(tǒng)（一）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！