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文件,然后配置好路由即可,这样做可以让团队协作更加方便,减少代码冲突等情况。


目录
打赏
0
0
4
0
69
分享
相关文章
|
18天前
|
vue使用iconfont图标
vue使用iconfont图标
103 1
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1067 0
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
55 1
vue学习第一章
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
51 1
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
45 1
vue学习第四章
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
38 1
vue学习第7章(循环)

相关实验场景

更多
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等