Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

jsp+vue.js

  1. <%--
  2.   Created by IntelliJ IDEA.
  3.   User: Administrator
  4.   Date: //
  5.   Time: :
  6.   To change this template use File | Settings | File Templates.
  7. --%>
  8. <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
  9. <html>
  10. <head>
  11.     <title>Title</title>
  12. </head>
  13. <body>
  14.     <form action="bookAction/addBooks" method="post">
  15.         书名：<input name="bname"/><br/>
  16.         价格：<input name="bprice"/><br/>
  17.         时间：<input name="bcreateDate"/><br/>
  18.         <input type="submit" value="添加书籍">
  19.     </form>
  20.     <div id="app">
  21.         <table width="450px" border="1px">
  22.             <tr>
  23.                 <td>编号</td>
  24.                 <td>书名</td>
  25.                 <td>价格</td>
  26.                 <td>发布时间</td>
  27.                 <td>管理</td>
  28.             </tr>
  29.             <tr v-for="b in bookList">
  30.                 <td v-bind:bno="bno" v-bind:key="b.bno">{{b.bno}}</td>
  31.                 <td>{{b.bname}}</td>
  32.                 <td>{{b.bprice}}</td>
  33.                 <td>{{b.bcreateDate}}</td>
  34.                 <td>
  35.                     <a href="#">修改</a>
  36.                     <a href="#">删除</a>
  37.                 </td>
  38.             </tr>
  39.         </table>
  40.     </div>
  41. </body>
  42. <script type="text/javascript" src="js/vue.js"></script>
  43. <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
  44. <script type="text/javascript">
  45.   //  splice(index, 1);
  46.     var myModel = {bookList:[]};
  47.     var myVueModel = new Vue({
  48.         el:'#app',
  49.         data:myModel
  50.     });
  51.     function getData(){
  52.         $.ajax({
  53.             url:"bookAction/findBookList",
  54.             type:'POST',
  55.             dataType:'json',
  56.             timeout:,
  57.             success:function(result){
  58.                 myModel.bookList = result;
  59.             },
  60.             error:function(){
  61.                 alert('咦~出错了！');
  62.             }
  63.         });
  64.     }
  65.     getData();
  66. </script>
  67. </html>

web层

  1. package com.web;
  2.  
  3. import com.entity.Books;
  4. import com.service.BooksService;
  5. import org.springframework.stereotype.Controller;
  6. import org.springframework.web.bind.annotation.RequestMapping;
  7. import org.springframework.web.bind.annotation.ResponseBody;
  8.  
  9. import javax.annotation.Resource;
  10. import java.util.List;
  11.  
  12. /**
  13.  * Created by Administrator on 2017/12/8.
  14.  */
  15. @Controller
  16. @RequestMapping("/bookAction")
  17. public class BooksAction {
  18.     @Resource(name="bookService")
  19.     private BooksService bookService;
  20.  
  21.     //添加
  22.     @RequestMapping("/addBooks")
  23.     public String addBooks(Books books){
  24.         bookService.addBooks(books);
  25.         return "redirect:/index.jsp";
  26.     }
  27.     //查询
  28.     @RequestMapping("/findBookList")
  29.     @ResponseBody
  30.     public List findBookList(){
  31.         return bookService.findBooksList();
  32.     }
  33.   //----------------------------------------------------------------
  34.     public void setBooksService(BooksService booksService) {
  35.         this.bookService = booksService;
  36.     }
  37. }

service层

  1. package com.service;
  2.  
  3. import com.dao.BooksDao;
  4. import com.entity.Books;
  5. import org.springframework.stereotype.Service;
  6. import org.springframework.transaction.annotation.Propagation;
  7. import org.springframework.transaction.annotation.Transactional;
  8.  
  9. import javax.annotation.Resource;
  10. import java.util.List;
  11.  
  12. /**
  13.  * Created by Administrator on 2017/12/8.
  14.  */
  15. @Service("bookService")
  16. @Transactional(propagation = Propagation.REQUIRED)
  17. public class BooksService {
  18.  
  19.     @Resource(name = "bookDao")
  20.     private BooksDao bookDao;
  21.  
  22.     //添加
  23.     public boolean addBooks(Books books){
  24.         return bookDao.addBooks(books);
  25.     }
  26.     //查询
  27.     public List findBooksList(){
  28.         return bookDao.findBooksList("from Books");
  29.     }//------------------------------------------------------
  30.     public void setBooksDao(BooksDao booksDao) {
  31.         this.bookDao = booksDao;
  32.     }
  33. }

