javaweb快速入门

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

完整项目

首先创建项目
并整理项目结构
配置pom.xml文件
添加jar包标签和tomcat标签



    4.0.0

    org.example
    brand-demo
    1.0-SNAPSHOT

    war

    
        8
        8
    


    
        
        
            com.alibaba
            fastjson
            1.2.62
        

        
        
            org.mybatis
            mybatis
            3.5.5
        

        
        
            mysql
            mysql-connector-java
            8.0.29
        

        
        
            javax.servlet
            javax.servlet-api
            3.1.0
            provided
        

        

        
            javax.servlet.jsp
            jsp-api
            2.2
            provided
        

        
        
            jstl
            jstl
            1.2
        
        
            taglibs
            standard
            1.1.2
        


    

    
        
            
                org.apache.tomcat.maven
                tomcat7-maven-plugin
                2.2

开始写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 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访问数据库

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

配置mybatis-config.xml文件

配置BrandMapper.xml文件

接下来开始写代理SQL

首先要创建我们需的数据类，便于我们封装数据
如：Brand类
创建mapper接口文件brandMapper
在这个文件写所有mapper接口，并用注解的方式直接写SQL语句：

public interface BrandMapper {

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

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

    
    @Select("select * from tb_brand where id = #{id}")
    @ResultMap("brandResultMap")
    Brand selectById(int id);

    
    @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);

因为刚才使用到了resultMap,所以需要在BrandMapper.xml中添加标签：

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

编码

创建一个工具类，
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();


    
    public List selectAll(){
        //调用BrandMapper.selectAll()

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

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

        sqlSession.close();

        return brands;
    }

    
    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();

    }



    
    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;
    }


    
    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对象转换
导入标签



    com.alibaba
    fastjson
    1.2.62

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文件夹下导入其依赖文件
在使用时导入该包:

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

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 = "n" +
                "        序号n" +
                "        品牌名称n" +
                "        企业名称n" +
                "        排序n" +
                "        品牌介绍n" +
                "        状态n" +
                "        操作n" +
                "    ";

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

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

Vue

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

创建核心Vue对象

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

编写视图


    
    {{username}}

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

整体代码如下：




    
    Title



    
    
    {{username}}

Element UI

同样引入

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

javaweb快速入门

Java相关栏目本月热门文章