jfinal加vue搭建详细demo代码
时间: 2024-01-20 10:04:29 浏览: 211
jfinal的demo
下面是一个简单的 JFinal + Vue 的 demo 代码,仅供参考:
## JFinal 部分
### Controller
```java
public class UserController extends Controller {
public void index() {
render("index.html");
}
public void getUsers() {
List<User> userList = UserService.getAllUsers();
renderJson(userList);
}
public void addUser() {
User user = getModel(User.class);
boolean isSuccess = UserService.addUser(user);
if (isSuccess) {
renderJson(Result.success("添加成功"));
} else {
renderJson(Result.failure("添加失败"));
}
}
public void deleteUser() {
int userId = getParaToInt();
boolean isSuccess = UserService.deleteUser(userId);
if (isSuccess) {
renderJson(Result.success("删除成功"));
} else {
renderJson(Result.failure("删除失败"));
}
}
}
```
### Service
```java
public class UserService {
public static List<User> getAllUsers() {
return Db.find("SELECT * FROM user");
}
public static boolean addUser(User user) {
return user.save();
}
public static boolean deleteUser(int userId) {
return Db.deleteById("user", "id", userId);
}
}
```
## Vue 部分
### index.html
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JFinal + Vue Demo</title>
</head>
<body>
<div id="app">
<h1>User List</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr v-for="user in userList" :key="user.id">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
<td>{{ user.gender }}</td>
<td><button @click="deleteUser(user.id)">Delete</button></td>
</tr>
</tbody>
</table>
<h1>Add User</h1>
<form @submit.prevent="addUser">
<div>
<label for="name">Name:</label>
<input type="text" id="name" v-model="userName">
</div>
<div>
<label for="age">Age:</label>
<input type="number" id="age" v-model="userAge">
</div>
<div>
<label for="gender">Gender:</label>
<select id="gender" v-model="userGender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<button type="submit">Add</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
userList: [],
userName: '',
userAge: '',
userGender: 'male'
},
mounted: function() {
this.getUsers();
},
methods: {
getUsers: function() {
axios.get('/users').then(response => {
this.userList = response.data;
});
},
addUser: function() {
axios.post('/users', {
name: this.userName,
age: this.userAge,
gender: this.userGender
}).then(response => {
alert(response.data.msg);
if (response.data.code == 0) {
this.getUsers();
}
});
},
deleteUser: function(userId) {
axios.delete('/users/' + userId).then(response => {
alert(response.data.msg);
if (response.data.code == 0) {
this.getUsers();
}
});
}
}
});
</script>
</body>
</html>
```
## 注意事项
1. 在 JFinal 中使用 `render("index.html")` 渲染 Vue 的页面;
2. 在 Vue 的 `axios` 请求中,需要加上 JFinal 的路由前缀,例如 `/users`;
3. 在 Vue 的 `axios` 请求中,需要加上 `Content-Type: application/json` 的请求头,否则 JFinal 无法解析请求体;
4. 在 Vue 的 `axios` 请求中,需要将数据放在请求体中,例如 `{ name: this.userName, age: this.userAge, gender: this.userGender }`;
5. 在 Vue 的 `axios` 请求中,需要将 JFinal 返回的 JSON 数据中的 `code` 和 `msg` 提取出来,例如 `response.data.code` 和 `response.data.msg`。
阅读全文