VUE搭建后台管理界面_vue后台管理页面，经验总结

2401_84182373

于 2024-04-17 13:09:57 发布

阅读量950

点赞数 14

分类专栏： 2024年程序员学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84182373/article/details/137869044

版权

2024年程序员学习专栏收录该内容

63 篇文章 0 订阅

订阅专栏

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新大数据全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注大数据）

正文

{
  "name": "user\_interface",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.0.10",
    "axios": "^1.1.3",
    "element-plus": "^2.2.22",
    "nanoid": "^4.0.0",
    "vue": "^3.2.41",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.2.0",
    "less": "^4.1.3",
    "unplugin-auto-import": "^0.11.4",
    "unplugin-vue-components": "^0.22.9",
    "vite": "^3.2.3"
  }
}

在这里插入图片描述

node_modules 文件夹用来存放所有已安装到项目中的包。require() 导入第三方包时，就是从这个目录中查找并加载包。
package-lock.json 配置文件用来记录 node_modules 目录下的每一个包的下载信息，例如包的名字、版本号、下载地址等。
package.json项目的名称、版本号、描述等、用到了哪些包、开发期间使用的包、部署使用的包
- devDependencies ：开发依赖
- dependencies ：核心依赖
注意：程序员不要手动修改 node_modules 或 package-lock.json 文件中的任何代码，npm 包管理工具会自动维护它们，今后在项目开发中，一定要把 node_modules 文件夹，添加到 .gitignore 忽略文件中

三、koa框架

这次采取KOa框架作为后端，Koa是express同一个团队开发，自由度、灵活度更高，异步请求也更加灵活了。后端主要还是对前端接口返回json数据，前端好进行数据处理。

const Koa = require('koa')
const cors=require('@koa/cors')
const router=require('./router/')
const bodyParser=require('koa-bodyparser')

//静态变量
const PORT = 8080

const app = new Koa()
// 跨域
app.use(bodyParser())
app.use(cors())
app.use(router.routes())

app.listen(PORT, () => {
    console.log(`http://127.0.0.1:${PORT}`);
})

之前看到几个写得比较好的koa框架教程，只不过有点老了，但思想还是通用的。

koa框架

技术博客

四、数据库

user_info

键名	字段	主键	不为空
id	VARCHAR(10)	1	1
username	VARCHAR(45)	0	1
password	VARCHAR(45)	0	1
level	INT	0	1

其中，level三个数值0 1 2分别代表超级管理员、管理员、普通用户

这次，刚开始请求数据库资源的时候，只用了简单的async/await，导致后端发送的一直是前端上一次请求的数据，淦！后来，发现对数据库整体请求要单独封装一个Promise对象，代码如下：

const mysql = require('mysql')

const pool = mysql.createPool({
    host: '127.0.0.1',
    user: 'root',
    password: '123456',
    database:'3d\_resources'
    
})

let query = (sql, values)=> {
    return new Promise((resolve, reject) => {
        pool.getConnection((err, connection) => {
            if (err) {
                reject('数据库连接出错',err)
            } else {
                connection.query(sql, values, (err, results) => {
                    if (err) {
                        reject('数据库语句出错',err)
                    } else {
                        resolve(results)
                    }
                    connection.release()
                })
            }
        })
    })
}

module.exports=query

五、路由

vue3的路由使用和vue2已经完全不一样了，vue3使用起来更加自由，用到什么功能就导入对应的函数，但有时候写代码也下不去手。下面，主要讲解一下路由的基本使用。首先，创建router文件夹，统一管理路由。

import { createRouter, createWebHashHistory } from 'vue-router'

const routes = [
    {
        path: '/',
        redirect:'/login'
    },
    {
        path: '/login',
        name:'login',
        component:()=>import('../views/Login.vue')
    },
    {
        path: '/register',
        component:()=>import('../views/Register.vue')
    },
    {
        path: '/layout',
        component:()=>import('../views/Layout/Layout.vue'),
        children:[
            {
                path: '/layout/home0',
                name:'home0',
                component:()=>import('../views/Layout/Home0.vue'),
            },
            {
                path: '/layout/home1',
                name:'home1',
                component:()=>import('../views/Layout/Home1.vue'),
            },
            {
                path: '/layout/home2',
                name:'home2',
                component:()=>import('../views/Layout/Home2.vue'),
            },]
    }
]

