AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

【SSM】35分钟手搓从数据库到前端页面展示（附完整代码）(一）

2022-05-31 997
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
RDS DuckDB + QuickBI 企业套餐，8核32GB + QuickBI 专业版
RDS MySQL DuckDB 分析主实例，基础系列 4核8GB
RDS MySQL DuckDB 分析主实例，集群系列 4核8GB
简介： 【SSM】35分钟手搓从数据库到前端页面展示（附完整代码）(一）

文章目录

建表

新建项目，引入jar包

src.main.java

entity 实体类

dao 接口

service

controller

resources

spring.xml

web

web.xml

index.jsp

save.jsp

user.jsp

部署Tomcat


建表

快速建一个userinfos表，并插入两条数据

show databases;
drop database if exists mydemo;
create database mydemo;
use mydemo;
create table userinfos(
userid int primary key not null auto_increment,
username varchar(20) not null,
birthday date not null);
show tables;
insert into userinfos(username,birthday) values ('aaa','1996-9-9');
insert into userinfos(username,birthday) values('bbb','1996-9-9');
select * from userinfos;

20191116192507811.png


新建项目，引入jar包

项目结构预览

由于40分钟没能搓完，这会儿已经ssmdemo6了!，想要框架玩的6，基础功必须扎实！！


20191116193232259.png


pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.kgc</groupId>
  <artifactId>ssmdemo2</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>
  <name>ssmdemo2 Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>
  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
    <spring-version>4.3.7.RELEASE</spring-version>
    <json-version>2.9.8</json-version>
  </properties>
    <!-- 单元测试 -->
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
    <!-- 2.数据库 -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.38</version>
    </dependency>
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.1.10</version>
    </dependency>
    <!-- DAO: MyBatis -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.4.6</version>
    </dependency>
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.2</version>
    </dependency>
    <!-- 3.Servlet web -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
      <!--provided表明该包只在编译和测试的时候用，因为tomcat也有servlet-api包，
      此处为了防止冲突-->
      <scope>provided</scope>
    </dependency>
    <!--jsp标签库-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>
    <!--Json-->
    <!--序列化，将对象转换成json-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>${json-version}</version>
    </dependency>
    <!--反序列化-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>${json-version}</version>
    </dependency>
    <!--注释语法 使json按按要求返回信息-->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>${json-version}</version>
    </dependency>
    <!-- 4.Spring -->
    <!-- 1)Spring核心 -->
    <!--核心容器，提供基本框架-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>${spring-version}</version>
    </dependency>
    <!--负责实现Spring框架的IOC模块-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-beans</artifactId>
      <version>${spring-version}</version>
    </dependency>
    <!--spring应用上下文-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>${spring-version}</version>
    </dependency>
    <!-- 2)Spring DAO层 -->
    <!--分离业务逻辑和数据库交互代码-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>${spring-version}</version>
    </dependency>
    <!--实现事务管理-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>${spring-version}</version>
    </dependency>
    <!-- 3)Spring web -->
    <!--分离事物逻辑视图控制器-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring-version}</version>
    </dependency>
  </dependencies>
  <build>
    <finalName>ssmdemo2</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <!--解决maven国内慢-->
        <plugin>
          <groupId>org.apache.maven.plugins</groupId>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.6.1</version>
          <configuration>
            <source>1.8</source>
            <target>1.8</target>
          </configuration>
        </plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.22.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
      </plugins>
    </pluginManagement>
     <!--mapper产生对应的xml文件-->
    <resources>
      <resource>
        <directory>src/main/java</directory>
        <includes>
          <include>**/*.properties</include>
          <include>**/*.xml</include>
        </includes>
        <filtering>false</filtering>
      </resource>
    </resources>
  </build>
</project>




src.main.java

entity 实体类

package com.kgc.ssmdemo2.entity;
import java.io.Serializable;
import java.util.Date;
/**
 * @author：J
 * @date：2019/11/13
 * @aim：
 */
public class Userinfos implements Serializable {
    private int userid;
    private String username;
    private Date birthday;
    public int getUserid() {
        return userid;
    }
    public void setUserid(int userid) {
        this.userid = userid;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public Date getBirthday() {
        return birthday;
    }
    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }
}


dao 接口

