springboot+vue简单上手案例

一、项目结构预览

二、pom.xml文件

  <parent>
  		<groupId>org.springframework.boot</groupId>
  		<artifactId>spring-boot-starter-parent</artifactId>
  		<version>2.0.0.RELEASE</version>
  </parent>
  
  <dependencies>
  	<dependency>
  		<groupId>org.springframework.boot</groupId>
  		<artifactId>spring-boot-starter-web</artifactId>
  	</dependency>
  	<dependency>
  		<groupId>org.springframework.boot</groupId>
  		<artifactId>spring-boot-starter-thymeleaf</artifactId>
  	</dependency>
  	<dependency>
  		<groupId>org.springframework.boot</groupId>
  		<artifactId>spring-boot-devtools</artifactId>
  	</dependency>
  	<dependency>
  		<groupId>org.mybatis.spring.boot</groupId>
  		<artifactId>mybatis-spring-boot-starter</artifactId>
  		<version>1.3.2</version>
  	</dependency>
  	<dependency>
  		<groupId>mysql</groupId>
  		<artifactId>mysql-connector-java</artifactId>
  	</dependency>
  </dependencies>

三、application.properties文件

spring.datasource.url=jdbc:mysql:///springboot_vue
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

四、UsersController

package com.springboot.vue.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.springboot.vue.pojo.Users;
import com.springboot.vue.service.UserService;

@RestController
@RequestMapping("/users")
public class UsersController {

	@Autowired
	private UserService userService;
	
