vue.js+SSH添加和查询

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

jsp+vue.js

<%--

  Created by IntelliJ IDEA.

  User: Administrator

  Date: //

  Time: :

  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:,

            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&amp;characterEncoding=utf8" />

        <property name="user" value="root" />

        <property name="password" value=""/>

     </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"></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-</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>

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

使用Bootstrap + Vue.js实现添加删除数据
界面首先需要引入bootstrap的css和bootstrap的js文件,还有vue.js和jQuery.js才可以看见效果. 这里提供bootstrap的在线文件给大家引用: <!-- 最新版 ...
vue.js简单添加和删除
这只是个简单的添加和删除,没有连接后台数据的 <%@ page language="java" contentType="text/html; charset=UT ...
vue.js实现添加删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法
1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
Vue.js Cookbook: 添加实例属性; 👍 axios（4万➕✨）访问API; filters过滤器;
add instance properties //加上$,防止和已经定义的data,method, computed的名字重复,导致被覆写.//可以自定义添加其他符号. Vue.prototype. ...
chrome调试vue.js的插件：vue.js devtools
1.什么是vue.js devtools? vue.js devtools是chrome的一款插件,用来调试vue的一款神器. 2.为什么下载vue.js devtools? 由于vue是数据驱动的, ...
Electron: 如何以 Vue.js, Vuetify 开始应用
Electron: 使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架 Vue.js: Web 前端用于构建用户界面的渐进式框架 Vuetify: Vue.js 的 ...
谷歌浏览器安装Vue.js devtools
第一步:访问谷歌商店在之前的博客中已经谈到了这一点的实现方式 https://www.cnblogs.com/10134dz/p/13552777.html 第二步:下载Vue.js devtool ...
leyou_04_使用vue.js搭建页面—使用ajax完成品牌的查询
1.使用vue.js搭建页面 1.1使用的模板插件Vuetify 中文UI组件官网:https://vuetifyjs.com/zh-Hans/getting-started/quick-start ...

随机推荐

二,编程语言类别,和python变量基础
编程语言类别机器语言:由二进制组成,直接控制操作硬件,执行效率高,开发效率低. 汇编语言:用英文代替二进制,直接操作控制硬件,执行效率高,开发效率低. 高级语言: 编译型,如C语言,类似谷歌翻译,先 ...
C# 日志记录分级功能使用按照日期，大小，或是单文件存储
本文将使用一个Nuget的一个组件库来实现一个简单强大的日志记录功能,包采用线程安全实现,所有的记录在后台完成,即使您在前台调用100万次方法,耗时也不过1000ms(具体时间依照电脑性能决定),支持 ...
CMake 构建项目教程-简介
CMake 构建项目教程-简介 Linux 平台构建项目,选择了CLion作为C++的IDE,而CLion默认就是使用CMake构建项目,所以这里记录了CMake在构建项目过程的一些小知识. 1. 项 ...
jQuery ajax瀑布流加载静态的列表页面
1.加载一行数据 <script> //滚动加载事件 var Loadurl = "{$url}"; if(window.location.href !== Loadu ...
Visual Studio AI 离线模型训练（Windows10）
一.序环境搭建:[查看] samples-for-ai项目下载:[下载],两个版本,一个2018年6月15日前,一个2018年6月15日-16日版本(当前最新版本). 在环境搭建过程中,通过git ...
cs特征性以及数据库的连接
笔记c3 五大浏览器内核: Ie浏览器:-ms 火狐:-moz Safari以及chorme:-webkit 欧朋:-o Word-wrap:break-word;设置换行. Border borde ...
NOIP2012 Day1 T2国王游戏洛谷P1080
第一篇博客啊…… 由于我太弱了,还要去补不全的知识点准备参加人生第一次NOIp,所以第一篇博客就简短一点好了(偷懒就直说吧……) 洛谷P1080传送门题意概括: 有N对数ai和bi,以及两个数a0和 ...
使用maven profile指定配置文件打包适用多环境
新建maven项目, 在pom.xml中添加 profile节点信息如下: <profiles> <profile>  <id& ...
css零碎知识点小结
1.单行文字溢出显示省略号: div{ width: 200px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 2 ...
阿里云轻量应用服务器怎么控制怎么上传文件怎么安装JDK和Tomcat怎么完成JavaWeb的部署
你是否遇到过这些问题,自己的javaweb项目本地运行一切正常,但是一旦转移到阿里服务器之类的.就出现以下问题. 1 jsp无法解析java类 2 Only a type can be importe ...

vue.js+SSH添加和查询

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

随机推荐

热门专题