Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
jsp+vue.js
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2017/12/8 Time: 15:59 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %> <html> <head> <title>Title</title> </head> <body> <form action="bookAction/addBooks" method="post"> 书名：<input name="bname"/><br/> 价格：<input name="bprice"/><br/> 时间：<input name="bcreateDate"/><br/> <input type="submit" value="添加书籍"> </form> <div id="app"> <table width="450px" border="1px"> <tr> <td>编号</td> <td>书名</td> <td>价格</td> <td>发布时间</td> <td>管理</td> </tr> <tr v-for="b in bookList"> <td v-bind:bno="bno" v-bind:key="b.bno">{{b.bno}}</td> <td>{{b.bname}}</td> <td>{{b.bprice}}</td> <td>{{b.bcreateDate}}</td> <td> <a href="#">修改</a> <a href="#">删除</a> </td> </tr> </table> </div> </body> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript"> // splice(index, 1); var myModel = {bookList:[]}; var myVueModel = new Vue({ el:'#app', data:myModel }); function getData(){ $.ajax({ url:"bookAction/findBookList", type:'POST', dataType:'json', timeout:3000, success:function(result){ myModel.bookList = result; }, error:function(){ alert('咦~出错了！'); } }); } getData(); </script> </html>
web层
package com.web; import com.entity.Books; import com.service.BooksService; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import javax.annotation.Resource; import java.util.List; /** * Created by Administrator on 2017/12/8. */ @Controller @RequestMapping("/bookAction") public class BooksAction { @Resource(name="bookService") private BooksService bookService; //添加 @RequestMapping("/addBooks") public String addBooks(Books books){ bookService.addBooks(books); return "redirect:/index.jsp"; } //查询 @RequestMapping("/findBookList") @ResponseBody public List findBookList(){ return bookService.findBooksList(); } //---------------------------------------------------------------- public void setBooksService(BooksService booksService) { this.bookService = booksService; } }
service层
package com.service; import com.dao.BooksDao; import com.entity.Books; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Propagation; import org.springframework.transaction.annotation.Transactional; import javax.annotation.Resource; import java.util.List; /** * Created by Administrator on 2017/12/8. */ @Service("bookService") @Transactional(propagation = Propagation.REQUIRED) public class BooksService { @Resource(name = "bookDao") private BooksDao bookDao; //添加 public boolean addBooks(Books books){ return bookDao.addBooks(books); } //查询 public List findBooksList(){ return bookDao.findBooksList("from Books"); }//------------------------------------------------------ public void setBooksDao(BooksDao booksDao) { this.bookDao = booksDao; } }
dao层
package com.dao; import com.entity.Books; import org.springframework.stereotype.Repository; import java.util.List; /** * Created by Administrator on 2017/12/8. */ @Repository("bookDao") public class BooksDao extends BaseDao { //添加 public boolean addBooks(Books books){ getSession().save(books); return true; }; //查询 public List findBooksList(String hql){ return getSession().createQuery(hql).list(); } }
实体类entity
package com.entity; import javax.persistence.*; /** * Created by Administrator on 2017/12/8. */ @Entity @Table(name="tb_book") public class Books { private int bno; private String bname; //书名 private int bprice; //价格 private String bcreateDate; //时间 public Books() { } public Books(int bno, String bname, int bprice, String bcreateDate) { this.bno = bno; this.bname = bname; this.bprice = bprice; this.bcreateDate = bcreateDate; } @Id @GeneratedValue(strategy = GenerationType.IDENTITY) public int getBno() { return bno; } public void setBno(int bno) { this.bno = bno; } public String getBname() { return bname;} public void setBname(String bname) { this.bname = bname; } public int getBprice() { return bprice; } public void setBprice(int bprice) { this.bprice = bprice; } public String getBcreateDate() { return bcreateDate; } public void setBcreateDate(String bcreateDate) { this.bcreateDate = bcreateDate; } }
di.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:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xmlns:context="http://www.springframework.org/schema/context" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.3.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.3.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-4.3.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd "> <!-- 开启注解 --> <context:annotation-config/> <!-- 设置扫描范围 --> <context:component-scan base-package="com"/> <!-- 设置自动代理 --> <aop:aspectj-autoproxy/> <!-- 创建数据源(c3p0)--> <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource" destroy-method="close"> <property name="driverClass" value="com.mysql.jdbc.Driver" /> <property name="jdbcUrl" value="jdbc:mysql://localhost:3306/mytest?useUnicode=true&characterEncoding=utf8" /> <property name="user" value="root" /> <property name="password" value="123456"/> </bean> <!-- 配置SessionFactory --> <bean id="sessionFactory" class="org.springframework.orm.hibernate5.LocalSessionFactoryBean"> <!-- 注入数据源 --> <property name="dataSource" ref="dataSource"/> <!-- 配置hibernate参数 --> <property name="hibernateProperties"> <props> <prop key="hibernate.dialect">org.hibernate.dialect.MySQL5Dialect</prop> <prop key="hibernate.hbm2ddl.auto">update</prop> <prop key="hibernate.current_session_context_class">org.springframework.orm.hibernate5.SpringSessionContext</prop> <prop key="hibernate.show_sql">true</prop> <prop key="hibernate.fetch_size">50</prop> </props> </property> <!--扫描注解文件--> <property name="packagesToScan" value="com.entity"/> </bean> <!-- 声明式事物管理 --> <bean id="tm" class="org.springframework.orm.hibernate5.HibernateTransactionManager"> <property name="sessionFactory" ref="sessionFactory"/> </bean> <!-- 开启声明式事务注解 --> <tx:annotation-driven transaction-manager="tm"/> </beans>
springmvc-servlet.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:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.3.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd "> <!-- Spring MVC不处理静态资源 --> <mvc:default-servlet-handler /> <!-- 支持mvc注解驱动 --> <mvc:annotation-driven /> <!-- 视图解析器 --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver"> <!-- 前缀 --> <property name="prefix" value="/" /> <!-- 后缀 --> <property name="suffix" value=".jsp" /> </bean> <!-- 全局异常处理 --> <bean class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver"> <!-- 定义默认的异常处理页面，当该异常类型的注册时使用 --> <property name="defaultErrorView" value="error"></property> <!-- 定义异常处理页面用来获取异常信息的变量名，默认名为exception --> <property name="exceptionAttribute" value="ex"></property> <!-- 定义需要特殊处理的异常，用类名或完全路径名作为key，异常也页名作为值 --> <property name="exceptionMappings"> <props> <prop key="java.lang.Exception">error</prop> </props> </property> </bean> </beans>
web.xml文件
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" > <web-app> <display-name>springMVCStu03</display-name> <!--配置Spring前端过滤器，处理中文乱码--> <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> <!--配置Spring MVC核心控制器--> <servlet> <!--名称 --> <servlet-name>springmvc</servlet-name> <!-- Servlet类 --> <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class> <init-param> <!--SpringMVC配置参数文件的位置 --> <param-name>contextConfigLocation</param-name> <!--默认名称为ServletName-servlet.xml --> <param-value> /WEB-INF/springmvc-servlet.xml, /WEB-INF/di.xml </param-value> </init-param> <!-- 启动顺序，数字越小，启动越早 --> <load-on-startup>1</load-on-startup> </servlet> <!--所有请求都会被springmvc拦截 --> <servlet-mapping> <servlet-name>springmvc</servlet-name> <url-pattern>/</url-pattern> </servlet-mapping> </web-app>