前后端分离-CRUD

前后端CRUD开发流程

1.login登录

1.1 后台代码

1.需要创建一个springboot项目, 在pom中引入

<dependency>
     <groupId>org.apache.shiro</groupId>
     <artifactId>shiro-spring-boot-web-starter</artifactId>
     <version>1.7.1</version>
 </dependency>
 <!-- mybatis  mysql-connection  -->
 
2.需要创建一个springboot项目, 在pom中引入

 <dependency>
       <groupId>org.apache.shiro</groupId>
       <artifactId>shiro-spring-boot-web-starter</artifactId>
       <version>1.7.1</version>
  </dependency>
 <!-- mybatis  mysql-connection  -->

2.shiro的配置类(后面详细讲解)

 package com.woniuxy.shiro;
    import org.apache.shiro.spring.web.ShiroFilterFactoryBean;
    import org.apache.shiro.web.mgt.DefaultWebSecurityManager;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import java.util.HashMap;
    import java.util.Map;
    /**
     * @author: mayuhang  <br/>
     * Date: 2021/5/21:9:57  <br/>
     * Description: shiro的配置类
     */
    @Configuration
    public class ShiroConfig {
        //配置安全管理器, 传入自己写的自定义域
        @Bean
        public DefaultWebSecurityManager securityManager(MyRealm realm) {
            //使用默认的安全管理器
            DefaultWebSecurityManager securityManager = new
                    DefaultWebSecurityManager(realm);
            //将自定义的realm交给安全管理器统一调度管理
            securityManager.setRealm(realm);
            return securityManager;
        }
        //Filter工厂，设置对应的过滤条件和跳转条件 过滤器
        @Bean("shiroFilterFactoryBean")
        public ShiroFilterFactoryBean shirFilter(DefaultWebSecurityManager securityManager) {
            //1.创建shiro过滤器工厂
            ShiroFilterFactoryBean filterFactory = new ShiroFilterFactoryBean();
            //2.设置安全管理器
            filterFactory.setSecurityManager(securityManager);
            //3.通用配置,如果没有前后端分离配置这个（配置登录页面，登录成功页面，验证未成功页面）
    //        filterFactory.setLoginUrl("/autherror?code=1"); //设置登录页面
    //        filterFactory.setUnauthorizedUrl("/autherror?code=2"); //授权失败跳转页面
            //4.配置过滤器集合
            /**
             * key ：访问连接
             * 支持通配符的形式
             * value：过滤器类型
             * shiro常用过滤器类型
             * anno ：匿名访问（表明此链接所有人可以访问）
             * authc ：认证后访问（表明此链接需登录认证成功之后可以访问）
             */
    //        Map<String,String> filterMap = new LinkedHashMap<String,String>();
            // 配置不会被拦截的链接 顺序判断
    //        filterMap.put("/user/home", "anon");
    //        filterMap.put("/login", "anon");
    //        filterMap.put("/user/**", "authc");
            Map<String, String> filterRuleMap = new HashMap<>();
            filterRuleMap.put("/login", "anon");
            filterFactory.setFilterChainDefinitionMap(filterRuleMap);
            return filterFactory;
        }
    }

3.自定义域

写一个controller 完成login的方法(参考昨天UsernamePasswordToken登录操作)

1.2前台代码

前端解决跨域,

修改登录页面方法

2.CURD页面

1.先查询

​ 1.1 在created(){} 生命周期钩子函数中, 写aixos请求

 this.$axios
   .get("/api/rbacManager/selectAll", {
      params: {
        startpage: this.pageparm.currentPage,
        pagesize: this.pageparm.pageSize,
      }
    })
    .then((res) => {
      console.log(res);
      this.myListData = res.data.list
    })
    .catch((err) => {});
  // this.getdata(this.formInline)
},

​ 1.2 在model(data属性)中新增一个属性

myListData: [], //我们从数据库查出来的页面数据

​ 1.3 在修改View页面

2.删除

先找到删除按钮的view页面代码, 通过@click 找到删除方法, 然后修改删除方法为axios提交!

3.新增

3.1 首先找到新增的view页面

3.2 找到和model绑定的view表单

3.3 修改我们的表单内容

3.4 修改我们的model中的key

3.5 修改弹窗显示的方法

3.6 修改保存按钮的方法!

4.修改

4.1 接着新增的来 , view和model不需要修改

4.2 显示的时候 需要数据

4.3 保存方法的时候 和新增分开

5.完成分页

父传子:

分页子组件的代码解析:

父传子, 传的是这个model:

总结: 父传子 只要model改变, 子组件数据就会改变!

子传父:

下图为子组件中的修改页码尺寸事件和 点击不同页码事件:

分页还有个坑! 大坑! 这个大坑来自于第六条 搜索! 例子: 比如我搜索s 查出200条数据, 这个时候点击下一页会发生什么?

6.搜索

6.1 修改我们的view页面

6.2 修改model

6.3 修改搜索的方法事件

6.4
后端新增 DTO数据传输对象来接收 前端搜索事件传过来的自定义对象

6.5
后端代码里面 需要分页

6.6
后端sql里面需要写成动态sql

[注]：
FIND_IN_SET 这个是sql语法 两表关联, 把id 转换为另外一个表的中文显示!

    <!--通过实体作为筛选条件查询-->
 <select id="queryAll" resultType="map">
      SELECT m.*,GROUP_CONCAT(r.name ORDER BY r.id) as chinese from rbac_role r
      RIGHT JOIN rbac_manager m
      on FIND_IN_SET(r.id,m.role_id)
      <where>
          <if test="id != null">
              and m.id = #{id}
          </if>
          <if test="account != null and account != ''">
              and m.account like concat('%',#{account},'%')
          </if>
          <if test="password != null and password != ''">
              and m.password = #{password}
          </if>
          <if test="status != null and status != ''">
              and m.status = #{status}
          </if>
          <if test="roleId != null">
              and m.roles = #{roles}
          </if>
      </where>
      GROUP BY m.id
  </select>

6.7 解决大坑

把其他父组件中的this.getData() 替换出 this.search():

分页事件的刷新列表代码, 换成搜索方法!

编辑方法换成搜索!

删除方法也要换成搜索方法!