vue.js+SSH添加和查询

最新推荐文章于 2023-09-15 10:09:15 发布

weixin_33739541

最新推荐文章于 2023-09-15 10:09:15 发布

阅读量202

点赞数

文章标签：运维测试数据库

原文链接：http://www.cnblogs.com/songgirl/p/8029399.html

版权

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&amp;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>

转载于:https://www.cnblogs.com/songgirl/p/8029399.html

weixin_33739541

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js+SSH添加和查询

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

扫一扫