超详细，附源码！使用SSM+spingboot+vue+shiro实现权限登录和增删查改。

最新推荐文章于 2024-04-27 18:20:46 发布
最新推荐文章于 2024-04-27 18:20:46 发布
阅读量2.7k 收藏 9
点赞数 2
分类专栏： spring boot+ssm+ssh Java学习笔记 文章标签： java shiro vue html 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46509714/article/details/110392288
版权

之前写了一篇博客是用，ssm+thymeleaf+vue+shiro完成一个具有权限登录，且能增删查改的这么一个项目。当时只记录了登录权限的操作，现在补充一下增删查改的具体实现。

上一篇博客：使用shiro实现登录权限认证
详细代码说明。

首先给出完整代码，点击github连接自取。

一、项目需求：

  1. 系统需要在spring boot下面开发
  2. 数据库可以需要使用mybatis（可以混合jpa开发）
  3. 页面用Thymeleaf模板和Vue.js（vuejs组件可以用element UI）
  4. 登录权限采用spring boot security 或者shiro框架（任选其一）
  5. 工作量不能低于Boot管理系统，界面美观实用

ss

二、使用到的技术栈：

  1. 数据库：springBoot，springMvc，mybatis
  2. 页面：thymeleaf，semantic,vue，bootstrap，axios
  3. 登录权限和认证：shiro

三、开发过程：

1. 大致开发流程：

  • 登录：身份认证，权限授权
  • 用户信息：增删查改

2. 具体：

2.1使用shiro安全框架：

(1)首先编写我们的底层数据库sql语句和持久层entity类：

我们需要三张表，User，Role，Permission，定义他们对于登录的作用，首先是通过姓名和密码查询User表是否有这个人，查询结束通过User的外键Role_Id，来映射这个人的角色，然后又通过Role表中的Id，来查询此角色对应的Permission表中的权限。这样我们就将这个人的身份与权限一并操作完，并且跳转到主页index.html，主页会根据权限，来展示对应的可操作事件，例如： USER有查询的权限，ADMIN在USER的基础上可以修改，添加用户信息，SUPER_ADMIN可以删除。 我们需要知道三个实体类之间的关系，User与Role一对一，Role与Permissions一对一，当然也可以把它都写成多对多，这就需要去更改数据库文件，和实体类了。
持久层可以使用lombok，让我们可以减少持久类的代码量，减少set，get的编写。

sql代码：

-- ----------------------------
-- Table structure for role
-- ----------------------------
CREATE TABLE `role`  (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '角色表主键',
  `role_name` varchar(32) DEFAULT NULL COMMENT '角色名称',
  PRIMARY KEY (`id`)
);

-- ----------------------------
-- Records of role
-- ----------------------------
INSERT INTO `role` VALUES (1, 'SUPER_ADMIN');
INSERT INTO `role` VALUES (2, 'ADMIN');
INSERT INTO `role` VALUES (3, 'USER');

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '用户主键',
  `username` varchar(32) NOT NULL COMMENT '用户名',
  `password` varchar(32) NOT NULL COMMENT '密码',
  `role_id` int(11) DEFAULT NULL COMMENT '与role角色表联系的外键',
  PRIMARY KEY (`id`),
  CONSTRAINT `user_role_on_role_id` FOREIGN KEY (`role_id`) REFERENCES `role` (`id`)
);

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (1, 'BWH_Steven', '666666', 1);
INSERT INTO `user` VALUES (2, 'admin', '666666', 2);
INSERT INTO `user` VALUES (3, 'zhangsan', '666666', 3);

-- ----------------------------
-- Table structure for permission
-- ----------------------------
CREATE TABLE `permission`  (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '权限表主键',
  `permission_name` varchar(50) NOT NULL COMMENT '权限名',
  `role_id` int(11) DEFAULT NULL COMMENT '与role角色表联系的外键',
  PRIMARY KEY (`id`),
  CONSTRAINT `permission_role_on_role_id` FOREIGN KEY (`role_id`) REFERENCES `role` (`id`)
);

-- ----------------------------
-- Records of permission
-- ----------------------------
INSERT INTO `permission` VALUES (1, 'user:*', 1);
INSERT INTO `permission` VALUES (2, 'user:*', 2);
INSERT INTO `permission` VALUES (3, 'user:queryAll', 3);
  • entity层比较简单，不贴代码：
