基于 Spring boot + mvc + vue + Element ui + jpa + mysql + redis 的一个用户管理项目

最近在学习使用vuejs 然后结合之前学的知识来完成这么一个增删改查的小项目，页面预览

1 初始化一个spring boot 项目 这里注意spring boot的版本要选1.X.X

1 pom.xml 文件如下

xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0modelVersion><groupId>com.ryz.cngroupId><artifactId>springbootvuemvcartifactId><version>0.0.1-SNAPSHOTversion><packaging>jarpackaging><name>springbootvuemvcname><description>Demo project for Spring Bootdescription><parent><groupId>org.springframework.bootgroupId><artifactId>spring-boot-starter-parentartifactId><version>1.5.1.RELEASEversion><relativePath/> 
   parent><properties><project.build.sourceEncoding>UTF-8project.build.sourceEncoding><project.reporting.outputEncoding>UTF-8project.reporting.outputEncoding><java.version>1.8java.version><thymeleaf.version>3.0.2.RELEASEthymeleaf.version><thymeleaf-layout-dialect.version>2.0.5thymeleaf-layout-dialect.version>properties><dependencies><dependency><groupId>org.springframework.bootgroupId><artifactId>spring-boot-starter-thymeleafartifactId>dependency><dependency><groupId>org.springframework.bootgroupId><artifactId>spring-boot-starter-webartifactId>dependency><dependency><groupId>org.springframework.bootgroupId><artifactId>spring-boot-starter-testartifactId><scope>testscope>dependency><dependency><groupId>org.springframework.bootgroupId><artifactId>spring-boot-starter-data-jpaartifactId><version>1.5.9.RELEASEversion>dependency><dependency><groupId>mysqlgroupId><artifactId>mysql-connector-javaartifactId><version>5.1.44version>dependency><dependency><groupId>com.googlecode.log4jdbcgroupId><artifactId>log4jdbcartifactId><version>1.2version>dependency><dependency><groupId>org.springframework.bootgroupId><artifactId>spring-boot-devtoolsartifactId><optional>trueoptional>dependency><dependency><groupId>org.springframework.bootgroupId><artifactId>spring-boot-starter-redisartifactId><version>1.3.2.RELEASEversion>dependency>dependencies><build><plugins><plugin><groupId>org.springframework.bootgroupId><artifactId>spring-boot-maven-pluginartifactId>plugin>plugins>build>project>

1.1主要依赖的是

spring-boot-starter-data-jpa 为了做持久化对象

mysql-connector-java  MySQL驱动

spring-boot-starter-thymeleaf yml模板

spring-boot-starter-redis  redis缓存

2 配置项目参数，具体的属性看注释吧

application.properties

spring.application.name=sh 
# server.servlet.context-path=/sh

server.context-path=/sh
server.port=8081

# 数据源配置
spring.datasource.url=jdbc:log4jdbc:mysql://localhost:3306/test2
spring.datasource.username=root
spring.datasource.password=157123
spring.datasource.driverClassName = net.sf.log4jdbc.DriverSpy
spring.jpa.database = MYSQL
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql = true
spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.MySQL5Dialect

# 定位模板的目录
spring.mvc.view.prefix=classpath:/templates/
# 给返回的页面添加后缀名
spring.mvc.view.suffix=.html

spring.thymeleaf.cache=false
#热部署生效
spring.devtools.restart.enabled: true

# REDIS (RedisProperties)
# Redis数据库索引（默认为0）
spring.redis.database=0 
# Redis服务器地址
spring.redis.host=127.0.0.1
# Redis服务器连接端口
spring.redis.port=6379 
# Redis服务器连接密码（默认为空）
spring.redis.password=
# 连接池最大连接数（使用负值表示没有限制）
spring.redis.pool.max-active=8 
# 连接池最大阻塞等待时间（使用负值表示没有限制）
spring.redis.pool.max-wait=-1 
# 连接池中的最大空闲连接
spring.redis.pool.max-idle=8 
# 连接池中的最小空闲连接
spring.redis.pool.min-idle=0 
# 连接超时时间（毫秒）
spring.redis.timeout=0

mode: LEGACYHTML5

2.1 这里 server.servlet.context-path 的配置根据spring boot版本的不同不一样，如果你在开发时发现不生效，随便百度一下就知道啦

3 controller 层代码

