Java Web案例 最终总结

1 创建新的模块，引入坐标

<dependencies>
  <dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.46</version>
  </dependency>
  <dependency>
    <groupId>org.mybatis</groupId>
    <artifactId>mybatis</artifactId>
    <version>3.5.5</version>
  </dependency>
  <dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>3.1.0</version>
    <scope>provided</scope>
  </dependency>
  <dependency>
    <groupId>javax.servlet.jsp</groupId>
    <artifactId>jsp-api</artifactId>
    <version>2.2</version>
    <scope>provided</scope>
  </dependency>
  <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.62</version>
  </dependency>
  <dependency>
    <groupId>junit</groupId>
    <artifactId>junit</artifactId>
    <version>4.13</version>
    <scope>test</scope>
  </dependency>
  <dependency>
    <groupId>org.testng</groupId>
    <artifactId>testng</artifactId>
    <version>6.14.3</version>
  </dependency>
</dependencies>
<build>
  <plugins>
    <plugin>
      <groupId>org.apache.tomcat.maven</groupId>
      <artifactId>tomcat7-maven-plugin</artifactId>
      <version>2.0</version>
    </plugin>
  </plugins>
</build>

 

2 创建三层架构的包结构

com.ithiema.mapper
com.ithiema.service
com.ithiema.web

 

3 创建数据库表

 

4 创建实体类

com.ithiema.pojo.XXX

 

5 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.jdbc.Driver"/>
				<property name="url" value="jdbc:mysql:///**数据库名**?useSSL=false&amp;serverTimezone=UTC&amp;useServerPrepStmts=true"/>
				<property name="username" value="root"/>
				<property name="password" value="**密码**"/>
			</dataSource>
		</environment>
		<environment id="test">
			<transactionManager type="JDBC"/>
			<dataSource type="POOLED">
				<property name="driver" value="com.mysql.jdbc.Driver"/>
				<property name="url" value="jdbc:mysql:///mybatis"/>
				<property name="username" value="root"/>
				<property name="password" value="**密码**"/>
			</dataSource>
		</environment>
	</environments>
	<mappers>
		<!-- 包扫描简化SQL映射文件的加载。-->
		<package name="com.itheima.mapper"/>
	</mappers>
</configuration>

(2) 创建XXXMapper.xml
//在 resources 下创建 com/itheima/mapper 目录，并在该目录下创建 XXXMapper.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.XXXMapper">			
	<!-- 设置SQL映射文件的namespace属性为Mapper接口全限定名。-->
	<resultMap id="XXXResultMap" type="实体类名">
		<!-- id标签：完成主键字段的映射
				column属性：主键字段的字段名
				property属性：实体类的属性名
			result标签：完成一般字段的映射
				column属性：一般字段的字段名
				property属性：实体类的属性名  -->
		<result column="数据库字段" property="java变量"/>
		<result column="数据库字段" property="java变量"/>
		<!--在上面只需要定义字段名和属性名不一样的映射，而一样的则不需要专门定义出来。-->
	</resultMap>
</mapper>

(3) 创建XXXMapper接口
//Mapper代理开发要求2：定义与SQL映射文件同名的Mapper接口，并且将Mapper接口和SQL映射文件放置在同一目录下。

public interface XXXMapper {
    返回值 函数名();
    //不用加修饰符。
}

 

6 编写mapper接口方法

编写接口方法时，考虑参数和返回值。若接口方法所映射的SQL为简单的SQL语句则使用@Param注解，若为复杂的动态SQL则通过mybatis插件生成statement来编写。

MyBatis中的参数问题

SQL语句的具体编码

 

7 编写XXXService类

//逻辑处理尽量放在service层，servlet只需要调用service方法，返回结果，接受数据即可。
//若要实现某个特定功能，最好只用一个service层方法完成，可以使用该service方法调用多个mapper层接口方法，多个方法会返回多个数据。
//若要返回多个数据时，新建一个实体类，将多个数据作为变量封装到实体类中，封装在service层完成,web层只负责接受。

(1) 创建com.ithiema.util，编写SqlSessionFactoryUtils工具类

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

(2) 创建com.itheima.service.XXXservice接口

