回家再看zhe

搬砖户

于 2021-08-28 17:37:48 发布

阅读量121

点赞数

文章标签： html html5 css

本文链接：https://blog.csdn.net/m0_58233942/article/details/119970834

版权

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自己练习案例</title>
	</head>
	<body>
		<div id="app">
			{{pai}}
			<div>
				<table align="center">
				<tr>
					<td colspan="4"><h3 align="center">用户新增</h3></td>  </tr>
				<tr>
					<td>姓名：<input type="text" v-model="user.name"/> </td>
					<td>年龄：<input type="text" v-model="user.age"/> </td>
				</tr>
				<tr>
					<td>性别：<input type="text" v-model="user.sex"/> </td>
					<td><button style="width: 50px" @click="insertUser">新增</button></td>
				</tr>
					
				
				<tr>
					<td colspan="4"><h3 align="center">用户修改</h3></td>
				<tr>
				<tr>
					<td>编号：<input type="text" v-model="user1.id" disabled="disabled"/> </td>
					<td>姓名：<input type="text" v-model="user1.name"/> </td>
				</tr>	
				<tr><td>年龄：<input type="text" v-model="user1.age"/> </td>
					<td>性别：<input type="text" v-model="user1.sex"/> </td>
					<td><button @click="updateuser1" id="a">修改 </button></td>
				</tr>
			</table>
			</div>
			
			<div>
			<table align="center" border="2px" width="60%">
				<tr><td colspan="5"><h3 align="center">查询</h3> </td> </tr>
				<tr>
					<td>编号：<input type="text" v-model="selectuser.id"/></td>
					<td>姓名：<input type="text" v-model="selectuser.name" /></td>
					<td>年龄：<input type="text" v-model="selectuser.age" /></td>
					<td>性别：<input type="text" v-model="selectuser.sex" /></td>
					<td><button @click="find">查询</button> 
						<button @click="selectUser">返回</button>
					</td>
					
				</tr>
				<tr><td colspan="5"><h1 align="center">用户列表</h1></td></tr>
				<tr align="center">
					<td>编号</td>
					<td>姓名</td>
					<td>年龄
						<select @change="findup" v-model="pai">
							<option value="无">无</option>
							<option value="升序">升序</option>
							<option value="降序">降序</option>
						</select>
					</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				<tr v-for="s in show">
					<td v-text="s.id"></td>
					<td v-text="s.name"></td>
					<td v-text="s.age" ></td>
					<td v-text="s.sex"></td>
					<td>
						<button @click="updateUser(s)"><a href="#a">修改</a> </button>
						<button @click="deleteUser(s)">删除</button>
					</td>
				</tr>

			</table>
			
			</div>
			
		</div>
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<script>
			axios.defaults.baseURL = "http://localhost:8090/vue"
			const app = new Vue({
				el:"#app",
				data:{
					show:[],
					pai:'wo',
					user:{
						name:'',
						age:'',
						sex:''
					},
					user1:{
						id:'',
						name:'',
						age:'',
						sex:''
					},
					selectuser:{
						id:null,
						name:null,
						age:null,
						sex:null
					}
				},
				methods:{
					selectUser(){
						axios.get("/findAll").then(promise =>{
							this.show = promise.data
							this.selectuser={ }
						})
					},
				
					insertUser(){
						axios.post("/add",{param:this.user}).then(promise =>{
							alert(promise.data)
							this.selectUser()
							this.user={ }
							
						})
					},
					
					deleteUser(user){
						axios.delete("/del?id="+user.id).then(promise =>{
							alert(promise.data)
							this.selectUser()
						})
					},
					
					updateUser(user){
						this.user1=user
					},
					updateuser1(){
						axios.put("/set",this.user1).then(promise =>{
							alert(promise.data)
							this.selectUser()
						})
					},
					
					find(){
						axios.get("/find",{params : this.selectuser})
							.then(promise=>{
								this.show=promise.data
								console.log(promise.data)
							})
					},
					findup(){
						if(this.pai=='升序'){
						axios.get("/findup",{params : this.selectuser}).then(promise =>{
							this.show=promise.data
						})
						}
						if(this.pai=='降序'){
							axios.get("/finddown",{params : this.selectuser}).then(promise =>{
								this.show=promise.data
							})
						}
						if(this.pai=='无'){
							this.find()
						}
					}
					
				},
				created(){
					this.selectUser()
				}
			})
		</script>
	</body>
</html>

application.yml

#端口配置
server:
  port: 8090

#配置数据源
spring:
  datasource:
    #如果使用高版本驱动 则添加cj
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/jt?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
    username: root
    password: root