package com.kgc.ssmdemo5.dao;
import com.kgc.ssmdemo5.entity.User;
import org.apache.ibatis.annotations.*;
import java.util.List;
public interface UserDAO {
    @Insert("insert into userinfos(username,birthday) values (#{username},#{birthday}) ")
    public void insertUser(User user);
    @Delete("delete from userinfos where userid=#{userid}")
    public void delUser(@Param("userid") int userid);
    @Update("update userinfos set username=#{username},birthday=#{birthday} where userid=#{userid}")
    public void modUser(User user);
    @Select("select * from userinfos")
    public List<User> findAll();
    @Select("select * from userinfos where userid=#{userid}")
    public User findById(@Param("userid") int userid);
}


这里用了几个注解的小操作，省去了后面写usermapper.xml和mybatis-config.xml ，距离40分钟搓完的小目标又近了一步，哈哈！


service


package com.kgc.ssmdemo2.service;
import com.kgc.ssmdemo2.dao.UserDAO;
import com.kgc.ssmdemo2.entity.Userinfos;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.util.List;
/**
 * @author：J
 * @date：2019/11/13
 * @aim：
 */
@Service
@Transactional
public class UserService {
    @Autowired
    private UserDAO userDAO;
    public void saveUser(Userinfos user){
        userDAO.insertUser(user);
    }
    public void deUser(int userid){
        userDAO.delUser(userid);
    }
    public void modUser(Userinfos user){
        userDAO.modUser(user);
    }
    public List<Userinfos> findAll(){
        return userDAO.findAll();
    }
    public Userinfos finByid(int userid){
        return userDAO.finByid(userid);
    }
}


controller

package com.kgc.ssmdemo2.controller;
import com.kgc.ssmdemo2.entity.Userinfos;
import com.kgc.ssmdemo2.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.propertyeditors.CustomDateEditor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.WebDataBinder;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import java.text.SimpleDateFormat;
import java.util.Date;
/**
 * @author：J
 * @date：2019/11/13
 * @aim：
 */
@Controller
public class InitCtrlk {
    @Autowired
    private UserService userService;
    /**
     *接受前端页面传送出来的日期类型 并进行转换
     */
    @InitBinder
    public void dateHanlder(WebDataBinder binder){
        SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
        sdf.setLenient(true);
        binder.registerCustomEditor(Date.class,new CustomDateEditor(sdf,true));
    }
    @RequestMapping("/init.do")
    public String init(HttpServletRequest request){
        request.setAttribute("infos",userService.findAll());
        return "index.jsp";
    }
    @RequestMapping("/save.do")
    public String save(Userinfos user){
       userService.saveUser(user);
       return "redirect:/init.do";
    }
    @RequestMapping("/del.do")
    public String del(int userid){
        userService.deUser(userid);
        return "redirect:/init.do";
    }
    @RequestMapping("/mod.do")
    public String mod(Userinfos user){
        userService.modUser(user);
        return "redirect:/init.do";
    }
    @RequestMapping("/single.do")
    public String single(int userid,HttpServletRequest request){
        request.setAttribute("user",userService.finByid(userid));
        return "user.jsp";
    }
}


resources

spring.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
                          http://www.springframework.org/schema/beans/spring-beans.xsd
                          http://www.springframework.org/schema/context
                          http://www.springframework.org/schema/context/spring-context.xsd
                          http://www.springframework.org/schema/mvc
                          http://www.springframework.org/schema/mvc/spring-mvc.xsd
                          http://www.springframework.org/schema/tx
                          http://www.springframework.org/schema/tx/spring-tx.xsd">
                          <!--开启自动配置-->
    <context:annotation-config></context:annotation-config>
    <!-- 扫描项目下所有使用注解的类型 -->
    <context:component-scan base-package="com.kgc.ssmdemo2"></context:component-scan>
    <!-- 2.数据库连接池 -->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
        <!-- 配置连接池属性 -->
        <property name="driverClassName" value="com.mysql.jdbc.Driver"></property>
        <property name="url" value="jdbc:mysql://localhost/mydemo"></property>
        <property name="username" value="root"></property>
        <property name="password" value="root"></property>
        <property name="initialSize" value="3"></property>
        <property name="maxActive"  value="30"></property>
        <property name="maxWait" value="30000"></property>
        <property name="testOnBorrow" value="true"></property>
    </bean>
    <!-- 配置事务管理器 -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!-- 注入数据库连接池 -->
        <property name="dataSource" ref="dataSource"></property>
    </bean>
    <!-- 配置基于注解的声明式事务 -->
    <tx:annotation-driven transaction-manager="transactionManager"></tx:annotation-driven>
    <!--整合spring和mybatis-->
    <!-- 3.配置SqlSessionFactory对象 -->
    <bean id="sessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 注入数据库连接池 -->
        <property name="dataSource" ref="dataSource"></property>
        <!-- 配置mybatis全局配置文件:mybatis.cfg.xml -->
        <!--<property name="configLocation" value="classpath:mybatis.cfg.xml"></property>-->
        <!-- 扫描sql配置文件:mapper需要的xml文件 -->
        <!--<property name="mapperLocations" value="classpath*:mapper/*.xml"></property>-->
    </bean>
    <!-- 4.配置扫描Dao接口包，动态实现Dao接口，注入到spring容器中 -->
    <bean id="scannerConfigurer" class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!-- 给出需要扫描Dao接口包 -->
        <property name="basePackage" value="com.kgc.ssmdemo2.dao"></property>
    </bean>
