Day200

@Mapper

public interface UserDao {

//查询所有用户信息

List<User> findAll();

}

• mapper.xml

<mapper namespace="com.achang.dao.UserDao">

<select id="findAll" resultType="User" >

select id,name,bir,sex,address from t_users

</select>

</mapper>

• service/Userservice

public interface UserService {

//查询所有用户信息

List<User> findAll();

}

• service/impl/UserServiceImpl

@Service

@Transactional

public class UserServiceImpl implements UserService {

@Autowired

private UserDao userDao;

@Override

public List<User> findAll() {

return userDao.findAll();

}

}

• 测试：testFindAll（）

@SpringBootTest

class ElementusersApplicationTests {

@Autowired

private UserService userService;

@Test

void testFindAll() {

for (User user : userService.findAll()) {

System.out.println(user);

}

}

}

• UserController，findAll()

@RestController

@RequestMapping("/user")

@CrossOrigin //解决跨域问题

public class UserController {

@Autowired

private UserService userService;

@GetMapping("/findAll")

public List<User> findAll(){

return userService.findAll();

}

}

• 测试，访问：http://localhost:6161/user/findAll
  

• 前端 components/users/List.vue 发送 axios 请求获取数据，created()

created(){

this.$http.get("http://localhost:6161/user/findAll").then(function(resp){

console.info(response.data);

this.tableData=resp.data;

})

}

