SpringBoot+Vue实现简单用户管理平台第二篇（前端设计，接口对接）

• ?? 注重版权，转载请注明原作者和原文链接
• ?? 作者：
• ?? 主页：https://blog.csdn.net/weixin_47971206/article/details/121368075?spm=1001.2014.3001.5502
• ?? 进来的小伙伴点点赞呀

本案例第一篇后端教学地址：https://blog.csdn.net/weixin_47971206/article/details/124741442?spm=1001.2014.3001.5501

demo地址预览：http://xiaoyuan-boke.com/user-manager

?? 花了几个小时做了一个SpringBoot+Vue的简单用户管理demo项目，适合新手教程，项目已在Gitee上开源，Gitee开源地址：https://gitee.com/yuandewei/Yuan-SpringBoot/tree/master

Gitee上开源的代码跟本次的案例的代码有些区别，本次案例稍微改了一点点，不过不影响Gitee上的项目运行，大致效果如下，功能可以访问demo地址测试哦

话不多说，下面跟着我一步一步来吧~

前言

说实话，我个人觉得像这种的简单的crud项目前端比后端要麻烦多，也做的比后端慢

开发前准备

• VSCode开发工具，很方便，推荐使用，你用其他前端编译器也没有问题（我之前出过安装教程）
• Vue环境的搭建，一个 node.js（我之前也出过安装教程，可以翻翻），一个 vue-cli 脚手架（网上很多教程），只要 node.js 成功安装配置没问题，脚手架安装很快的
• 打开我们的 element ui 网站，地址：https://element.eleme.cn/#/zh-CN/component/installation
• 打开 axios 官方网站，地址：http://www.axios-js.com/docs/

?? 脚手架创建项目，安装依赖

提一嘴，VSCode记得要安装Vue环境的插件，这个百度也有很多教程，就不介绍啦，还有就是要有一定Vue基础知识，至少了解vue的语法

创建项目

首先以管理员模式打开我们的 VSCode 工具，选择文件夹位置（待会创建项目的地方）

在下面终端输命令 vue create user-manager-vue 后面那个是项目名称，下面没有终端控制台的可以点击上面新建终端

选择 default 默认配置就好，我这里创建过做过配置，有自己单独的配置选项，你们第一次创建的选择默认的就行，然后等待创建完成

如图，一个脚手架的项目就创建好啦

我们什么都不做，先运行看看默认项目的样子吧，输入命令 cd user-manager-vue 跳转到项目目录下，接着输入 npm run serve 启动项目

显示如图，则启动成功，打开网站看一下

效果如图，这是脚手架创建项目的默认模板

安装依赖

回到编译器，ctrl c 结束运行，输入命令 npm i element-ui -S 安装element ui，接着输入命令 npm install axios 安装axios，用于向后端发送请求

?? 初始配置，封装axios请求

修改main.js，加上下面五行代码，全局使用

import ElementUI from 'element-ui';
import axios from 'axios'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.prototype.$axios = axios

封装请求

在 src 目录下新建 utils 文件夹，文件夹下新建 request.js 文件，代码内容我已经写有注释

import axios from 'axios'
import { Message } from 'element-ui'

// 创建axios实例
const service = axios.create({
  baseURL: "http://localhost:8081", // 后端接口地址前缀（端口和后端配置文件一致）
  timeout: 5000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
    // 请求头携带我们的权限码，和后端一致就行
    config.headers['Authentication'] = "dwagfhwhgiawpfwabifpjwaidjwaidwiafihwigfhwaigwhaipgwaihiwahifhwdefef"
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {
    /**
     * code为非200是抛错 可结合自己业务进行修改
     */
    const res = response.data
    if (res.code !== 200) {
      Message({
        message: res.message,
        type: 'error',
        duration: 5 * 1000
      })
      /**
       * 可以自定义返回状态码，处理不同的结果
       */
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

修改app.vue

修改成下面这样

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

修改views文件夹

删除原来的 Home.vue 和 About.vue ，新建 index.vue，作为左侧导航栏组件（看demo地址效果）

再分别新建三个页面 userList.vue、addUser、userInfoList.vue，三个页面分别对应左侧导航栏展开的三个页面

接着在 index.vue 添加代码，

<template>
  <div class="app">
    <el-container style="height: 700px; border: 1px solid #eee">
      <!-- 左侧导航栏 -->
        <el-aside width="200px"
                  style="background-color: rgb(238, 241, 246)">
            <el-menu router="router" :default-openeds="['0']">
                <el-submenu v-for="(item,index) in $router.options.routes"
                            :key="index"
                            :index="String(index)">
                    <template slot="title"><i :class="item.class"></i>{
  {item.name}}</template>
                    <el-menu-item v-for="(item1,index1) in item.children"
                                  :key="String(index1)"
                                  :index="item1.path"
                                  v-if="!(item1.hidden)"
                                  :class="$router.path==item1.path?'is-active':''">{
  {item1.name}}</el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>

        <!-- 顶部右侧工具栏 -->
        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting"
                       style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>功能一</el-dropdown-item>
                        <el-dropdown-item>功能二</el-dropdown-item>
                        <el-dropdown-item>功能三</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>管理员</span>
            </el-header>

            <!-- 中间区域内容页面的切换 -->
            <el-main>
                <router-view />
            </el-main>
        </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
}
</script>

样式参考 element ui 的布局组件，下面有详细的属性说明哦

接着在另外三个页面先随便写点东西，输入<vue 会自动弹出模板



</