</beans>
文章标签：
云数据库 RDS MySQL 版
Java
前端开发
应用服务中间件
数据库
关键词：
前端页面
数据库代码
前端代码
ssm数据库
数据库页面
相关实践学习
每个IT人都想学的“Web应用上云经典架构”实战
本实验从Web应用上云这个最基本的、最普遍的需求出发，帮助IT从业者们通过“阿里云Web应用上云解决方案”，了解一个企业级Web应用上云的常见架构，了解如何构建一个高可用、可扩展的企业级应用架构。
MySQL数据库入门学习
本课程通过最流行的开源数据库MySQL带你了解数据库的世界。 &nbsp; 相关的阿里云产品：云数据库RDS MySQL 版 阿里云关系型数据库RDS（Relational Database Service）是一种稳定可靠、可弹性伸缩的在线数据库服务，提供容灾、备份、恢复、迁移等方面的全套解决方案，彻底解决数据库运维的烦恼。 了解产品详情:&nbsp;https://www.aliyun.com/product/rds/mysql&nbsp;
云祁
目录
相关文章
凉凉心.
|
7月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
伪类：伪类这个叫法源自于它们跟类相似，但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器)： UI伪类：会在HTML元素处于某种状态时(例如：鼠标指针位于连接上)，为该元素应用CSS样式。 :hover 结构化伪类：会在标记中存在某种结构上的关系时 例如： 某元素是一组元素中的第一个或最后一个，为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
凉凉心.
823 2
蚝油菜花
|
人工智能 自然语言处理 前端开发
DeepSite：基于DeepSeek的开源AI前端开发神器，一键生成游戏/网页代码
DeepSite是基于DeepSeek-V3模型的在线开发工具，无需配置环境即可通过自然语言描述快速生成游戏、网页和应用代码，并支持实时预览效果，显著降低开发门槛。
蚝油菜花
1921 93
DeepSite：基于DeepSeek的开源AI前端开发神器，一键生成游戏/网页代码
1892286422419957
|
11月前
|
IDE 前端开发 开发工具
用通义灵码IDE做产品高保真原型和前端页面
通义灵码IDE助力高效开发，告别传统Axure原型图的繁琐沟通。通过该工具可直接生成高保真产品原型与前端页面，大幅提升客户确认效率及满意度。现已将相关演示发布至B站（https://www.bilibili.com/video/BV18qT7ziEb7/?vd_source=dc6a6864c895818db6ce4170d50b3557），欢迎体验！用直观操作代替反复说明，让交付更流畅。
1892286422419957
823 1
游客tsrksm3mlhq4y
|
前端开发 JavaScript 安全
前端 “屎山代码“ 避坑指南与重构策略
屎山代码
游客tsrksm3mlhq4y
1479 11
1467896997967815
|
前端开发 Java 关系型数据库
基于ssm的考研图书电子商务平台，附源码+数据库+论文
考研图书电子商务平台是一个基于Java的B/S架构系统，适用于Windows环境。该平台设有管理员和用户权限，管理员可管理商品、用户、留言板及订单，用户可管理收货地址、订单、收藏及购买商品。技术框架包括前端Vue+HTML+JavaScript+CSS+LayUI，后端SSM，数据库为MySQL。项目包含17个数据库表，支持Maven构建。提供演示视频和详细文档，支持免费远程调试安装，确保顺利运行。
1467896997967815
240 13
基于ssm的考研图书电子商务平台，附源码+数据库+论文
阿里云云原生
|
12月前
|
自然语言处理 前端开发 IDE
用通义灵码全新智能体+MCP实现从设计稿到前端代码，个人免费用
通义灵码全新升级，发布国内首个支持“自主决策+工具链闭环”的编程智能体，面向个人免费！新增功能包括智能体模式、混合推理模型Qwen3支持、全面集成MCP中文社区（涵盖2400+服务）及长期记忆能力。用户可通过IDE插件使用，兼容主流开发环境如JetBrains、VS Code和Visual Studio。教程展示如何将MasterGo设计稿转化为前端代码，简化开发流程。探索链接：[通义灵码官网](https://lingma.aliyun.com/)。
阿里云云原生
2578 2
1467896997967815
|
前端开发 Java 关系型数据库
基于ssm的社区物业管理系统，附源码+数据库+论文+任务书
社区物业管理系统采用B/S架构，基于Java语言开发，使用MySQL数据库。系统涵盖个人中心、用户管理、楼盘管理、收费管理、停车登记、报修与投诉管理等功能模块，方便管理员及用户操作。前端采用Vue、HTML、JavaScript等技术，后端使用SSM框架。系统支持远程安装调试，确保顺利运行。提供演示视频和详细文档截图，帮助用户快速上手。
1467896997967815
538 17
1467896997967815
|
前端开发 Java 关系型数据库
基于ssm的超市会员（积分)管理系统，附源码+数据库+论文，包安装调试
本项目为简单内容浏览和信息处理系统，具备管理员和员工权限。管理员可管理会员、员工、商品及积分记录，员工则负责积分、商品信息和兑换管理。技术框架采用Java编程语言，B/S架构，前端使用Vue+JSP+JavaScript+Css+LayUI，后端为SSM框架，数据库为MySQL。运行环境为Windows，JDK8+Tomcat8.5，非前后端分离的Maven项目。提供演示视频和详细文档，购买后支持免费远程安装调试。
1467896997967815
660 19
卓伊凡
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
卓伊凡
945 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
1467896997967815
|
前端开发 JavaScript Java
[Java计算机毕设]基于ssm的OA办公管理系统的设计与实现，附源码+数据库+论文+开题，包安装调试
OA办公管理系统是一款基于Java和SSM框架开发的B/S架构应用，适用于Windows系统。项目包含管理员、项目管理人员和普通用户三种角色，分别负责系统管理、请假审批、图书借阅等日常办公事务。系统使用Vue、HTML、JavaScript、CSS和LayUI构建前端，后端采用SSM框架，数据库为MySQL，共24张表。提供完整演示视频和详细文档截图，支持远程安装调试，确保顺利运行。
1467896997967815
507 17

