需求分析

前端网页向后端发起相应请求,后端响应前端的请求,做出相关操作.如前端发出获取数据库用户表的请求,后端则将用户表的内容返回给前端.简而言之,前端发出对数据库访问的请求,后端需响应结果.

项目结构

后端项目结构

实现步骤

导入相关依赖包

 <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.2</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <java.version>1.8</java.version>
        <!--跳过测试类打包-->
        <skipTests>true</skipTests>
    </properties>
    <!--原则：按需导入-->
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <!--springboot启动项(器)，在包的内部springboot已经完成了项目的“整合”
                (配置)用户拿来就能用-->
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--数据库驱动-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <!--springboot数据库连接-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.3</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
    </dependencies>
    <!--springboot项目与Maven整合的一个插件
        可以通过插件 执行项目打包/测试/文档生成等操作
        注意事项：该插件不能省略，如果省略启动时报错
        (省略时)项目发布时：java -jar xxxx.jar 报错没有主清单信息！！
    -->
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

配置yml文件

server:
  port: 8090

spring:
  datasource:
    driver-class-name: com.mysql.cj.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
    #如果数据库密码以数字0开头 则必须使用""号包裹
    #password: "01234"

#SpringBoot整合Mybatis配置
#定义别名包：实现对象映射
#只做增强不做改变
mybatis-plus:
  type-aliases-package: com.jt.pojo
  #映射文件加载路径
  mapper-locations: classpath:/mybatisplus/*.xml
  #开启驼峰映射
  configuration:
    map-underscore-to-camel-case: true
#不打印日志
debug: false
logging:
  level:
    com.jt.mapper: debug

各层级代码编写

使用了mybatisplus,可以不用写简单的增删改查SQL语句

mapper(dao)层

package com.jt.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jt.pojo.User;
import org.apache.ibatis.annotations.Param;
import java.util.List;
//继承接口时必须添加泛型对象，否则映射表报错
public interface UserMapper extends BaseMapper<User> {

}

service业务层

创建接口:

package com.jt.service;
import com.jt.pojo.User;
import java.util.List;
public interface UserService {
    //查
    List<User> getAll();
    //删
    int delById(Integer id);
    //增
    int insertUser(User user);
    //改
    int updateUser(User user);
}

创建接口实现类:

package com.jt.service;
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
    private UserMapper userMapper;
    @Override
    public List<User> getAll() {
        return userMapper.selectList(null);
    }
    @Override
    public int delById(Integer id){
        return userMapper.deleteById(id);
    }
    @Override
    public int insertUser(User user){
        return userMapper.insert(user);
    }
    @Override
    public int updateUser(User user){
        return userMapper.updateById(user);

    }
}

controller控制层

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.ArrayList;
import java.util.List;
@RestController
@CrossOrigin
@RequestMapping("/vue")
public class VueController {
    @Autowired
    private UserService userService;
    @GetMapping("/getUserList")
    private List<User> getUserList(){
        return userService.getAll();
    }
    @PostMapping("insertUser")
    private int insertUser(@RequestBody User user){
        return userService.insertUser(user);
    }
    @DeleteMapping("deleteById")
    private int deleteById(Integer id){
        return userService.delById(id);
    }
    @PutMapping("updateUser")
    private int updateUser(@RequestBody User user){
        return userService.updateUser(user);
    }
}

前端代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户数据</title>
		<style>
			.hand{
				cursor: pointer;
				background-color: aquamarine;
				}
			.bgc :hover{background-color: #FF3366;cursor: pointer;}
			.add{cursor: pointer;background-color: red;border: 0rem;border-radius: 3px;width: 40%;}
			.del{background-color: deepskyblue;}
		</style>
	</head>
	<body>
		<!-- 定义vue根标签 -->
		<div id="app">
			<hr/>
			<table id="tab1" border="1px" align="center" width="80%" bgcolor="aquamarine">
				<tr>
					<td colspan="5" align="center" bgcolor="beige"><h2>用户信息表</h2></td>
				</tr>
				<tr align="center">
					<td bgcolor="brown">编号</td>
					<td bgcolor="red">姓名</td>
					<td bgcolor="orange">年龄</td>
					<td bgcolor="greenyellow">性别</td>
					<td bgcolor="#0000FF">操作</td>
				</tr>
				<tr align="center" v-for="user in userList">
					<td v-text="user.id" bgcolor="brown"></td>
					<td v-text="user.name" bgcolor="red"></td>
					<td v-text="user.age" bgcolor="orange"></td>
					<td v-text="user.sex" bgcolor="greenyellow"></td>
					<td bgcolor="#0000FF">
						<button @click="updateUserBtn(user)" class="hand chg">修改</button>
						<button @click="delById(user.id)" class="hand del">删除</button>
					</td>
				</tr>
			</table>
			<div align="center">
				<button @click="chgFlag1()" class="add">添加用户</button>
			</div>
			<div v-if="flag1" align="center">
				<table align="center" bgcolor="#7FFFD4">
					<tr bgcolor="#0000FF">
						<td>名称:<input type="text" v-model.trim="addUser.name" /></td>
					</tr>
					<tr bgcolor="magenta">
						<td>年龄:<input type="text" v-model.number="addUser.age"/></td>
					</tr>
					<tr bgcolor="royalblue">
						<td>性别:<input type="text" v-model.trim="addUser.sex"/></td>
					</tr>
					<tr align="right" bgcolor="rosybrown">
						<td><button @click="insertUser" style="background-color: green;">确认</button></td>
					</tr>
				</table>
			</div><hr />
			
			<div align="center">
				<button @click="chgFlag2()" class="add">修改用户</button>
			</div>
			<div v-if="flag2" align="center">
				<table align="center" bgcolor="#7FFFD4">
					<tr bgcolor="#0000FF">
						<td>名称:<input type="text" v-model.trim="upUser.name" /></td>
					</tr>
					<tr bgcolor="magenta">
						<td>年龄:<input type="text" v-model.number="upUser.age"/></td>
					</tr>
					<tr bgcolor="royalblue">
						<td>性别:<input type="text" v-model.trim="upUser.sex"/></td>
					</tr>
					<tr align="right" bgcolor="rosybrown">
						<td><button @click="updateUser()" style="background-color: green;">提交</button></td>
					</tr>
				</table>
			</div>
		</div>
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<!-- 页面中的数据必须在data中定义
				Ajax的请求结果赋值给属性-->
		<script>
			axios.defaults.baseURL = "http://localhost:8090"
			const App = new Vue({
				el: "#app",
				data: {
					a: null,
					flag1: false,
					flag2: false,
					userList: [],
					addUser: {
						name: ' ',
						age: null,
						sex: ' '
					},
					upUser: {
						id: null,
						name:' ',
						age: null,
						sex: ' '
					}
				},
				methods: {
					async getUserList(){
						let {data: result} = await axios.get("/vue/getUserList")
						// console.log(result)
						//ajax请求结果赋值给属性
						this.userList = result
					},
					async insertUser(){
						let {data: result} = await axios.post("/vue/insertUser", this.addUser)
						console.log(result)
						//将列表页面重新刷新
						this.getUserList()
					},
					async delById(n){
						if(confirm("确定删除吗")){
							let {data: result} = await axios.delete("/vue/deleteById",{params: {id: n}})
							this.getUserList()
						}
					},
					updateUserBtn(user){
						this.upUser=user
					},
					async updateUser(){
						await axios.put("/vue/updateUser",this.upUser)
						alert("更新成功")
						this.upUser={}
					},
					chgFlag1(){
						this.flag1 = !this.flag1
					},
					chgFlag2(){
						this.flag2 = !this.flag2
					}
				},
				mounted(){
					this.getUserList()
				},
			})
		</script>
	</body>
</html>

结果显示

网页首页

 

添加用户

点击添加用户按钮,显示结果如下,输入名字、年龄、性别之后点击确认即可添加成功

 更新用户

每条数据信息之后都有相应的修改和删除操作，点击更新按钮，即可在网页下方回显当前需要更新的数据,然后更改相应的姓名、年龄、性别，提交之后即可更新成功

 

 删除用户

点击删除按钮，页面会提示是否确认删除，确认之后即可删除用户，取消则不会进行删除操作

# java
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

Redis开源社区持续壮大，华为云为Valkey项目注入新的活力

avatar 华为云开发者联盟
cover

Python文本统计与分析：从基础到进阶

avatar 华为云开发者联盟
cover

教你用Perl实现Smgp协议

avatar 华为云开发者联盟