[](()添加功能

• UserDao

//保存用户信息

void save(User user);

• mapper/UserDaoMapper.xml

<insert id="save" parameterType="User" useGeneratedKeys="true" keyProperty="id">

insert into t_users

values (#{id},#{name},#{bir},,#{sex},#{address})

</insert>

• service/UserService

//保存用户信息

void save(User user);

• service/impl/UserServiceImpl

@Override

public void save(User user) {

userDao.save(user);

}

• 测试 save（）

@Test

void testSave(){

userService.save(new User("2","阿昌",new Date(),"男","浙江省欧洲市"));

}

• 创建一个给前端返回状态类 vo/Result

@Data

public class Result {

private Boolean status = true;

private String msg;

}

• UserController

//保存用户

@PostMapping("/save")

public Result save(@RequestBody User user){

Result result = new Result();

try {

userService.save(user);

result.setMsg("用户数据保存成功！");

} catch (Exception e) {

e.printStackTrace();

result.setStatus(false);

result.setMsg("用户数据保存失败！");

}

return result;

}

• 前端 components/users/List.vue 发送 axios 请求获取数据，onSubmit()

onSubmit() {

console.log("submit!");

//发送一个 axios 请求

let _this = this;

this.$http

.post("http://localhost:6161/user/save", this.form)

.then(function (resp) {

console.log(resp.data);

if (resp.data.status) {

_this.$message({

message: "保存成功！！ " + resp.data.msg,

type: "success",

});

//清空表单信息

_this.form = {sex:'男'};

//隐藏表单

_this.show3 = false;

//刷新表单

_this.findAll();

} else {

_this.$message({

message: "保存失败 " + resp.data.msg,

type: "error",

});

}

});

}

• 将上面的查询所有用户信息封装成一个方法，findAll()

findAll() {

let _this = this;

this.$http

.get("http://localhost:6161/user/findAll")

.then(function (resp) {

console.info(resp.data);

_this.tableData = resp.data;

});

},

• 查询所有的 axios 请求

created() {

this.findAll();

},

[](()删除功能

• UserDao

//根据 id 删除用户

void delete(String id);

• UserDaoMapper.xml

<delete id="delete" parameterType="String">

delete from t_users where id = #{id}

</delete>

• UserService

//根据 id 删除用户

void delete(String id);

• service/impl/UserServiceImpl

@Override

@Transactional(propagation = Propagation.SUPPORTS)

public void delete(String id) {

userDao.delete(id);

}

• 测试 delete（）

@Test

void testDelete(){

userService.delete("18");

}

• UserController

//根据 id 删除用户

@GetMapping("/delete")

public Result delete(String id){

Result result = new Result();

try {

userService.delete(id);

result.setMsg("用户数据删除成功！");

} catch (Exception e) {

e.printStackTrace();

result.setStatus(false);

result.setMsg("用户数据删除失败！");

}

return result;

}

• 前端页面修改

<el-popconfirm

confirm-button-text="好的"

cancel-button-text="不用了"

icon="el-icon-info"

icon-color="red"

title="你确定要删除吗？"

@confirm=handleDelete(scope.$index,scope.row)

<el-button

slot="reference"

size="mini"

type="danger"

删除</el-button

</el-popconfirm>

• 前端 handleDelete()

handleDelete(index, row) {

console.log(index, row);

//发送 axios 请求处理删除

let _this = this;

this.$http

.get("http://localhost:6161/user/delete?id=" + row.id)

.then(function (resp) {

if (resp.data.status) {

_this.$message({

message: "删除成功！！ " + resp.data.msg,

type: "success",

});

//刷新表单

_this.findAll();

} else {

_this.$message({

message: "删除失败 " + resp.data.msg,

type: "error",

});

}

});

}

[](()修改功能

• saveUserInfo()

saveUserInfo(){

//打开表单弹窗

this.show3=!this.show3;

//清空添加表单

this.form={sex: "男"};

}

• UserDao

//更新用户信息

void update(User user);

• UserService

//更新用户信息

void update(User user);

• UserServiceImpl

@Override

public void update(User user) {

userDao.update(user);

}

• UserController，保存和修改方法合一

//保存或修改用户

@PostMapping("/saveOrUpdate")

public Result save(@RequestBody User user) {

Result result = new Result();

try {

if (StringUtils.isEmpty(user.getId())) {

userService.update(user);

result.setMsg("用户数据编辑成功！");

} else {

userService.save(user);

result.setMsg("用户数据保存成功！");

}

}

catch (Exception e){

result.setStatus(false);

result.setMsg("用户数据保存或修改操作失败！");

}

return result;

}

• 保存按钮的前端 axios 请求修改

[](()表单验证

• 异步验证

• 审核验证

[](()分页组件

• UserDao

//分页查询

List<User> findPage(@Param("start")Integer start,@Param("rows")Integer rows);

//查询总条数

Long findTotals();

• UserDaoMapper.xml

<select id="findPage" resultType="User">

select id,name,bir,sex,address

from t_users limit #{start},#{rows}

</select>

<select id="findTotals" resultType="long">

select count(id) from t_users

</select>

• UserService

//分页查询

List<User> findPage(Integer pageNow, Integer rows);

//查询总条数

Long findTotals();

• UserServiceImpl

@Override

public List<User> findPage(Integer pageNow, Integer rows) {

int start = (pageNow - 1)*rows;

return userDao.findPage(start,rows);

}

@Override

public Long findTotals() {

return userDao.findTotals();

}

• UserController

//分页查询的方法

@GetMapping("/findByPage")

public Map<String, java.lang.Object> findByPage(Integer pageNow, Integer pageSize){

Map<String, Object> result = new HashMap<>();

pageNow = pageNow ==null?1:pageNow;

pageSize = pageSize==null?4:pageSize;

List<User> users = userService.findPage(pageNow, pageSize);

Long totals = userService.findTotals();

result.put("users",users);

result.put("total",totals);

return result;

}

• 前端页面

<el-row>

<el-col :span="12" :offset="12">

<el-pagination

layout="prev, pager, next,jumper,total,sizes"

:total="total"

:page-size="size"

:current-page="pageNow"

:page-sizes=[2,4,6,8,10]

prev-text="上一页"

next-text="下一页"

background

small

@current-change="findPage"

@size-change="findSize"

</el-pagination

</el-col>

</el-row>

<script>

export default {

name: "List",

data() {

return {

total:0,

size:4,

pageNow:1,

}

},

methods: {

//处理相关 《一线大厂 Java 面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》无偿开源 威信搜索公众号【编程进阶路】 分页方法

findPage(page){

this.page=page;

this.findAll(page,this.size);

},

findSize(size){

this.size=size;

this.findAll(this.page,size);

},

findAll(page,size) {

page = page?page:this.pageNow

size = size?size:this.size

let _this = this;

this.$http

.get("http://localhost:6161/user/findByPage?pageNow="+page+"&pageSize="+size)

.then(function (resp) {

console.info(resp.data);

_this.tableData = resp.data.users;

_this.total=resp.data.total;

});

},

},

created() {

this.findAll();

},

};

</script>

<style></style>

[](()打包部署

• 在有package.json目录下执行，npm run build
  

• 生成 dist 目录