增删改查角色列表

实现效果图

image.png

步骤框架

1.src-views下：建立文件夹（Directory）和在其文件夹下建立.vue文件（vueComponent）
2.在.vue文件下写前端页面的代码
3.在src-router-index.js文件下配置vue文件的路由，这样才能访问到这个页面。
4.在src-api文件下建立.js文件（JavaScript File）用来配后端接口。

(1)工具栏

<template>
  <div class="div_container" style="margin:15px">
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px">
     <el-form :inline="true" :model="filters">  <!--inline内联作用不重要--!>
       <el-form-item>
         <el-input v-model="filters.roleId" placeholder="角色编号"></el-input>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" v-on:click="getRole">查询</el-button>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" v-on:click="addRole">新增</el-button>
       </el-form-item>
     </el-form>
   </el-col>
  </div>
</template>

data(){
return{
filters:{
roleName:"",
         }
  },
methods:{
getRole() {
},
addRole(){
}

}
}

（2）表字段的建立（表头）

<el-table :data="roles"  style="width: 100%;">
      <el-table-column type="selection" width="40">
      </el-table-column>

      <el-table-column type="index" width="60">
      </el-table-column>

      <el-table-column type="id"  label="编号"  width="80">
      </el-table-column>

      <el-table-column prop="name" label="角色名" width="100" >
      </el-table-column>

      <el-table-column prop="roleDescription" label="角色说明" >
      </el-table-column>

      <el-table-column prop="permissionId" label="允许权限" >
      </el-table-column>

      <el-table-column prop="adminCount" label="用户数量" >
      </el-table-column>

      <el-table-column prop="status" label="角色状态" >
      </el-table-column>

      <el-table-column prop="sort" label="类别" >
      </el-table-column>

      <el-table-column prop="creatTime" label="创建时间" >
      </el-table-column>

     <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
          <el-button  type="danger" size="small" @click="handleDel(scope.$index,scope.row)">删除</el-button>
        </template>

      </el-table-column>
    </el-table>

data{
return{
roles:[]
}；
}
methods{
 handleEdit: function (index, row) {
}
 handleDel: function (index, row) {
}
}

解决一下自己的疑惑：

form和table的区别

html中form表示一个表单,用来把一系列的控件包围起来,然后再统一发送这些数据到目标,比如最常见的注册,你说需要填写的资料,都是被封装在form里的,填写完毕后,提交form内的内容,如果不在form内则不会提交。
而table则是用来布局的，当你填写资料的时候，让页面所提供的文本框,文字,按钮之类的都摆放的非常整齐。一行一行的以表格的形式展示内容，table仅仅只是用来布局用的,form则是用来封装数据的。
通常是一个form里嵌套table，达到封装数据和排版问题。

button的type有submit button reset 除此之外还有颜色的按钮
image.png

对应的button颜色

image.png

1.实现增加的功能

  • 在工具栏添加了新增按钮并绑定函数addRole（用来显示增添页面的）

 <el-button type="primary" v-on:click="addRole">新增</el-button>

  • 想要实现的增添页面

image.png

  • 写增加页面（由于编辑和增加页面一样 要考虑公用问题）

<el-dialog :title="textMap[dialogStatus]"
               :visible.sync="dialogFormVisible"
               :close-on-click-modal="false"
               width="50% center">
      <el-form :model="editForm" label-width="90px" :rules="editFormRules" ref="editForm">
        <el-form-item label="角色名" prop="name">
          <el-input v-model="editForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色说明" prop="roleDescription">
          <el-input v-model="editForm.roleDescription" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="允许权限" prop="permissionId">
          <el-input v-model="editForm.permissionId" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户数量" prop="adminCount">
          <el-input v-model="editForm.adminCount" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="类别" prop="sort">
          <el-input v-model="editForm.sort" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="editForm.enabled" size="mini">
            <el-radio label="1" border>启用</el-radio>
            <el-radio label="0" border>不启用</el-radio>
          </el-radio-group>
        </el-form-item>
        <div  style="text-align: center">
          <el-button @click.native="dialogFormVisible=false">取消</el-button>
          <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">添加</el-button>
          <el-button v-else type="primary" @click="updateData">修改</el-button>
        </div>
      </el-form>

 // 类表规则
        editFormRules:{
          name: [{ required: true, message: "角色名" , trigger: "blur" }],
          roleDescription: [{ required: true, message: "角色说明", trigger: "blur" }],
          permissionId: [{ required: true, message: "允许权限id", trigger: "blur" }],
          adminCount: [{ required: true, message: "用户数量", trigger: "blur" }],
          status: [{ required: true, message: "状态", trigger: "blur" }],
          sort:[{ required: true, message: "类别", trigger: "blur" }]

        },

data(){
      return{
        //编辑页面
        textMap: {
        //  update: "Edit",
          create: "Create"
        },
        dialogStatus: "",
        dialogFormVisible: false,
        editForm:{
          id:'',
          name:'',
          roleDescription:'',
          permissionId:'',
          adminCount:'',
          status:'0',
          sort:'',
          createTime: ''
        }
      };
    },
!!! :model 和 v-model 区别

1:v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值="表达式"

2:v-bind用于绑定属性和数据 ，其缩写为“ : ” 也就是v-bind:id === :id

