Vue_iviewUI+jsp的使用

最新推荐文章于 2023-09-30 13:45:26 发布

changYaoHui

最新推荐文章于 2023-09-30 13:45:26 发布

阅读量411

点赞数 1

分类专栏： springboot

本文链接：https://blog.csdn.net/m0_48636953/article/details/115911309

版权

springboot 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

介绍：iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

参考文档：

https://www.iviewui.com/docs/update4 官网是最好的资料！

背景：基于springboot、jsp操作。

导入依赖

		<!--vue-->
        <dependency>
            <groupId>org.webjars.npm</groupId>
            <artifactId>vue</artifactId>
            <version>2.6.11</version>
        </dependency>
        <!--iview-->
        <dependency>
            <groupId>org.webjars.npm</groupId>
            <artifactId>iview</artifactId>
            <version>3.5.0</version>
        </dependency>
        <!--axios-->
        <dependency>
            <groupId>org.webjars.npm</groupId>
            <artifactId>axios</artifactId>
            <version>0.19.2</version>
        </dependency>

在页面引入css和js

<link rel="stylesheet" href="webjars/iview/3.5.0/dist/styles/iview.css">
<script src="webjars/vue/2.6.11/dist/vue.js"></script>
<script src="webjars/iview/3.5.0/dist/iview.js"></script>
<script src="webjars/axios/0.19.2/dist/axios.js"></script>

例举几个常见的操作吧

i-table-数据展示

 <div id="roelRoot">
        <i-table :columns="columns" :data="data" border stripe>
            <template slot-scope="{row,index}" slot="action">
              
            </template>
        </i-table>
    </div>

<script>
    new Vue({
        el:"#roelRoot",
        data:{
            columns:[
                {title:"角色id",key:"id"},
                {title:"角色编码",key:"roleCode"},
                {title:"角色名字",key:"roleName"},
                {title:"角色创建",key:"creationDate"},
                {title:"角色操作",slot:"action"}
            ],
            data:[],
        },
        mounted(){
            this.getRoleList();
        },
        methods:{
            getRoleList(){
                axios.get("/sys/role/list").then( //发送请求 获取数据
                    ({data})=>{
                        // console.log(data);
                        this.data=data.result;
                    }  )
            }
        }
    })
</script>

mounted() 自理解，通常是为 metheds 函数提前定义（类似提前声明变量进入页面内容全部渲染完成后自动引函数）

Modal-form提交

	 <i-card>
            <i-button type="info" @click="add()" >添加角色</i-button>
      </i-card>
	
 	<Modal v-model="RoleAdd" title="添加角色" @on-ok="doadd"
            @on-cancel="cancel">
            <i-Form  :label-width="80">
               <Form-Item label="用户编码：">
                   <i-Input v-model="role.roleCode" placeholder="用户编码"></i-Input>
               </Form-Item>
               <Form-Item label="用户名：">
                   <i-Input v-model="role.roleName" placeholder="用户名"></i-Input>
               </Form-Item>
           </i-Form>
        </Modal>

 <script>
        new Vue({
            el:"#roelRoot",
            data:{
                 role:{},//这里也必须写上 对应的是 model里面input的  双项绑定
                RoleAdd:false //注意 使用model的时候 需要设为false关闭状态
            },
     
            methods:{
				add(){
                        this.RoleAdd=true;//当添加按钮点击后 把model框设为true 为开启状态
           		 	},
                
               doadd(){ //model点击 确定之后   这里的doadd  和model里的@on-ok="doadd"保持一致
                
                axios.post("/sys/role/add",this.role).then( //开始发送添加请求 then里回调
                    ({data})=>{
                       iview.Message.success({content:"角色添加成功"});//提示框
                        this.getRoleList();
                  			  }
               			 )
           		 },
            }
     
        })
 </script>

Model-修改回显

这里是对table里的数据做修改操作

 	<i-table :columns="columns" :data="data" border stripe>
            <template slot-scope="{row,index}" slot="action">
                <i-Button type="info" size="large" @click="roleUpd(row)" >修改</i-Button>
                <i-Button type="error" @click="Del(row,index)" size="large">删除</i-Button>
            </template>
        </i-table>		
	
	<Modal v-model="RoleUpd" title="修改角色" @on-ok="doupd"
               @on-cancel="cancel">
            <i-Form  :label-width="80">
                <Form-Item label="用户编码：">
                    <i-Input v-model="role.roleCode" placeholder="用户编码"></i-Input>
                </Form-Item>
                <Form-Item label="用户名：">
                    <i-Input v-model="role.roleName" placeholder="用户名"></i-Input>
                </Form-Item>
            </i-Form>
        </Modal>

