Vue.js 角色权限配置页面 - 基于后端接口实现

<div id="app">
    <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col">角色名称</th>
            <th scope="col">权限名称</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item,i in list">
            <th scope="row">{{item.rname}}</th>
            <td>
                <span v-for="p in item.permissionList">
                    {{'【'+p.pname+'】'}}
                </span>
            </td>
            <td>
                <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                    <button type="button" class="btn btn-secondary" data-toggle="modal"
                            data-target="#exampleModal" data-whatever="@mdo">配置权限
                    </button>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog"
         aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">配置权限</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label for="recipient-name" class="col-form-label">角色名称:</label>
                            <input v-model="formData.ename" class="form-control form-control-lg" type="text">
                            <label for="recipient-name" class="col-form-label">权限名称:</label>
                            <select v-model="formData.rid" class="custom-select custom-select-lg mb-3">
                                <option :value="items.rid" v-for="items in roleList">{{items.rname}}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="cancel" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="modifyRoleByEid">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!--    <div style="float: right">-->
    <!--       @click="modifyRoleByEid(item.eid)"   <ul class="pagination">-->
    <!--            <li class="page-item"><a class="page-link" href="#" @click="pre()">上页</a></li>-->
    <!--            <li class="page-item" v-for="i in pi.pages">-->
    <!--                <a class="page-link" href="#" @click="findProductsByPage(i)">{{i}}</a>-->
    <!--            </li>-->
    <!--            <li class="page-item"><a class="page-link" href="#" @click="next()">下页</a></li>-->
    <!--        </ul>-->
    <!--    </div>-->
    <!--    ###########################################################-->
</div>
<script src="/js/my/vue.min.js"></script>
<script src="/js/my/axios.min.js"></script>
<script src="/js/my/jquery-3.3.1.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            list: [],
            roleList: [],
            formData:{}
        },
        mounted() {
            this.findAllRole();
        },
        methods: {
            modifyRoleByEid(){
                axios.post("/role/saveRoleAndPermission",this.formData).then(resp=>{
                    $("#cancel").click();
                    this.findAllRole();
                })
            },
            findAllRole(item) {
                this.formData = item;
                axios.get("/role/findAllRole").then(resp => {
                    this.perList=resp.data;
                })
            },
            findAllRole() {
                axios.get("/role/findAllRole").then(resp => {
                    this.list=resp.data;
                })
            }
        }
    })
</script>
<p>该页面使用 Vue.js 框架和 Axios 库，结合后端接口实现角色权限配置功能。</p>
<p><strong>页面功能:</strong></p>
<ol>
<li><strong>展示角色列表:</strong> 页面加载时，调用 findAllRole() 方法获取角色列表并渲染到表格中。</li>
<li><strong>配置权限:</strong> 点击 “配置权限” 按钮，弹出模态框，允许选择角色和相应的权限。</li>
<li><strong>保存权限:</strong> 在模态框中填写角色名称和权限名称，点击提交按钮，使用 Axios 向后端发送请求保存角色权限信息。</li>
<li><strong>重新加载:</strong> 保存成功后，关闭模态框并重新获取角色列表，更新页面。</li>
</ol>
<p><strong>代码说明:</strong></p>
<ul>
<li>使用 v-for 指令遍历角色列表和权限列表，渲染表格内容。</li>
<li>使用 v-model 指令实现表单输入框和选择框的双向数据绑定。</li>
<li>使用 Axios 库进行异步请求，与后端接口交互。</li>
<li>使用 jQuery 库操作 DOM 元素，例如点击事件和模态框操作。</li>
</ul>
<p><strong>技术栈:</strong></p>
<ul>
<li>Vue.js</li>
<li>Axios</li>
<li>jQuery</li>
</ul>