public interface XXXService {
    返回值 函数名();
    //不用加修饰符。
}

(3)  创建com.itheima.service.util.XXXServiceImpl类

public class XXXServiceImpl implements XXXService{
    @Override
	public 返回值 函数名(){
		//获取SqlSession
        SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory();
        SqlSession sqlSession = sqlSessionFactory.openSession();
        //获取Mapper代理
        XXXMapper XXXMapper = sqlSession.getMapper(XXXMapper.class);
        //执行sql
        XXXMapper.方法名();
        //提交事务：增删改需提交事务
        sqlSession.commit();
        //释放资源
        sqlSession.close();
	}
}

 

8 编写servlet

1 自定义baseServlet

@WebServlet("/BaseServlet")
public class BaseServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //进行请求的分发
        //获取请求路径
        String uri = req.getRequestURI(); // 例如路径为：/brand-case/brand/selectAll
        //获取最后一段路径，即方法名
        int index = uri.lastIndexOf('/');//获取最后一个/的位置，该方法为String对象的方法。
        String methodName = uri.substring(index + 1); // 获取最后一个/的部分字符串，该方法为String对象的方法。
        //获取BrandServlet /UserServlet 字节码对象 Class
        //System.out.println(this);来验证当前对象
        Class<? extends BaseServlet> cls = this.getClass();
        //获取方法 Method对象
        try {
            Method method = cls.getMethod(methodName,HttpServletRequest.class,HttpServletResponse.class);
            //调用该方法(通过反射执行方法，即通过该对象的字节码文件获取发放对象并执行。)
            method.invoke(this,req,resp);
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
    }
}

 2 编写servlet类

@WebServlet("/实体类名/*")//根据所针对的对象来填写，比如user、goods......
public class XXXServlet extends BaseServlet{

    private XXXService XXXService = new XXXServiceImpl();

    public void selectAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //修饰符必须为public
    }

    public void insert(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //修饰符必须为public
    }
    
    public void deleteById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //修饰符必须为public
    }
    
    public void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //修饰符必须为public
    }
    
}

 3 编写servlet方法

（1) 获取请求参数。
<1> GET请求方式
//getParameter()方法获得的字符串若应为其他数据类型需要类型转换。
request.getParameter();
<2> POST请求方式
BufferedReader br = request.getReader();
String params = br.readLine();
（2） 将json数据转化为java对象。//需添加fastjson坐标
//JSON转化为Java对象时，会自动转换数据类型，所以无需转换数据类型。
User user = JSON.parseObject(jsonStr, 实体类.class);
（3) 调用service层处理前端数据。
Service service = new Service();
service.方法();
（4) 将处理结果转换为JSON数据。
//复若为杂数据，比如对象，则使用JSON。
String jsonStr = JSON.toJSONString(obj);
（5） 利用response发送响应。
response.setContentType("text/json;charset=utf-8");//若中文乱码
response.getWriter().write();

 

9 前端

(1) 添加事件，获取数据。

<div id="app">
    element代码;
<div>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
//将html页面中app范围内元素与Vue中的值与方法绑定。
new Vue({
    el: "#app",
    methods: {
        方法名(){
            方法体;
        },
        方法名(){
            方法体;
        },
        ......
    },
    mounted(){
        //Vue初始化成功，HTML页面渲染成功，自动执行mounted()方法。
    },
    data(){
        return {
            变量名: "",
            变量名: "",
            ......
        }
    }
});
</script>

(2) 利用Axios发送请求，将Vue对象中data中的数据作为参数。//需导入Axios的js文件

//一般将axios请求，做为被绑定的方法，置于Vue对象的methods属性中或mounted()方法中。
//Ajax请求中，复杂数据(对象)用post传递，简单数据(键值对)用get传递。
//若既有对象，也有键值对，仍采用post方式，data中放对象，在url中放键值对。
axios({
  method:"post",
  url:"url",
  data:js对象
}).then(function (resp){
  对 resp.data 的逻辑处理
});

(3) 使用elementUI时，先复制HTML代码，再复制数据与方法部分到Vue中的methods和data()中，最后按需修改。