JFina连接数据库（mysql）并执行增删改操作+jsp（vue.js）

最新推荐文章于 2023-10-06 10:37:21 发布

desert568

最新推荐文章于 2023-10-06 10:37:21 发布

阅读量1.1k

点赞数 1

文章标签： JFinal mysql vue.js CRUD

本文链接：https://blog.csdn.net/desert568/article/details/79121067

版权

先给大家看一下我项目的整个构造

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>
  <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 Person();

}

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">&times;</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">&times;</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>