#Spring整合Mybatis
mybatis-plus:
  #定义别名包
  type-aliases-package: com.jt.pojo
  #导入映射文件
  mapper-locations: classpath:/mappers/*.xml
  #开启驼峰映射
  configuration:
    map-underscore-to-camel-case: true
#编译显示sql语句
logging:
  level:
    com.jt.mapper: debug

usermapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.jt.mapper.UserMapper">

</mapper>

usercontroller

package com.jt.controller;

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
@RequestMapping("vue")
@CrossOrigin
public class UserContraller {
    @Autowired
    private UserService userService;

    @GetMapping("findAll")
    public List<User> findAll(){
        return userService.findAll();
    }

    @PostMapping("add")
    public String add(@RequestBody User user) {
        return userService.add(user);
    }

    @DeleteMapping("del")
    public String del(Integer id){
        return userService.del(id);

    }

    @PutMapping("set")
    public String set(@RequestBody User user){
       return userService.set(user);
    }
    @GetMapping("find")
    public List<User> find(User user){
        if(user.getSex()==""){
            user.setSex(null);
        }
        if(user.getName()==""){
            user.setName(null);
        }
       return userService.find(user);
    }
    @GetMapping("findup")
    public List<User> findup(User user){
        if(user.getSex()==""){
            user.setSex(null);
        }
        if(user.getName()==""){
            user.setName(null);
        }
        return userService.findup(user);
    }
    @GetMapping("finddown")
    public List<User> finddown(User user){
        if(user.getSex()==""){
            user.setSex(null);
        }
        if(user.getName()==""){
            user.setName(null);
        }
        return userService.finddown(user);
    }
}

usermapper

package com.jt.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jt.pojo.User;

/**
 * 什么是渣渣？？？
 * 渣渣只是张文豪的代名词之一，泛指学末的逆袭，努力+努力+努力的结果
 * 如果继续努力下去，能够进阶成为学渣，下等菜鸡、中等采集、上等菜鸡
 * 直至成为菜鸡之霸中霸
 */
public interface UserMapper extends BaseMapper<User> {
}

user

package com.jt.pojo;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.experimental.Accessors;

/**
 * 什么是渣渣？？？
 * 渣渣只是张文豪的代名词之一，泛指学末的逆袭，努力+努力+努力的结果
 * 如果继续努力下去，能够进阶成为学渣，下等菜鸡、中等采集、上等菜鸡
 * 直至成为菜鸡之霸中霸
 */
@Data
@Accessors(chain = true)
@TableName("demo_user")
public class User {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String name;
    private Integer age;
    private String sex;

}

userservice

package com.jt.service;

import com.jt.pojo.User;

import java.util.List;

/**
 * 什么是渣渣？？？
 * 渣渣只是张文豪的代名词之一，泛指学末的逆袭，努力+努力+努力的结果
 * 如果继续努力下去，能够进阶成为学渣，下等菜鸡、中等采集、上等菜鸡
 * 直至成为菜鸡之霸中霸
 */
public interface UserService {

    List<User> findAll();

    String add(User user);

    String del(Integer id);

    String set(User user);

    List<User> find(User user);

    List<User> findup(User user);

    List<User> finddown(User user);
}

userserviceImpl

package com.jt.service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import com.sun.org.apache.xpath.internal.operations.Or;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * 什么是渣渣？？？
 * 渣渣只是张文豪的代名词之一，泛指学末的逆袭，努力+努力+努力的结果
 * 如果继续努力下去，能够进阶成为学渣，下等菜鸡、中等采集、上等菜鸡
 * 直至成为菜鸡之霸中霸
 */
@Service
public class UserServiceImpl implements UserService{
    @Autowired
    private UserMapper userMapper;

    @Override
    public List<User> findAll() {
        return userMapper.selectList(null);
    }

    @Override
    public String add(User user) {
        userMapper.insert(user);
        return "添加成功";
    }

    @Override
    public String del(Integer id) {
         userMapper.deleteById(id);
        return "删除成功";
    }

    @Override
    public String set(User user) {
        userMapper.updateById(user);
        return "修改成功";
    }

    @Override
    public List<User> find(User user) {
        boolean b1 = user.getId()==null?false:true;
        boolean b2 = user.getName()==null?false:true;
        boolean b3 = user.getAge()==null?false:true;
        boolean b4 = user.getSex()==null?false:true;
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.like(b2, "name", user.getName()).eq(b3, "age", user.getAge())
                .eq(b1, "id", user.getId())
                        .eq(b4, "sex", user.getSex());
        return userMapper.selectList(queryWrapper);
    }

    @Override
    public List<User> findup(User user) {
        boolean b1 = user.getId()==null?false:true;
        boolean b2 = user.getName()==null?false:true;
        boolean b3 = user.getAge()==null?false:true;
        boolean b4 = user.getSex()==null?false:true;
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper.like(b2, "name", user.getName()).eq(b3, "age", user.getAge())
                .eq(b1, "id", user.getId())
                .eq(b4, "sex", user.getSex())
                .orderByDesc(true, "age");
        return userMapper.selectList(queryWrapper);
    }

    @Override
    public List<User> finddown(User user) {
        boolean b1 = user.getId()==null?false:true;
        boolean b2 = user.getName()==null?false:true;
        boolean b3 = user.getAge()==null?false:true;
        boolean b4 = user.getSex()==null?false:true;
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        queryWrapper
                .like(b2, "name", user.getName()).eq(b3, "age", user.getAge())
                .eq(b1, "id", user.getId())
                .eq(b4, "sex", user.getSex())
                .orderByAsc(true, "age");
        return userMapper.selectList(queryWrapper);
    }

}

runapp

package com.jt;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * 什么是渣渣？？？
 * 渣渣只是张文豪的代名词之一，泛指学末的逆袭，努力+努力+努力的结果
 * 如果继续努力下去，能够进阶成为学渣，下等菜鸡、中等采集、上等菜鸡
 * 直至成为菜鸡之霸中霸
 */
@SpringBootApplication
@MapperScan("com.jt.mapper")
public class RunApp {
    public static void main(String[] args) {
        SpringApplication.run(RunApp.class, args);
    }
}

搬砖户

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
回家再看zhe

html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>自己练习案例</title> </head> <body> <div id="app"> {{pai}} <div> <table align="center"> <tr> &l
复制链接

扫一扫