【Java Web】 vue crud 练习
vue<!DOCTYPE html><html><head><meta charset="utf-8"><title>vue-axios练习</title></head><body><script src="../js/vue.js"></script><script sr
·
<template>
<div class="login_container">
<div class="login_box">
<!-- 头像区域-->
<div class="avatar_box">
<img src="../assets/logo.png" alt="VUE图片"/>
</div>
<!-- 登陆表单区域 ref代表当前表单引用对象-->
<el-form ref="loginFormRef" label-width="0" class="login_form" :model="loginForm" :rules="loginFormRules">
<el-form-item prop="username">
<el-input prefix-icon="iconfont iconuser" v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input prefix-icon="iconfont iconsuo" v-model="loginForm.password" type="password"></el-input>
</el-form-item>
<el-form-item class="btns">
<el-button type="primary" @click="login">登录</el-button>
<el-button type="info" @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<!-- 定义JS变量 -->
<script>
export default {
data() {
return {
loginForm: {
username: '',
password: ''
},
loginFormRules: {
username: [
{required: true, message: '请输入用户名', trigger: 'blur'},
{min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'},
{min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
]
}
}
},
methods: {
resetForm() {
// 获取当前vue提交对象
this.$refs.loginFormRef.resetFields()
},
login() {
this.$refs.loginFormRef.validate(async validate => {
if (!validate) return;
const {data: result} = await this.$http.post('/user/login', this.loginForm);
//console.log(result)
if (result.status != 200) return this.$message.error('用户名或者密码错误!');
else this.$message.success("登录成功!")
let token = result.data
window.sessionStorage.setItem('token', token)
this.$router.push('/home')
})
}
}
}
</script>
vue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-axios练习</title>
</head>
<body>
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<div id="app">
<div align="center">
<h1 align="center">用户新增</h1>
<table align="center" width="50%">
<tr align="center">
<td> 姓名:<input type="text" v-model.trim="addUser.name" placeholder="请输入姓名"/></td>
<td>年龄:<input type="text" v-model.trim="addUser.age" placeholder="请输入年龄"/></td>
<td> 性别:<input type="text" v-model.trim="addUser.sex" placeholder="请输入性别"/></td>
<td> <button @click="addUserMe">新增</button></td>
</ tr>
</table>
</div>
<div align="center">
<h1 align="center">用户修改</h1>
<table align="center" width="70%">
<tr align="center">
<td> 编号:<input type="text" v-model.trim="updataUser.id" disabled placeholder="请输入编号"/></td>
<td> 姓名:<input type="text" v-model.trim="updataUser.name" placeholder="请输入姓名"/></td>
<td> 年龄:<input type="text" v-model.trim="updataUser.age" placeholder="请输入年龄"/></td>
<td> 性别:<input type="text" v-model.trim="updataUser.sex" placeholder="请输入性别"/></td>
<td><button @click="updataUserMe(updataUser)">提交</button></td>
</tr>
</table>
</div>
<hr >
<table id="tab1" border="1px" align="center" width="80%">
<tr>
<td colspan="5" align="center">
<h1>用户列表</h1>
</td>
</tr>
<tr align="center">
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr align="center" v-for="user in userList">
<td v-text="user.id"> </td>
<td v-text="user.name"></td>
<td v-text="user.age"></td>
<td v-text="user.sex"></td>
<td >
<button @click="updataUserBtu(user)">修改</button>
<button @click="deleteUser(user.id)">删除</button>
</td>
</tr>
</table>
</div>
<script>
axios.defaults.baseURL = "http://localhost:8088"
const app = new Vue({
el:"#app",
data:{
userList: [],
addUser: {
name: "",
age: null,
sex: ""
},
updataUser: {
id: null,
name: "",
age: null,
sex: ""
}
},
methods:{
async getUserList(){
let{data: result} = await axios.get("/vue/getUserList")
this.userList = result
console.log(result)
},
async addUserMe(){
await axios.post("/vue/insertUser",this.addUser)
location.reload()
},
async updataUserBtu(user){
this.updataUser = user
},
async updataUserMe(user){
this.updataUser = user
await axios.put("/vue/updataUser",this.updataUser)
this.updataUser = {},
location.reload()
},
async deleteUser(id){
// await axios.delete("/vue/deleteUser?id=" + id)
await axios.delete(`/vue/deleteUser/${id}`)
this.getUserList()
}
},
mounted() {
this.getUserList();
}
})
</script>
</body>
</html>
controller
package com.jt.controller;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@CrossOrigin
@RequestMapping("/vue")
public class VueController {
@Autowired
UserService userService;
@GetMapping("/getUserList")
public List<User> getUserList(User user){
return userService.getUserList();
}
@PostMapping("insertUser")
public void insertUser(@RequestBody User user){
userService.insertUser(user);
}
@DeleteMapping("deleteUser/{id}")
public void deleteUser(@PathVariable Integer id){
userService.deleteUser(id);
}
@PutMapping("updataUser")
public void updataUser(@RequestBody User user){
userService.updataUser(user);
}
}
service
package com.jt.service;
import com.baomidou.mybatisplus.core.conditions.update.UpdateWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class UserServiceImpl implements UserService {
@Autowired
UserMapper userMapper;
@Override
public List<User> getAll() {
return userMapper.selectList(null);
}
@Override
public List<User> getUserList() {
return userMapper.selectList(null);
}
@Override
public void insertUser(User user) {
userMapper.insert(user);
}
@Override
public void deleteUser(Integer id) {
userMapper.deleteById(id);
}
@Override
public void updataUser(User user) {
UpdateWrapper<User> updateWrapper = new UpdateWrapper<>();
updateWrapper.eq("id",user.getId()).set("name",user.getName()).set("sex",user.getSex()).set("age",user.getAge());
userMapper.update(null, updateWrapper);
}
}
日期格式
@DateTimeFormat(pattern="yyyy-MM-dd")//页面写入数据库时格式化
@JSONField(format="yyyy-MM-dd")//数据库导出页面时json格式化
private Date createdate;
页面写入数据库时格式化
@DateTimeFormat(pattern=“yyyy-MM-dd”)
数据库导出页面时json格式化
当查出日期格式是 birthday=Fri Jul 23 00:00:00 CST 2004 这种时
@JSONField(format=“yyyy-MM-dd”)
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)