dao层

  1. package com.dao;
  2.  
  3. import com.entity.Books;
  4. import org.springframework.stereotype.Repository;
  5.  
  6. import java.util.List;
  7.  
  8. /**
  9.  * Created by Administrator on 2017/12/8.
  10.  */
  11. @Repository("bookDao")
  12. public class BooksDao extends BaseDao {
  13.     //添加
  14.     public boolean addBooks(Books books){
  15.         getSession().save(books);
  16.         return true;
  17.     };
  18.     //查询
  19.     public List findBooksList(String hql){
  20.         return getSession().createQuery(hql).list();
  21.     }
  22. }

实体类entity

  1. package com.entity;
  2.  
  3. import javax.persistence.*;
  4.  
  5. /**
  6.  * Created by Administrator on 2017/12/8.
  7.  */
  8. @Entity
  9. @Table(name="tb_book")
  10. public class Books {
  11.     private int bno;
  12.     private  String bname; //书名
  13.     private int bprice; //价格
  14.     private String bcreateDate; //时间
  15.  
  16.     public Books() {
  17.     }
  18.     public Books(int bno, String bname, int bprice, String bcreateDate) {
  19.         this.bno = bno;
  20.         this.bname = bname;
  21.         this.bprice = bprice;
  22.         this.bcreateDate = bcreateDate;
  23.     }
  24.  
  25.     @Id
  26.     @GeneratedValue(strategy = GenerationType.IDENTITY)
  27.     public int getBno() { return bno; }
  28.  
  29.     public void setBno(int bno) { this.bno = bno; }
  30.  
  31.     public String getBname() { return bname;}
  32.  
  33.     public void setBname(String bname) { this.bname = bname; }
  34.  
  35.     public int getBprice() { return bprice; }
  36.  
  37.     public void setBprice(int bprice) { this.bprice = bprice; }
  38.  
  39.     public String getBcreateDate() { return bcreateDate; }
  40.  
  41.     public void setBcreateDate(String bcreateDate) {  this.bcreateDate = bcreateDate; }
  42. }

di.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <beans xmlns="http://www.springframework.org/schema/beans"
  3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.     xmlns:aop="http://www.springframework.org/schema/aop"
  5.     xmlns:tx="http://www.springframework.org/schema/tx"
  6.     xmlns:context="http://www.springframework.org/schema/context"
  7.     xsi:schemaLocation="http://www.springframework.org/schema/beans
  8.     http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
  9.     http://www.springframework.org/schema/aop
  10.     http://www.springframework.org/schema/aop/spring-aop-4.3.xsd
  11.     http://www.springframework.org/schema/tx
  12.     http://www.springframework.org/schema/tx/spring-tx-4.3.xsd
  13.     http://www.springframework.org/schema/context
  14.     http://www.springframework.org/schema/context/spring-context-4.3.xsd
  15.     ">
  16.  
  17.     <!-- 开启注解 -->
  18.     <context:annotation-config/>
  19.     <!-- 设置扫描范围 -->
  20.     <context:component-scan base-package="com"/>
  21.     <!-- 设置自动代理 -->
  22.     <aop:aspectj-autoproxy/>
  23.  
  24.     <!-- 创建数据源(c3p0)-->
  25.      <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource"
  26.         destroy-method="close">
  27.         <property name="driverClass" value="com.mysql.jdbc.Driver" />
  28.         <property name="jdbcUrl"
  29.         value="jdbc:mysql://localhost:3306/mytest?useUnicode=true&amp;characterEncoding=utf8" />
  30.         <property name="user" value="root" />
  31.         <property name="password" value=""/>
  32.      </bean>
  33.  
  34.       <!-- 配置SessionFactory -->
  35.       <bean id="sessionFactory" class="org.springframework.orm.hibernate5.LocalSessionFactoryBean">
  36.         <!-- 注入数据源 -->
  37.         <property name="dataSource" ref="dataSource"/>
  38.         <!-- 配置hibernate参数 -->
  39.         <property name="hibernateProperties">
  40.             <props>
  41.                 <prop key="hibernate.dialect">org.hibernate.dialect.MySQL5Dialect</prop>
  42.                 <prop key="hibernate.hbm2ddl.auto">update</prop>
  43.                 <prop key="hibernate.current_session_context_class">org.springframework.orm.hibernate5.SpringSessionContext</prop>
  44.                 <prop key="hibernate.show_sql">true</prop>
  45.                 <prop key="hibernate.fetch_size"></prop>
  46.             </props>
  47.         </property>
  48.         <!--扫描注解文件-->
  49.         <property name="packagesToScan" value="com.entity"/>
  50.      </bean>
  51.  
  52.      <!-- 声明式事物管理 -->
  53.      <bean id="tm" class="org.springframework.orm.hibernate5.HibernateTransactionManager">
  54.          <property name="sessionFactory" ref="sessionFactory"/>
  55.      </bean>
  56.      <!-- 开启声明式事务注解 -->
  57.      <tx:annotation-driven transaction-manager="tm"/>
  58.  
  59. </beans>

