Day200

.

---

后端搭建

---

• 构建Idea项目

• 构建数据库

CREATE DATABASES elementuser;

CREATE TABLE t_users(

id INT(6) PRIMARY KEY AUTO_INCREMENT,

NAME VARCHAR(80),

bir DATETIME,

sex VARCHAR(4),

address VARCHAR(120)

)

• pom.xml

org.springframework.boot

spring-boot-starter-web

org.mybatis.spring.boot

mybatis-spring-boot-starter

2.1.4

org.springframework.boot

spring-boot-devtools

runtime

true

mysql

mysql-connector-java

runtime

org.projectlombok

lombok

true

org.springframework.boot

spring-boot-starter-test

test

com.alibaba

druid-spring-boot-starter

1.1.17

• application.yaml

1、配置项目名

2、配置项目路径

3、配置数据库配置【url、type、driverclass、数据库账户&密码】

4、配置mybatis【mapper文件位置、entity位置】

5、配置服务端口

spring:

application:

name: elementusers #项目名

datasource:

url: jdbc:mysql://localhost:3306/elementuser?characterEncoding=UTF-8&serverTimezone=GMT%2B8&useSSL=false

type: com.alibaba.druid.pool.DruidDataSource #使用Druid数据连接池

driver-class-name: com.mysql.jdbc.Driver #数据库驱动

username: root

password: '00000'

resources:

static-locations: classpath:/static/ #指定静态资源路径

server:

port: 6161

servlet:

context-path: / #项目路径

mybatis:

mapper-locations: classpath:com.achang.mapper/*.xml #指定mapper文件位置

type-aliases-package: com.achang.entity #指定entity位置

• entity/User

@Data

@AllArgsConstructor

@NoArgsConstructor

@ToString

@Accessors(chain = true)//开启链式调用

public class User {

private String id;

private String name;

//设置日期格式，pattern格式化格式，timezone时区：我们在东八区

@JsonFormat(pattern = "yyyy-MM-dd",timezone = "GTM+8")

private Date bir;

private String sex;

private String address;

}

---

查询所有

• UserDao

@Mapper

public interface UserDao {

//查询所有用户信息

List findAll();

}

• mapper.xml

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

• service/Userservice

public interface UserService {

//查询所有用户信息

List findAll();

}

• service/impl/UserServiceImpl

@Service

@Transactional

public class UserServiceImpl implements UserService {

@Autowired

private UserDao userDao;

@Override

public List 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 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 into t_users

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

• 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 from t_users where id = #{id}

• 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

• 前端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 findPage(@Param("start")Integer start,@Param("rows")Integer rows);

//查询总条数

Long findTotals();

• UserDaoMapper.xml

select id,name,bir,sex,address from t_users limit #{start},#{rows} select count(id) from t_users

• UserService

//分页查询

List findPage(Integer pageNow, Integer rows);

//查询总条数

Long findTotals();

• UserServiceImpl

最后

由于篇幅原因，就不多做展示了

相关阅读docs.qq.com/doc/DSmxTbFJ1cmN1R2dB