您的位置:首页 > 产品设计 > UI/UE

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) {
//配置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这个框架还是挺好用的,开发速率很快,而且很容易上手。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  JFinal mysql  vue.js  CRUD