vue怎么拿到th:value="${userId}"

在Vue中，可以使用v-bind指令来绑定属性值。如果你想要获取th:value="${userId}"的值，可以在模板中使用v-bind指令，如下所示：

<input type="text" v-bind:value="userId">

这样，Vue会将userId的值绑定到input元素的value属性上，实现了获取th:value="${userId}"的值的效果。需要注意的是，userId必须是Vue实例中的一个属性才能被绑定。

相关问题

用vue组件+vue路由+vuex+axios实现增删改查

好的，下面是一个简单的示例：

首先，我们需要创建一个Vue组件，比如一个用户列表组件，用于展示用户列表和实现增删改查操作：

<template>
  <div>
    <h2>用户列表</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
          <td>{{ user.gender }}</td>
          <td>
            <button @click="editUser(user)">编辑</button>
            <button @click="deleteUser(user.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="addUser">添加用户</button>
    <UserForm ref="userForm" @submit="submitUser"></UserForm>
  </div>
</template>

<script>
import UserForm from './UserForm.vue'
import { mapGetters, mapActions } from 'vuex'

export default {
  components: {
    UserForm
  },
  computed: {
    ...mapGetters(['users'])
  },
  methods: {
    ...mapActions(['fetchUsers', 'createUser', 'updateUser', 'deleteUser']),
    addUser () {
      this.$refs.userForm.show()
    },
    editUser (user) {
      this.$refs.userForm.show(user)
    },
    submitUser (user) {
      if (user.id) {
        this.updateUser(user)
      } else {
        this.createUser(user)
      }
    }
  },
  mounted () {
    this.fetchUsers()
  }
}
</script>

在上面的代码中，我们定义了一个用户列表组件，其中包含了一个表格用于展示用户列表，以及一个添加用户和编辑用户的按钮。点击添加用户按钮会弹出一个表单组件，用于输入新增用户的信息，点击编辑按钮同样会弹出该表单组件，并将选中用户的信息填充到表单中。在表单中填写完用户信息并点击确定后，会触发`submit`事件，我们根据用户是否存在`id`属性来判断是新增用户还是更新用户，然后调用相应的`createUser`或`updateUser`方法。

接下来，我们需要创建一个用户表单组件，用于输入用户信息：

<template>
  <div class="modal" v-show="visible">
    <div class="modal-mask"></div>
    <div class="modal-wrapper">
      <div class="modal-container">
        <div class="modal-header">
          <slot name="header">
            {{ formTitle }}
          </slot>
        </div>
        <div class="modal-body">
          <form>
            <div>
              <label for="name">姓名</label>
              <input id="name" type="text" v-model="user.name" />
            </div>
            <div>
              <label for="age">年龄</label>
              <input id="age" type="text" v-model="user.age" />
            </div>
            <div>
              <label for="gender">性别</label>
              <select id="gender" v-model="user.gender">
                <option value="男">男</option>
                <option value="女">女</option>
              </select>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="modal-default-button" @click="cancel">取消</button>
          <button class="modal-default-button" @click="submitForm">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      formTitle: this.user.id ? '编辑用户' : '添加用户'
    }
  },
  computed: {
    visible: {
      get () {
        return this.user.id !== undefined
      },
      set (value) {
        this.$emit('update:visible', value)
      }
    }
  },
  methods: {
    show (user = {}) {
      this.$emit('update:user', user)
      this.visible = true
    },
    cancel () {
      this.visible = false
    },
    submitForm () {
      this.$emit('submit', this.user)
      this.visible = false
    }
  }
}
</script>

在上面的代码中，我们定义了一个用户表单组件，其中包含了姓名、年龄和性别三个输入框，以及确定和取消按钮。在表单中填写完用户信息并点击确定按钮后，会触发`submit`事件，并将用户信息作为参数传递给父组件。

接下来，我们需要创建一个Vuex模块，用于管理用户列表和实现增删改查操作：

import axios from 'axios'

const state = {
  users: []
}

const mutations = {
  setUsers (state, users) {
    state.users = users
  },
  addUser (state, user) {
    state.users.push(user)
  },
  updateUser (state, user) {
    const index = state.users.findIndex(u => u.id === user.id)
    if (index !== -1) {
      state.users.splice(index, 1, user)
    }
  },
  deleteUser (state, userId) {
    const index = state.users.findIndex(u => u.id === userId)
    if (index !== -1) {
      state.users.splice(index, 1)
    }
  }
}

const actions = {
  async fetchUsers ({ commit }) {
    const response = await axios.get('/api/users')
    commit('setUsers', response.data)
  },
  async createUser ({ commit }, user) {
    const response = await axios.post('/api/users', user)
    commit('addUser', response.data)
  },
  async updateUser ({ commit }, user) {
    await axios.put(`/api/users/${user.id}`, user)
    commit('updateUser', user)
  },
  async deleteUser ({ commit }, userId) {
    await axios.delete(`/api/users/${userId}`)
    commit('deleteUser', userId)
  }
}

const getters = {
  users: state => state.users
}

export default {
  state,
  mutations,
  actions,
  getters
}

在上面的代码中，我们定义了一个名为`users`的状态，用于存储用户列表。然后，我们定义了四个Mutation方法，分别用于设置用户列表、添加用户、更新用户和删除用户。接着，我们定义了四个Action方法，分别用于获取用户列表、创建用户、更新用户和删除用户。最后，我们定义了一个Getter方法，用于获取用户列表。

最后，我们需要配置Vue Router和创建一个入口文件，用于启动我们的应用：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'
import App from './App.vue'
import UserList from './components/UserList.vue'
import UserStore from './store/user'

Vue.use(VueRouter)
Vue.use(Vuex)

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: UserList }
  ]
})

const store = new Vuex.Store({
  modules: {
    user: UserStore
  }
})

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

在上面的代码中，我们首先引入了Vue、Vue Router和Vuex，并定义了一个Vue实例，其包含了一个`UserList`组件和一个名为`user`的Vuex模块。然后，我们创建了一个Vue Router实例，并将其传递给Vue实例。最后，我们启动了应用，并将Vue实例挂载到`#app`元素上。

到这里，我们就完成了用Vue组件、Vue Router、Vuex和Axios实现增删改查的示例。当然，这只是一个简单的示例，实际应用中可能需要更多的功能和处理更多的异常情况。

jfinal加vue搭建详细demo代码

下面是一个简单的 JFinal + Vue 的 demo 代码，仅供参考：

## JFinal 部分

### Controller

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

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

<!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`。