（2）接下来就是pom.xml添加相关依赖，这里就不贴代码了,需要的github自取。
（3）整合mybatis和springboot：

就只需要创建一个dao层，一个服务层,需要记住要添加注解，一定要清楚他们的对应关系：

① mapper配置文件(也可以使用注解形式)：

UserMapper.xml代码

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.example.csy.dao.UserMapper">

    <select id="queryUserByUsername" resultMap="userRoleMap">
        SELECT u.*,r.role_name FROM `user` u, `role` r
          WHERE username = #{username} AND u.role_id = r.id;
    </select>
    <!-- 定义封装 User和 role 的 resultMap -->
    <resultMap id="userRoleMap" type="com.example.csy.entity.User">
        <id property="id" column="id"/>
        <result property="username" column="username"></result>
        <result property="password" column="password"></result>
        <result property="roleId" column="role_id"></result>
        <!-- 配置封装 UserPojo 的内容 -->
        <association property="role" javaType="com.example.csy.entity.Role">
            <id property="id" column="id"></id>
            <result property="roleName" column="role_name"></result>
        </association>
    </resultMap>


    <select id="queryPermissionByUsername" resultMap="permissionRoleMap">
        SELECT p.* ,r.role_name FROM `user` u, `role` r, `permission` p
          WHERE username = #{username} AND u.role_id = r.id AND p.role_id = r.id;
    </select>
    <!-- 定义封装 permission 和 role 的 resultMap -->
    <resultMap id="permissionRoleMap" type="com.example.csy.entity.Permissions">
        <id property="id" column="id"/>
        <result property="permissionName" column="permission_name"></result>
        <result property="roleId" column="role_id"></result>
        <!-- 配置封装 Role 的内容 -->
        <association property="role" javaType="com.example.csy.entity.Role">
            <id property="id" column="id"></id>
            <!--property是实体类中被赋值的参数名，column是数据库的列名-->
            <result property="roleName" column="role_name"></result>
        </association>
    </resultMap>
</mapper>

② dao层与service也比较简单。

③ 弄到这里我们的mybatis+springboot整合也基本结束，所以在测试类里测试一下：

@SpringBootTest
class CsyApplicationTests {

    @Autowired
    private UserMapper userMapper;

    @Test
    void contextLoads() {
        User admin = userMapper.queryUserByUsername("admin");
        System.out.println(admin.toString());
        Permissions permission = userMapper.queryPermissionByUsername("admin");
        System.out.println(permission.toString());
    }
}
（4）将shiro整合到项目里：

①.shiro最关键的就是Realm组件：

其可以理解为 Shiro 与 数据之间的沟通器与中间桥梁认证授权时，就会去此部分找一些内容，从本质上 Realm 就是一个经过了大量封装的安全 Dao，这是官网的介绍，我的理解对于Realm组件其实就是一个Dao，我们在这里面定义两个方法，一个身份认证doGetAuthenticationInfo，一个授权doGetAuthorizationInfo，这两个方法很关键，所以给出全部代码：

***UserRealm代码：

public class UserRealm extends AuthorizingRealm {

    @Autowired
    private UserMapper userMapper;
    /**
     * @MethodName doGetAuthorizationInfo 授权操作
     * @Description 权限配置类
     * @Param [principalCollection]
     * @Return AuthorizationInfo
     */
    @Override
    protected AuthorizationInfo doGetAuthorizationInfo(PrincipalCollection principalCollection) {
        // 获取用户名信息
        String username = (String) principalCollection.getPrimaryPrincipal();
        // 创建一个简单授权验证信息
        SimpleAuthorizationInfo authorizationInfo = new SimpleAuthorizationInfo();
        // 给这个用户设置从 role 表获取到的角色信息
        authorizationInfo.addRole(userMapper.queryUserByUsername(username).getRole().getRoleName());
        //给这个用户设置从 permission 表获取的权限信息
        authorizationInfo.addStringPermission(userMapper.queryPermissionByUsername(username).getPermissionName());
        return authorizationInfo;
    }
    /**
     * @MethodName doGetAuthenticationInfo 身份验证
     * @Description 认证配置类
     * @Param [authenticationToken]
     * @Return AuthenticationInfo
     * @Author WangShiLin
     */
    @Override
    protected AuthenticationInfo doGetAuthenticationInfo(AuthenticationToken authenticationToken) throws AuthenticationException {
        // 根据在接受前台数据创建的 Token 获取用户名
        String username = (String) authenticationToken.getPrincipal();
        // 通过用户名查询相关的用户信息（实体）
        User user = userMapper.queryUserByUsername(username);
        if (user != null) {
            // 存入 Session，可选
            SecurityUtils.getSubject().getSession().setAttribute("user", user);
            // 密码认证的工作，Shiro 来做
            AuthenticationInfo authenticationInfo = new SimpleAuthenticationInfo(user.getUsername(), user.getPassword(), "userRealm");
            return authenticationInfo;
        } else {
            // 返回 null 即会抛异常
            return null;
        }
    }
}

