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

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

2022-05-31 865
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
RDS MySQL Serverless 基础系列，0.5-2RCU 50GB
推荐场景：
学生管理系统数据库设计 搭建个人博客
RDS MySQL Serverless 高可用系列，价值2615元额度，1个月
云数据库 RDS PostgreSQL，高可用系列 2核4GB
简介： 【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;
云祁
目录
相关文章
凉凉心.
|
1月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
伪类：伪类这个叫法源自于它们跟类相似，但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器)： UI伪类：会在HTML元素处于某种状态时(例如：鼠标指针位于连接上)，为该元素应用CSS样式。 :hover 结构化伪类：会在标记中存在某种结构上的关系时 例如： 某元素是一组元素中的第一个或最后一个，为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
凉凉心.
145 1
阿里云开发者
|
4月前
|
存储 关系型数据库 数据库
附部署代码｜云数据库RDS 全托管 Supabase服务：小白轻松搞定开发AI应用
本文通过一个 Agentic RAG 应用的完整构建流程，展示了如何借助 RDS Supabase 快速搭建具备知识处理与智能决策能力的 AI 应用，展示从数据准备到应用部署的全流程，相较于传统开发模式效率大幅提升。
阿里云开发者
807 0
附部署代码｜云数据库RDS 全托管 Supabase服务：小白轻松搞定开发AI应用
xionghuyi-13330
|
5月前
|
人工智能 安全 机器人
无代码革命：10分钟打造企业专属数据库查询AI机器人
随着数字化转型加速，企业对高效智能交互解决方案的需求日益增长。阿里云AppFlow推出的AI助手产品，借助创新网页集成技术，助力企业打造专业数据库查询助手。本文详细介绍通过三步流程将AI助手转化为数据库交互工具的核心优势与操作指南，包括全场景适配、智能渲染引擎及零代码配置等三大技术突破。同时提供Web集成与企业微信集成方案，帮助企业实现便捷部署与安全管理，提升内外部用户体验。
xionghuyi-13330
611 12
无代码革命：10分钟打造企业专属数据库查询AI机器人
阿里云云原生
|
5月前
|
安全 druid Nacos
0 代码改造实现应用运行时数据库密码无损轮转
本文探讨了敏感数据的安全风险及降低账密泄漏风险的策略。国家颁布的《网络安全二级等保2.0标准》强调了企业数据安全的重要性。文章介绍了Nacos作为配置中心在提升数据库访问安全性方面的应用，并结合阿里云KMS、Druid连接池和Spring Cloud Alibaba社区推出的数据源动态轮转方案。该方案实现了加密配置统一托管、帐密全托管、双层权限管控等功能，将帐密切换时间从数小时优化到一秒，显著提升了安全性和效率。未来，MSE Nacos和KMS将扩展至更多组件如NoSQL、MQ等，提供一站式安全服务，助力AI时代的应用安全。
阿里云云原生
370 14
Echo_Wish
|
5月前
|
SQL 数据建模 关系型数据库
别光知道存数据库了，数据建模才是王道！（入门指南+实战代码）
别光知道存数据库了，数据建模才是王道！（入门指南+实战代码）
Echo_Wish
768 4
青云交（Java大数据AI云原生Python）
|
6月前
|
负载均衡 算法 关系型数据库
大数据大厂之MySQL数据库课程设计：揭秘MySQL集群架构负载均衡核心算法：从理论到Java代码实战，让你的数据库性能飙升！
本文聚焦 MySQL 集群架构中的负载均衡算法，阐述其重要性。详细介绍轮询、加权轮询、最少连接、加权最少连接、随机、源地址哈希等常用算法，分析各自优缺点及适用场景。并提供 Java 语言代码实现示例，助力直观理解。文章结构清晰，语言通俗易懂，对理解和应用负载均衡算法具有实用价值和参考价值。
青云交（Java大数据AI云原生Python）
411 14
大数据大厂之MySQL数据库课程设计：揭秘MySQL集群架构负载均衡核心算法：从理论到Java代码实战，让你的数据库性能飙升！
阿里云云原生
|
8月前
|
人工智能 前端开发 JavaScript
代码采纳率从 22% 到 33%，通义灵码辅助数据库智能编码实践
通义灵码本质上是一个AI agent，它已经进行了大量的优化。然而，为了更完美或有效地调用模型的潜在能力，我们在使用时仍需掌握一些技巧。通常，大多数人在使用通义灵码时会直接上手，这是 AI agent 的一个优势，即 zero shot 使用，无需任何上下文即可直接使用通义灵码的能力。
阿里云云原生
267 2
蚝油菜花
|
7月前
|
人工智能 自然语言处理 前端开发
DeepSite：基于DeepSeek的开源AI前端开发神器，一键生成游戏/网页代码
DeepSite是基于DeepSeek-V3模型的在线开发工具，无需配置环境即可通过自然语言描述快速生成游戏、网页和应用代码，并支持实时预览效果，显著降低开发门槛。
蚝油菜花
1481 93
DeepSite：基于DeepSeek的开源AI前端开发神器，一键生成游戏/网页代码
微服务和网关
|
4月前
|
安全 Java Nacos
0代码改动实现Spring应用数据库帐密自动轮转
Nacos作为国内被广泛使用的配置中心，已经成为应用侧的基础设施产品，近年来安全问题被更多关注，这是中国国内软件行业逐渐迈向成熟的标志，也是必经之路，Nacos提供配置加密存储-运行时轮转的核心安全能力，将在应用安全领域承担更多职责。
微服务和网关
146 1

热门文章

最新文章

  • 1
    除了JDBC，还有哪些常见的数据库访问技术？
  • 2
    前端如何存储数据：Cookie、LocalStorage 与 SessionStorage 全面解析
  • 3
    云栖大会｜AI时代关系型数据库创新突破：软硬协同赋能企业数智化转型
  • 4
    云栖大会｜AI时代的数据库变革升级与实践：Data+AI驱动企业智能新范式
  • 5
    阿里云RDS云数据库全解析：产品功能、收费标准与活动参考
  • 6
    AI大模型应用实践 八：如何通过RAG数据库实现大模型的私有化定制与优化
  • 7
    云栖重磅｜瑶池数据库：从云原生数据底座向“AI就绪”的多模态数据底座演进
  • 8
    通义灵码产品演示： 数据库设计与数据分析
  • 9
    云栖大会｜AI浪潮下的NoSQL演进：下一代数据库的破局之道
  • 10
    Python SQLAlchemy模块：从入门到实战的数据库操作指南
  • 1
    前端性能优化：虚拟滚动技术原理与实战
    761
  • 2
    前端性能优化：现代框架的关键策略
    312
  • 3
    前端性能优化：打造流畅的用户体验
    307
  • 4
    用通义灵码IDE做产品高保真原型和前端页面
    448
  • 5
    前端使用正则表达式提取经纬度 度分秒值
    166
  • 6
    前端工具方法整理
    161
  • 7
    PHP后端与uni-app前端协同的校园圈子系统：校园社交场景的跨端开发实践
    420
  • 8
    前端使用正则表达式检查是否为十六进制字符串
    175
  • 9
    【微前端】singleSpa&importHTMLEntry（流程图）源码解析
    124
  • 10
    Vue与TypeScript：如何实现更强大的前端开发
    283

    • 相关课程

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

    • 相关电子书

    更多
  • 开源数据库工作室推广计划
  • 国产数据库研制人才培养实践
  • 阿里云&信通院《Serverless数据库技术研究报告》
    • 下一篇
    oss云网关配置