@Controller
@RequestMapping("/user")
public class UserController {@Autowired
    UserService userService;@RequestMapping(value="/getUserById",method = RequestMethod.GET)@ResponseBody
    public User getUserById(@RequestParam String id){System.out.println("hello user");User u = userService.findUserById(id);System.out.println(u);return u;}@RequestMapping(value="/foundAll",method = RequestMethod.GET)public String getUserById(Model model){System.out.println("hello user");List users = userService.findAll();System.out.println(users);model.addAttribute("Users", users );return "index";}@RequestMapping(value="/getUsers",method = RequestMethod.GET)@ResponseBody
    public Object getUserById(){List users = userService.findAll();return users;}@RequestMapping(value="/getUserByOneId",method = RequestMethod.GET)@ResponseBody
    public Object getUserByOneId(@RequestParam String id){User user = userService.findById(id);return user;}@RequestMapping(value="/deleteById",method = RequestMethod.GET)@ResponseBody
    public Object deleteById(@RequestParam String id){int count = userService.deleteById(id);return count;}@RequestMapping(value="/init",method = RequestMethod.GET)@ResponseBody
    public String init(){userService.init();return "SUCCESS";}@RequestMapping(value="/findMy",method = RequestMethod.GET)@ResponseBody
    public String findMy(String id){return userService.findName(id);}@RequestMapping(value="/addOne",method = RequestMethod.POST)@ResponseBody
    public void addOne(@RequestBody User user){userService.save(user);}
}

4 实体对象 User

@Entity
@Table(name = "user")
public class User implements Serializable{private String id;private String name;private Integer age;public User(){}public User(String id, String name, Integer age) {this.id = id;this.name = name;this.age = age;}@Id
    @Column(name = "id")public String getId() {return id;}public void setId(String id) {this.id = id;}@Column(name = "name")public String getName() {return name;}public void setName(String name) {this.name = name;}@Column(name = "age")public Integer getAge() {return age;}public void setAge(Integer age) {this.age = age;}@Override
    public String toString() {return "User{" +"id='" + id + '\'' +", name='" + name + '\'' +", age=" + age +'}';}
}
4.1 注意这里的实体类一定要实现序列化接口，不然没有办法做缓存，否则可以不实现

5 Server层代码

@Service
public class UserService {@Autowired
    private UserRepository userRepository;public List findAll(){return userRepository.findAll();}@Transactional(rollbackFor = Exception.class)public void save(User user){if("".equals(user.getId())){user.setId(String.valueOf(System.currentTimeMillis()));}userRepository.save(user);}@Transactional(rollbackFor = Exception.class)public void init(){userRepository.save(new User("20","ryz201",20));userRepository.save(new User("21","ryz211",20));userRepository.save(new User("22","ryz221",20));userRepository.save(new User("22","ryz222",20));userRepository.save(new User("23","ryz231",20));}public User findUserById(String id){return userRepository.findUserById(id);}// 给该查询方法增加缓存
    //@Cacheable(value="user", keyGenerator = "keyGenerator")
    @Cacheable(value="user", key = "#id")public User findById(String id){return userRepository.findUserById(id);}@Transactional(rollbackFor = Exception.class)@CacheEvict(value="user",key = "#id" )public int deleteById(String id){return userRepository.deleteById(id);}public String findName(String id){return userRepository.findName(id);}
}

5.1 这里需要注意redis缓存的注解写法

@Cacheable(value="user", key = "#id") value指的是缓存域，key是 就是数据的key 呗，

可以值一种自定义的规则，也可以是直接用入参作为key

@CacheEvict(value="user",key = "#id" ) 是根据key在value域中清除缓存 

6 UserRepository类

@Repository
@Table(name="user")
public interface UserRepository extends CrudRepository{public User findUserById(String id);@Override
    List findAll();User findByName(String name);int deleteById(String id);@Query("select u.name from User u where u.id= ?1")String findName(String id);
}

6.1

继承的 CrudRepository 类以及帮我们实现了一些常用的方法，比如findByXX ，XX与实体类中的属性对应

7 启动类

@ComponentScan(basePackages="com.ryz.cn.springbootvuemvc")
@EntityScan(basePackages="com.ryz.cn.springbootvuemvc.pojo")
@EnableJpaRepositories(basePackages="com.ryz.cn.springbootvuemvc.repository")
@SpringBootApplication
@EnableCaching
public class SpringbootvuemvcApplication {public static void main(String[] args) {SpringApplication.run(SpringbootvuemvcApplication.class, args);}
}

7.1 注意实体类的扫描路径@EntityScan(basePackages="com.ryz.cn.springbootvuemvc.pojo")和 @EnableCaching 开启缓存

8 redis配置类

@Configuration
@EnableCaching
public class RedisConfig extends CachingConfigurerSupport {@Bean
    @Override
    public KeyGenerator keyGenerator() {return new KeyGenerator() {@Override
            public Object generate(Object target, Method method, Object... params) {StringBuilder sb = new StringBuilder();sb.append(target.getClass().getName());sb.append(method.getName());for (Object obj : params) {sb.append(obj.toString());}return sb.toString();}};}@Bean
    public CacheManager cacheManager(RedisTemplate redisTemplate) {RedisCacheManager cacheManager = new RedisCacheManager(redisTemplate);// cacheManager.setCacheNames(Arrays.asList("users", "emptyUsers"));
        cacheManager.setUsePrefix(true);// Number of seconds before expiration. Defaults to unlimited (0)
        cacheManager.setDefaultExpiration(1800L);return cacheManager;}@Bean
    public RedisTemplate redisTemplate(RedisConnectionFactory connectionFactory){RedisTemplate template=new RedisTemplate();template.setConnectionFactory(connectionFactory);//实现序列化和反序列化redis的key值
        template.setKeySerializer(new StringRedisSerializer());//实现序列化和反序列化redis的value值,默认使用JdkSerializationRedisSerializer
        //template.setValueSerializer(new RedisObjectSerializer());
        //template.setValueSerializer();
        return template;}}

