SpringBoot+Vue前后端分离管理系统02：前端

前端环境搭建

1、node环境

C:\Windows\system32>node -v
v12.13.0

C:\Windows\system32>npm -v
6.12.0

2、下载vue-admin-template

官网：介绍 | vue-element-admin

项目初始化

1、安装依赖

在刚才下载的vue-admin-template-4.4.0目录下以管理员方式运行cmd

如果之前没有下载过淘宝镜像（下载过可以跳过这一步）：

npm config set registry http://registry.npm.taobao.org/

npm install

2、运行测试

npm run dev

然后会弹出以下界面：

3、修改配置

①vue.config.js

第16行：const port = 8888        //端口号
第30行：lintOnSave: false        //是否启用 eslint验证
第34行：open: false              //是否默认打开浏览器

②src/settings.js第3行和 src/layout/components/Sidebar/Logo.vue第27行

title: '神盾局特工管理系统'

src/utils/get-page-title.js第3行

const title = defaultSettings.title

③src/router/index.js第54行

      meta: { title: '首页', icon: 'dashboard' }

登录页修改

1、在src/views/login/index.vue中，把登录页中所有英文提示全部换成中文的

2、背景

 3、登录用户名取消限制

export function validUsername(str) {
  return true
}

用户下拉菜单修改

前端菜单初始化

 1、在src/view下，创建vue组件

2、路由配置

修改src/router/index.js

{
    path: '/sys',
    component: Layout,
    redirect: '/sys/user',
    name: 'sysManage',
    meta: { title: '系统管理', icon: 'sys' },
    children: [
      {
        path: 'user',
        name: 'user',
        component: () => import('@/views/sys/user'),
        meta: { title: '用户管理', icon: 'userManage' }
      },
      {
        path: 'role',
        name: 'role',
        component: () => import('@/views/sys/role'),
        meta: { title: '角色管理', icon: 'roleManage' }
      }
    ]
  },

  {
    path: '/test',
    component: Layout,
    redirect: '/sys/test1',
    name: 'test',
    meta: { title: '测试模块', icon: 'form' },
    children: [
      {
        path: 'test1',
        name: 'test1',
        component: () => import('@/views/test/test1'),
        meta: { title: '测试1111', icon: 'form' }
      },
      {
        path: 'test2',
        name: 'test2',
        component: () => import('@/views/test/test2'),
        meta: { title: '测试2222', icon: 'form' }
      },
      {
        path: 'test3',
        name: 'test3',
        component: () => import('@/views/test/test3'),
        meta: {title: '测试3333', icon: 'form'}
      }
    ]
  },

 

图标svg文件可上 https://www.iconfont.cn/ 下载 

标签导航栏

src/component/Breadcrumb/index.vue第36行

matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)

登录接口梳理

接口	url	method	Reponse
登录	/user/login	post	{"code":20000,"data":{"token":"admin-token"}}
获取用户信息	/user/info	get	{"code":20000,"data":{"roles":["admin"],"introduction":"I am a super administrator","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif","name":"Super Admin"}}
注销	/user/logout	post	{"code":20000,"data":"success"}

 用户管理页面布局

Element官网：Element - The world's most popular Vue UI framework

1、user.vue页面

<template>
    <div>
      <!--搜索栏-->
      <el-card id="search">
        <el-row>
          <el-col :span="20">
            <el-input v-model="searchModel.username" placeholder="用户名"></el-input>
            <el-input v-model="searchModel.phone" placeholder="电话"></el-input>
            <el-button type="primary" round>查询</el-button>
          </el-col>
          <el-col :span="4" align="right">
            <el-button type="primary" icon="el-icon-plus" circle></el-button>
          </el-col>
        </el-row>
      </el-card>
      <!--结果列表-->
      <el-card>
        <el-table :data="userList" strip style="width: 100%">
          <el-table-column prop="id" label="用户ID" width="200"></el-table-column>
          <el-table-column prop="username" label="用户名" width="300"></el-table-column>
          <el-table-column prop="email" label="邮箱" width="400"></el-table-column>
          <el-table-column prop="phone" label="电话" width="400"></el-table-column>
          <el-table-column label="操作" width="180"></el-table-column>
        </el-table>
      </el-card>
      <!--分页组件-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchModel.pageNo"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="searchModel.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      searchModel: {
        pageNo: 1,
        pageSize: 10
      },
      userList: []
    }
  },
  methods: {
    handleSizeChange(){
    },
    handleCurrentChange(){
    }
  }
}
</script>

