主頁 > 前端設計 > SSM框架~2020最新整合配置模板教程

SSM框架~2020最新整合配置模板教程

2020-09-10 08:19:30 前端設計

目錄

    • 一、搭建資料庫環境
    • 二、基本環境搭建
      • 1、創建maven專案，添加web支持
      • 2、匯入依賴
      • 3、建立專案基本結構
    • 三、MyBatis層撰寫
      • 1、撰寫資料庫組態檔
      • 2、IDEA關聯資料庫
      • 3、撰寫MyBatis核心組態檔
      • 4、撰寫pojo物體類
      • 5、撰寫dao層
        • 1. 撰寫Mapper介面
        • 2. 撰寫Mapper介面對應的Mapper.xml
      • 6、撰寫service層
        • 1. 撰寫service層的介面
        • 2. 撰寫service層介面實作類
    • 四、Spring層撰寫
      • 1、Spring整合dao層
      • 2、Spring整合service層
    • 五、SpringMVC層撰寫
      • 1、撰寫spring-mvc.xml
      • 2、Spring組態檔整合
      • 3、配置web.xml
      • 4、撰寫Controller
      • 5、撰寫視圖層
        • 1. 撰寫index.jsp
        • 2. 撰寫展示所有書籍頁面allBooks.jsp
      • 6、運行測驗

實驗環境為：IDEA2020.1+MySQL8.0.21+Tomcat9.0.36+Maven3.3.9

最終專案結構圖：

image-20200907092115586

一、搭建資料庫環境

創建一個存放書籍資料的資料庫表

CREATE DATABASE `ssmbuild`;

USE `ssmbuild`;

DROP TABLE IF EXISTS `books`;

CREATE TABLE `books` (
`bookID` INT(10) NOT NULL AUTO_INCREMENT COMMENT '書id',
`bookName` VARCHAR(100) NOT NULL COMMENT '書名',
`bookCounts` INT(11) NOT NULL COMMENT '數量',
`detail` VARCHAR(200) NOT NULL COMMENT '描述',
KEY `bookID` (`bookID`)
) ENGINE=INNODB DEFAULT CHARSET=utf8

INSERT  INTO `books`(`bookID`,`bookName`,`bookCounts`,`detail`)VALUES
(1,'Java',1,'從入門到放棄'),
(2,'MySQL',10,'從刪庫到跑路'),
(3,'Linux',5,'從進門到進牢');

生成表格：
image-20200905001342967



二、基本環境搭建

1、創建maven專案，添加web支持

image-20200905135859129

2、匯入依賴

<dependencies>
   <!--Junit-->
   <dependency>
       <groupId>junit</groupId>
       <artifactId>junit</artifactId>
       <version>4.13</version>
   </dependency>
   <!--資料庫驅動-->
   <dependency>
       <groupId>mysql</groupId>
       <artifactId>mysql-connector-java</artifactId>
       <version>8.0.21</version>
   </dependency>
   <!-- 資料庫連接池:c3p0 -->
   <dependency>
       <groupId>com.mchange</groupId>
       <artifactId>c3p0</artifactId>
       <version>0.9.5.5</version>
   </dependency>

   <!--Servlet-->
   <dependency>
       <groupId>javax.servlet</groupId>
       <artifactId>servlet-api</artifactId>
       <version>2.5</version>
   </dependency>
    <!--JSP-->
   <dependency>
       <groupId>javax.servlet.jsp</groupId>
       <artifactId>jsp-api</artifactId>
       <version>2.2</version>
   </dependency>
    <!--jstl-->
   <dependency>
       <groupId>javax.servlet</groupId>
       <artifactId>jstl</artifactId>
       <version>1.2</version>
   </dependency>

   <!--Mybatis-->
   <dependency>
       <groupId>org.mybatis</groupId>
       <artifactId>mybatis</artifactId>
       <version>3.5.5</version>
   </dependency>
   <!--Mybatis-Spring-->
   <dependency>
       <groupId>org.mybatis</groupId>
       <artifactId>mybatis-spring</artifactId>
       <version>2.0.5</version>
   </dependency>

   <!--Spring-->
   <dependency>
       <groupId>org.springframework</groupId>
       <artifactId>spring-webmvc</artifactId>
       <version>5.2.8.RELEASE</version>
   </dependency>
   <!--Spring操作資料庫,還需要spring-jdbc-->
   <dependency>
       <groupId>org.springframework</groupId>
       <artifactId>spring-jdb	c</artifactId>
       <version>5.2.6.RELEASE</version>
   </dependency>
    
   <!--lombok-->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <version>1.18.12</version>
    </dependency>
