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

随机推荐

网页全屏，modal 弹框无法显示的问题
问题描述页面主体部分全屏后,页面中的所有弹窗不能显示,退出全屏后,弹窗正常.解决方法校园项目中,所有用到的弹窗为iview的弹窗组件,该弹窗组件会生成在body中,和项目主体app为平行关系,项目主体 ...
内存泄露java.lang.OutOfMemoryError: PermGen space解决方法
PermGen space的全称是Permanent Generation space,是指内存的永久保存区域,这块内存主要是被JVM存放Class和Meta信息的,Class在被Loader时就会被 ...
Python pip源更改
将pip源设置为阿里源 windows 打开文件资源管理器(文件夹地址中) 地址栏上面输入 %appdata% 在这里面新建一个文件夹pip 在pip文件夹里面新建一个文件叫做 pip.ini,内容如 ...
Linux搭建SVN环境
1.安装SVN yun install -y subversion root权限安装安装成功验证 svnserve --version 创建SVN版本库 cd /home/kuma/下载 mkdi ...
LeetCode - Online Election
In an election, the i-th vote was cast for persons[i] at time times[i]. Now, we would like to implem ...
【SpringBoot】整合Redis实战
========================9.SpringBoot2.x整合Redis实战 ================================ 1.分布式缓存Redis介绍简介: ...
Python的paramiko，实现ssh
最简单的使用paramiko登录远程机器执行一些命令,学习实验楼的paramiko记录下来,第一次使用ConfigParser这个库,对于封装这些还是不太熟悉,只能慢慢来,嘿嘿嘿这是python脚本 ...
学会数据库读写分离、分表分库——用Mycat
系统开发中,数据库是非常重要的一个点.除了程序的本身的优化,如:SQL语句优化.代码优化,数据库的处理本身优化也是非常重要的.主从.热备.分表分库等都是系统发展迟早会遇到的技术问题问题.Mycat是一 ...
减小delphi体积的方法
1.关闭RTTI反射机制自从Delphi2010中引入了新的RTTI反射机制后,编译出来的程序会变得很大,这是因为默认情况下 Delphi2010 给所有类都加上了反射机制.而我们的工程并不每每都 ...
SpringBoot配置(1) 配置文件application&yml
SpringBoot配置(1) 配置文件application&yml 一.配置文件 1.1 配置文件 SpringBoot使用一个全局的配置文件,配置文件名是固定的. application ...

vue.js+SSH添加和查询

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

随机推荐

热门专题