3:v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。

  • 写addRoel函数

  
methods(){
       addRole: function () {
        this.dialogStatus = "create";//设置为新增create界面
        this.dialogFormVisible = true;//设置对话框可见
        this.editForm = {//初始化新增页面的各项数据
            name: "",
            roleDescription: "",
            permissionId: "",
            adminCount: "",
            sort: "",
            status: '1'
        }
      }
}

  • 写createData函数 确定添加后增加数据到数据库的

createData: function () {
        this.$refs.editForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {})
              .then(() => {
                this.editForm.id = (parseInt(Math.random() * 100)).toString() // mock a id
                let para = Object.assign({}, this.editForm);
                console.log(para);
                createRole(para).then(res => {
                  this.$message({
                    message: "提交成功",
                    type: "success"
                  });
                  this.$refs["editForm"].resetFields();
                  this.dialogFormVisible = false;
                  this.getRoles();
                });
              })
              .catch(e => {
                // 打印一下错误
                console.log(e);
              });
          }
        });
      },

2.实现编辑功能

编辑页面显示功能的按钮建立

 <el-button size="small" @click="handleEdit(scope.$index,cope.row)">编辑</el-button>

编辑页面的建立

由于和新增是一样的就该新增的就行

 data(){
      return{
        //编辑页面
        textMap: {
          update: "Edit",
        //  create: "Create"
        },
        ids :{
          id:""
        },
        dialogStatus: "",
        dialogFormVisible: false,
        roles: [],
        lists: [],
        total: 0,
        page: 1,
        sels: [],

handleEdit(scope.$index,cope.row)函数

 handleEdit: function (index, row) {
        this.dialogStatus = "update";
        this.dialogFormVisible = true;
        this.editForm = Object.assign({}, row);//不太懂套用的 ！！！！害！！！
      }

编辑完成后的确认提交函数updateData

  updateData: function () {
        this.$refs.editForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {})
              .then(() => {
                let para = Object.assign({}, this.editForm);
                console.log(this.editForm)
                updateRole(para).then(res => {//与新增主要区别就是这里的是updateRole
                  this.$message({
                    message: "提交成功",
                    type: "success"
                  });
                  this.$refs["editForm"].resetFields();
                  this.dialogFormVisible = false;
                  this.getRoles();
                });
              })
              .catch(e => {
                // 打印一下错误
                console.log(e);
              });
          }
        });
      },

3.实现删除功能

在操作栏写下删除函数

  <el-table-column label="操作" width="200">
        <template slot-scope="scope">
     
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
     
        </template>
   </el-table-column>

handleDel函数

 handleDel: function (index, row) {
        this.$confirm("确认删除该记录吗?", "提示", {
          type: "warning"
        }).then(() => {
          let para = {ids: row.id};
          alert(1);
          deleteRole(para).then(res => {

            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getRoles();
          });
        })
          .catch(() => {
          });
      },

4.查询功能

借鉴的学长的是查询所有的，可自己要做的是查询的单个的自己蠢到家了 摸了好久。

先看下学长的吧 不是很能看的懂

     getRoles() {
        /*let para = {
            pageSize: this.pageSize,
            name: this.filters.name
        };*/
          // this.listQuery
        fetchList().then(res => {

          this.total = res.data.length;
          this.roles = res.data;
          for (let i = 0; i < res.data.total; i++) {
            this.roles.push(res.data.roles[i]);
          }

        });
      },

我改成根据id查询的

      getRole(){
          if(this.filters.roleId.length == 0){
            this.getRoles();
          }
          else
          {
            let para = {id: this.filters.roleId}
            fetchRoleById(para).then(res => {
              console.log(res.data);
              this.roles = []
              this.roles.push(res.data)
            })
          }
      },

配置路由

{
 path:'/roleList',
 name:'roleList',
 component:() =>import('@/views/roleList/roleList'),
meta: {title: '角色表',icon: 'roleList'}
},

下面是js文件的配接接口的代码

import request from '@/utils/request'
export function fetchList(params) {
  return request({
    url:'/role/list',
    method:'get',
    params:params
  })
}


export function fetchRoleById(params) {
  return request({
    url:'/role_info/select',
    method:'get',
    params:params
  })
}

export function createRole(data) {
  return request({
    url:'/role/create',
    method:'post',
    data:data
  })
}

export function deleteRole(params) {
  return request({
    url:'/role/delete',
    method:'post',
    params:params
  })
}
export function updateRole(data) {
  return request({
    url:'/role/update/'+data.id,
    method:'post',
    data:data
  })
}

!!!url和method都是根据swagger后端写的来填 刚开始自己不清楚 瞎模仿写的一团糟 。。。。

image.png

还有data和params是有区别的

create和update这种要传给后端json的，用data，delete还有getlist这种一般用param。
params是添加到url的请求字符串中的，一般用于get请求。
data是添加到请求体（body）中的， 一般用于post请求。

第一次的静态页面制作就到这里啦！以后再来看看有什么要改的 现在还迷迷糊糊不会的东西太多了

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
禁止转载，如需转载请通过简信或评论联系作者。
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,163评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,301评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,089评论 0赞 352
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,093评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,110评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,079评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,005评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,840评论 0赞 273
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,278评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,497评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,394评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,980评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,628评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,649评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,548评论 2赞 352