jfinal+hbase+eclipse开发web项目详细步骤01--搭建jfinal工程

在工程项目搭建之前,首先要做以下几个事情的准备。

  1. 最新的jfinal框架jar包,下载地址:jfinal
  2. 下载hbase1.2.6开发需要的jar包,下载地址:hbase1.2.6jar包
  3. 安装好eclipse和jdk。eclipse绿色版下载地址:32位64位jdk

开始搭建工程

  1. 打开eclipse,file->new->project,新建Dynamic web project工程,点击next
    在这里插入图片描述

2.输入工程名,点击next

在这里插入图片描述

3.输入:WebContent\WEB-INF\classes,点击next

在这里插入图片描述

4.注意,web.xml将选择起来,点击finish。

在这里插入图片描述

5.在eclipse界面就会看到hbase01的工程

在这里插入图片描述

6、加入jfinal框架:添加jar包

我们下载后的jfinal框架解压后如下:其中,将指定的jar包复制
在这里插入图片描述

复制后的jar包放入工程目录下的lib文件夹

在这里插入图片描述

7.修改web.xml配置文件。双击打开web.xml文件,并且,将以下代码添加进去


  <filter>
    <filter-name>jfinal</filter-name>
    <filter-class>com.jfinal.core.JFinalFilter</filter-class>
    <init-param>
       <param-name>configClass</param-name>
       <param-value>com.demo.DemoConfig</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>jfinal</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

在这里插入图片描述

8.添加demo文件夹。

选中src,右键new->package
在这里插入图片描述

9.在demo包下,新建DemoConfig,HelloController,Start类

DemoConfig.java

package com.demo;

import com.jfinal.config.Constants;
import com.jfinal.config.Handlers;
import com.jfinal.config.Interceptors;
import com.jfinal.config.JFinalConfig;
import com.jfinal.config.Plugins;
import com.jfinal.config.Routes;
import com.jfinal.template.Engine;

public class DemoConfig extends JFinalConfig{

	@Override
	public void configConstant(Constants me) {
		 me.setDevMode(true);	
	}
	@Override
	public void configRoute(Routes me) {
		me.setBaseViewPath("/WEB-INF");
		me.add("/hello", HelloController.class,"main");
	}
	@Override
	public void configEngine(Engine me) {
	}
	@Override
	public void configPlugin(Plugins me) {
	}
	@Override
	public void configInterceptor(Interceptors me) {
		// TODO Auto-generated method stub
	}
	@Override
	public void configHandler(Handlers me) {
		// TODO Auto-generated method stub
	}
}

HelloController.java

package com.demo;

import com.jfinal.core.Controller;

public class HelloController extends Controller{

	 public void index() {
		 render("index.html");
	    }
	
}

Start.java

package com.demo;

import com.jfinal.core.JFinal;

public class Start {

	public static void main(String[] args) {
		JFinal.start("WebContent", 8082, "/", 5);
	}

}

10.在WebContent 的 WEB-INF文件夹下新建main文件夹,然后在新建index.html文件

在这里插入图片描述

11.编辑index.html 文件

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
你好!!!<br>
欢迎学习jfinal web 项目开发!!!!
</body>
</html>

12.启动项目,打开Start.java类,右键run as -> java application 运行,如果看到图,则说明启动成功


在这里插入图片描述

13.启动浏览器,查看。输入:http://localhost:8082/hello