②接下来就是编写ShiroConfig注解类：

将所有类，属性全部注入spring容器中，但是我们使用springboot，直接使用注解：@Configuration。
该注解类主要是要将，realm类的两个自定义的方法注入，还有配置安全管理器 SecurityManager，还有就是过滤器，这个过滤器是分配权限的一个关键方法，对于这个过滤器，shiro有一个封装好的ShiroFilterFactoryBean工厂类，他有很多自定义方法，set登录页，成功页，未授权页等，这个通过springMvc的控制器控制就行。
重点说一下拦截放行（Map）这块：通过 map 键值对的形式存储，key 存储 URL ，value 存储对应的一些权限或者角色等等，其实 key 这块还是很好理解的，例如 ：/css/、/user/admin/ 分别代表 css 文件夹下的所有文件，以及请求路径前缀为 /user/admin/ URL，而对应的 value 就有一定的规范了。
如下面的一些shiro自定好的权限

关键：
anon：无需认证，即可访问，也就是游客也可以访问
authc：必须认证，才能访问，也就是例如需要登录后
roles[xxx] ：比如拥有某种角色身份才能访问 ，注：xxx为角色参数
perms[xxx]：必须拥有对某个请求、资源的相关权限才能访问，注：xxx为权限参数

就比如我们自己的图片，static文件下所有数据都可以直接使用anon，直接放行，不用管理。

shiroConfig配置类的所有代码：



@Configuration
public class ShiroConfig {

    //将自己的验证方式加入容器
    @Bean
    public UserRealm myShiroRealm() {
        return new UserRealm();
    }
    /**
     * 配置安全管理器 SecurityManager
     *
     * @return
     */
    @Bean
    public DefaultWebSecurityManager securityManager() {
        // 将自定义 Realm 加进来
        DefaultWebSecurityManager securityManager = new DefaultWebSecurityManager();
        // 关联 Realm
        securityManager.setRealm(myShiroRealm());
        return securityManager;
    }
    /**
     * 配置 Shiro 过滤器
     *
     * @param securityManager
     * @return
     */
    @Bean
    public ShiroFilterFactoryBean shiroFilter(DefaultWebSecurityManager securityManager) {
        // 定义 shiroFactoryBean
        ShiroFilterFactoryBean shiroFilterFactoryBean = new ShiroFilterFactoryBean();
        // 关联 securityManager
        shiroFilterFactoryBean.setSecurityManager(securityManager);
        // 自定义登录页面，如果登录的时候，就会执行这个请求，即跳转到登录页
        shiroFilterFactoryBean.setLoginUrl("/toLoginPage");
        // 指定成功页面
        shiroFilterFactoryBean.setSuccessUrl("/success");
        // 指定未授权界面
        shiroFilterFactoryBean.setUnauthorizedUrl("/unauthorized");
        // 设置自定义 filter
        Map<String, Filter> filterMap = new LinkedHashMap<>();
        filterMap.put("anyRoleFilter", new MyRolesAuthorizationFilter());
        shiroFilterFactoryBean.setFilters(filterMap);
        // LinkedHashMap 是有序的，进行顺序拦截器配置
        Map<String, String> filterChainMap = new LinkedHashMap<>();
        // 配置可以匿名访问的地址，可以根据实际情况自己添加，放行一些静态资源等，anon 表示放行
        filterChainMap.put("/css/**", "anon");
        filterChainMap.put("/img/**", "anon");
        filterChainMap.put("/js/**", "anon");
        // 指定页面放行，例如登录页面允许所有人登录
        filterChainMap.put("/toLoginPage", "anon");
        // 以“/user/admin” 开头的用户需要身份认证，authc 表示要进行身份认证
        filterChainMap.put("/user/admin/**", "authc");
        // 页面 -用户需要角色认证
//        filterChainMap.put("/levelA/**", "anyRoleFilter[USER,ADMIN,SUPER_ADMIN]");
        filterChainMap.put("/levelB/**", "anyRoleFilter[ADMIN,SUPER_ADMIN]");
//        filterChainMap.put("/levelC/**", "anyRoleFilter[SUPER_ADMIN]");
//        filterChainMap.put("/levelA/**", "roles[USER]");
//        filterChainMap.put("/levelB/**", "roles[ADMIN]");
//        filterChainMap.put("/levelC/**", "roles[SUPER_ADMIN]");
        // /user/admin/ 下的所有请求都要经过权限认证，只有权限为 user:[*] 的可以访问，也可以具体设置到 user:xxx
        filterChainMap.put("/user/admin/**", "perms[user:*]");
        // 配置注销过滤器
        filterChainMap.put("/logout", "logout");
        // 将Map 存入过滤器
        shiroFilterFactoryBean.setFilterChainDefinitionMap(filterChainMap);
        return shiroFilterFactoryBean;
    }
    /**
     * 整合 thymeleaf
     * @return
     */
    @Bean(name = "shiroDialect")
    public ShiroDialect shiroDialect(){
        return new ShiroDialect();
    }
}

