09-SSM整合-整合页面

已于 2024-02-01 16:00:21 修改
阅读量153 收藏
点赞数 1
分类专栏： 05-Springmvc高级 文章标签： java
于 2024-02-01 15:34:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44478828/article/details/135975135
版权

导入静态资源到webapp目录

启动访问路径

http://localhost:8080/pages/books.html

报404,新建org.example.config.SpringWebSupport

package org.example.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * @author Administrator
 */
@Configuration
public class SpringWebSupport implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //设置静态资源访问路径,addResourceLocations:设置静态资源本地访问路径
        registry.addResourceHandler("/pages/**").addResourceLocations("/pages/");
        registry.addResourceHandler("/css/**").addResourceLocations("/css/");
        registry.addResourceHandler("/js/**").addResourceLocations("/js/");
        registry.addResourceHandler("/plugins/**").addResourceLocations("/plugins/");
    }

}

SpringMvcConfig类上添加注解
@Import(SpringWebSupport.class)

启动测试访问正常，但是没有数据，修改books.html

  //列表
            getAll() {
                axios.get("/books").then((res)=>{
                    if(res.data.code == 20041){
                        this.dataList = res.data.data;
                    }else if(res.data.code == 20040){
                        this.$message.error("查询失败")
                    }else {
                        this.$message.error(res.data.msg)
                    }
                })
            }

 添加功能

//添加
            handleAdd() {
                axios.post("/books",this.formData).then((res)=>{
                    if(res.data.code == 20011){
                        //关闭添加窗口
                        this.dialogFormVisible = false;
                        //弹出添加成功提示
                        this.$message.success("添加成功")
                    }else if(res.data.code == 20010){
                       this.$message.error("添加失败")
                    }else {
                        this.$message.error(res.data.msg)
                    }
                }).finally(()=>{
                    this.getAll()
                })
            }

弹出编辑窗口

//弹出编辑窗口
            handleUpdate(row) {

                axios.get("/books/"+row.id).then((res)=>{
                    if(res.data.code ==20041){
                        this.dialogFormVisible4Edit =true
                        this.formData =res.data.data
                    }else if(res.data.code == 20040){
                        this.$message.error("查询失败")
                    }else {
                        this.$message.error(res.data.msg)
                    }

                }).finally(()=>{
                    this.getAll()
                })
            }

  • 保存修改后的图书信息

//编辑
handleEdit() {
    //发送ajax请求
    axios.put("/books",this.formData).then((res)=>{
        //如果操作成功，关闭弹层，显示数据
        if(res.data.code == 20031){
            this.dialogFormVisible4Edit = false;
            this.$message.success("修改成功");
        }else if(res.data.code == 20030){
            this.$message.error("修改失败");
        }else{
            this.$message.error(res.data.msg);
        }
    }).finally(()=>{
        this.getAll();
    });
}

删除功能

// 删除
handleDelete(row) {
    //1.弹出提示框
    this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
        type:'info'
    }).then(()=>{
        //2.做删除业务
        axios.delete("/books/"+row.id).then((res)=>{
            if(res.data.code == 20021){
                this.$message.success("删除成功");
            }else{
                this.$message.error("删除失败");
            }
        }).finally(()=>{
            this.getAll();
        });
    }).catch(()=>{
        //3.取消删除
        this.$message.info("取消删除操作");
    });
}

完整books.html代码

<!DOCTYPE html>

<html>

<head>

    <!-- 页面meta -->

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>SpringMVC案例</title>

    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式 -->

    <link rel="stylesheet" href="../plugins/elementui/index.css">

    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../css/style.css">

</head>

<body class="hold-transition">

