javaweb快速入门

最新推荐文章于 2024-07-26 12:28:02 发布
最新推荐文章于 2024-07-26 12:28:02 发布
阅读量215 收藏
点赞数
分类专栏： web服务器 文章标签： java mybatis tomcat java-ee
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s2765504026/article/details/126185197
版权

使用maven、mybatis、servlet、tomcat、axois、html/css/javascript、vue、element快速构建javaweb项目

完整项目

  1. 首先创建项目

  2. 并整理项目结构
    在这里插入图片描述

  3. 配置pom.xml文件
    添加jar包标签和tomcat标签

<?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>org.example</groupId>
    <artifactId>brand-demo</artifactId>
    <version>1.0-SNAPSHOT</version>

    <packaging>war</packaging>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>


    <dependencies>
        <!-- fastjson -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.62</version>
        </dependency>

        <!-- mybatis -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.5</version>
        </dependency>

        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.29</version>
        </dependency>

        <!--servlet-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>

        <!--jsp-->

        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
            <scope>provided</scope>
        </dependency>

        <!--jstl-->
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <dependency>
            <groupId>taglibs</groupId>
            <artifactId>standard</artifactId>
            <version>1.1.2</version>
        </dependency>


    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.tomcat.maven</groupId>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
            </plugin>
        </plugins>
    </build>


</project>

开始写servlet

前后端实现数据分离依靠很多servelet
在对应package下创建servelet，如下：

@WebServlet("/selectServlet")  //该servlet访问路径
public class SelectServlet extends HttpServlet {
    private BrandService brandService = new BrandService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("get");
        List<Brand> brands = brandService.selectAll();

        String jsonString = JSON.toJSONString(brands);

        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("post");
    }
}

在浏览器请求该servlet的路径即为：

http://localhost:8080/brand-demo/brand/selectServlet

这样浏览器就可以和服务器进行数据交换了，我们可以在前端页面中使用axios请求这个地址

配置mybatis及mapper

使用mybatis访问数据库

我们可以在每个项目重复性的写一些文件和代码，只需修改数据库地址和账号密码即可，步骤如下：

  1. 配置mybatis-config.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="com.itheima.pojo"/>
    </typeAliases>

    <environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">
                <property name="driver" value="com.mysql.cj.jdbc.Driver"/>
                <property name="url" value="jdbc:mysql://localhost:3306/mybatis?useSSL=false"/>
                <!-- 这里的localhost可改为云数据库的ip，注意端口号 -->
                <property name="username" value="root"/>
                <property name="password" value="####"/>
                <!-- 账户及密码 -->
            </dataSource>
        </environment>
    </environments>
    <mappers>
        <!--扫描mapper 这个地址为BrandMapper.xml文件所在package的引用地址-->
        <package name="com.itheima.mapper"/>
    </mappers>
</configuration>
  1. 配置BrandMapper.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.itheima.mapper.BrandMapper">
<!--  命名空间映射到mapper接口  -->
</mapper>

接下来开始写代理SQL

  1. 首先要创建我们需的数据类，便于我们封装数据
    如：Brand类
    在这里插入图片描述

  2. 创建mapper接口文件brandMapper
    在这个文件写所有mapper接口，并用注解的方式直接写SQL语句：

public interface BrandMapper {

    /**
     * 查询所有
     * @return
     */
    @Select("select * from tb_brand") //用注解的方式写sql更清楚
    @ResultMap("brandResultMap")  //因为数据库中的属性名与Brand的属性名有两个不一样，需要在BrandMapper.xml文件中 进行映射，"brandResultMap"即为映射的id
    List<Brand> selectAll(); //返回Brand列表

    @Insert("insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status})")
    void add(Brand brand); //只有一个参数Brand，直接在sql中使用其属性即可

    /**
     * 根据id查询
     * @param id
     * @return
     */
    @Select("select * from tb_brand where id = #{id}")
    @ResultMap("brandResultMap")
    Brand selectById(int id);

    /**
     * 修改
     * @param brand
     */
    @Update("update tb_brand set brand_name = #{brandName},company_name = #{companyName},ordered = #{ordered},description = #{description},status = #{status} where id = #{id}")
    void update(Brand brand);

}

注意当接口有多个参数时，需要生命参数是对应sql语句中的哪个值，下面的"username"和"password"：

