【Java Web】 vue crud 练习

最新推荐文章于 2022-10-12 18:07:01 发布

李鲤驴。

最新推荐文章于 2022-10-12 18:07:01 发布

阅读量139

点赞数

分类专栏： JavaWeb 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43647307/article/details/121709220

版权

JavaWeb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文展示了如何使用Vue.js和Axios构建用户登录、新增、修改和删除功能。通过Vue组件和表单验证实现用户登录，利用 Axios 进行HTTP请求，与后端Spring Boot RESTful API交互，进行用户数据的CRUD操作。

摘要由CSDN通过智能技术生成

<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
评论
【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 src="../js/axios.js"></script
复制链接

扫一扫

专栏目录