	@RequestMapping("/findUsers")
	public List<Users> findUsers() {
		List<Users> findUser = null;
		try {
			findUser = userService.findUser();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return findUser;
	}
	
	@RequestMapping("/findUserByUid")
	public Users findUserByUid(int uid) {
		Users user = null;
		try {
			user = userService.findUserByUid(uid);
		} catch (Exception e) {
			e.printStackTrace();
		}
		return user;
	}
	
	@RequestMapping("/updateUser")
	public boolean updateUser(@RequestBody Users users) {
		try {
			if(userService.updateUser(users) == 1) {
				return true;
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return false;
	}
	
	@RequestMapping("/deleteUser")
	public boolean deleteUser(int uid) {
		try {
			if(userService.deleteUser(uid) == 1) {
				return true;
			}
		} catch (Exception e) {
			e.printStackTrace();
		}
		return false;
	}
	
	@RequestMapping("/insertUser")
	public Users insertUser(@RequestBody Users users) {
		try {
			userService.insertUser(users);
			return users;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}
}

五、UsersMapper

package com.springboot.vue.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Options;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;
import org.springframework.stereotype.Repository;

import com.springboot.vue.pojo.Users;

@Repository
public interface UsersMapper {

	@Select("select * from users where uid = #{uid}")
	Users findUserByUid(int uid);
	
	@Select("select * from users")
	List<Users> findUser();
	
	@Update("update users set username = #{username}, gender = #{gender}, age = #{age} where uid = #{uid}")
	int updateUser(Users users);
	
	@Delete("delete from users where uid =#{uid}")
	int deleteUser(int uid);
	
	@Insert("insert into users(username,gender,age) value(#{username}, #{gender}, #{age})")
	@Options(useGeneratedKeys=true, keyProperty="uid", keyColumn="uid")
	void insertUser(Users users);
}

六、users.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Users HTML</title> 
<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css">
</head>
<body>
	<div id="showUsers">
		<div>
			<button data-toggle="modal" data-target="#myInsertModal" class="btn btn-default">添加</button>
		</div>
		<table class="table table-hover">
			<caption>用户信息管理</caption>
			<tr>
				<th>uid</th>
				<th>username</th>
				<th>gender</th>
				<th>age</th>
				<th>操作</th>
			</tr>
			<tr v-for="users in usersList">
				<td>{{users.uid}}</td>
				<td>{{users.username}}</td>
				<td>{{users.gender == 'M'?'男':'女'}}</td>
				<td>{{users.age}}</td>
				<td>
					<button v-on:click="bfUpdateUsers(users,$index);" 
						data-toggle="modal" data-target="#myModal" class="btn btn-primary">修改</button>&nbsp;&nbsp;
					<button v-on:click="bfDeleteUsers(users,$index);" 
						data-toggle="modal" data-target="#myDeleteModal" class="btn btn-danger">删除</button>
				</td>
			</tr>
		</table>
		
		<!-- 模态框(Modal) -->
		<div class="modal fade" id="myInsertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title" id="myModalLabel">添加用户信息</h4>
		            </div>
		            <div class="modal-body">
		            	<form class="bs-example bs-example-form" role="form">
							<div class="input-group">
								<span class="input-group-addon">姓名</span>
								<input type="text" class="form-control" 
									name="username" placeholder="姓名" value="{{user.username}}" v-model="user.username">
							</div>
							<br>
							<div class="input-group">
								<span class="input-group-addon">性别</span>
								<select class="form-control" name="gender">
									<option v-for="genderOption in genderOptions"
										value="{{genderOption.value}}">{{genderOption.text}}</option>
							    </select>
							</div>
							<br>
							<div class="input-group">
								<span class="input-group-addon">年龄</span>
								<input type="text" name="age" 
									class="form-control" placeholder="年龄" value="{{user.age}}" v-model="user.age">
							</div>
						</form>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		                <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="insertUsers();">添加用户</button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal -->
		</div>
		<!-- 模态框(Modal) -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
		            </div>
		            <div class="modal-body">
		            	<form class="bs-example bs-example-form" role="form">
							<div class="input-group">
								<span class="input-group-addon">姓名</span>
								<input type="text" class="form-control" 
									name="username" placeholder="姓名" value="{{user.username}}" v-model="user.username">
							</div>
							<br>
							<div class="input-group">
								<span class="input-group-addon">性别</span>
								<select class="form-control" name="gender" v-model="user.gender">
							      <option v-for="genderOption in genderOptions"
										value="{{genderOption.value}}">{{genderOption.text}}</option>
							    </select>
							</div>
							<br>
							<div class="input-group">
								<span class="input-group-addon">年龄</span>
								<input type="text" name="age" 
									class="form-control" placeholder="年龄" value="{{user.age}}" v-model="user.age">
							</div>
						</form>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		                <button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="updateUsers();">提交更改</button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal -->
		</div>
		<!-- 模态框(Modal) -->
		<div class="modal fade" id="myDeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title">删除用户信息</h4>
		            </div>
		            <div class="modal-body">确认删除 {{user.username}} 吗?</div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		                <button type="button"  class="btn btn-primary" data-dismiss="modal" v-on:click="deleteUsers();">确认删除</button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal -->
		</div>		
		
	</div>
	
	<script type="text/javascript" src="/js/vue.js"></script>
	<script type="text/javascript" src="/js/vue-resource.min.js"></script>
	<script type="text/javascript" src="/js/jquery.min.js"></script>
	<script type="text/javascript" src="/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="/templates/users.js"></script>
</body>
</html>

七、users.js

var users = new Vue({
	el:"#showUsers",
	data:{
		usersList:[],
		user:{},
		genderOptions:[
			{text:'男',value:'M'},
			{text:'女',value:'F'}
		],
		nowIndex:-100,
	},
	methods:{
		findUsers : function(){
			this.$http.get("/users/findUsers").then(function(res){
				console.log(res.data);
				users.usersList = res.data;
			},function(){
				console.log("请求失败");
			});
		},
		bfUpdateUsers:function(us,index){
			users.user = us;
			users.nowIndex=index;
		},
		updateUsers:function(){
			this.$http.post("/users/updateUser",this.user).then(function(res){
				if(res.data){
					console.log("修改成功");
					this.user.gender == 'M'?this.user.gender='男':this.user.gender='女';
					Vue.set(this.usersList,this.nowIndex,this.user);
					this.user={};
				}else{
					console.log("修改失败");
				}
			}),function(){
				console.log("/修改异常");
			}
		},
		bfDeleteUsers:function(us,index){
			users.user = us;
			users.nowIndex=index;
		},
		deleteUsers:function(){
			this.$http.get("/users/deleteUser",{uid:this.user.uid}).then(function(res){
				if(res.data){
					console.log("/删除成功");
					this.usersList.splice(this.nowIndex,1);
					this.user={};
				}else{
					console.log("/删除失败");
				}
			},function(){
				console.log("/修改异常");
			});
		},
		insertUsers:function(){
			this.$http.post("/users/insertUser",this.user).then(function(res){
				if(res.data != null){
					console.log("添加成功");
					this.user.gender == 'M'?this.user.gender='男':this.user.gender='女';
					this.usersList.push(res.data);
					this.user={};
				}else{
					console.log("添加失败");
				}
			}),function(){
				console.log("/添加异常");
			}
		}
	}
});

users.findUsers();

 

pojo、service略

 

八、效果图

 

另附源码地址(原bug已修复)

gitHub:https://github.com/houfanGitHub/springboot-vue

csdn:https://download.csdn.net/download/qq_38553950/10891223

        https://download.csdn.net/download/qq_38553950/11247717(更新后代码)

Springboot+Vue前后的分离整合项目实战

09-09
适用人群 Java开发人员,Vue开发人员,前后端分离开发人员,权限管理和配置开发人员 课程概述 【讲师介绍】 讲师职称:               现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。             Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。  【课程介绍】 技术选型 开发环境:Eclipse/Idea ,JDK 1.8以上  后端技术 核心框架:SpringBoot2.x框架系列(同样适用Springcloud F版本以后的版本),如下(节选):     持久层框架:MyBatis 3.x + Mybatis-plus 3.x 日志管理:SLF4J 1.7 + Log4j2 2.7 工具类:Apache Commons、Jackson 、fastjson、Gson 权限验证 前端技术   Vue   Vue-cli ElementUI ---https://element.eleme.io/ JSX (JavaScript Xml) 前台的权限验证和路由设置 开发模式        前后端分离的开发 数据库        Mysql5 IDE     Intellij Idea

企业员工角色权限管理平台(SpringBoot2.0+Mybatis+Shiro+Vue

08-07
课程简介: 历经半个多月的时间,Debug亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。 其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同时,Debug还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程! 核心技术栈列表: 值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括Spring Boot、Spring MVC、Mybatis、Mybatis-Plus、Shiro(身份认证与资源授权跟会话等等)、Spring AOP、防止XSS攻击、防止SQL注入攻击、过滤器Filter、验证码Kaptcha、热部署插件Devtools、POI、Vue、LayUI、ElementUI、JQuery、HTML、Bootstrap、Freemarker、一键打包部署运行工具Wagon等等,如下图所示: 课程内容与收益: 总的来说,本课程是一门具有很强实践性质的“项目实战”课程,即“企业应用员工角色权限管理平台”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于Shiro的资源授权实现员工-角色-操作权限、员工-角色-数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图: 以下为项目整体的运行效果截图: 值得一提的是,在本课程中,Debug也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值