User select(@Param("username") String username,@Param("password") String password);
  1. 因为刚才使用到了resultMap,所以需要在BrandMapper.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.itheima.mapper.BrandMapper">
<!--  命名空间映射到mapper接口  -->



    <resultMap id="brandResultMap" type="brand">
        <result column="brand_name" property="brandName"></result>
        <result column="company_name" property="companyName"></result>
    </resultMap>
</mapper>

将column转为property
注意BrandMapper.xml所在的包要与接口文件的包层级结构相同！在resource目录下创建多级包是用/分层：
在这里插入图片描述

编码

  1. 创建一个工具类，
    util.SqlSessionFactoryUtils.java
package com.itheima.util;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

public class SqlSessionFactoryUtils {

    private static SqlSessionFactory sqlSessionFactory;

    static {
        //静态代码块会随着类的加载而自动执行，且只执行一次

        try {
            String resource = "mybatis-config.xml";
            InputStream inputStream = Resources.getResourceAsStream(resource);
            sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }


    public static SqlSessionFactory getSqlSessionFactory(){
        return sqlSessionFactory;
    }
}

这样我们以后在需要mapper时，只需要利用创建好的SqlSessionFactory获取SqlSession,在从SqlSession中获取mapper即可

这里我们创建一个service.BrandService.java类，将对数据库的不同操作都封装在这个类中：

package com.itheima.service;

import com.itheima.mapper.BrandMapper;
import com.itheima.pojo.Brand;
import com.itheima.util.SqlSessionFactoryUtils;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import java.util.List;

public class BrandService {
    SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();


    /**
     * 查询所有
     * @return
     */
    public List<Brand> selectAll(){
        //调用BrandMapper.selectAll()

        //2. 获取SqlSession
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

        //4. 调用方法
        List<Brand> brands = mapper.selectAll();

        sqlSession.close();

        return brands;
    }

    /**
     * 添加
     * @param brand
     */
    public void add(Brand brand){

        //2. 获取SqlSession
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

        //4. 调用方法
        mapper.add(brand);

        //提交事务
        sqlSession.commit();
        //释放资源
        sqlSession.close();

    }



    /**
     * 根据id查询
     * @return
     */
    public Brand selectById(int id){
        //调用BrandMapper.selectAll()

        //2. 获取SqlSession
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

        //4. 调用方法
        Brand brand = mapper.selectById(id);

        sqlSession.close();

        return brand;
    }


    /**
     * 修改
     * @param brand
     */
    public void update(Brand brand){

        //2. 获取SqlSession
        SqlSession sqlSession = factory.openSession();
        //3. 获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

        //4. 调用方法
        mapper.update(brand);

        //提交事务
        sqlSession.commit();
        //释放资源
        sqlSession.close();

    }
}

接下来就可以在servlet中new一个BrandService对象，从而进行数据库操作了。

JSON

JSON和JAVA对象转换
导入标签

<!-- https://mvnrepository.com/artifact/com.alibaba/fastjson -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>

java对象转JSON

String jsonStr = JSON.toJSONString(obj);

JSON字符串转Java对象

User user = JSON.parseObject(jsonStr, User.class);

使用json作为响应数据：

//在servlet中
String jsonString = JSON.toJSONString(brands);

        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);

服务端接收JOSON数据

//获取请求数据体
BufferedReader br = request.getReader();
String params = br.readLine();

//将JSON字符串转为JAVA对象
Brand brand = JSON.parseObject(params, Brand.class);
System.out.println(brand);

Axois

官方文档

在webapp文件夹下导入其依赖文件
在使用时导入该包:

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

使用简化后的函数请求数据

axios({
        method:"get",
        url:"http://localhost:8080/AjaxDemo/axiosServlet?username=zhangsan"
    }).then(function (resp){
        alert(resp.data)
    })
//发起一个get请求

axios({
        method: 'post',
        url: 'http://localhost:8080/AjaxDemo/axiosServlet',
        data: 'username=zhangsan'
    }).then(function (resp){
        alert(resp.data)
    })
//发起一个get请求

首次加载数据实在页面加载完成后进行,结构如下：

window.onload = function(){
    axios({
        method:"get",
        url:""
    }).then(function (resp){
        
    })
}

页面如何渲染axois返回的数据：