</dependencies>

最后為了防止maven組態檔無法被匯出或生效，加入以下代碼

<build>
   <resources>
       <resource>
           <directory>src/main/java</directory>
           <includes>
               <include>**/*.properties</include>
               <include>**/*.xml</include>
           </includes>
           <filtering>false</filtering>
       </resource>
       <resource>
           <directory>src/main/resources</directory>
           <includes>
               <include>**/*.properties</include>
               <include>**/*.xml</include>
           </includes>
           <filtering>false</filtering>
       </resource>
   </resources>
</build>

3、建立專案基本結構

image-20200907092227945

在src/main/java目錄下新建以下四個包，為后續實驗準備

  • pojo：用來放物體類
  • dao：資料訪問層，data access object
  • service：服務層，呼叫dao層
  • controller：控制層，呼叫service層


三、MyBatis層撰寫

1、撰寫資料庫組態檔

在resource目錄下新建database.properties

image-20200907092540325
  • 注意MySQL8.0以上要設定時區，最后加上serverTimezone=Asia/Shanghai
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/ssmbuild?useSSL=true&useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
jdbc.username=root
jdbc.password=200024

2、IDEA關聯資料庫

image-20200905002711449
時區問題解決方案：https://blog.csdn.net/liuqiker/article/details/102455077

set global time_zone = '+8:00';

打開上述新建的資料表
image-20200905002901577

3、撰寫MyBatis核心組態檔

在resource目錄下新建mybatis-config.xml

image-20200907092439880
  • 資料源的配置，交給后續Spring去做
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <!--別名-->
    <typeAliases>
        <package name="pojo"/>
    </typeAliases>
</configuration>

4、撰寫pojo物體類

在pojo包下創建資料庫表所對應的物體類Books，這里使用了lombok插件

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Books {
    private int bookID;
    private String bookName;
    private int bookCounts;
    private String detail;
}

5、撰寫dao層

image-20200907092605602

1. 撰寫Mapper介面

在dao包下新建BookMapper介面，撰寫增刪改查四種業務對應的方法

public interface BookMapper {
    //增加一本書
    int addBook(Books books);

    //洗掉一本書
    //@Param注解指定傳入引數的名稱
    int deleteBookByID(@Param("bookID") int id);

    //更新一本書
    int updateBook(Books books);

    //查詢一本書
    //@Param注解指定傳入引數的名稱
    Books queryByID(@Param("bookID") int id);

    //查詢全部的書
    List<Books> queryAllBooks();
}

2. 撰寫Mapper介面對應的Mapper.xml