④自定义一个角色认证过滤器MyRolesAuthorizationFilter：

因为我们的角色，只需用有一个角色就能访问到映射页面,shiro默认是hasAllRoles，也就是说，我们要满足所有的身份才能访问，所以需要我们自定义一个hasAnyRoles，任选其一角色即可。

public class MyRolesAuthorizationFilter extends AuthorizationFilter {
    @SuppressWarnings({"unchecked"})
    public boolean isAccessAllowed(ServletRequest request, ServletResponse response, Object mappedValue) throws IOException {
        Subject subject = getSubject(request, response);
        String[] rolesArray = (String[]) mappedValue;
        if (rolesArray == null || rolesArray.length == 0) {
            //no roles specified, so nothing to check - allow access.
            return false;
        }
        List<String> roles = CollectionUtils.asList(rolesArray);
        boolean[] hasRoles = subject.hasRoles(roles);
        for (boolean hasRole : hasRoles) {
            if (hasRole) {
                return true;
            }
        }
        return false;
    }
}
（5）将整合Thymeleaf和semantic进来：

Ui我们使用的是semantic，感觉还可以：接下来，就直接展示页面效果了：
我们对各种角色对数据库的操作进行了权限的限制，如开头所说，USER有查询的权限，ADMIN在USER的基础上可以修改，添加用户信息，SUPER_ADMIN可以删除。
我们实现这种操作，是对表格的一部分标签设置了部分角色才能查看：
关键代码是index主页中标签的声明：

A.USER有查询的权限
shiro:hasAnyRoles=“SUPER_ADMIN,ADMIN,USER”

B.ADMIN在USER的基础上可以修改
shiro:hasAnyRoles=“SUPER_ADMIN,ADMIN”

C.SUPER_ADMIN在ADMIN权限上可以删除
shiro:hasAnyRoles=“SUPER_ADMIN”

（6）最后就是controller，由于比较简单，就不写代码了。
（7）shiro效果展示：

登录login.html

login

USER权限:

user

admin权限：

ad

SUPER_ADMIN权限：

sa

至此shiro实现登录的身份认证和权限分配操作已经搞定，接下来就是用户信息的增删查改：

2.2实现用户信息的增删查改：

（1）dao（mapper）层和service层的编写：

由于使用的mybatis，所以我们需要有两种方式，一种是使用注解，一种是编写配置文件，在项目里，两种方式，都使用了的。
对于两个一对多的查询使用的是配置文件形式，其他的增、删、改都是用的是注解形式,由于mapper类比较简单就不贴代码了，还有一个UserMapper.xml配置文件的代码，已经在shiro那里贴出来了，这里也不书写了。
然后就是service类的编写，我们使用@Service注解，接口和实现类都需要@service注解，然后在实现类中通过mapper调用方法，再加上一些限制如：
增加用户信息时，如果该用户存在，就打印失败，方法直接结束。

（2）编写测试类：

写了测试成功之后，如果出错，我们可以不用担心是DAO层和service出错了。

