springboot++thymeleaf+shiro+iview实现用户登录以及基本的增删改查（二）

最新推荐文章于 2022-08-11 16:53:53 发布

yxy6543210

最新推荐文章于 2022-08-11 16:53:53 发布

阅读量636

点赞数

文章标签： java

本文链接：https://blog.csdn.net/yxy6543210/article/details/106838666

版权

（二）springboot+shiro+iview实现用户登录以及基本的增删改查

前言

前言

上一篇文章我们已经把基本的框架搭好，这一篇文章重点来说说业务代码的实现，大家一起进步！

后台管理页面

index.html

在非template模式下，需要使用vue.js的原生写法如下图所示，具体参考vue.js官网vue.js.
在这里插入图片描述
这里需要说明一点的是，因为一开始没经验所以没乱清iview1.x和2.x以上的版本，这里的布局Menu使用的是1.x里的布局，其余的页面使用的组件均为2.x以上的组件，css和js的引用文件也是2.x以上的但是这不影响最后的效果好像也没有出现什么不兼容的报错（我也不知道原理），iview1.x中的布局样式图如下
在这里插入图片描述
主体的内容是直接嵌套了一个标签，在iframe中进行页面的跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
    <!-- 引入Vue -->
    <script src="//v1.vuejs.org/js/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="//unpkg.com/iview@1.0.1/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
    <div>
        <div class="layout">
            <Row type="flex" style="height: 1000px">
                <i-col span="5" class="layout-menu-left">
                    <Menu active-key="1-2" theme="dark" width="auto" :open-keys="['1']">
                        <div class="layout-logo-left">xx酒店管理后台系统</div>
                        <Submenu key="1">
                            <div slot="title">
                                <Icon type="ios-navigate"></Icon>
                                酒店管理
                            </div>
                            <Menu-item key="1-1">我的酒店</Menu-item>
                        </Submenu>
                        <Submenu key="2">
                            <div slot="title">
                                <Icon type="ios-keypad"></Icon>
                                仪表盘
                            </div>
                            <Menu-item key="2-1" >工作台</Menu-item>
                        </Submenu>
                        <Submenu key="3">
                            <div slot="title">
                                <Icon type="ios-analytics"></Icon>
                                个人设置
                            </div>
                            <Menu-item key="3-1">昵称设置</Menu-item>
                        </Submenu>
                        <Submenu key="4">
                            <div slot="title">
                                <Icon type="ios-analytics"></Icon>
                                订单管理
                            </div>
                            <Menu-item key="4-1">订单设置</Menu-item>
                        </Submenu>
                        <Submenu key="5">
                            <div slot="title">
                                <Icon type="ios-analytics"></Icon>
                                账户管理
                            </div>
                            <Menu-item key="5-1">账号信息</Menu-item>
                        </Submenu>
                    </Menu>
                </i-col>
                <i-col span="19">
                    <div class="layout-header">欢迎来到xx酒店管理中心</div>
                    <div class="layout-breadcrumb">
                        <Breadcrumb>
                            <Breadcrumb-item href="#">首页</Breadcrumb-item>
                            <Breadcrumb-item href="#">应用中心</Breadcrumb-item>
                        </Breadcrumb>
                    </div>
                    <div class="layout-content">               
                        <iframe 
                        src="/hotel" style="height: 1000px;width: 100%" frameborder="0">
                        </iframe>
                    </div>
                    <div class="layout-copy">
                        2020 &copy; xxxxx科技有限公司
                    </div>
                </i-col>
            </Row>
        </div>
    </div>
</div>

<script>
new Vue({
   
    el: '#app',
})
</script>
</body>
<style scoped>
    .layout{
   
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
    }
    .layout-breadcrumb{
   
        padding: 10px 15px 0;
    }
    .layout-content{
   
        min-height: 1000px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-main{
   
        padding: 10px;
    }
    .layout-copy{
   
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }
    .layout-menu-left{
   
        background: #464c5b;
        width: 16%;
    }
    .layout-header{
   
        height: 60px;
        padding: 20px;
        font-size: 20px;
        background: #fff;
        box-shadow:

最低0.47元/天解锁文章

yxy6543210

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
springboot++thymeleaf+shiro+iview实现用户登录以及基本的增删改查（二）

（二）springboot+shiro+iview实现用户登录以及基本的增删改查前言后台管理页面index.htmlmyHotel.htmlcontroller层数据库表entity层mapper层mapper的映射文件service层接口实现写在最后前言上一篇文章我们已经把基本的框架搭好，这一篇文章重点来说说业务代码的实现，大家一起进步！后台管理页面index.html在非template模式下，需要使用vue.js的原生写法如下图所示，具体参考vue.js官网vue.js.这里需要说明一点
复制链接

扫一扫