const router = createRouter({
    history:createWebHashHistory(),
    routes,
   
})
export default router

createWebHashHistory()是路径问题，就是访问的时候带有/#/这个符号。Vue-Router有两种模式：hash模式和history模式。默认的路由模式是hash模式。

对于页面路由跳转，使用，传参啥的，使用 useRouter ,useRoute两个生成参数，不使用this了。

推荐文章：vue3中关于路由hash与History的设置

路由关系：

登录
注册
展示
- 超级管理员界面
- 管理员界面
- 用户界面

其中，登录界面可以跳转到注册界面，注册完成跳转到登录界面。登录并且后端数据库验证通过，根据用户的身份进入不同的展示界面。

六、前端界面

6.1 登录界面

<template>
    <el-form :model="loginForm" class="login-form" ref="form">
        <!-- 账户 -->
        <el-form-item label="账号" prop="username" :rules="[{ required: true, message: '账号不能为空', trigger: 'blur' }]">
            <el-input v-model=loginForm.username />
        </el-form-item>

        <!-- 密码 -->
        <el-form-item label="密码" prop="password" :rules="[{ required: true, message: '密码不能为空', trigger: 'blur' }]">
            <el-input v-model="loginForm.password" type="password" />
        </el-form-item>

        <el-form-item class="last">
            <el-button type="primary" @click="checkInfo">登录</el-button>
            <el-button type="success" @click="enterRegister">进入注册</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import { ref, reactive,getCurrentInstance,onMounted } from 'vue'
import { useRouter ,useRoute} from 'vue-router'

import axios from 'axios'

const {proxy}=getCurrentInstance()

const loginForm = reactive({
    id: '', username: '', password: '',level:2
})

const router=useRouter()
const route=useRoute()

const request = axios.create({
    baseURL:'http://127.0.0.1:8080'
})



//账号验证
const checkInfo =  () => {
    //服务端验证账号密码
    proxy.$refs.form.validate(async (valid,fields) => {
        if (valid) {
            let userData={}
            let res= await request.post('/user/login', { username: loginForm.username, password: loginForm.password })
            if (!res.data.data.length) {
                alert('用户名或者密码错误！')
            } else {
                const username=res.data.data[0].username
                const level = res.data.data[0].level
                router.push({ name:`home${level}`,query:{username}})
            }
        }
        else {
            alert('数据不合法！')
        }
    })

}

//账号注册
const enterRegister = async () => {
    router.push({path:'/register'})
}


</script>

<style lang="less" scoped>
.login-form{
    width: 250px;
    margin: 200px auto;
    
    :deep(.el-form-item__content)  {
        justify-content: space-between;
    }
}
</style>

本次对利用element-plus快速搭建前端表单样式，对于非空也进行一点小小的判断。这里路由传参是，注意params只能使用name切换路由，而且可能是由于版本问题，params请求参数一直未被收集到。登录成功，根据level进入不同的管理界面。

6.2 注册界面

<template>
    <el-form :model="registerForm" class="register-form" ref="form" >
        <!-- 账户 -->
        <el-form-item label="账号" prop="username" :rules="[{ required: true, message: '账号不能为空', trigger: 'blur' }]">
            <el-input v-model=registerForm.username  />


**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注大数据）**
![img](https://img-blog.csdnimg.cn/img_convert/5ba96df75ab1d1679d63ef0621b76f94.png)

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

 message: '账号不能为空', trigger: 'blur' }]">
            <el-input v-model=registerForm.username  />


**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注大数据）**
[外链图片转存中...(img-yZdVWEan-1713330526062)]

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

2401_84182373

关注

14
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
VUE搭建后台管理界面_vue后台管理页面，经验总结

其中，登录界面可以跳转到注册界面，注册完成跳转到登录界面。登录并且后端数据库验证通过，根据用户的身份进入不同的展示界面。同一个团队开发，自由度、灵活度更高，异步请求也更加灵活了。后端主要还是对前端接口返回json数据，前端好进行数据处理。，导致后端发送的一直是前端上一次请求的数据，淦！下面，主要讲解一下路由的基本使用。这次，刚开始请求数据库资源的时候，只用了简单的。框架教程，只不过有点老了，但思想还是通用的。对于页面路由跳转，使用，传参啥的，使用。切换路由，而且可能是由于版本问题，文件夹，统一管理路由。
复制链接

扫一扫