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&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 ...
随机推荐
- Windows10 VS2017 C++信号处理
#include "pch.h" #include <iostream> #include <csignal> #include <windows.h ...
- ios MQTT协议的实际应用
1,创建单视图项目,pod search mqtt找到一个库,然后在项目目录下pod init 出Podfile 2,pod install 安装mqtt库 3,主要代码: #import " ...
- File类相关操作
1.File类常见方法: 创建: boolean createNewFile():在指定位置创建文件 如果该文件已经存在,则不创建,返回false,和输出流不一样,输出流对象一建立就创立文件,而且文件 ...
- JDBC driver连接MySQL运行报错The server time zone value 'Öйú±ê׼ʱ¼ä' is unrecognized or represents more than
出错原因: 因为安装mysql的时候时区设置的不正确. mysql默认的是美国的时区,而我们中国大陆要比他们迟8小时,采用GMT+8:00格式. 也就是说是数据库和系统时区差异所造成的. 验证:运行c ...
- 基于SPA的网页授权流程(微信OAuth2)
先说传统MVC网站的网页授权流程. 1.用户发起了某个需要登录执行的操作 2.收集AppId等信息重定向到微信服务器 3.微信服务器回调到网站某个Controller的Action 4.在此Actio ...
- 记一次ssh配置的锅
我们在使用git来管理代码的时候不可避免的要用到ssh密匙,这个密匙怎么配置的百度上很多. 我这边是使用sourcetree来配合管理代码的,但是我ssh配置好了以后无论是克隆代码还是推送代码都提示我 ...
- session and cooike
一.理解Cookie Cooie的作用: 当一个用户通过HTTP访问一个服务器时,这个服务器会将一些Key/Value键值对返回给客户端浏览器,并给这些数据加上一些限制条件,在条件符合时这个用户下次访 ...
- js 自定义类Android吐司提示框
(function(){ var mouseX = 0; var mouseY = 0; //定义一个全局toaslist用来存在新建的吐司 var toastLsit ...
- PythonStudy——Python 内存池机制 (Memory pool mechanism) Pymalloc
Python是如何进行内存管理-内存池机制 Pymalloc Python引用了一个内存池(memory pool)机制,即Pymalloc机制(malloc:n.分配内存),用于对小块内存的申请和释 ...
- 解决Visual Studio禁止使用strlen函数的问题
问题描述: 在学习C++的复制构造函数以及复制赋值运算符的重载时,需要用到使用C风格的字符串作为引入,由于我用的是VS2015(社区版),在编译时出错.编译器提醒strcpy函数是不安全的,建议改用s ...