JFinal连接数据库(MySQL)并执行增删改操作+jsp(vue.js)
2018-03-25 19:10
771 查看
先给大家看一下 我项目的整个构造
1.首先把JFinal基本的框架搭建好,那么 第一步,就是导入依赖:<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.jfinal</groupId>
4000
<artifactId>jfinal</artifactId>
<version>3.0</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.6</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.38</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.44</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>4.3.13.RELEASE</version>
</dependency>2.看一下 数据库:
3.创建Model类,也就是实体类,这里的实体类不需要定义属性了:只需要继承Model就好开发效率快很多了:public class Person extends Model<Person> {
public static final Person dao = new Pers
22772
on();
}
4.创建MyConfig:public class MyConfig extends JFinalConfig {
public void configConstant(Constants constants) {
constants.setViewType(ViewType.JSP);
}
public void configRoute(Routes routes) {
7.最后,附上我的jsp代码:jsp用的是vue.js写的:记住,需要导入js和css。<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="plugs/jquery/jquery.min.js" ></script>
<script type="text/javascript" src="plugs/bootstrap/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="plugs/js/vue.min.js" ></script>
<html>
<head>
<title>Title</title>
</head>
<body>
<div class="container">
<hr>
<button type="button" class="btn btn-primary" v-on:click="addmodalshow">添加</button>
<table class="table table-bordered table-hover">
<caption class="h3 text-center text-info">用户列表</caption>
<thead>
<tr>
<th class="text-center">序号</th>
<th class="text-center">姓名</th>
<th class="text-center">年龄</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="person in users" class="text-center">
<td>{{person.pid}}</td>
<td>{{person.pname}}</td>
<td>{{person.page}}</td>
<td>
<button type="button" v-on:click="deletemodeshow(person.pid)">删除</button>
<button type="button" v-on:click="updatemodalshow(person.pid)">修改</button>
</td>
</tr>
</tbody>
</table>
<!-- 删除模态框 -->
<div class="modal fade" id="deleteDataModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">删除数据</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
您确定要删除这一条数据吗?
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" v-on:click="delperson">删除</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<!--增加修改模态框 -->
<div class="modal fade" id="DataModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">{{ titleName }}</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form id="addandupdatefrom" method="post">
<!-- 模态框主体 -->
<div class="modal-body">
姓名: <input type="text" name="pname" id="pname" v-bind:value="person.pname">
</div>
<div class="modal-body">
年龄:<input type="text" name="page" id="page" v-bind:value="person.page">
</div>
</form>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" v-on:click="addandupdateuser">确定</button>
<button type="button" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 声明vue对象
var vm = new Vue({
el:'.container',
data:{
submitUrl:"",
person:"",
users:[],
titleName:"",
pid : ""
},
methods:{
getAll : function() {
var _this = this ;
_this.submitUrl = "/person/getData" ;
//获得所有对象
$.getJSON(_this.submitUrl,function (result , status) {
_this._data.users = result ;
})
},
getpersonbyid:function (id) {
var _this = this ;
_this.submitUrl = "/person/getUserById" ;
$.ajax({
url:_this.submitUrl,
data:{pid:id},
dataType:"JSON",
success:function (result) {
_this.person = result ;
}
});
},
//修改
updatemodalshow : function (id) {
this.titleName = "修改";
this.getpersonbyid(id);
this.submitUrl="person/updateperson?pid="+id;
$("#DataModal").modal("show");
},
deletemodeshow : function (id) {
this.pid=id;
$("#deleteDataModal").modal("show");
},
delperson:function () {
var _this = this ;
$.ajax({
url:"/person/delperon",
data:{pid:this.pid},
dataType:"JSON",
success:function (result){
$("#deleteDataModal").modal("hide");
_this.getAll() ;
}
});
},
//增加
addmodalshow : function () {
this.titleName="增加";
this.submitUrl="/person/addperson";
$("#DataModal").modal("show");
},
addandupdateuser : function () {
var _this = this ;
console.info(_this.submitUrl);
$.ajax({
url:_this.submitUrl,
data:$("#addandupdatefrom").serialize(),
dataType:"JSON",
success:function (result) {
console.info(result);
_this.getAll() ;
$("#DataModal").modal("hide");
}
});
}
},
created:function() {
this.getAll() ;
}
});
</script>
</body>
</html>
就这样,完成了一个最基本的增删改操作。个人觉得JFinal这个框架还是挺好用的,开发速率很快,而且很容易上手。
1.首先把JFinal基本的框架搭建好,那么 第一步,就是导入依赖:<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>3.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.jfinal</groupId>
4000
<artifactId>jfinal</artifactId>
<version>3.0</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.6</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.38</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.44</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>4.3.13.RELEASE</version>
</dependency>2.看一下 数据库:
3.创建Model类,也就是实体类,这里的实体类不需要定义属性了:只需要继承Model就好开发效率快很多了:public class Person extends Model<Person> {
public static final Person dao = new Pers
22772
on();
}
4.创建MyConfig:public class MyConfig extends JFinalConfig {
public void configConstant(Constants constants) {
constants.setViewType(ViewType.JSP);
}
public void configRoute(Routes routes) {
//配置Controller: routes.add("person", PersonController.class); } public void configEngine(Engine engine) { } public void configPlugin(Plugins plugins) {
//像这样:依次是url,username,password,driverClass:
DruidPlugin druidPlugin=new DruidPlugin("jdbc:mysql://localhost/test","root","root","com.mysql.jdbc.Driver"); plugins.add(druidPlugin); plugins.add(getActiveRecordPlugin(druidPlugin)); } private ActiveRecordPlugin getActiveRecordPlugin(DruidPlugin druidPlugin) { ActiveRecordPlugin arp = new ActiveRecordPlugin(druidPlugin);
//这里是数据库表名,主键 arp.addMapping("person","pid", Person.class); return arp; } public void configInterceptor(Interceptors interceptors) { } public void configHandler(Handlers handlers) { } }
5.配置web.xml:
<web-app> <display-name>Archetype Created Web Application</display-name> <filter> <filter-name>jfinal</filter-name> <filter-class>com.jfinal.core.JFinalFilter</filter-class> <init-param> <param-name>configClass</param-name> <param-value>com.desert.config.MyConfig</param-value> </init-param> </filter> <filter-mapping> <filter-name>jfinal</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
<!--这里配置个过滤器,拿来转码的,可以忽略--> <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> </web-app>
6.创建我的PersonController:
public class PersonController extends Controller{
//如果继承Controller的话,默认会加载这个index方法 public void index(){ renderText("你好,Jfinal"); }
//添加 public void addperson() throws UnsupportedEncodingException { String pname=getPara("pname"); pname=new String(pname.getBytes("iso-8859-1"),"utf-8"); int page=getParaToInt("page"); System.out.println("传过来的值是:"+page+","+pname); //我这里就在这里直接写方法了:
//添加的方法:
new Person().set("pname",pname).set("page",page).save(); renderText("0"); }
//删除: public void delperon(){ int pid=getParaToInt("pid"); Person.dao.deleteById(pid); renderText("1"); } public void getUserById(){ int pid=getParaToInt("pid"); Person person=Person.dao.findById(pid); renderJson(person); }
//修改: public void updateperson() throws UnsupportedEncodingException { int pid=getParaToInt("pid"); String pname=getPara("pname"); pname=new String(pname.getBytes("iso-8859-1"),"utf-8"); int page=getParaToInt("page"); System.out.println("传过来的值是:"+page+","+pname); Person.dao.findById(pid).set("pname",pname).set("page",page).update(); renderText("1"); } }
7.最后,附上我的jsp代码:jsp用的是vue.js写的:记住,需要导入js和css。<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="plugs/jquery/jquery.min.js" ></script>
<script type="text/javascript" src="plugs/bootstrap/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="plugs/js/vue.min.js" ></script>
<html>
<head>
<title>Title</title>
</head>
<body>
<div class="container">
<hr>
<button type="button" class="btn btn-primary" v-on:click="addmodalshow">添加</button>
<table class="table table-bordered table-hover">
<caption class="h3 text-center text-info">用户列表</caption>
<thead>
<tr>
<th class="text-center">序号</th>
<th class="text-center">姓名</th>
<th class="text-center">年龄</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="person in users" class="text-center">
<td>{{person.pid}}</td>
<td>{{person.pname}}</td>
<td>{{person.page}}</td>
<td>
<button type="button" v-on:click="deletemodeshow(person.pid)">删除</button>
<button type="button" v-on:click="updatemodalshow(person.pid)">修改</button>
</td>
</tr>
</tbody>
</table>
<!-- 删除模态框 -->
<div class="modal fade" id="deleteDataModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">删除数据</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- 模态框主体 -->
<div class="modal-body">
您确定要删除这一条数据吗?
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" v-on:click="delperson">删除</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<!--增加修改模态框 -->
<div class="modal fade" id="DataModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">{{ titleName }}</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form id="addandupdatefrom" method="post">
<!-- 模态框主体 -->
<div class="modal-body">
姓名: <input type="text" name="pname" id="pname" v-bind:value="person.pname">
</div>
<div class="modal-body">
年龄:<input type="text" name="page" id="page" v-bind:value="person.page">
</div>
</form>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" v-on:click="addandupdateuser">确定</button>
<button type="button" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 声明vue对象
var vm = new Vue({
el:'.container',
data:{
submitUrl:"",
person:"",
users:[],
titleName:"",
pid : ""
},
methods:{
getAll : function() {
var _this = this ;
_this.submitUrl = "/person/getData" ;
//获得所有对象
$.getJSON(_this.submitUrl,function (result , status) {
_this._data.users = result ;
})
},
getpersonbyid:function (id) {
var _this = this ;
_this.submitUrl = "/person/getUserById" ;
$.ajax({
url:_this.submitUrl,
data:{pid:id},
dataType:"JSON",
success:function (result) {
_this.person = result ;
}
});
},
//修改
updatemodalshow : function (id) {
this.titleName = "修改";
this.getpersonbyid(id);
this.submitUrl="person/updateperson?pid="+id;
$("#DataModal").modal("show");
},
deletemodeshow : function (id) {
this.pid=id;
$("#deleteDataModal").modal("show");
},
delperson:function () {
var _this = this ;
$.ajax({
url:"/person/delperon",
data:{pid:this.pid},
dataType:"JSON",
success:function (result){
$("#deleteDataModal").modal("hide");
_this.getAll() ;
}
});
},
//增加
addmodalshow : function () {
this.titleName="增加";
this.submitUrl="/person/addperson";
$("#DataModal").modal("show");
},
addandupdateuser : function () {
var _this = this ;
console.info(_this.submitUrl);
$.ajax({
url:_this.submitUrl,
data:$("#addandupdatefrom").serialize(),
dataType:"JSON",
success:function (result) {
console.info(result);
_this.getAll() ;
$("#DataModal").modal("hide");
}
});
}
},
created:function() {
this.getAll() ;
}
});
</script>
</body>
</html>
就这样,完成了一个最基本的增删改操作。个人觉得JFinal这个框架还是挺好用的,开发速率很快,而且很容易上手。
相关文章推荐
- JFina连接数据库(mysql)并执行增删改操作+jsp(vue.js)
- Node.js 连接 MySQL 并进行数据库操作
- node.js 开发指南 – Node.js 连接 MySQL 并进行数据库操作
- jsp连接mysql对数据库进行操作乱码的解决
- jsp连接mysql的增删改操作
- jsp页面:js方法里嵌套java代码(是操作数据库的),如果这个js 方法没被调用,当jsp页面被解析的时候,不管这个js方法有没有被调用这段java代码都会被执行?
- Node.js 连接 MySQL 并进行数据库操作
- Node.js 连接 MySQL 并进行数据库操作
- node.js 开发指南 – Node.js 连接 MySQL 并进行数据库操作
- js 连接数据库如何操作数据库中的数据
- 01_03 JSP基础语法之page指令2(数据库的连接操作)
- 在myeclipse中配置DB Driver(数据库用MySql),并在myeclipse执行sql语句操作
- PHP使用数据库永久连接方式操作MySQL的是与非
- 02-使用C3P0连接池连接MySql并且使用QueryRunner简化数据库操作
- php常用代码剪辑(mysql连接数据库,web常用查询,分页,读取,js)
- C连接MySQL执行插入操作(1)
- Jsp 连接 mySQL、Oracle 数据库备忘(Windows平台)
- 学习python 第三季:编写简单简单连接数据库并执行查询操作
- JSP,TOMCAT,JD,mysql环境搭建和连接数据库
- JSP:连接数据库mysql