<div id="app">

    <div class="content-header">

        <h1>图书管理</h1>

    </div>

    <div class="app-container">

        <div class="box">

            <div class="filter-container">

                <el-input placeholder="图书名称" v-model="pagination.queryString" style="width: 200px;"
                          class="filter-item"></el-input>

                <el-button @click="getAll()" class="dalfBut">查询</el-button>

                <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>

            </div>

            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>

                <el-table-column type="index" align="center" label="序号"></el-table-column>

                <el-table-column prop="type" label="图书类别" align="center"></el-table-column>

                <el-table-column prop="name" label="图书名称" align="center"></el-table-column>

                <el-table-column prop="description" label="描述" align="center"></el-table-column>

                <el-table-column label="操作" align="center">

                    <template slot-scope="scope">

                        <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>

                        <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>

                    </template>

                </el-table-column>

            </el-table>

            <!-- 新增标签弹层 -->

            <div class="add-form">

                <el-dialog title="新增图书" :visible.sync="dialogFormVisible">

                    <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right"
                             label-width="100px">

                        <el-row>

                            <el-col :span="12">

                                <el-form-item label="图书类别" prop="type">

                                    <el-input v-model="formData.type"/>

                                </el-form-item>

                            </el-col>

                            <el-col :span="12">

                                <el-form-item label="图书名称" prop="name">

                                    <el-input v-model="formData.name"/>

                                </el-form-item>

                            </el-col>

                        </el-row>


                        <el-row>

                            <el-col :span="24">

                                <el-form-item label="描述">

                                    <el-input v-model="formData.description" type="textarea"></el-input>

                                </el-form-item>

                            </el-col>

                        </el-row>

                    </el-form>

                    <div slot="footer" class="dialog-footer">

                        <el-button @click="dialogFormVisible = false">取消</el-button>

                        <el-button type="primary" @click="handleAdd()">确定</el-button>

                    </div>

                </el-dialog>

            </div>

            <!-- 编辑标签弹层 -->

            <div class="add-form">

                <el-dialog title="编辑检查项" :visible.sync="dialogFormVisible4Edit">

                    <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right"
                             label-width="100px">

                        <el-row>

                            <el-col :span="12">

                                <el-form-item label="图书类别" prop="type">

                                    <el-input v-model="formData.type"/>

                                </el-form-item>

                            </el-col>

                            <el-col :span="12">

                                <el-form-item label="图书名称" prop="name">

                                    <el-input v-model="formData.name"/>

                                </el-form-item>

                            </el-col>

                        </el-row>

                        <el-row>

                            <el-col :span="24">

                                <el-form-item label="描述">

                                    <el-input v-model="formData.description" type="textarea"></el-input>

                                </el-form-item>

                            </el-col>

                        </el-row>

                    </el-form>

                    <div slot="footer" class="dialog-footer">

                        <el-button @click="dialogFormVisible4Edit = false">取消</el-button>

                        <el-button type="primary" @click="handleEdit()">确定</el-button>

                    </div>

                </el-dialog>

            </div>

        </div>

    </div>

</div>

</body>

<!-- 引入组件库 -->

<script src="../js/vue.js"></script>

<script src="../plugins/elementui/index.js"></script>

<script type="text/javascript" src="../js/jquery.min.js"></script>

<script src="../js/axios-0.18.0.js"></script>