热门文章

最新文章

  • 1
    🌟前端分页加载/懒加载预览PDF🌟
  • 2
    前端 CSS 经典：弧形边框选项卡
  • 3
    推荐一个适合App、小程序等所有前端应用的图表库
  • 4
    前端工程化-自动生成vue页面
  • 5
    【前端项目笔记】原生js上传文件及文件转换成base64、blob类型
  • 6
    前端开发新视界：2024年的五大技术趋势
  • 7
    【Web 前端】jQuery 库中的 $() 是什么？
  • 8
    总结10条~高级前端必知的小程序体积优化策略
  • 9
    【前端架构】Angular,React,Vue那个是2023的最佳选择?
  • 10
    chorme插件 ，在浏览器上模拟手机，pad 查看网页|前端技术开发必备插件
  • 1
    除了JDBC，还有哪些常见的数据库访问技术？
    604
  • 2
    Python SQLAlchemy模块：从入门到实战的数据库操作指南
    842
  • 3
    云栖大会｜AI时代关系型数据库创新突破：软硬协同赋能企业数智化转型
    1448
  • 4
    云栖大会｜AI时代的数据库变革升级与实践：Data+AI驱动企业智能新范式
    1418
  • 5
    云栖大会｜AI浪潮下的NoSQL演进：下一代数据库的破局之道
    714
  • 6
    【赵渝强老师】使用NetManager创建Oracle数据库的监听器
    369
  • 7
    探究ClickHouse数据库的Mutation机制
    363
  • 8
    阿里云RDS云数据库全解析：产品功能、收费标准与活动参考
    1433
  • 9
    云栖重磅｜瑶池数据库：从云原生数据底座向“AI就绪”的多模态数据底座演进
    1002
  • 10
    AI大模型应用实践 八：如何通过RAG数据库实现大模型的私有化定制与优化
    1609

    • 相关课程

    更多
  • 数据库的前世今生
  • 数据库核心概念
  • 从传统数据库到云数据库演进
  • 数据库常见问题排查
  • 数据库及SQL/MySQL基础
  • 高校精品课-西安交通大学 -数据库理论与技术

    • 相关电子书

    更多
  • 开源数据库工作室推广计划
  • 国产数据库研制人才培养实践
  • 阿里云&信通院《Serverless数据库技术研究报告》
    • 下一篇
    安装使用最新wordpress的最简单流程