@Test
    void queryAll(){
        List<User> users = userService.queryAll();
        System.out.println(users);
    }

    @Test
    void contextLoads() {
        User admin = userService.queryUserByUsername("admin");
        System.out.println(admin.toString());
        Permissions permission = userService.queryPermissionByUsername("admin");
        System.out.println(permission.toString());
    }
    @Test
    void addTest() {
        User user = new User("wu","123",3);
        int i = userService.addUser(user);
        System.out.println(i);
    }
    @Test
    void deleteTest() {
        userService.deleteUser("zhangsan");
    }
    @Test
    void updateTest() {
        User user = new User("ww","123",3);
    }
}

（3）显示数据到主页index.html上：

主要使用vue，axios将数据显示到页面，使用vue的指令，比如v-for，v-model等，ui使用的是semantic，bootstrap，我们将数据操作分为四步怎么实现的。

A.查询所有：

在mapper的定义中，我们有一个queryAll()方法，在controller中，我们返回一个List，所以index中获取这个list，就是最关键的问题了，这里我们在index页面中直接把vue对象定义出来，var vm = new Vue()；将数据显示的表格定义一个id，这个id由vue代理。
只需要在data属性里，定义一个数组userList，来将queryAll查询到的list数据赋值到userList数组里。
当然查询这个方法，按我们的一般体验来说，应该要登录了就显示，所以axios就起到作用了，他可以让我们不用刷新就把数据显示到页面上，而且在vue中使用axios也比较的方便。
我们需要考虑一个问题，就是查询操作应该多久显示，我们知道vue对象使用声明周期的，我们可以在创建vue对象之后就调用queryAll方法，这样就可以实现一登录就查询所有的操作了。
在这里我们只需要在vue对象中添加两个方法，一个queryAll，一个create方法。需要值得注意的是我们给userList赋值时，需要声明一个变量 var _this = this;因为vue对象，和axios是不一样的，只有将this赋值，才会调用vue中的对象userList，不然则会调用axios的this，当然我们没有写，所以如果这样写出来，会发现什么数据都没有。
赋值userList后，就只需要展示，使用v-for指令，和取值符号就解决了。

Vue代码部分：

    var vm = new Vue({
        el: "#app",
        data: {
            user: {id:"",
                username:"",
                password:"",
                roleId:"",
                role:{id:"",roleName:""}
                },
            userList: [],
            wo:"ri"
        },
        methods: {
            addUser:function (user) {
                var _this = this;
                axios.post("/user/admin/add",_this.user).then(function (response) {
                    _this.queryAll();
                    console.log(_this.userList);
                }).catch(function (err) {
                    console.log(_this.user);
                    console.log(err);
                });
            },
            deleteUser:function (username) {
                var _this = this;
                axios.post("/user/admin/delete",username=username).then(function (response) {
                    _this.queryAll();
                }).catch(function (err) {
                });
            },
            queryAll: function () {
                var _this = this;
                axios.get("/user/queryAll").then(function (response) {
                    _this.userList = response.data;
                    console.log(_this.userList);
                }).catch(function (err) {
                    console.log(err);
                });
            },
            queryByName: function (username) {
                var _this = this;
                axios.get("/user/queryByName", {
                    params: {
                        username: username
                    }
                }).then(function (response) {
                    _this.user = response.data;
                    $('#updateModal').modal("show");
                    console.log(_this.user);
                }).catch(function (err) {
                    console.log(err);
                });
            },
            updateUser: function (user) {
                var _this = this;
                axios.post("/user/admin/update",_this.user).then(function (response) {
                    _this.queryAll();
                    console.log(_this.user);
                }).catch(function (err) {
                });
            }
        },
        created(){
            this.queryAll();
        }
    });

Html表格那部分代码比较简单就不贴了。

B.删除用户：

对于删除用户，我们可以再每个查询结果后弄一个td，这样我们就可以获取当前这一行的user的id，方便赋值，这里我们使用v-on：，直接调用vue中定义的方法deleteUser（id），在这里我们也使用axios.post()，因为我们要传参数，执行操作，deleteUser方法的代码就在上面，同时我们需要在执行完操作之后，直接查询所有方法queryAll，所以我们需要在delete结束后，调用_this.queryAll()方法。这样交互性比较好。

C.修改用户：