<script>
    var vue = new Vue({

        el: '#app',
        data: {
            pagination: {},
            dataList: [],//当前页要展示的列表数据
            formData: {},//表单数据
            dialogFormVisible: false,//控制表单是否可见
            dialogFormVisible4Edit: false,//编辑表单是否可见
            rules: {//校验规则
                type: [{required: true, message: '图书类别为必填项', trigger: 'blur'}],
                name: [{required: true, message: '图书名称为必填项', trigger: 'blur'}]
            }
        },

        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.getAll();
        },

        methods: {
            //列表
            getAll() {
                axios.get('/books').then(res => {
                    if (res.data.code == 20041) {
                        this.dataList = res.data.data;
                    } else if (res.data.code == 20042) {
                        this.$message.error("查询失败")
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })

            },

            //弹出添加窗口
            handleCreate() {
                this.dialogFormVisible = true;
                this.resetForm();
            },

            //重置表单
            resetForm() {
                this.formData = {};
            },

            //添加
            handleAdd() {
                axios.post('/books', this.formData).then(res => {
                    if (res.data.code == 20011) {
                        this.$message.success("添加成功")
                        this.dialogFormVisible = false;
                        this.getAll();
                    } else if (res.data.code == 20010) {
                        this.$message.error("添加失败")
                    } else {
                        this.$message.error(res.data.msg)
                    }
                }).finally(() => {
                    this.getAll()
                })
            },

            //弹出编辑窗口
            handleUpdate(row) {
                axios.get("/books/" + row.id).then(res => {
                    if (res.data.code == 20041) {
                        this.dialogFormVisible4Edit = true;
                        this.formData = res.data.data;
                    } else if (res.data.code == 20042) {
                        this.$message.error("查询失败")
                    } else {
                        this.$message.error(res.data.msg)
                    }

                }).finally(
                    () => {
                        this.getAll()
                    }
                )
            },

            //编辑
            handleEdit() {
                //发送ajax请求
                axios.put("/books",this.formData).then((res)=>{
                    //如果操作成功，关闭弹层，显示数据
                    if(res.data.code == 20031){
                        this.dialogFormVisible4Edit = false;
                        this.$message.success("修改成功");
                    }else if(res.data.code == 20030){
                        this.$message.error("修改失败");
                    }else{
                        this.$message.error(res.data.msg);
                    }
                }).finally(()=>{
                    this.getAll();
                });
            },

            // 删除
            handleDelete(row) {
                //1.弹出提示框
                this.$confirm("此操作永久删除当前数据，是否继续？","提示",{
                    type:'info'
                }).then(()=>{
                    //2.做删除业务
                    axios.delete("/books/"+row.id).then((res)=>{
                        if(res.data.code == 20021){
                            this.$message.success("删除成功");
                        }else{
                            this.$message.error("删除失败");
                        }
                    }).finally(()=>{
                        this.getAll();
                    });
                }).catch(()=>{
                    //3.取消删除
                    this.$message.info("取消删除操作");
                });
            }
        }
    })

</script>

</html>