<script>
    new Vue({
        el:"#roelRoot",
        data:{
            columns:[
                {title:"角色id",key:"id"},
                {title:"角色编码",key:"roleCode"},
                {title:"角色名字",key:"roleName"},
                {title:"角色创建",key:"creationDate"},
                {title:"角色操作",slot:"action"} // template  >slot="action" 保持一致
            ],
            data:[],
            RoleAdd:false,
            RoleUpd:false,//同样是 设置 默认关闭
            role:{}
        },
        mounted(){
            this.getRoleList();
        },
        methods:{
            getRoleList(){
                axios.get("/sys/role/list").then(
                    ({data})=>{
                        // console.log(data);
                        this.data=data.result;
                    }  )
            },
            
            roleUpd(row){ //roleUpd(row) 传入了行数据
                this.role=row;//row的数据 给RoleUpd模态框里的input 作为回显操作
              this.RoleUpd=true;//展示model
            },
            doupd(){
              // alert("点击了修改啊")
                axios.post("sys/role/update",this.role).then(
                    ({data})=>{
                        iView.Message.success({content:"角色修改成功"})//成功提示
                        this.getRoleList();//显示数据
                    }
                )
            },
           
        }
    })
</script>

Model-删除数据

	 <i-table :columns="columns" :data="data" border stripe>
            <template slot-scope="{row,index}" slot="action">
                <i-Button type="error" @click="Del(row,index)" size="large">删除</i-Button>
            </template>
        </i-table>

<script>
    new Vue({
        el:"#roelRoot",
        data:{
            columns:[
                {title:"角色id",key:"id"},
                {title:"角色编码",key:"roleCode"},
                {title:"角色名字",key:"roleName"},
                {title:"角色创建",key:"creationDate"},
                {title:"角色操作",slot:"action"}
            ],
            data:[],
            role:{}
        },

        mounted(){
            this.getRoleList();
        },

        methods:{
            getRoleList(){
                axios.get("/sys/role/list").then(
                    ({data})=>{
                        // console.log(data);
                        this.data=data.result;
                    }  )
            },
            Del(row,index){//传入一行数据  一行数据 就等于是一个java对象
               var _this=this;
                iview.Modal.confirm({ //这里使用了model一个提示框操作 
                    title:"删除角色",
                    content:"删除后就没了，请谨慎操作",
                    onOk(){
                        axios.get("sys/role/del?id="+row.id).then(
                            ({data})=>{
                                iview.Message.success({content:"角色删除成功"});
                               _this.getRoleList();
                            }
                        )
                    },
                    onCancel(){

                    }
                })
            },
         
            cancel(){

            }
        }
    })
</script>

把以上操作拼接后展示一下完整的

 <div id="roelRoot">
        <i-card>
            <i-button type="info" @click="add()" >添加角色</i-button>

            <i-button type="error">修改角色</i-button>
        </i-card>

        <i-table :columns="columns" :data="data" border stripe>
            <template slot-scope="{row,index}" slot="action">
                <i-Button type="info" size="large" @click="roleUpd(row)" >修改</i-Button>
                <i-Button type="error" @click="Del(row,index)" size="large">删除</i-Button>
            </template>
        </i-table>

        <Modal v-model="RoleAdd" title="添加角色" @on-ok="doadd"
            @on-cancel="cancel">
            <i-Form  :label-width="80">
               <Form-Item label="用户编码：">
                   <i-Input v-model="role.roleCode" placeholder="用户编码"></i-Input>
               </Form-Item>
               <Form-Item label="用户名：">
                   <i-Input v-model="role.roleName" placeholder="用户名"></i-Input>
               </Form-Item>
           </i-Form>
        </Modal>

        <Modal v-model="RoleUpd" title="修改角色" @on-ok="doupd"
               @on-cancel="cancel">
            <i-Form  :label-width="80">
                <Form-Item label="用户编码：">
                    <i-Input v-model="role.roleCode" placeholder="用户编码"></i-Input>
                </Form-Item>
                <Form-Item label="用户名：">
                    <i-Input v-model="role.roleName" placeholder="用户名"></i-Input>
                </Form-Item>
            </i-Form>
        </Modal>
    </div>