axios({
            method: "get",
            url: "http://localhost:8080/brand-demo/selectServlet"
        }).then(function (resp) {
            let brands = resp.data;
            let tabledata = "<tr>\n" +
                "        <th>序号</th>\n" +
                "        <th>品牌名称</th>\n" +
                "        <th>企业名称</th>\n" +
                "        <th>排序</th>\n" +
                "        <th>品牌介绍</th>\n" +
                "        <th>状态</th>\n" +
                "        <th>操作</th>\n" +
                "    </tr>";

            for (let i = 0; i < brands.length; i++) {
                let brand = brands[i];

                tabledata += "<tr>\n" +
                    "        <th>"+String(i+1)+"</th>\n" +
                    "        <th>"+brand.brandName+"</th>\n" +
                    "        <th>"+brand.companyName+"</th>\n" +
                    "        <th>"+brand.description+"</th>\n" +
                    "        <th>"+brand.id+"</th>\n" +
                    "        <th>"+brand.order+"</th>\n" +
                    "        <th>"+brand.status+"</th>\n" +
                    "    </tr>";
            } //将数据插入到html文本中
            document.getElementById("brandTable").innerHTML = tabledata; //再将html文本引用在对应的容器中
        })

Vue

前端框架，可以实现数据模型的绑定
首先引入vue.js

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

创建核心Vue对象

   new Vue({
       el: "#app",
       data() {
           return {
               username: ""
           }
       }
   });

编写视图

<div id="app">
    <input name="username" v-model="username" >
    {{username}}
</div>

{{}} 是 Vue 中定义的 插值表达式 ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。

整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model="username">
    <!--插值表达式-->
    {{username}}
</div>
<script src="js/vue.js"></script>
<script>
    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){  // data() 是 ECMAScript 6 版本的新的写法
            return {
                username:""
            }
        }

        /*data: function () {
            return {
                username:""
            }
        }*/
    });

</script>
</body>
</html>

Element UI

同样引入

<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

参照官方文档使用所需组件的代码即可，注意粘贴代码时，要将style、html、vue的data和method分开复制