敲代码的翠花
关注
专栏目录
新旧页面整合的思路
zh964822413的博客
04-02 512
在我们的项目中，出现了半路换框架的情况，相应的前台页面也要更换，新手，摸索前台更换的经验。 目的:在保留前台页面的功能的基础上，更新前台的样式。 css，新旧的css可以整合到一个css表中，保证无论是调用到哪个版本的css都用到，增加容错率 js作为功能是不能进行修改。 由于前台中 id多作为功能型的关键词，因此id不能改动，最起码要在js搜索一下，是否此id有作用，没有的情况下才能
SSM+HTML搭建(小白教学)
一枚数学专业的小码农的博客
02-24 1826
SSM+Vue+Element+Axios的保姆级教学搭建
SSM详细整合（有登录注册的例子）
小韩的博客
05-25 739
SSM详细整合（有登录注册的例子）
最通俗易懂的ssm框架整合讲解
沸羊羊_
09-16 5271
文章目录环境Mybatis1、数据库配置文件2、配置 MybatisSpring 整合 Mybatis1、context:property-placeholder标签作用？2、数据库连接池3、配置 SqlSessionFactory 对象4、配置扫描dao接口包整合 SpringMVCweb.xml 文件是如何执行的？1、执行顺序2、init-param标签3、load-on-startup标签springmvc 配置文件是如何执行的？1、mvc:annotation-driven作用？2、mvc:defa
SSM整合web项目访问同时html和jsp页面
qq_19688207的博客
04-12 2554
ssm 配置请看： https://blog.csdn.net/qq_19688207/article/details/114578526?spm=1001.2014.3001.5501 更改其中SpringMVC-servlet.xml和web.xml 一、SpringMVC-servlet.xml配置： 新增： <!-- 载入静态资源文件 --> <mvc:resources location="/resources/" mapping="/resources...
spring-ssm 框架整合
09-13
10. **测试**：编写JUnit测试用例，验证SSM整合是否成功，功能是否正常。 **总结** Spring-SSM框架整合提供了完整的Web应用解决方案，通过Spring的IoC和AOP特性，增强了代码的可维护性和可测试性；Struts2实现了...
管理系统系列--SSM整合项目——学生管理系统.zip
最新发布
02-25
SSM整合项目是Java开发中的常见实践，它指的是Spring、Spring MVC和MyBatis三个框架的集成应用。这个"学生管理系统"是基于SSM实现的一个典型管理信息系统，旨在提供对学生信息进行增删改查等基本操作的功能。下面将...
SSM框架整合-idea-ssm01.rar
01-07
在SSM整合中，MyBatis作为数据访问层，负责与数据库的交互。 在这个项目中，我们看到有三个jsp文件：index.jsp、find.jsp和welcome.jsp。这些是JSP（JavaServer Pages）文件，通常用于呈现动态内容。index.jsp可能...
Spring、SpringMVC、MyBatis整合 ---- ssm.rar
06-16
自己写的简单的Spring、SpringMVC、MyBatis整合，里面的配置文件都全，方法的话，写了个保存账户信息和查询账户的方法，...和我的博客一起看更佳哦~（Java回顾（二十六）Spring、SpringMVC、Mybatis整合 (SSM整合)）
day10-SSM技术整合-V1.011
08-08
本篇内容主要围绕"day10-SSM技术整合-V1.011"展开，详细介绍了如何进行SSM整合以及相关知识点。 首先，SSM整合的核心在于创建一个分层架构的项目。这个架构通常包括四个主要部分： 1. **数据访问层**：这一层主要...
html5+jquery与ssm进行json交互集成项目
03-03
eclipse 下html5+jquery+springmvc+spring+mybatis进行json交互集成项目，基础搭建项目，具体版本参考lib下包的版本号
SSM框架结合html和jsp实现简单的查询功能
01-23
使用了SSM框架，并且分别结合html和jsp实现简单查询功能，并且也写入了增删改查的sql。非常简洁，适合新手入门学习
SSM整合html使用Ajax时，success获取不到controller类的返回值的问题解决。
蔡小波的博客
01-04 2023
使用ajax对数据库的执行删除，数据可以正常删除，就是controller方法可以执行，但是Ajax的success却接收不到controller类删除方法的返回值。却一直执行Ajax的error。 我的ajax是这样写的： $.ajax({ type: 'post', async: false, ...
前端页面整合及模态框使用总结
welcome to my blog!
10-09 520
IM笔记 模态框 1. 多个按钮同时控制一个模态框时要加一个公共变量例如 var flag = true 来控制显隐效果。 2. 记得清楚或者带入模态框的数据。 3. 遇到逻辑太复杂，多个变量无法控制同一模态框，或者模态框样式功能类似却发生冲突的情况下可以另外开一个模态框，避免不必要的混淆。 <!--逻辑框--> <div class="chat_evaluate_...
4、Spring Boot——整合页面模板
weixin_44868863的博客
05-29 3601
Spring Boot中可以支持前后端分离开发，这个时候就不需要后端页面模板，当然，Spring Boot中也支持直接页面模板，早期的Spring Boot中还支持使用Velocity作用页面模板，现在的Spring Boot已经不支持使用Velocity了，页面模板主要支持Thymeleaf和Freemarker,当然，作为Java最基本的页面模板Jsp,Spring Boot也是支持的，只是使...
前端页面的整合
weixin_34288121的博客
06-03 1764
2019独角兽企业重金招聘Python工程师标准>>> ...
如何把html网页整合到mvc中?
Delta_老兵的记录
04-06 2882
用vs的mvc4模版写了一个web系统，自己之后有做了一个html的网页，想用它作为系统的首页，怎么将html网页整合到mvc中? 在你创建了一个MVC的时候会生成一个view文件_ViewStart.cshtml，在里面原来有一句@{Layout = "~/Views/Shared/_Layout.cshtml";}如果你想把你自己写的html作为模板那就把你的那个html加到view文件夹里面...
HTML+SSM + MySQL的简单登录（一）
魔鬼的归宿
07-28 7897
对原始的Servlet+MVC+JDBC的登录Demo进行改造，使用SSM框架进行实现。 原始代码位置： http://blog.csdn.net/u014360189/article/details/76216088 一、配置Spring   使用Spring来配置bean组件，完成各层类及其使用的下层属性的注入。 主要有：  LoginServlet 的配置，LoginSer
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

敲代码的翠花

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值