修改用户我们可以使用bootstrap中的模态框，使用模态框的好处，就是交互性好，不需要跳转页面，使用起来更加简洁。使用模态框也不是很难，就只需要在div标签中的class使用bootstrap的语法，在点击修改之后，会调用queryByName方法，在方法中使用取值符号来获取模态框的id并且调用bootstrap封装的moal(“show)方法，显示模态框。
_this.user = response.data;$(’#updateModal’).modal(“show”);

E.增加用户：

增加用户和修改用户差不多，也是v-model实现，只不过加了提示，当然后续操作和上面一样，也是直接queryAll(),还有一点因为网页传给我们的数据时json，所以需要在controller中使用@RequestBody将json转换成字符串，如果有返回值也要使用@ResponseBody。因为要赋值。

add
到此开发就结束了。

四、实验成果展示：

实现的效果大家可以克隆下来源代码自己测试，这里我只给出一些大概的展示。
（1）增加用户：
a

本博客内容基本到此结束，如果觉得有用的，你懂得，码字不易！嘻嘻！

陈全蛋
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue前端项目-用户管理-增删改（上）
踏 浪的博客
09-08 8871
目录 1、按钮界面 2、修改和删除按钮状态控制 3、添加和修改的对话框 4、点击 “新增”方法 5、新增用户的保存操作 6、修改用户 7、删除用户 8、总结 实现效果图： 1、按钮界面 在src / views / system / user / index.vue页面中，添加 五个按钮分别为 “新增”，“修改”，“删除”，“导入”和 “导出” 在 搜索和重置 按钮后面 添加如下代码： <el-row :gutter="10" class="mb8...
Spring+SpringMVC+Mybatis+Shiro+ Maven+AdminLTE(Bootstarp)整合项目源码下载
04-20
Maven集成Spring+SpringMVC+Mybatis+Shiro+AdminLTE(Bootstarp) +MySQL整合的后台管理项目。完成部分基础模块，适合初学者学习，欢迎下载。
基于Vue+ELement实现增删改查案例与表单验证（附源码）
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
09-27 8968
增删改查是我们写项目百分之七十会遇到的代码，学会Vue+ELement这一套增删改查的流程让你的写代码的效率一步登天！！！
10分钟 SSM项目转成SpringBoot 项目教程
04-27 1301
前端时间帮朋友开发的SSM房屋租赁系统，后来有朋友要求改造成SpringBoot版本。于是，这就开搞。
Vue用户管理（增删改查）功能详情
热门推荐
weixin_45065754的博客
03-13 5万+
1、最终实现效果： Users.vue: <template> <div> <!--面包屑导航区域--> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item
ssm智能训练管理平台+vue
xy520chxu的博客
10-16 19
如图3.2显示的就是课程信息管理页面，此页面提供给管理员的功能有：查看已发布的课程信息数据，修改课程信息，课程信息作废，即可删除，还进行了对课程信息名称的模糊查询 课程信息信息的类型查询等等一些条件。如图3.3显示的就是课程类型管理页面，此页面提供给管理员的功能有：根据课程类型进行条件查询，还可以对课程类型进行新增、修改、查询操作等等。如图3.1显示的就是用户信息管理页面，此页面提供给管理员的功能有：用户信息的查询管理，可以删除用户信息、修改用户信息、新增用户信息，图3.2 课程信息管理页面。
Vue实现人员列表(添加,删除,查询)
m0_68002039的博客
06-20 582
【代码】Vue实现人员列表(添加,删除,查询)
Java项目:前后端分离网上商城项目设计和实现(java+ssm+springboot+vue+redis)
03-14
主要实现技术：Java、springmvc、springboot、mybatis、mysql、tomcat、shiro权限框架、vue、jquery、node.js 、redis数据库、邮箱相关等技术。 主要功能实现： 用户登录、注册、商城浏览、购买、订单、购物车、退货...
基于springboot+shiro+redis+ssm+mysql+vue+elementUI+axios的论坛系统+文档
11-11
后端：ssm + springboot + shiro + redis + mysql 前端：vue + elementUI + axios 对于shiro和redis不熟悉的同学不要怕，在本项目中只要求你掌握shiro和redis的基础即可，项目中并不会用的很多很难。 <项目介绍> ...
基于springboot+shiro+redis+ssm+mysql+vue+elementUI+axios的《树洞》论坛系统
05-14
该项目利用了基于springboot + vue + mysql的开发模式框架实现的课设系统，包括了项目的源码资源、sql文件、相关指引文档等等。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理...
基于springboot+shiro+redis+ssm+mysql+vue+elementUI+axios的论坛系统。.zip
03-09
这是一个全面的论坛系统开发项目，基于一系列现代技术栈构建，包括SpringBoot、Shiro、Redis、SSM（Spring、SpringMVC、MyBatis）、MySQL、Vue.js、ElementUI和Axios。以下将详细讲解这些技术及其在项目中的应用。 ...
基于springboot+shiro+redis+vue+elementUI论坛系统源码+数据库+项目说明（含前端+后端.zip
最新发布
07-01
基于springboot+shiro+redis+vue+elementUI论坛系统源码+数据库+项目说明（含前端+后端.zip 论坛系统 技术栈： 后端：ssm + springboot + shiro + redis + mysql 前端：vue + elementUI + axios 对于shiro和...
用vue实现增删改查
m0_64344470的博客
05-08 2817
1、some(回调函数（item，index）) ⽅法测试数组中是不是⾄少有1个元素通过了被提供的函数测 试。3、 splice() ⽅法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被 修改的内容。此⽅法会改变原数组。2、find() ⽅法返回数组中满⾜提供的测试函数的第⼀个元素的值。6、indexOf()⽅法返回在数组中可以找到⼀个给定元素的第⼀个索引，如果不存在，则返回-1。5、 filter() ⽅法创建⼀个新数组, 其包含通过所提供函数实现的测试的所有元素。
springboot+vue搭建前后端项目实现员工的增删改查
qq_41632427的博客
04-11 194
前言 我是歌谣 今天继续带来前后端项目的开发 上次已经开发了部门管理，今天继续开发 员工管理 后端第一步empcontroller代码 ``` package com.itheima.controller; import com.itheima.pojo.Emp; import com.itheima.pojo.PageBean; import com.itheima.pojo...
基于Vue+ELement实现增删改查案例与表单验证
weixin_74268571的博客
10-10 1651
Element UI和Vue增删改查案例的实现步骤，以及表单验证规则的定义与使用
vue实现增、删、改、查、批量删除的例子
沈宫新的专栏
05-20 1042
一个使用vue实现增，删，改，查，批量删除的入门实例。
利用Vue.js实现简单员工管理系统（增删查）的功能
PILIpilipala的博客
11-11 5627
员工管理系统
VUE实现增删改查功能
忧郁的蛋的专栏
04-08 789
​ 在 vue.js 中实现增删改查功能：创建：使用 v-model 绑定数据，向服务器发送 post 请求创建新记录。读取：向服务器发送 get 请求获取数据。更新：使用 v-model 编辑数据，向服务器发送 put 请求更新记录。删除：向服务器发送 delete 请求删除记录。
5.Vue-在Vue框架中实现Vue的增删改查
玄衣手记
10-17 1034
在vue框架中实现vue的增删改查
springboot+thymeleaf+ssm+vue.js实现简单的增删改查
09-01
SpringBoot是一款以简化开发的方式来构建Java应用程序的框架，它提供了许多开箱即用的特性和便捷的配置方式。Thymeleaf是一个用于处理服务器端渲染的模板引擎，可以将动态数据注入到HTML模板中。SSM是指Spring+SpringMVC+MyBatis的组合，是一套经典的Java Web开发框架。Vue.js是一款用于构建用户界面的渐进式框架，可以实现前端的组件化开发和数据驱动视图更新。 要实现简单的增删改查功能，可以按照以下步骤进行： 1. 首先，使用SpringBoot创建一个新的项目，并引入Thymeleaf、SSM和Vue.js相关的依赖。 2. 创建一个数据库表，用于存储需要进行增删改查操作的数据。可以使用MySQL等关系型数据库。 3. 在SpringBoot的配置文件中配置数据库连接信息，并创建对应的数据源和事务管理器。 4. 创建实体类，在实体类中定义需要操作的属性和对应的数据字段。 5. 创建MyBatis的Mapper接口和对应的XML文件，用于定义数据库操作的SQL语句。 6. 在SpringBoot的配置类中配置MyBatis相关的扫描和注入。 7. 创建控制器类，处理前端请求。 8. 在控制器类中定义增删改查的方法，并调用对应的Mapper接口执行数据库操作。 9. 创建前端页面，使用Vue.js来实现数据的展示和交互。 10. 在前端页面中绑定相应的事件和请求，通过HTTP请求调用后端控制器的方法。 11. 在页面中显示查询的数据，并提供相应的操作按钮，通过绑定事件来实现增删改的功能。 12. 启动项目，通过浏览器访问前端页面，即可进行增删改查的操作。 以上是一个基本的步骤，具体的实现会涉及到很多细节，需要根据具体的需求和技术选型来进行调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值