前后端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的配置类*/@Configurationpublic class ShiroConfig {//配置安全管理器, 传入自己写的自定义域@Beanpublic DefaultWebSecurityManager securityManager(MyRealm realm) {//使用默认的安全管理器DefaultWebSecurityManager securityManager = newDefaultWebSecurityManager(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 rRIGHT JOIN rbac_manager mon 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():

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

编辑方法换成搜索!

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

前后端分离-CRUD相关推荐

前后端分离完成CRUD和SVN介绍
跨域访问什么是跨域访问: 跨域就是跨域名来访问的数据哪些属于跨域访问: 不同ip地址: 域名: www.baidu.com(ip 192.168.0.1) www.taobao.co ...
Vue.js + Restful + PageHelper + Thymeleaf + Springboot 前后端分离增删改查 CRUD 教程
更多内容,点击了解: https://how2j.cn/k/springboot/springboot-vue/1788.html 目录步骤 1 : 教程说明步骤 2 : 数据库准备步骤 3 : ...
php增删改查前后端分离,前后端分离之前端增删改查
初次接触前后端分离,现把前端一个例子放出来记录以下,不喜勿喷. html静态页面代码: 菜单管理平台数据... 菜单管理查询条件列表菜单名称: 菜单父级: 菜单名称: 菜单级别: 菜单父级: 图片地 ...
java开源springboot项目_springBoot 搭建web项目（前后端分离，附项目源代码地址）...
概述该项目包含springBoot-example-ui 和 springBoot-example,分别为前端与后端,前后端分离,利用ajax交互. springBoot-example-ui 注意 ...
springBoot 搭建web项目（前后端分离，附项目源代码地址）
2019独角兽企业重金招聘Python工程师标准>>> 概述该项目包含springBoot-example-ui 和 springBoot-example,分别为前端与后端,前后端 ...
Springboot+vue前后端分离考试系统
作者主页:编程指南针简介:Java领域优质创作者.CSDN博客专家 Java项目.简历模板.学习资料.面试题库.技术互助文末获取源码项目编号:BS-XX-104 指南针考试系统是一个多角色在线 ...
从壹开始前后端分离【 .NET Core2.2 +Vue2.0 】框架之六 || API项目整体搭建 6.1 仓储+服务+抽象接口模式...
前言 1.@LearningCoding 小伙伴关于用Sqlsugar在mysql数据库上的研究成果: sqlsugarcore支持mysql等数据库,在DbContext里面只需要设置dbtype为 ...
从MVC到前后端分离
摘要:MVC模式早在上个世纪70年代就诞生了,直到今天它依然存在,可见生命力相当之强.MVC模式最早用于Smalltalk语言中,最后在其它许多开发语言中都得到了很好的应用,例如,Java中的Stru ...
shiro+php,一套基于SpringBoot+Vue+Shiro 前后端分离开发的代码生成器
一.前言最近花了一个月时间完成了一套基于Spring Boot+Vue+Shiro前后端分离的代码生成器,目前项目代码已基本完成止步传统CRUD,进阶代码优化: 该项目可根据数据库字段动态生成 c ...
.NET Core前后端分离快速开发框架(Core.3.1+AntdVue)
引言时间真快,转眼今年又要过去了.回想今年,依次开源发布了Colder.Fx.Net.AdminLTE(254Star).Colder.Fx.Core.AdminLTE(335Star).DotNe ...

前后端分离-CRUD