在这里插入图片描述

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
好的,下面我将为您提供一个简单的demo示例,使用jfinal+vue+el来实现一个用户管理系统。 1. 准备工作 首先,需要安装Java环境和Maven工具。然后,创建一个Maven项目,并添加以下依赖: ```xml <dependency> <groupId>com.jfinal</groupId> <artifactId>jfinal</artifactId> <version>4.9.06</version> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.78</version> </dependency> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.3.0</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.26</version> </dependency> ``` 2. 创建数据库表 在MySQL中创建一个名为user的表,包含以下字段: - id - username - password - nickname - email 3. 创建后端代码 创建一个UserController类,用于处理用户相关的请求。 ```java public class UserController extends Controller { public void index() { render("index.html"); } public void list() { int pageNumber = getParaToInt("page"); int pageSize = getParaToInt("limit"); Page<User> userList = User.dao.paginate(pageNumber, pageSize, "select *", "from user"); renderJson(JSON.toJSONString(userList)); } public void save() { User user = getModel(User.class, ""); if (user.save()) { renderJson(JSON.toJSONString(Result.success())); } else { renderJson(JSON.toJSONString(Result.failure("保存失败"))); } } public void update() { User user = getModel(User.class, ""); if (user.update()) { renderJson(JSON.toJSONString(Result.success())); } else { renderJson(JSON.toJSONString(Result.failure("更新失败"))); } } public void delete() { Integer id = getParaToInt("id"); if (User.dao.deleteById(id)) { renderJson(JSON.toJSONString(Result.success())); } else { renderJson(JSON.toJSONString(Result.failure("删除失败"))); } } } ``` 创建一个User类,用于操作数据库。 ```java public class User extends Model<User> { public static final User dao = new User().dao(); public Integer getId() { return getInt("id"); } public void setId(Integer id) { set("id", id); } public String getUsername() { return getStr("username"); } public void setUsername(String username) { set("username", username); } public String getPassword() { return getStr("password"); } public void setPassword(String password) { set("password", password); } public String getNickname() { return getStr("nickname"); } public void setNickname(String nickname) { set("nickname", nickname); } public String getEmail() { return getStr("email"); } public void setEmail(String email) { set("email", email); } } ``` 4. 创建前端代码 创建一个index.html文件,用于展示用户列表和添加用户。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>User Management System</title> <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.1/theme-chalk/index.css"> </head> <body> <div id="app"> <el-container> <el-header> <h1 style="color: white">用户管理系统</h1> </el-header> <el-main> <el-table :data="userList" border style="width: 100%"> <el-table-column label="ID" prop="id"></el-table-column> <el-table-column label="用户名" prop="username"></el-table-column> <el-table-column label="昵称" prop="nickname"></el-table-column> <el-table-column label="邮箱" prop="email"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="primary" @click="editUser(scope.row)">编辑</el-button> <el-button type="danger" @click="deleteUser(scope.row)">删除</el-button> </template> </el-table-column> </el-table> <el-pagination :total="total" :page-size="pageSize" :current-page.sync="currentPage" @current-change="getPage"></el-pagination> <el-form :model="user" ref="userForm" label-width="80px" style="margin-top: 20px;"> <el-form-item label="用户名" prop="username"> <el-input v-model="user.username" placeholder="请输入用户名"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="user.password" placeholder="请输入密码"></el-input> </el-form-item> <el-form-item label="昵称" prop="nickname"> <el-input v-model="user.nickname" placeholder="请输入昵称"></el-input> </el-form-item> <el-form-item label="邮箱" prop="email"> <el-input v-model="user.email" placeholder="请输入邮箱"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="saveUser">保存</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> </el-main> </el-container> </div> <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script> <script src="https://cdn.staticfile.org/element-ui/2.15.1/index.js"></script> <script src="https://cdn.staticfile.org/axios/0.21.1/axios.min.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { userList: [], total: 0, pageSize: 10, currentPage: 1, user: { username: '', password: '', nickname: '', email: '' } }, created: function () { this.getPage(1); }, methods: { getPage: function (page) { let _this = this; axios.get('/user/list', { params: { page: page, limit: _this.pageSize } }).then(function (response) { _this.userList = response.data.list; _this.total = response.data.total; }).catch(function (error) { console.log(error); }); }, editUser: function (row) { this.user = row; }, deleteUser: function (row) { let _this = this; let id = row.id; axios.post('/user/delete', { id: id }).then(function (response) { _this.getPage(_this.currentPage); }).catch(function (error) { console.log(error); }); }, saveUser: function () { let _this = this; this.$refs.userForm.validate(function (valid) { if (valid) { axios.post('/user/save', _this.user).then(function (response) { _this.getPage(_this.currentPage); _this.resetForm('userForm'); }).catch(function (error) { console.log(error); }); } else { return false; } }); }, resetForm: function (formName) { this.$refs[formName].resetFields(); this.user = { username: '', password: '', nickname: '', email: '' }; } } }); </script> </body> </html> ``` 5. 配置路由 在JFinalConfig类中配置路由。 ```java public class DemoConfig extends JFinalConfig { @Override public void configConstant(Constants me) { me.setDevMode(true); } @Override public void configRoute(Routes me) { me.add("/user", UserController.class); } @Override public void configPlugin(Plugins me) { DruidPlugin dp = new DruidPlugin("jdbc:mysql://localhost:3306/demo?useSSL=false&serverTimezone=Asia/Shanghai&characterEncoding=utf-8", "root", "123456"); me.add(dp); ActiveRecordPlugin arp = new ActiveRecordPlugin(dp); me.add(arp); arp.addMapping("user", User.class); } @Override public void configInterceptor(Interceptors me) { } @Override public void configHandler(Handlers me) { } } ``` 6. 运行项目 运行项目,访问http://localhost:8080/user/index即可看到用户管理系统页面。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鼎上西瓜刀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值