• SSM框架具体功能实现

    1.搭建ssm项目架构

    1.1 引入依赖

    1.  <!--spring的依赖-->
    2.     <dependency>
    3.       <groupId>org.springframework</groupId>
    4.       <artifactId>spring-webmvc</artifactId>
    5.       <version>5.2.15.RELEASE</version>
    6.     </dependency>
    7.     <!--mysql驱动-->
    8.     <dependency>
    9.       <groupId>mysql</groupId>
    10.       <artifactId>mysql-connector-java</artifactId>
    11.       <version>8.0.28</version>
    12.     </dependency>
    13.     <!--mybatis依赖-->
    14.     <dependency>
    15.       <groupId>org.mybatis</groupId>
    16.       <artifactId>mybatis</artifactId>
    17.       <version>3.5.6</version>
    18.     </dependency>
    19.  
    20.     <!--spring和mybatis整合的依赖-->
    21.     <dependency>
    22.       <groupId>org.mybatis</groupId>
    23.       <artifactId>mybatis-spring</artifactId>
    24.       <version>2.0.6</version>
    25.     </dependency>
    26.  
    27.     <!--spring的jdbc依赖-->
    28.     <dependency>
    29.       <groupId>org.springframework</groupId>
    30.       <artifactId>spring-jdbc</artifactId>
    31.       <version>5.2.15.RELEASE</version>
    32.     </dependency>
    33.  
    34.     <dependency>
    35.       <groupId>com.github.pagehelper</groupId>
    36.       <artifactId>pagehelper</artifactId>
    37.       <version>5.3.0</version>
    38.     </dependency>
    39.     <!--druid连接池: 连接池: C3P0  Druid  BoneCP
    40.      连接池基本的思想是在系统初始化的时候，将数据库连接作为对象存储在内存中，
    41.      当用户需要访问数据库时，并非建立一个新的连接，而是从连接池中取出一个已建立的空闲连接对象。使用完毕后，用户也并非将连接关闭，而是将连接放回连接池中，
    42.      以供下一个请求访问使用。而连接的建立、断开都由连接池自身来管理。
    43.      -->
    44.     <dependency>
    45.       <groupId>com.alibaba</groupId>
    46.       <artifactId>druid</artifactId>
    47.       <version>1.2.1</version>
    48.     </dependency>
    49.  
    50.     <!--mybatis-generator-->
    51.     <dependency>
    52.       <groupId>org.mybatis.generator</groupId>
    53.       <artifactId>mybatis-generator-core</artifactId>
    54.       <version>1.4.0</version>
    55.     </dependency>
    56.  
    57.     <!--jackson-->
    58.     <dependency>
    59.       <groupId>com.fasterxml.jackson.core</groupId>
    60.       <artifactId>jackson-databind</artifactId>
    61.       <version>2.13.2.2</version>
    62.     </dependency>
    63.  
    64.     <dependency>
    65.       <groupId>javax.servlet</groupId>
    66.       <artifactId>javax.servlet-api</artifactId>
    67.       <version>4.0.1</version>
    68.     </dependency>
    69.  
    70.     <dependency>
    71.       <groupId>org.projectlombok</groupId>
    72.       <artifactId>lombok</artifactId>
    73.       <version>1.18.24</version>
    74.     </dependency>

    druid连接池: 其他连接池: C3P0  Druid  BoneCP
         连接池基本的思想是在系统初始化的时候，将数据库连接作为对象存储在内存中，
         当用户需要访问数据库时，并非建立一个新的连接，而是从连接池中取出一个已建立的空闲连接对象。使用完毕后，用户也并非将连接关闭，而是将连接放回连接池中，
         以供下一个请求访问使用。而连接的建立、断开都由连接池自身来管理。

    1.2 spring的配置文件

     

    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <beans xmlns="http://www.springframework.org/schema/beans"
    3.        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    4.        xmlns:context="http://www.springframework.org/schema/context"
    5.        xmlns:mvc="http://www.springframework.org/schema/mvc"
    6.        xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd">
    7.  
    8.     <!--包扫描-->
    9.     <context:component-scan base-package="com.wzh"/>
    10.     <!--开启注解驱动-->
    11.     <mvc:annotation-driven/>
    12.     <!--放行静态资源-->
    13.     <mvc:default-servlet-handler/>
    14.  
    15.     <!--spring配置-->
    16.     <bean id="DataSource" class="com.alibaba.druid.pool.DruidDataSource">
    17.         <property name="driverClassName" value="com.mysql.cj.jdbc.Driver"/>
    18.         <property name="url" value="jdbc:mysql://localhost:3306/permissions?serverTimezone=Asia/Shanghai"/>
    19.         <property name="username" value="root"/>
    20.         <property name="password" value="123456"/>
    21.         <property name="maxWait" value="3000"/>
    22.         <property name="maxActive" value="10"/>
    23.         <property name="minIdle" value="5"/>
    24.         <property name="initialSize" value="5"/>
    25.     </bean>
    26.     <!--拦截器-->
    27.     <mvc:interceptors>
    28.         <mvc:interceptor>
    29.             <mvc:mapping path="/**"/>
    30.             <mvc:exclude-mapping path="/css/**"/>
    31.             <mvc:exclude-mapping path="/js/**"/>
    32.             <mvc:exclude-mapping path="/imgs/**"/>
    33.             <mvc:exclude-mapping path="/user/login"/>
    34.             <bean class="com.wzh.interceptor.LoginInterceptor"/>
    35.         </mvc:interceptor>
    36.     </mvc:interceptors>
    37.     <!--
    38.      id的名称必须叫multipartResolver
    39.      -->
    40.     <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    41.         <!--这里的单位为字节10M*1024K*1024-->
    42.         <property name="maxUploadSize" value="10485760"/>
    43.     </bean>
    44.     <!--sqlSessionFactory 整合mybatis-->
    45.     <bean id="sessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
    46.         <property name="dataSource" ref="DataSource"/>
    47.         <!--设置mybatis映射文件得路径-->
    48.         <property name="mapperLocations" value="classpath:mapper/*.xml"/>
    49.         <!-- 配置分页插件 -->
    50.         <property name="plugins">
    51.             <array>
    52.                 <bean class="com.github.pagehelper.PageInterceptor"></bean>
    53.             </array>
    54.         </property>
    55.     </bean>
    56.  
    57.  
    58.     <!--为dao接口生成代理实现类-->
    59.     <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
    60.         <property name="sqlSessionFactoryBeanName" value="sessionFactory"/>
    61.         <property name="basePackage" value="com.wzh.dao"/>
    62.     </bean>
    63. </beans>

     1.3 web.xml的配置

    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    3.          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    4.          xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
    5.          version="4.0">
    6.     <servlet>
    7.         <servlet-name>dispatcherServlet</servlet-name>
    8.         <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    9.         <init-param>
    10.             <param-name>contextConfigLocation</param-name>
    11.             <param-value>classpath:spring.xml</param-value>
    12.         </init-param>
    13.         <load-on-startup>1</load-on-startup>
    14.     </servlet>
    15.     <servlet-mapping>
    16.         <servlet-name>dispatcherServlet</servlet-name>
    17.         <url-pattern>/</url-pattern>
    18.     </servlet-mapping>
    19. </web-app>

    2. 后台管理界面的布局

    成品效果图:

    2.1.引入elementui的布局容器

    选择自己合适的布局容器粘贴过来,我选择的是这个.

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <html>
    3. <head>
    4.     <title>主页面</title>
    5.     <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    6.     <script type="text/javascript" src="/js/vue.js"></script>
    7.     <script type="text/javascript" src="/js/index.js"></script>
    8.     <script type="text/javascript" src="/js/axios.min.js"></script>
    9. </head>
    10. <body>
    11.     <div id="app">
    12.         <el-container>
    13.             <el-header>Header</el-header>
    14.             <el-container>
    15.                 <el-aside width="200px">Aside</el-aside>
    16.                 <el-main>Main</el-main>
    17.             </el-container>
    18.             <el-footer>Footer</el-footer>
    19.         </el-container>
    20.     </div>
    21. </body>
    22. <script>
    23.     var app=new Vue({
    24.           el:"#app",
    25.  
    26.     });
    27. </script>
    28.  
    29. <style>
    30.     body,#app{
    31.         margin: 0px;
    32.         padding: 0px;
    33.         font-size: 12px;
    34.     }
    35.     .el-header, .el-footer {
    36.         background-color: #B3C0D1;
    37.         color: #333;
    38.         text-align: center;
    39.         line-height: 60px;
    40.     }
    41.  
    42.     .el-aside {
    43.         background-color: #D3DCE6;
    44.         color: #333;
    45.         text-align: center;
    46.         line-height: 600px;
    47.     }
    48.  
    49.     .el-main {
    50.         background-color: #E9EEF3;
    51.         color: #333;
    52.         text-align: center;
    53.         line-height: 600px;
    54.     }
    55.  
    56.     body > .el-container {
    57.         margin-bottom: 40px;
    58.     }
    59.  
    60.     .el-container:nth-child(5) .el-aside,
    61.     .el-container:nth-child(6) .el-aside {
    62.         line-height: 260px;
    63.     }
    64.  
    65.     .el-container:nth-child(7) .el-aside {
    66.         line-height: 320px;
    67.     }
    68. </style>
    69. </html>

    2.2.头部显示登录者头像及下拉框

     

    1.         <el-header>
    2.                 <span id="logo" style="display: inline-block;width: 50%;height: 100%;float: left" >
    3.                     <img src="/imgs/1.png" height="100%" >
    4.                 </span>
    5.                 <el-dropdown style="float:right;margin-top:10px" @command="handleCommand">
    6.                       <span class="el-dropdown-link">
    7.                         <el-avatar :src="Info.url"></el-avatar>
    8.                       </span>
    9.                     <el-dropdown-menu slot="dropdown">
    10.                         <el-dropdown-item command="Info">个人资料</el-dropdown-item>
    11.                         <el-dropdown-item command="logout">退出登录</el-dropdown-item>
    12.                     </el-dropdown-menu>
    13.                 </el-dropdown>
    14.             </el-header>

     

     退出功能-----移除session

     

     3.左侧菜单

    3.1.布局

    1.             <el-aside width="200px">
    2.                     <el-menu
    3.                             default-active="2"
    4.                             class="el-menu-vertical-demo"
    5.                             background-color="#545c64"
    6.                             text-color="#fff"
    7.                             active-text-color="#ffd04b">
    8.                         <%--index要求为字符串类型--%>
    9.                         <el-submenu :index="menu.menuId+''" v-for="menu in leftMenus">
    10.                             <template slot="title">
    11.                                 <i :class="menu.icon"></i>
    12.                                 <span>{{menu.menuname}}</span>
    13.                             </template>
    14.                             <el-menu-item :index="second.menuId+''" v-for="second in menu.children" @click="onSubmit(second.href,second.menuname)">
    15.                                 <i :class="second.icon"></i>
    16.                                 <span slot="title">{{second.menuname}}</span>
    17.                             </el-menu-item>
    18.                         </el-submenu>
    19.                     </el-menu>
    20.                 </el-aside>

    观察仔细的可以看到子菜单右侧多出一个像素的边框。

    1. .el-aside>.el-menu{
    2.           border: none;
    3.     }

     controller:

    1. @RestController
    2. @RequestMapping("/menu")
    3. public class MenuController {
    4.     @Autowired
    5.     private IMenuService menuService;
    6.  
    7.     @RequestMapping("/leftMenus")
    8.     public CommonResult leftMenus(){
    9.         CommonResult commonResult = menuService.selectMenuByRoleId();
    10.         return commonResult;
    11.     }
    12.  
    13. }

    service:

     获取当前登录者所拥有的左侧菜单，

    1. @Service
    2. public class MenuServiceImpl implements IMenuService {
    3.     @Autowired
    4.     private MenuMapper menuMapper;
    5.  
    6.     public CommonResult selectMenuByRoleId() {
    7.         User user = (User) WebUtils.getSession().getAttribute("user");
    8.         System.out.println(user.getRoleid());
    9.         List<Menu> leftMenus = menuMapper.findLeftMenuByRoleId(user.getRoleid());
    10.  
    11.         //1.查询所有一级菜单
    12.         List<Menu> firstMenus = new ArrayList<Menu>();
    13.  
    14.         for(Menu menu: leftMenus){
    15.             if(menu.getPid()==0){
    16.                 firstMenus.add(menu);
    17.             }
    18.         }
    19.  
    20.         //2.查询所有一级菜单下的子菜单
    21.         for(Menu f : firstMenus){
    22.             List<Menu> children = new ArrayList<Menu>();
    23.             for(Menu b : leftMenus){
    24.                 if(b.getPid().equals(f.getMenuId())){
    25.                     children.add(b);
    26.                 }
    27.             }
    28.             f.setChildren(children);
    29.         }
    30.         return new CommonResult(2000,"查询左侧菜单成功",firstMenus);
    31.     }
    32.  
    33. }

    mapper:

    1.     /**
    2.     * 方法描述
    3.     * 根据当前用户具有的角色查询对应的菜单信息
    4.      * @param roleId
    5.     * @return:
    6.     */
    7.     public List<Menu> findLeftMenuByRoleId(Integer roleId);

    MenuMapper.xml:

    1. <!--根据当前用户具有的角色查询对应的菜单信息-->
    2.     <select id="findLeftMenuByRoleId" resultMap="BaseResultMap">
    3.       select <include refid="Base_Column_List"/> from tbl_menu m
    4.         join tbl_rolemenu rm on m.menu_id = rm.menuId
    5.         join tbl_user u on u.roleId = rm.roleId where u.roleId = #{roleId}
    6.     </select>

    3.2.布局框架右侧显示对应点击的菜单页

    1.引入elementui中tabs标签页

    1.             <el-main>
    2.                     <!--标签页
    3.                           v-model:表示当前活跃的tab
    4.                           tab-remove:移除tab标签
    5.                     -->
    6.                     <el-tabs v-model="editableTabsValue" type="card" closable  @tab-remove="removeTab">
    7.                         <el-tab-pane
    8.                         <%--v-for:循环所有的tab标签--%>
    9.                                 v-for="(item, index) in editableTabs"
    10.                                 :key="item.name"
    11.                                 :label="item.title"
    12.                                 :name="item.name"
    13.                         >
    14.                             <%--{{item.content}}--%>
    15.                             <iframe  :src="item.url" frameborder="0" width="100%" height="100%"></iframe>
    16.                         </el-tab-pane>
    17.                     </el-tabs>
    18.                 </el-main>

    左侧菜单添加点击事件 

     

     

     方法：

    1. onSubmit(url,name){
    2.                 this.addTab(url,name);
    3.             },
    4.             //添加tab标签的方法
    5.             addTab(url,menuname){
    6.               let newTabName = ++this.tabIndex+'';
    7.               //判断是否存在该tab
    8.               var isHaveTab = false;
    9.  
    10.               var tabs = this.editableTabs;
    11.  
    12.               //遍历所有的tab标签
    13.                 tabs.forEach((tab,index)=>{
    14.                     if(tab.title==menuname){
    15.                         isHaveTab=true;
    16.                         newTabName=tab.name;
    17.                     }
    18.                 })
    19.                 //往所有tab数组中添加新的tab标签
    20.                 if(isHaveTab==false){
    21.                     this.editableTabs.push({
    22.                         title:menuname,
    23.                         name:newTabName,
    24.                         url:url
    25.                     });
    26.                 }
    27.                 this.editableTabsValue = newTabName;
    28.             },
    29.             //移除标签页
    30.             removeTab(targetName) {
    31.                 let tabs = this.editableTabs;
    32.                 let activeName = this.editableTabsValue;
    33.                 if (activeName === targetName) {
    34.                     tabs.forEach((tab, index) => {
    35.                         if (tab.name === targetName) {
    36.                             let nextTab = tabs[index + 1] || tabs[index - 1];
    37.                             if (nextTab) {
    38.                                 activeName = nextTab.name;
    39.                             }
    40.                         }
    41.                     });
    42.                 }
    43.                 this.editableTabsValue = activeName;
    44.                 this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    45.             },

  • 相关阅读:
    K8S内容分发网络之集群，nginx，负载均衡，防火墙
    【开源】基于JAVA的大学兼职教师管理系统
    python+django的插画师作品分享投稿网站
    接口自动化测试方案
    sql执行插入语句返回刚刚生成的自动编号
    udp多点通信-广播-组播
    【编程不良人】SpringSecurity实战学习笔记01---权限管理、环境搭建
    镜头品牌加入，激光电视迎来质变？
    97. 常用的HTTP服务压测工具
    HTML5七夕情人节表白代码 (动态3D相册) HTML+CSS+JS
  • 原文地址：https://blog.csdn.net/weixin_68509156/article/details/125420004