小龙凤团茶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaWeb快速入门 Web环境搭建
KYA_ZXY的博客
05-14 947
一、思维导图 JavaWeb支持编写：HTML网页代码、Java代码、SQL数据库代码等多种语言。 简单认识Web服务 ： 二、认识JavaWeb 1.JavaWeb概述： （1）编写的程序可以通过浏览器进行访问，就可以称为web程序。 （2）web应用程序都是基于请求和响应来实现 Web服务器的作用是接收客户端的请求，给客户端作出响应。 ...
JavaWeb 开发快速入门
02-03
主要讲解了一个符合J2ee标准的web工程的组成结构到底是什么样，tomcat的运行机制和原理剖析，javaweb的工作原理及入门知识点
JavaWeb快速入门
python_start的博客
04-07 2086
JavaWeb Java Web 1、基本概念 1.1、前言 web开发： web，网页的意思 ， www.baidu.com 静态web html，css 提供给所有人看的数据始终不会发生变化！ 动态web 淘宝，几乎是所有的网站； 提供给所有人看的数据始终会发生变化，每个人在不同的时间，不同的地点看到的信息各不相同！ 技术栈：Servlet/JSP，ASP，PHP 在J...
JavaWeb 快速入门（持续更新
akdelt的博客
12-24 1109
如果这样，问题就很大了，在公司中可以在开发阶段使用的是MySQL数据库，而上线时公司最终选用oracle数据库，我们就需要对代码进行大批量修改，这显然并不是我们想看到的。我们要做到的是同一套Java代码操作不同的关系型数据库，而此时sun公司就指定了一套标准接口（JDBC），JDBC中定义了所有操作关系型数据库的规则。以后编写操作数据库的代码只需要面向JDBC（接口），操作哪儿个关系型数据库就需要导入该数据库的驱动包，如需要操作MySQL数据库，就需要再项目中导入MySQL数据库的驱动包。
java web快速入门_JavaWeb快速入门
weixin_33295214的博客
02-16 176
孙卫琴老师的javaweb一书已经买了很多年，由于很厚一直也没有去好好阅读下， 项目发布后有闲暇时间，决定快速学习了，毕竟很多概念和知识主要还是复习。对于互联网，我们可以简单认为浏览器就是会人类语言和html语言的机器人，它主要职责就是把html页面已我们可以理解的方式呈现，而tomcat等web服务器却是将java语言、jsp页面翻译为html页面发送给浏览器。由于http是应用层协议，基于tc...
javaweb学习，快速入门
qq_46687832的博客
03-06 689
javaweb学习，快速入门
JavaWeb快速入门--Bootstrap
2401_84103512的博客
04-26 365
针对以上面试题，小编已经把面试题+答案整理好了。
JavaWeb快速入门--Tomcat
a1901149的博客
05-04 747
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
JavaWeb快速入门--XML
2301_78850344的博客
05-03 1015
标签：标签名称是自定义的，在标签中可以包含字母、数字以及其他的字符，但是不能以数字、标点符号或者xml开头，同时标签中不应该包含空格。属性：在一个元素的其起始标记中，可以自定义一个或多个属性，属性是依附元素存在的，其值用单引号或双引号括起来，但是id属性值唯一。DOM：将标记语言文档一次性加载进内存，在内存中形成一颗dom树，这样做操作方便，可以对文档进行CRUD的所有操作，但是会占用内存。操作xml文档的步骤是：解析文档，将文档中的数据读取到内存中，然后将内存中的数据保存到xml文档中，持久化的存储。
JavaWeb的快速入门
Aa112233aA1的博客
04-01 121
今天给大家推荐几套含金量特别高的Javaweb的教学视频，无论你是初学者，自学者，还是有数年编程经验的大神，此套教程都将是你不可或缺的学习宝典。 JavaWeb教程，30天精通JavaWeb（IDEA版） JavaWeb阶段所有核心知识点，包含数据库、网页前端、Web核心技术、旅游管理系统等都包括在内。基本内容包括MySQL基本了解， DDL、DML、DQL操作，约束，多表关系，JDBC详解，JavaScript详解，DOM&BOM， Maven详解，Linux详解，Nginx功能详解等等。这个J
程序员初级秘籍之javaweb快速入门
scmagic的博客
04-08 392
- javaweb介绍 - 架构类别介绍 - web分类 - web通信
JavaWeb快速入门全十讲.pdf
07-14
本篇内容将深入讲解JavaWeb快速入门的关键知识点。 首先，JavaWeb技术的核心之一是JSP，它是Java Enterprise Edition（Java EE）的一部分，用于开发动态网页。JSP与Java Standard Edition（Java SE）是不同的，Java...
JavaWebStartPoint:JavaWeb快速入门教程
05-09
在这个快速入门教程"JavaWebStartPoint"中，你将逐步建立起对JavaWeb开发的整体认识，为后续深入学习和实践打下坚实基础。通过实践每个章节的示例，你将能够更有效地掌握这些概念，并具备独立开发简单JavaWeb应用的...
JavaWeb快速入门教程.pdf
10-03
JavaWeb快速入门教程.pdf
12. Hibernate 模板设计模式
这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~
07-22 1248
如何运用模板设计模式重构 Hibernate 操作流程；持久化对象与序列化接口；OOP中有一个编码原则 ：写仅写一次。翻译过来就是，不要重复，要重用。答案是：使用模板设计模式进一步封装Hibernate的操作。在真实项目中，Hibernate仅仅只是完成项目中的一部分工作，需要和其它，如Spring等框架联合工作，一起承担整体项目的开发。Spring框架中就提供的有Hibernate模板对象。一个常规的、频繁的操作代码中，大部分代码不需要变动，只有小部分代码需要根据需求变动。
golang 接口
m0_70982551的博客
07-24 792
接口定义了一组方法，这些方法没有具体的实现。接口类型的变量可以存储任何实现了这些方法的类型的值。// 更多方法...在Go语言中，接口值是指存储了实现某个接口的具体类型值的变量。接口值由两部分组成：1.动态类型：这是接口值当前存储的实际类型。2.动态值：这是实际存储的值，该值必须实现了接口中定义的所有方法。
Swagger使用Map接受参数时，页面如何显示具体参数及说
最新发布
a1058926697的博客
07-26 264
后端使用Map接受参数，要求在swagger页面上显示具体的参数名称、类型及说明。当Map接受参数数量少时，可以使用Swagger自带的注解。自定义注解 @ApiGlobalModel。编写处理注解对应的插件。
Java读取文件中多个JSON对象，并且16进制字符串和byte相互转换，将byte转为16进制字符串并写入json文件
weixin_43561432的博客
07-24 312
【代码】Java读取文件中多个JSON对象，并且16进制字符串和byte相互转换，将byte转为16进制字符串并写入json文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小龙凤团茶

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

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

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

打赏作者

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

抵扣说明：

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

余额充值