Vue+element后台管理实战详解

简介: 相信看到这篇文章的你可能是一个没接触过脚手架开发的小白,也可能是没学过vue框架的前端新手,接下来由我给大家带来细致的vue后台开发实战详解

前言

相信看到这篇文章的你可能是一个没接触过脚手架开发的小白,也可能是没学过vue框架的前端新手,接下来由我给大家带来细致的vue后台开发实战详解,感兴趣的可以关注一下我的专栏

项目介绍

这次的实战项目是以论坛管理系统为主,分为超级管理端和管理端,集中超级管理和管理两种管理端的权限各不同,功能大概以表格为主,实现增删改查用户及文章的一些功能。

初始化

脚手架搭建

  1. vue-cli全局安装
npm install -g @vue/cli
//安装vue-cli 4
复制代码
  1. 初始化项目
vue create manage-vue
复制代码
  1. 在项目目录下运行
npm run serve
复制代码
  1. 注意:
  • create过后一般提示的默认项可以酌情选择,这次的后台项目为Vue2
  • 脚手架版本的不同可能会导致创建项目过程不同,这里我们的脚手架版本为4

1.webp.jpg

目录解构

在搭建完项目后我们会看到我们的文件夹中多出好多东西,这个时候不要慌,我们的代码基本都是在src目录下的,我先简单地介绍一下src的文件结构及其作用

- src
    - assets
        - logo.png
    - components
        - HelloWorld.vue
    - App.vue
    - main.js
复制代码
  1. assets为静态文件存放的目录,我们之后也可以新增public文件存储静态文件
  2. components为存储组件的目录
  3. App.vue为页面的入口页面
  4. main.js为项目的入口文件,即所有的页面加载都会带上它

element-UI库

element的组件库是比较常用的了,可以酌情选择其他组件库来使用:element官方文档

  1. 安装
npm i element-ui -S
复制代码
  1. 引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
复制代码
  1. 这里是在main.js文件中对element组件库进行引入

看到这里一个基本的项目就搭建完成,下来我们可以开始打代码(打工人)了,在此之前,你可能会想在脚手架项目中的页面跳转是怎么样的,vue文件怎么访问,那么下来开始介绍vue路由的使用

路由配置

  1. 新建页面文件
    我们一般在src目录下新建一个views目录来存放我们的页面,我们先在views目录下新建Login.vue登录页
  2. 安装vue-router
npm install vue-router --save-dev
复制代码
  1. 安装完之后我们需要在src目录下新建router目录来存放我们的路由配置,在router目录下新建index.js文件
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
复制代码
  1. 通过创建vue实例对象配置路由
const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
  ]
})
export default router
复制代码

Vuex配置

vuex是vue项目中用来全局访问的状态管理工具

因为我们的后台是分为超级管理和管理端的,所以需要存一些权限在vuex中方便调用,其中我们需要在与main.js同级下新建一个store的文件,并在其中配置vuex相关的数据及方法。

  1. 安包
npm install vuex --save
复制代码
  1. 导入vuex
import Vuex from 'vuex'
Vue.use(Vuex)
复制代码
  1. 创建store对象
//store.js
const store = new Vuex.store({
  state:{count:0}
})
复制代码
  1. 将store对象挂载到vue实例
new Vue({
    el:'#app',
    render:h => h(app),
    router,
    store
})
复制代码

axios配置及封装

  1. 安装
npm i axios -S
复制代码
  1. 引入:和vuex相同挂载在vue实例上
import axios from 'axios'
复制代码
  1. 使用
//组件
async getinfo{
    await axios.get('url')
}
复制代码

因为axios每个组件都要调用,所以我们采用封装的方法,我们开发不同的接口的时候需要对请求进行不同的设置,封装的话会使开发更加方便。

  1. 封装 我们在src目录下新建一个request文件在其中封装我们的请求,首先新建一个index.js
import axios from 'axios'
function myAxios(axiosConfig) {
  const service = axios.create({
    baseURL: 'https://hd.jxj777.top', // 设置统一的请求前缀
    timeout: 10000 // 设置统一的超时时长
  });
  return service(axiosConfig).then((result) => {
    return result.data
  })
}
复制代码

将我们引入的axios封装进我们封装的基本请求进去,然后进行axios.create然后设置基本的请求路径,和超时时间,最后通过一个函数将返回数据进行解耦,因为数据嵌套过多,所以只需要拿到result.data即可

  1. 组件请求设置 在封装完后暴露出去,然后在同目录下我们可以新建对应组件的js文件,在其中封装对应的请求
    export function newAPI(params, token) { return myAxios({ url: '/manageB/sendnew', method: 'post', data: params, headers: { 'Content-Type': 'multipart/form-data', 'Authorization': 'Bearer ' + token }, }); }

6.调用 在之后就可以在对应的页面进行按需引入调用即可

import { loginAPI } from '@/request/user.js';
复制代码

开发准备

在项目所需配置完后我们就可以搭建基本的项目内容框架,因为是后台管理系统,所以我们需要进行父子路由的配置,以及相关页面,所以在项目正式开发之前,我们一般先在views目录下建立好相关的vue文件,然后配置好路由即可,这样做可以让团队协作更加方便,减少代码冲突等情况。


相关文章
|
10天前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
57 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
8天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
12天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
66 12
|
8天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
29天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
61 8
|
存储 前端开发 JavaScript
为什么我不再用Vue,改用React?
当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择一个合适的框架。当时正逢 jQuery 被淘汰,前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
151 1
|
30天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
77 1
|
3月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
111 58

热门文章

最新文章