<script>
    new Vue({
        el:"#roelRoot",
        data:{
            columns:[
                {title:"角色id",key:"id"},
                {title:"角色编码",key:"roleCode"},
                {title:"角色名字",key:"roleName"},
                {title:"角色创建",key:"creationDate"},
                {title:"角色操作",slot:"action"}
            ],
            data:[],
            RoleAdd:false,
            RoleUpd:false,
            role:{}
        },

        mounted(){
            this.getRoleList();
        },


        methods:{
            getRoleList(){
                axios.get("/sys/role/list").then(
                    ({data})=>{
                        // console.log(data);
                        this.data=data.result;
                    }  )
            },

            add(){
                this.RoleAdd=true;
                // alert("tan")
            },
            doadd(){
                //开始发送添加请求
                axios.post("/sys/role/add",this.role).then(
                    ({data})=>{
                       iview.Message.success({content:"角色添加成功"});
                        this.getRoleList();
                    }
                )
            },
            Del(row,index){
               var _this=this;
                iview.Modal.confirm({
                    title:"删除角色",
                    content:"删除后就没了，请谨慎操作",
                    onOk(){
                        axios.get("sys/role/del?id="+row.id).then(
                            ({data})=>{
                                iview.Message.success({content:"角色删除成功"});
                               _this.getRoleList();

                            }
                        )
                    },
                    onCancel(){

                    }
                })
            },
            roleUpd(row){
                this.role=row;//回显操作
              this.RoleUpd=true;
            },
            doupd(){
              // alert("点击了修改啊")
                axios.post("sys/role/update",this.role).then(
                    ({data})=>{
                        iView.Message.success({content:"角色修改成功"})
                        this.getRoleList();
                    }
                )
            },
            cancel(){

            }
        }

    })
</script>

controller

package com.HsL.controller;

import com.HsL.pojo.Role;
import com.HsL.service.RoleService;
import com.HsL.vo.ResultVo;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.time.LocalDateTime;

@RestController
@RequestMapping("/sys/role")
public class RoleController {

    @Resource
    private RoleService roleService;

//    @GetMapping("/list")
//    public Object getRoleList(){
//        return roleService.roleList();
//    }

    @GetMapping("/list")
    public ResultVo getRoleList(){

        return ResultVo.sucess(roleService.roleList());
    }

    @PostMapping("/add")
    public ResultVo RoleAdd(@RequestBody Role role){//这里参数需要使用@RequestBody 注解 因为是JSON格式
        try {
            role.setCreationDate(LocalDateTime.now());
            role.setCreatedBy(1);
            System.out.println("展示");
            roleService.addRole(role);
//            log.info("角色添加成功!!!");
            return ResultVo.sucess("添加角色成功");
        } catch (Exception e) {
            e.printStackTrace();
//            log.error("角色添加失败");
            return ResultVo.fail("添加角色失败",e);
        }
    }

//    @PostMapping("/add")
//    public void RoleAdd(@RequestBody Role role){
//        role.setCreationDate(LocalDateTime.now());
//        role.setCreatedBy(1);
//        System.out.println("展示");
//        roleService.addRole(role);
//    }

    @GetMapping("/del")
    public ResultVo del(String id){

        try {
            roleService.delRole(Integer.parseInt(id));
            return ResultVo.sucess("删除角色成功");
        } catch (NumberFormatException e) {
            e.printStackTrace();
            return ResultVo.fail("删除角色失败",e);
        }

    }

    @PostMapping("/update")
    public ResultVo roleUpd(@RequestBody Role role){
        try {
            System.out.println("=========================进入修改");
            role.setModifyDate(LocalDateTime.now());
            role.setModifyBy(1);
            roleService.updataRole(role);
            return ResultVo.sucess("修改角色成功");
        } catch (NumberFormatException e) {
            e.printStackTrace();
            return ResultVo.fail("修改角色失败",e);
        }
        
    }
}

里面controller 使用了ResultVo进行了封装操作有疑问的话请参考其它文章。

changYaoHui

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue_iviewUI+jsp的使用

介绍：iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。参考文档：https://www.iviewui.com/docs/update4 官网是最好的资料！背景：基于springboot、jsp操作。导入依赖  <dependency> <groupId>org.webjars.npm</groupId> ..
复制链接

扫一扫