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 ...

随机推荐

SQL注入之Sqli-labs系列第三十四关（基于宽字符逃逸POST注入）和三十五关
开始挑战第三十四关和第三十五关(Bypass add addslashes) 0x1查看源码本关是post型的注入漏洞,同样的也是将post过来的内容进行了 ' \ 的处理. if(isset($_ ...
Power BI和 Visio 集成优缺点
Power BI 的 Visio 自定义视觉,这个功能是非常值得让人兴奋的,小悦相信这是一个非常重要的开发,不仅适用于 Visio,也适用于Power BI.现在已经有越来越多的可视化,它们以更简洁的 ...
js封装选项卡
<div class="forestcamp_box"> <img src="img/home_02.jpg" /> <div c ...
常见模块(三） pickle模块和json模块
(一)json和pickle的区别 1.json是不同编程语言实现数据交换的工具,他是用来把python中的数据对象转换成字符串或者写入文件中的,再由其他语言通过json加载进来. 2.pickle是 ...
Linux第一节课学习笔记
我的目标是考过RHCE 开源软件有使用.复制.传播.收费.修改及创建衍生品自由,其中后二者只有开源软件才有,前四者开闭源共有.
Linux内核分析第九次作业
理解进程调度时机跟踪分析进程调度与进程切换的过程一.基础知识 Linux系统的一般执行过程一般情况:正在运行的用户态进程X切换到运行用户态进程Y的过程 1. 正在运行的用户态进程X 2. 发生中断 ...
Qt对`vtable的未定义引用
错误描述:Qt在linux系统编译时,遇到一个错误大致如下形式在 xxxxx函数中对‘vtable for xxxxx未定义的引用网上找了很多,各种情况都有,大多数是虚函数未实现导致的, 但也有 ...
bananapi+OLED做的一个打地鼠游戏，c语言编程
说明一下:BPI是对拍死的BPI的计数,对应最终的成绩RANK是难度数值越低难度越高每当打死10个BPI以后就会减一即难度高一级默认初始化RANK等于15 DIE是存在的BPI数量,一旦数量大于 ...
Substring方法(C#,JS,Java,SQL)的区别
C#: substring(第一参数,第二参数)// 第一参数:从第几位开始截,初始是从0位开始第二参数:截取几位 substring(参数) 如果传入参数为一个长整, 且大于等于0,则以这个 ...
Cookie深度解析
最近在公司做了Web端单点登录(SSO)功能,基于Cookie实现,做完之后感觉有必要总结一下,本文着重讲解Cookie,下文会说明单点登录的实现方案. Cookie简介众所周知,Web协议(也就是 ...

vue.js+SSH添加和查询

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

随机推荐

热门专题