springmvc-servlet.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <beans xmlns="http://www.springframework.org/schema/beans"
  3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.     xmlns:mvc="http://www.springframework.org/schema/mvc"
  5.     xsi:schemaLocation="http://www.springframework.org/schema/beans
  6.     http://www.springframework.org/schema/beans/spring-beans-4.3.xsd
  7.     http://www.springframework.org/schema/mvc
  8.     http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
  9.     ">
  10.  
  11.     <!-- Spring MVC不处理静态资源 -->
  12.     <mvc:default-servlet-handler />
  13.     <!-- 支持mvc注解驱动 -->
  14.     <mvc:annotation-driven />
  15.  
  16.     <!-- 视图解析器 -->
  17.     <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
  18.             id="internalResourceViewResolver">
  19.         <!-- 前缀 -->
  20.         <property name="prefix" value="/" />
  21.         <!-- 后缀 -->
  22.         <property name="suffix" value=".jsp" />
  23.     </bean>
  24.  
  25.     <!-- 全局异常处理 -->
  26.     <bean
  27.             class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">
  28.         <!-- 定义默认的异常处理页面，当该异常类型的注册时使用 -->
  29.         <property name="defaultErrorView" value="error"></property>
  30.         <!-- 定义异常处理页面用来获取异常信息的变量名，默认名为exception -->
  31.         <property name="exceptionAttribute" value="ex"></property>
  32.         <!-- 定义需要特殊处理的异常，用类名或完全路径名作为key，异常也页名作为值 -->
  33.         <property name="exceptionMappings">
  34.             <props>
  35.                 <prop key="java.lang.Exception">error</prop>
  36.             </props>
  37.         </property>
  38.     </bean>
  39. </beans>