一個Mapper.xml對應一個Mapper介面，要用namespace系結上述介面

  • 實作上述介面里的所有方法
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="dao.BookMapper">
    <!--增加一本書-->
    <insert id="addBook" parameterType="pojo.Books">
        insert into ssmbuild.books(bookName,bookCount,detail)
        values (#{bookName},#{bookCount},#{detail})
    </insert>
    
    <!--洗掉一本書-->
    <delete id="deleteBookByID" parameterType="int">
        delete from ssmbuild.books where bookID=#{bookID}
    </delete>
    
     <!--更新一本書-->
    <update id="updateBook" parameterType="pojo.Books">
        update ssmbuild.books set
        bookName=#{bookName},bookCounts=#{bookCounts},detail=#{detail}
        where bookID=#{bookID} ;
    </update>

     <!--查詢一本書-->
    <select id="queryByID" resultType="pojo.Books">
        select * from ssmbuild.books where bookID=#{bookID}
    </select>

     <!--查詢所有書-->
    <select id="queryAllBooks" resultType="pojo.Books">
        select * from ssmbuild.books
    </select>
</mapper>

然后到mybatis核心組態檔中注冊上述mapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <!--別名-->
    <typeAliases>
        <package name="pojo"/>
    </typeAliases>
    
    <!--注冊mapper-->
    <mappers>
    	<mapper class="dao.BookMapper"/>
	</mappers>
</configuration>

6、撰寫service層

image-20200907092627828

1. 撰寫service層的介面

在service包下新建BookService介面，同Mapper介面里的方法一致

package service;

import pojo.Books;
import java.util.List;

public interface BookService {
    //增加一本書
    int addBook(Books books);

    //洗掉一本書
    int deleteBookByID(int id);

    //更新一本書
    int updateBook(Books books);

    //查詢一本書
    Books queryByID(int id);

    //查詢全部的書
    List<Books> queryAllBooks();
}

2. 撰寫service層介面實作類

然后再service包下新建上述介面的實作類BookServiceImpl

  • service層用來呼叫dao層，所以內置私有屬性為dao層的Mapper介面物件
package service;

import dao.BookMapper;
import pojo.Books;

import java.awt.print.Book;
import java.util.List;

//service層呼叫dao層
public class BookServiceImpl implements BookService {
    //dao層的Mapper介面物件
    private BookMapper bookMapper;

    //set方法，為后續Spring注入準備
    public void setBookMapper(BookMapper bookMapper) {
        this.bookMapper = bookMapper;
    }

    public int addBook(Books books) {
        //呼叫dao層的方法
        return bookMapper.addBook(books);
    }

    public int deleteBookByID(int id) {
        //呼叫dao層的方法
        return bookMapper.deleteBookByID(id);
    }

    public int updateBook(Books books) {
        //呼叫dao層的方法
        return bookMapper.updateBook(books);
    }

    public Books queryByID(int id) {
        //呼叫dao層的方法
        return bookMapper.queryByID(id);
    }

    public List<Books> queryAllBooks() {
        //呼叫dao層的方法
        return bookMapper.queryAllBooks();
    }
}


四、Spring層撰寫

1、Spring整合dao層

在resource目錄下新建spring-dao.xml

image-20200907092655386

  1. 關聯資料庫組態檔database.properties，要引入context約束

  2. 配置MyBatis資料源，這里使用第三方的c3p0，還可以附加一些私有屬性

    image-20200906124914041

  3. 創建sqlSessionFactory，在 MyBatis-Spring 中，則使用 SqlSessionFactoryBean 來創建，要配置兩個重要屬性

    • configLocation系結MyBatis核心組態檔
    • dataSource指定資料源（必要）

  4. 配置自動掃描包dao，動態實作了dao層介面可以注入到Spring容器中

    （在原來我們是創建sqlSessionTemplate物件，然后再創建一個Mapper介面實作類，其中內置sqlSessionTemplate私有物件，通過該物件進行操作）

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">

    <!--1.關聯資料庫組態檔-->
    <context:property-placeholder location="classpath:database.properties"/>

    <!--2.資料庫連接池
       		dbcp 半自動化操作 不能自動連接
       		c3p0 自動化操作（自動的加載組態檔 并且設定到物件里面）
       		druid、hikari-->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <!--配置連接池屬性，使用了EL運算式-->
        <property name="driverClass" value="${jdbc.driver}"/>
        <property name="jdbcUrl" value="${jdbc.url}"/>
        <property name="user" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
        
       <!-- c3p0連接池的私有屬性 -->
       <property name="maxPoolSize" value="30"/>
       <property name="minPoolSize" value="10"/>
       <!-- 關閉連接后不自動commit -->
       <property name="autoCommitOnClose" value="false"/>
       <!-- 獲取連接超時時間 -->
       <property name="checkoutTimeout" value="10000"/>
       <!-- 當獲取連接失敗重試次數 -->
       <property name="acquireRetryAttempts" value="2"/>
    </bean>

    <!--3.sqlSessionFactory-->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--參考上述資料源-->
        <property name="dataSource" ref="dataSource"/>
        <!--系結MyBatis組態檔-->
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
    </bean>

    <!--4.配置dao介面掃描包，動態實作了Dao介面可以注入到Spring容器中-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!--注入sqlSessionFactory-->
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
        <!--要掃描的dao包-->
        <property name="basePackage" value="dao"/>
    </bean>
</beans>

2、Spring整合service層

在resource目錄下新建spring-service.xml

image-20200907092714987
  1. 配置掃描service包，使該包下的注解生效
  2. 將所有業務類注入到Spring中
  3. 配置宣告式事務，需要注入資料源
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">
    
    <!--1.掃描service下的包,這個包下的注解就會生效-->
    <context:component-scan base-package="service"/>

    <!--將所有的業務類注入到Spring，可以通過配置或者注解實作-->
    <bean id="BookServiceImpl" class="service.BookServiceImpl">
        <!--這里的ref指向spring-dao.xml最后Spring注入的dao介面-->
        <property name="bookMapper" ref="bookMapper"/>
    </bean>

    <!--宣告式事務配置-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!--注入資料源-->
        <property name="dataSource" ref="dataSource"/>
    </bean>

</beans>


五、SpringMVC層撰寫

1、撰寫spring-mvc.xml

image-20200907092735743
  1. 自動掃描包
  2. 過濾靜態資源
  3. 支持mvc注解驅動
  4. 視圖決議器
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/mvc
       http://www.springframework.org/schema/mvc/spring-mvc.xsd 
       http://www.springframework.org/schema/context
       https://www.springframework.org/schema/context/spring-context.xsd">

    <!--開啟SpringMVC注解驅動-->
    <mvc:annotation-driven/>
    
    <!--靜態資源過濾-->
    <mvc:default-servlet-handler/>
    
    <!--掃描包controller-->
    <context:component-scan base-package="controller"/>

    <!--視圖決議器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
</beans>

2、Spring組態檔整合

image-20200907092812107

applicationContext.xml匯入上述組態檔，作為整體的組態檔

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       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">

    <import resource="spring-dao.xml"/>
    <import resource="spring-service.xml"/>
    <import resource="spring-mvc.xml"/>

</beans>

3、配置web.xml

image-20200907092837381
  • 注冊DispatcherServlet，需要系結SpringMVC組態檔，這里一定要系結整體的組態檔applicationContext.xml，并設定啟動級別
  • 增加亂碼過濾
  • 設定session過期時間
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <!--DispatcherServlet-->
    <servlet>
        <servlet-name>springmvc</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:applicationContext.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvc</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <!--亂碼過濾-->
    <filter>
        <filter-name>encodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>encodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!--session過期時間-->
    <session-config>
        <session-timeout>15</session-timeout>
    </session-config>
</web-app>

4、撰寫Controller

再controller包下新建BookController類

image-20200907092858032 
@Controller
@RequestMapping("/book")
public class BookController {
    //controller層呼叫service層
    @Autowired
    @Qualifier("BookServiceImpl")
    private BookService bookService;

    //查詢全部書籍，并且回傳到一個頁面進行顯示
    @RequestMapping("/allBooks")
    public String list(Model model) {
        List<Books> books = bookService.queryAllBooks();
        model.addAttribute("list", books);
        return "allBooks";
    }
}

5、撰寫視圖層

在web/WEB-INF/目錄下新建jsp包，用來存放我們自定義視圖頁面

image-20200907092928877

1. 撰寫index.jsp

超鏈接跳轉到我們自定的展示所有書籍頁面allBooks.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首頁</title>
</head>
<body>
<h5>
    <a href="https://blog.csdn.net/qq_45173404/article/details/${pageContext.request.contextPath}/book/allBooks">進入書籍頁面</a>
</h5>
</body>
</html>

2. 撰寫展示所有書籍頁面allBooks.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>全部書籍展示</title>
</head>
<body>
<h1>全部書籍展示</h1>
${list}
</body>
</html>

6、運行測驗

配置Tomcat啟動測驗，記得添加lib目錄，否則Tomcat啟動不來
image-20200906214851091
啟動Tomcat后，默認進入的index.jsp
image-20200906183814837

然后我們點擊超鏈接image-20200906235549567
成功顯示了我們的所有書籍！

到此位置，SSM整合專案到此結束，后續大家可以自己實作相關業務！！！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/1429.html

標籤：其他

上一篇：Java程式員月薪20k的漲薪秘籍，沒點絕活敢跳槽嗎？

下一篇：阿里大熱框架！Spring Security OAuth2.0認證授權開源筆記

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • vue移動端上拉加載

    可能做得過于簡單或者比較low，請各位大佬留情，一起探討技術 ......

    uj5u.com 2020-09-10 04:38:07 more
  • 優美網站首頁，頂部多層導航

    一個個人用的瀏覽器首頁，可以把一下常用的網站放在這里，平常打開會比較方便。 第一步，HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

    uj5u.com 2020-09-10 04:38:47 more
  • 頁面為要加<!DOCTYPE html>

    最近因為寫一個js函式，需要用到$(window).height(); 由于手寫demo的時候，過于自信，其實對前端方面的認識也不夠體系，用文本檔案直接敲出來的html代碼，第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

    uj5u.com 2020-09-10 04:38:52 more
  • WordPress網站程式手動升級要做好資料備份

    WordPress博客網站程式在進行升級前，必須要做好網站資料的備份，這個問題良家佐言是遇見過的；在剛開始接觸WordPress博客程式的時候，因為升級問題和博客網站的修改的一些嘗試，良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名，每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

    uj5u.com 2020-09-10 04:39:30 more
  • WordPress程式不能升級為5.4.2版本的原因

    WordPress是一款個人博客系統，受到英文博客愛好者和中文博客愛好者的追捧，并逐步演化成一款內容管理系統軟體；它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新，就會牽動無數WordPress愛好者的心， ......

    uj5u.com 2020-09-10 04:39:49 more
  • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

    網頁中常見的一種效果，首字改變樣式或者首行改變樣式，效果如下圖。 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

    uj5u.com 2020-09-10 04:40:09 more
  • 關于a標簽的講解

    什么是a標簽？ <a> 標簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性，它指定鏈接的目標。 a標簽的語法格式：<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中，鏈接的默認外觀如下： 未被訪問的鏈接帶 ......

    uj5u.com 2020-09-10 04:40:11 more
  • 前端輪播圖

    在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址： 鏈接：https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼：4aks swiper.min.css地址 鏈接：https://pan.b ......

    uj5u.com 2020-09-10 04:40:13 more
  • 如何設定html中的背景圖片（全屏顯示，且不拉伸）

    1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

    uj5u.com 2020-09-10 04:40:16 more
  • Java學習——HTML詳解（上）

    HTML詳解 初識HTML Hyper Text Markup Language（超文本標記語言） 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽，描述一些 ......

    uj5u.com 2020-09-10 04:40:33 more
最新发布
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 07:59:23 more
  • 生產事故-走近科學之消失的JWT

    入職多年，面對生產環境，盡管都是小心翼翼，慎之又慎，還是難免捅出簍子。輕則滿頭大汗，面紅耳赤。重則系統停擺，損失資金。每一個生產事故的背后，都是寶貴的經驗和教訓，都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故，特開此專題，長期更新和記錄大大小小的各類事故。有些是親身經歷，有些是經人耳傳口授 ......

    uj5u.com 2023-04-18 07:55:04 more
  • 記錄--Canvas實作打飛字游戲

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 打開游戲界面，看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上，有一個白色的矩形框，里面不斷下落著各種單詞，而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配，那么我就可以獲得得分；如果我輸入的單詞錯誤或者時間過長，那么我就會輸 ......

    uj5u.com 2023-04-04 08:35:30 more
  • 了解 HTTP 看這一篇就夠

    在學習網路之前，了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子，引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

    uj5u.com 2023-03-16 11:00:15 more
  • 藍牙-低功耗中心設備

    //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

    uj5u.com 2023-03-15 09:06:45 more
  • canvas畫板（滑鼠和觸摸）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

    uj5u.com 2023-02-15 08:56:31 more
  • 手機端H5 實作自定義拍照界面

    手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作，和在桌面端做法基本一致。 首先，使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流，并將其傳遞給 <video> 標簽進行渲染。 接著，使用 HTML 的 < ......

    uj5u.com 2023-01-12 07:58:22 more
  • 記錄--短視頻滑動播放在 H5 下的實作

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 短視頻已經無數不在了，但是主體還是使用 app 來承載的。本文講述 H5 如何實作 app 的視頻滑動體驗。 無聲勝有聲，一圖頂百辯，且看下圖： 網址鏈接（需在微信或者手Q中瀏覽） 從上圖可以看到，我們主要實作的功能也是本文要講解的有： ......

    uj5u.com 2023-01-04 07:29:05 more
  • 一文讀懂 HTTP/1 HTTP/2 HTTP/3

    從 1989 年萬維網（www）誕生，HTTP（HyperText Transfer Protocol）經歷了眾多版本迭代，WebSocket 也在期間萌芽。1991 年 HTTP0.9 被發明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發布。2020 年 HTTP3 或能正... ......

    uj5u.com 2022-12-24 06:56:02 more
  • 【HTML基礎篇002】HTML之form表單超詳解

    ??一、form表單是什么

    ??二、form表單的屬性

    ??三、input中的各種Type屬性值

    ??四、標簽 ......

    uj5u.com 2022-12-18 07:17:06 more

Copyright © 2010-2020 有解無憂