keyGenerator()  键的生成规则，自定义规则

cacheManager() 缓存管理器，这里 

RedisCacheManager cacheManager = new RedisCacheManager(redisTemplate);

需要注意下，根据不同的redis版本不同，构造方法一不一样，我遇到了很多坑

html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>用户管理title><link rel="stylesheet" href="//cdn.bootcss.com/element-ui/1.1.2/theme-default/index.css"><script src="//cdn.bootcss.com/vue/2.1.8/vue.min.js">script><script src="//cdn.bootcss.com/element-ui/1.1.2/index.js">script><script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js">script>head>
<body>
<div id="vm"><el-row :gutter="20"><el-col :span="6"><div class="grid-content bg-purple"><el-input
                        placeholder="请输入姓名查询"
                        v-model="searchName"
                        clearable>el-input>div>el-col><el-col :span="6"><div class="grid-content bg-purple"><el-button type="primary" icon="el-icon-search" v-on:click="search()">搜索el-button>div>el-col><el-col :span="6"><div class="grid-content bg-purple"><el-form :model="user"><el-form-item label="姓名" :label-width="formLabelWidth"><el-input v-model="user.name" auto-complete="off">el-input>el-form-item><el-form-item label="年龄" :label-width="formLabelWidth"><el-input-number v-model="user.age"  :min="1" :max="120" label="输入年龄">el-input-number>el-form-item>el-form>div>el-col><el-col :span="6"><div class="grid-content bg-purple"><el-button type="success" @click="addNew()">新增用户el-button>div>el-col>el-row><el-table
            :data="tableData"
            stripe
            style="width: 100%"><el-table-column
                prop="id"
                label="ID"
                width="180">el-table-column><el-table-column
                prop="name"
                label="姓名"
                width="180">el-table-column><el-table-column
                prop="age"
                label="年龄">el-table-column><el-table-column
                inline-template
                fixed="right"
                label="操作"
                width="200"><div><el-button v-on:click="editH(row)" type="text" size="small">编辑el-button><el-button v-on:click="deleteH(row)" type="text" size="small">删除el-button>div>el-table-column>el-table>
div><script>Vue.http.options.emulateHTTP = true;var vm = new Vue({el: '#vm',data: {tableData: [],searchName: '',searchId:'',dialogFormVisible: false,user:{id:"",name:'',age:''},formLabelWidth: '120px',},methods:{getData:function(){this.$http.get("/sh/user/getUsers").then(function (response) {console.log(response);this.tableData = response.body;}).catch(function (response) { console.error(response); });},search:function(){if(this.searchName==''){return;}this.$http.get("/sh/user/getUserByOneId",{params: {id:this.searchId}}).then(function (response) {console.log(response);this.tableData = [];if(response.body!=''){this.tableData.push(response.body);}}).catch(function (response) { console.error(response); });},deleteH:function(row){this.$confirm('此操作将永久删除该'+row+', 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'
                    }).then(() => {this.$http.get("/sh/user/deleteById",{params: {id:row.id}}).then(function (response) {this.$message({type: 'success',message: '删除成功!'
                                });this.getData();}).catch(function (response) { console.error(response); });}).catch(() => {this.$message({type: 'info',message: '已取消删除'
                        });});console.log(row);},addNew:function(){this.$http.post("/sh/user/addOne",this.user).then(function (response) {this.$message({type: 'success',message: '添加成功!'
                        });this.getData();this.user.id = '';}).catch(function (response) { console.error(response); });},editH:function(row){this.user = row;}},mounted: function () {this.getData();},watch:{searchName(nv,ov){for(var i=0;i<this.tableData.length;i++){if(this.tableData[i].name == nv){this.searchId = this.tableData[i].id;}}}}})
script>
body>
html>

10 数据库user表DDL

CREATE TABLE `user` (`id` varchar(255) NOT NULL,`name` varchar(10) DEFAULT NULL,`age` int(11) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

11 页面展示：

删除用户

12 看一下在查询用户后的缓存

13 总结

本着练习的心态，做完了这个小demo，其实有很多没有完善，比如不能把js和css 都写在一个html文件中，最好分开来，Element ui 真的很强大，只是用了其中的冰山一角，业务太简单了，没有结合消息中间件和其他的项目通信。demo实在太简单了，没啥说的，只做学习吧。

14 github 地址: https://github.com/ryz-13997318136/springbootvuemvc.git

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！