web.xml文件

  1. <!DOCTYPE web-app PUBLIC
  2.  "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
  3.  "http://java.sun.com/dtd/web-app_2_3.dtd" >
  4.  
  5. <web-app>
  6.   <display-name>springMVCStu03</display-name>
  7.  
  8.   <!--配置Spring前端过滤器，处理中文乱码-->
  9.   <filter>
  10.     <filter-name>characterEncodingFilter</filter-name>
  11.     <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
  12.     <init-param>
  13.       <param-name>encoding</param-name>
  14.       <param-value>UTF-</param-value>
  15.     </init-param>
  16.     <init-param>
  17.       <param-name>forceEncoding</param-name>
  18.       <param-value>true</param-value>
  19.     </init-param>
  20.   </filter>
  21.  
  22.   <filter-mapping>
  23.     <filter-name>characterEncodingFilter</filter-name>
  24.     <url-pattern>/*</url-pattern>
  25.   </filter-mapping>
  26.  
  27.   <!--配置Spring MVC核心控制器-->
  28.   <servlet>
  29.     <!--名称 -->
  30.     <servlet-name>springmvc</servlet-name>
  31.     <!-- Servlet类 -->
  32.     <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  33.     <init-param>
  34.       <!--SpringMVC配置参数文件的位置 -->
  35.       <param-name>contextConfigLocation</param-name>
  36.       <!--默认名称为ServletName-servlet.xml -->
  37.       <param-value>
  38.         /WEB-INF/springmvc-servlet.xml,
  39.         /WEB-INF/di.xml
  40.       </param-value>
  41.     </init-param>
  42.     <!-- 启动顺序，数字越小，启动越早 -->
  43.     <load-on-startup>1</load-on-startup>
  44.   </servlet>
  45.   <!--所有请求都会被springmvc拦截 -->
  46.   <servlet-mapping>
  47.     <servlet-name>springmvc</servlet-name>
  48.     <url-pattern>/</url-pattern>
  49.   </servlet-mapping>
  50. </web-app>

vue.js+SSH添加和查询的更多相关文章

  1. 使用Bootstrap + Vue.js实现 添加删除数据

    界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版 ...

  2. vue.js简单添加和删除

    这只是个简单的添加和删除,没有连接后台数据的 <%@ page language="java" contentType="text/html; charset=UT ...

  3. vue.js实现添加删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法

    1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  5. Vue.js Cookbook: 添加实例属性; 👍 axios（4万➕✨）访问API; filters过滤器;

    add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...

  6. chrome调试vue.js的插件：vue.js devtools

    1.什么是vue.js devtools? vue.js devtools是chrome的一款插件,用来调试vue的一款神器. 2.为什么下载vue.js devtools? 由于vue是数据驱动的, ...

  7. Electron: 如何以 Vue.js, Vuetify 开始应用

    Electron: 使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架 Vue.js: Web 前端用于构建用户界面的渐进式框架 Vuetify: Vue.js 的 ...

  8. 谷歌浏览器安装Vue.js devtools

    第一步:访问谷歌商店 在之前的博客中已经谈到了这一点的实现方式 https://www.cnblogs.com/10134dz/p/13552777.html 第二步:下载Vue.js devtool ...

  9. leyou_04_使用vue.js搭建页面—使用ajax完成品牌的查询

    1.使用vue.js搭建页面 1.1使用的模板插件Vuetify 中文UI组件官网:https://vuetifyjs.com/zh-Hans/getting-started/quick-start ...

随机推荐

  1. HBase和Phoneix使用示例

    HBase操作 基本操作 创建表 Examples: hbase> create 't1', {NAME => 'f1', VERSIONS => 5} hbase> crea ...

  2. Scrapy、Scrapy-redis组件

    目录 Scrapy 一.安装 二.基本使用 1. 基本命令 2.项目结构以及爬虫应用简介 3. 小试牛刀 4. 选择器 5. 格式化处理 6.中间件 7. 自定制命令 8. 自定义扩展 9. 避免重复 ...

  3. 基于scrapy-redis分布式爬虫(简易)

    redis分布式部署 1.scrapy框架是否可以自己实现分布式? - 不可以.原因有二. 其一:因为多台机器上部署的scrapy会各自拥有各自的调度器,这样就使得多台机器无法分配start_urls ...

  4. springboot中get post put delete 请求

    组合注解(RequestMapping的变形) @GetMapping = @RequestMapping(method = RequestMethod.GET) @PostMapping = @Re ...

  5. python: 递归函数(科赫雪花)

    import turtle as t def kehe(size,n): #递归函数 if n==0: t.fd(size) #阶数为0时,为一直线 else: for i in [0,60,-120 ...

  6. WebSocket是什么原理？为什么可以实现持久连接？

    作者:Ovear 链接:https://www.zhihu.com/question/20215561/answer/40316953来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...

  7. 使用VS2015编译grpc_1.3.1

    环境: win7_x64,VS2015 开始: 一.安装工具 1. 安装cmake 2. 安装ActivePerl 3. 安装golang 4. 安装nasm 验证安装是否安装成功: cmake -v ...

  8. Java方法的静态绑定与动态绑定讲解（向上转型的运行机制详解）

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/6554103.html 一:绑定 把一个方法与其所在的类/对象 关联起来叫做方法的绑定.绑定分为静态绑定(前期绑 ...

  9. 第一章 C#入门(Windows窗体应用程序)（二）

    C#窗体应用程序(二) [案例]设计登录界面,效果如下: [案例实现步骤] 1.新建项目(Windows控制台应用程序 文件→新建→项目:选择“项目类型”为Visual C#,“模板”为Windows ...

  10. TF(2): 核心概念

    TF的核心是围绕Graph展开的,简而言之,就是Tensor沿着Graph传递闭包完成Flow的过程.所以在介绍Graph之前需要讲述一下符号编程.计算流图.梯度计算.控制流的概念. 张量(Tenso ...