<style>
  #search .el-input{
    width: 200px;
    margin-right: 10px;
  }
</style>

2、公共样式设置（App.vue）

<style>
  .app-main{
    padding: 10px;
  }
  .el-card{
    margin-bottom: 10px;
  }
</style>

3、把分页查询样式的英文改成中文（main.js第7行）

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

新增页面布局

①新增对话框

    <!--用户信息编辑对话框-->
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="userForm">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="userForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="登录密码" :label-width="formLabelWidth">
            <el-input type="password" v-model="userForm.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="userForm.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-switch v-model="userForm.status" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
          <el-form-item label="电子邮件" :label-width="formLabelWidth">
            <el-input v-model="userForm.email" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>

②给按钮添加事件

③添加属性和方法

关闭新增页面时清除数据 

①添加关闭页面时事件

②清除数据

表单验证

①添加验证规则

    rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入登录初始密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ]
      }

②绑定

③邮箱添加正则表达式

    var checkEmail = (rule, value, callback) => {
      var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (!reg.test(value)) {
        return callback(new Error('邮箱格式错误'))
      }
      callback()
    }

 

④关闭页面时，清除表单验证

表单提交

①给确定按钮添加事件

②编写saveUser()方法 

    saveUser(){
      //触发表单验证
      this.$refs.userFormRef.validate((valid) => {
        if (valid) {
          //提交请求给后台
          userApi.addUser(this.userForm).then(response =>{
            //触发表单验证
            this.$message({
              message: response.message,
              type: 'success'
            });
            //关闭对话框
            this.dialogFormVisible = false;
            //刷新表格
            this.getUserList();
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

③其中，把请求提交给后台，需要在src/api/userManager.js中，给后端传数据

  addUser(user){
    return request({
      url: '/user/addUser',
      method: 'post',
      data: user
    })
  }

新增用户

1、添加新增和删除按钮

        <template slot-scope="scope">
              <el-button @click="openEditUI(scope.row.id)" type="primary" icon="el-icon-edit" size="mini" circle></el-button>
              <el-button type="danger" icon="el-icon-delete" size="mini" circle></el-button>
        </template>

2、在src/api/userManager.js

 getUserById(id) {
    return request({
      url: `/user/${id}`,
      method: 'get'
    })
  },
  updateUser(user) {
    return request({
      url: '/user/updateUser',
      method: 'put',
      data: user
    })
  },
  saveUser(user) {
    if (user.id == null && user.id == undefined) {
      return this.addUser(user)
    } else {
      return this.updateUser(user)
    }
  }

 3、修改openEditUI()方法

    openEditUI(id){
      if(id == null){
        this.title = '新增用户'
      }else {
        this.title = '修改用户'
        // 根据id查询用户
        userApi.getUserById(id).then(response => {
          this.userForm = response.data
        })
      }
      this.dialogFormVisible = true
    }

4、修改saveUser()方法

   saveUser(){
      // 触发表单验证
      this.$refs.userFormRef.validate((valid) => {
        if (valid) {
          // 提交请求给后台
          userApi.saveUser(this.userForm).then(response =>{
            // 触发表单验证
            this.$message({
              message: response.message,
              type: 'success'
            })
            // 关闭对话框
            this.dialogFormVisible = false
            // 刷新表格
            this.getUserList()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

删除用户

1、在src/api/userManager.js中对接后端接口

  deleteUserById(id) {
    return request({
      url: `/user/${id}`,
      method: 'delete'
    })
  }

2、删除按钮绑定事件

3、编写deleteUser()方法

    deleteUser(user){
      this.$confirm(`您确认删除用户 ${user.username} 吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        userApi.deleteUserById(user.id).then(response => {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.getUserList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }