一对多查询&SSM集成&vue

1、一对多查询
关联查询

<resultMap id="baseResultMap" type="cn.yinsh.domain.ProductType">
    <id column="id" property="id"/>
    <result column="name" property="name"/>
    <collection property="products" ofType="cn.yinsh.domain.Product">
        <id column="p_id" property="id"/>
        <result column="productName" property="productName"/>
        <result column="product_type_id" property="productTypeId"/>
    </collection>
</resultMap>

<select id="selectAll" resultMap="baseResultMap">
    select
      t.id,t.name,
      p.id AS p_id,p.productName,p.product_type_id
    FROM product_type t JOIN product p ON p.product_type_id = t.id
</select>

嵌套查询:子查询

<resultMap id="baseResultMap" type="cn.yinsh.domain.ProductType">
    <id column="id" property="id"/>
    <result column="name" property="name"/>
    <collection property="products" column="id" ofType="cn.yinsh.domain.Product" select="cn.yinsh.mapper.ProductMapper.selectByTypeId"/>
</resultMap>

<select id="selectAll" resultMap="baseResultMap">
    select
    	t.id,t.name
    FROM
    	product_type t
</select>

2、SSM集成
集成步骤

1.创建web工程,拷贝SSM需要jar
2.创建相关组件 :domain,mapper,mapper.xml,service,controller,jsp
3.Spring的核心配置文件:application-context.xml
  3.1.创建jdbc.properties :四大金刚
  3.2.引入jdbc.properties
  3.3.配置DataSource :四大金刚
  3.4.配置MyBatis:配置SqlSessionFactory
  	3.4.1.配置mybatis-config.xml核心配置文件
  	3.4.2.配置mapper.xml
  	3.4.3.实体类的别名
  	3.4.4.把DataSource交给SqlSessionFactory
  3.5.配置映射器接口 Mapper接口
  3.6.配置service的ioc自动扫描 : @Service
  3.7.事务管理器配置
  	3.7.1.配置datasource注入 	
  3.8.开启事务的注解驱动支持 
4.SpringMvc的核心配置文件:application-mvc.xml
	4.1.静态资源放行
	4.2.controller的ioc注解扫描  :@Controller
	4.3.视图解析器
	4.4.SpringMVC注解支持 <mvc:annotation-driven> :@ResponseBody
5.servelt配置文件:web.xml
	5.1.全局配置:Spring的核心配置文件的地址
	5.2.加载Spring的上下文:SpringContextListnner 监听
	5.3.配置SpringMVC的核心控制器
	5.4.配置SpringMVC的配置文件
	5.5.编码过滤器

① 导包
在这里插入图片描述
② 创建domain,mapper,mapper.xml,service,controller,jsp
在这里插入图片描述
③ 创建application-context.xml,引入jdbc.properties

<?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" xmlns:tx="http://www.springframework.org/schema/tx"
       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/tx http://www.springframework.org/schema/tx/spring-tx.xsd">
    <!--引入jdbc.properties-->
    <context:property-placeholder location="classpath:jdbc.properties"/>
    <!--配置连接池-->
    <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
        <property name="driverClassName" value="${jdbc.driverClassName}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>
    </bean>
    <!--配置sqlSession-->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--配置mybatis核心文件-->
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
        <!--配置别名-->
        <property name="typeAliasesPackage" value="cn.yinsh.ssm.domain"/>
        <!--扫描Sql映射文件-->
        <property name="mapperLocations" value="classpath:cn/yinsh/ssm/mapper/*Mapper.xml"/>
        <!--连接池-->
        <property name="dataSource" ref="dataSource"/>
    </bean>
    <!--Mapper映射器配置-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="cn.yinsh.ssm.mapper"/>
    </bean>
    <!--配置事务管理-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource" />
    </bean>
    <!--开启事务的注解支持-->
    <tx:annotation-driven/>
    <!--Service的ioc扫描-->
    <context:component-scan base-package="cn.yinsh.ssm.service"/>
</beans>

④ SpringMvc的核心配置文件:application-mvc.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"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       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-4.0.xsd
        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">

    <!-- 扫描controller层-->
    <context:component-scan base-package="cn.yinsh.ssm.web.controller" />
    <!-- 视图解析器:解析jsp-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/" />
        <property name="suffix" value=".jsp" />
        <property name="contentType" value="text/html;charset=utf-8" />
    </bean>
    <!--SpringMVC注解支持-->
    <mvc:annotation-driven />
    <!-- 静态资源放行-->
    <mvc:default-servlet-handler />
</beans>

⑤servelt配置文件:web.xml

<?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_3_1.xsd"
         version="3.1"
         metadata-complete="true">
  <!-- Spring的核心配置文件的地址-->
  <context-param>
    <param-name>contextConfigLocation</param-name>
    <param-value>classpath:application-context.xml</param-value>
  </context-param>

  <!--加载Spring的上下文:监听器-->
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>

  <!--配置SpringMVC的核心控制器-->
  <servlet>
    <servlet-name>dispatcherServlet</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <!--配置SpringMVC的配置文件-->
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:application-mvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>dispatcherServlet</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

  <!--编码过滤器-->
  <filter>
    <filter-name>characterEncodingFilter</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>
    <init-param>
      <param-name>forceEncoding</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>characterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

⑥ 创建views文件夹创建jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
取值:${employees}
</body>
</html>

⑦controller层

@Controller
@RequestMapping("/emp")
public class EmployeeController {
    @Autowired
    private EmployeeService employeeService;
    @RequestMapping("list")
    public String list(Model model){
        model.addAttribute("employees",employeeService.selectAll());
        return "employee";
    }
}

3、vue
初始化项目:npm init -y
局部安装vue:`cnpm install vue
vu的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--引入vue.js-->
<script src="./node_modules/vue/dist/vue.js"></script>
<body>
<div id="app">
	<!--简单取值-->
    {{message}}
    <br/>
    <!--取对象的值-->
    {{user}}
    <br/>
    {{user.name}}
    <!--调用方法-->
    {{printUser()}}
    <br/>
    <!--运算-->
    {{1+1}}
    <br/>
    <!--判断-->
    {{show?'真':'假'}}
    <br/>
    <!--获取值的长度-->
    {{message.length}}
    <br/>
    <!--截取值-->
    {{message.substring(1,5)}}
    <!--调用对象中的方法-->
    {{user.show()}}
    <br/>
    <!--数组取值-->
    {{hobbys}},{{hobbys[0]}}
    <br/>
    <!--取值时添加///分隔-->
    {{hobbys.join("")}}
</div>
</body>
<script type="application/javascript">
    var app = new Vue({
            //使用ID绑定vue到页面的元素
            el: '#app',
            //vue的数据
            data: {
                message: 'Hello Vue!',
                show:true,
                hobbys:["你好","哈喽","hello","哟"],
                user:{
                    name:'哈喽',
                    password:123,
                    show(){
                        //alert(1)
                    },
                }
            },
            methods:{
                printUser(){
                    //alert(1123)
                    alert(this.user.name)
                }
            }
        })
</script>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值