Vue_综合案例-阿南达文事网

Vue_综合案例

文章目录

- 1.1 案例需求
- 1.2 数据库设计与表结构
- 1.3 服务器端
- - 1.3.1 创建SpringBoot项目
  - 1.3.2 导入jar包
  - 1.3.3 配置文件（application.properties）
  - 1.3.4 创建springboot引导类
  - 1.3.5 创建实体
  - 1.3.6 创建Dao
  - 1.3.7 创建Service
  - 1.3.8 创建Controller
- 1.4 浏览器端
- - 1.4.1 user.html
  - 1.4.2 查询所有
  - - 1.4.2.1 UserService
    - 1.4.2.2 UserController
    - 1.4.2.3 User.html页面
  - 1.4.3 更新数据回显
  - - 1.4.3.1 UserService
    - 1.4.3.2 UserController
    - 1.4.3.3 User.html页面
  - 1.4.4 更新数据提交
  - - 1.4.4.1 UserService
    - 1.4.4.2 UserController
    - 1.4.4.3 User.html页面
  - 1.4.5 删除
  - - 1.4.5.1UserService
    - 1.4.5.2 UserController
    - 1.4.5.3 User.html

1.1 案例需求

完成用户的查询、修改、删除等操作

前端（浏览器端）：vue

后端（服务器端）：spring boot+spring mvc+mybatis

1.2 数据库设计与表结构

CREATE TABLE T_USER(
id INT PRIMARY KEY AUTO_INCREMENT,
age INT,
username VARCHAR(20),
password VARCHAR(50),
email VARCHAR(50),
sex VARCHAR(20)
)

导入数据：

INSERT INTO T_USER (username,PASSWORD,age,sex,email) VALUES ('张三','123',22,'男','zhangsan@163.com'),('李四','123',20,'女','lisi@163.com')

1.3 服务器端

1.3.1 创建SpringBoot项目

过程略。

1.3.2 导入jar包

pom.xml

<!-- 统一版本维护 -->
<properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding><java.version>1.8</java.version><mybatis.starter.version>1.3.2</mybatis.starter.version><mapper.starter.version>2.0.2</mapper.starter.version><mysql.version>5.1.32</mysql.version><pageHelper.starter.version>1.2.5</pageHelper.starter.version><durid.starter.version>1.1.10</durid.starter.version>
</properties>
<dependencies><!-- SpringBoot整合SpringMVC的启动器 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- SpringBoot整合jdbc和事务的启动器 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><!-- mybatis启动器 --><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>${mybatis.starter.version}</version></dependency><!-- 通用Mapper启动器 --><dependency><groupId>tk.mybatis</groupId><artifactId>mapper-spring-boot-starter</artifactId><version>${mapper.starter.version}</version></dependency><!-- 分页助手启动器 --><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper-spring-boot-starter</artifactId><version>${pageHelper.starter.version}</version></dependency><!-- mysql驱动 --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>${mysql.version}</version></dependency><!-- Druid连接池 --><dependency><groupId>com.alibaba</groupId><artifactId>druid-spring-boot-starter</artifactId><version>${durid.starter.version}</version></dependency>
</dependencies>

1.3.3 配置文件（application.properties）

application.properties文件

#Tomcat
server.port=8090
#DB configuration
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/vue01?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=123456
#druid
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.druid.initial-size=1
spring.datasource.druid.min-idle=1
spring.datasource.druid.max-active=20
spring.datasource.druid.test-on-borrow=true
spring.datasource.druid.stat-view-servlet.allow=true

1.3.4 创建springboot引导类

@SpringBootApplication
public class UserManagementApplication {public static void main(String[] args) {SpringApplication.run(UserManagementApplication.class, args);}
}

1.3.5 创建实体

创建包com.czxy.pojo，创建类User.java

@Table(name="t_user")
public class User {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)// 自增长private Integer id;private String username;private String password;private String sex;private Integer age;private String email;
}

1.3.6 创建Dao

创建包com.czxy.dao，创建接口UserMapper.java

@org.apache.ibatis.annotations.Mapper
public interface UserMapper extends Mapper<User> {
}

1.3.7 创建Service

创建包com.czxy.service，创建接口UserService.java

@Service
@Transactional
public class UserService {@Autowiredprivate UserMapper userMapper;
}

1.3.8 创建Controller

创建包com.czxy.controller，创建类UserController.java

@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserService userService;
}

1.4 浏览器端

拷贝页面到resources下的static中

1.4.1 user.html

我们把所有的vue的内容放置到user.js中

<script src="js/axios-v0.19.0.js"></script>
<script src="js/vue-2.6.10.js"></script>

1.4.2 查询所有

1.4.2.1 UserService

public List<User> findAllUser(){return userMapper.selectAll();
}

1.4.2.2 UserController

@GetMapping
public ResponseEntity<List<User>> findAllUsers(){List<User> list = userService.findAllUser();return new ResponseEntity<>(list,HttpStatus.OK);
}

1.4.2.3 User.html页面

第一步：引入vue库文件

<script src="js/axios-v0.19.0.js"></script><script src="js/vue-2.6.10.js"></script>

第二步：页面模板，将所有内容包含到一个父容器中

第三步：编写vue代码

var vm = new Vue({el:"#app",data:{users:[]},created(){//发送ajax请求axios.get("/user").then(res => {console.log(res)this.users = res.data})}
})

第四步：修改user.html

测试结果：

1.4.3 更新数据回显

1.4.3.1 UserService

public User findUserById(Integer id){return userMapper.selectByPrimaryKey(id);
}

1.4.3.2 UserController

@GetMapping("/{id}")
public ResponseEntity<User> findUserById(@PathVariable Integer id){User user = userService.findUserById(id);return new ResponseEntity<>(user,HttpStatus.OK);
}

1.4.3.3 User.html页面

第一步：修改页面按钮点击事件

第二步：定义变量，保存数据

第三步：编写方法，请求后台数据

第四步：User.html页面绑定数据回显

第五步：效果

1.4.4 更新数据提交

1.4.4.1 UserService

public int updateUser(User user){return userMapper.updateByPrimaryKey(user);
}

1.4.4.2 UserController

@PutMapping
public ResponseEntity<Void> updateUser(@RequestBody User user){int count = userService.updateUser(user);if(count==1){return new ResponseEntity<>(HttpStatus.CREATED);}else{return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);}
}

1.4.4.3 User.html页面

第一步：修改按钮事件

第二步：编写方法

操作成功

1.4.5 删除

1.4.5.1UserService

public int deleteUser(Integer id){return userMapper.deleteByPrimaryKey(id);
}

1.4.5.2 UserController

@DeleteMapping("/{id}")
public ResponseEntity<Void> deleteUser(@PathVariable Integer id){int count = userService.deleteUser(id);if(count==1){return new ResponseEntity<>(HttpStatus.OK);}else{return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR);}
}

1.4.5.3 User.html

第一步：页面添加按钮

页面效果：

第二步 : 页面添加js方法

测试，删除成功

Vue_综合案例