员工管理系统-SpringBoot+Vue入门小项目实战
1.项目技术选型
实现功能
数据库表的设计
create database emp; use emp; #创建用户表 create table t_user( id int(6) primary key auto_increment, username varchar(60), realname varchar(60), password varchar(50), sex varchar(4), status varchar(4), regsterTime timestamp ); #创建员工表 create table t_emp( id int(6) primary key auto_increment, name varchar(40), path varchar(100), salary double(10,2), age int(3) );
2.搭建SpringBoot项目环境,并引入依赖
添加缺少的依赖引入
<!--阿里巴巴数据源--> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.1.23</version> </dependency> <!--文件上传下载--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> </dependency>
在配置文件中进行配置‘
server.servlet.context-path=/springboot server.port=8081 spring.application.name=springboot spring.datasource.type=com.alibaba.druid.pool.DruidDataSource spring.datasource.driver-class-name=com.mysql.jdbc.Driver spring.datasource.url=jdbc:mysql://47.93.211.230:3306/emp?characterEncoding=UTF-8 spring.datasource.username=root spring.datasource.password=123456 mybatis.mapper-locations=classpath:com/liuboss/mapper/*.xml mybatis.type-aliases-package=com.liuboss.entity logging.level.com.liuboss.dao=debug logging.level.com.liuboss.service=info logging.level.com.liuboss.controller=info
创建相应的包结构
引入页面资源-复制到static文件目录下
并将sql文件进行导出放入static文件夹目录下
---启动项目进行项目访问,访问static文件夹的下的静态页面,成功访问说明环境搭建成功,
有问题的原因说明,可能有项目缓存,将项目进行clear。
将所有静态资源通过vue进行管理
regist.html中进行vue的引入
<!--引入vue相关的js--> <script src="/springboot/js/vue.js"></script> <script src="/springboot/js/axios.min.js"></script> <script> var app = new Vue({ el:"#warp", data:{ }, /*vue声明周期函数*/ created(){ console.log("xxx"); } }) </script>
p3
1,将验证码工具类复制到utils工具类中 ,在controller中进行引用创建登陆验证码
UserController
package com.liuboss.controller; import com.liuboss.utils.VerifyCodeUtils; import org.springframework.util.Base64Utils; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import javax.servlet.http.HttpServletRequest; import java.io.ByteArrayOutputStream; import java.io.IOException; @RestController @CrossOrigin //允许跨域 @RequestMapping("user") public class UserController { /*生成验证码图片*/ @GetMapping("getImage") public String getImageCode(HttpServletRequest request) throws IOException { //使用工具类生成验证码 String code = VerifyCodeUtils.generateVerifyCode(4); //将验证码放入servletContext作用域 request.getServletContext().setAttribute("code",code); //将图片转为base64 ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream(); VerifyCodeUtils.outputImage(220,60,byteArrayOutputStream,code); return "data:image/png;base64,"+Base64Utils.encodeToString(byteArrayOutputStream.toByteArray()); } }
浏览器进行访问是否成功,
添加验证码图片
<td valign="middle" align="right"> 验证码: <img id="num" :src="url" /> <a href="javascript:;" onclick="document.getElementById(num).src = image?+(new Date()).getTime()">换一张</a> </td>
上一篇:
IDEA上Java项目控制台中文乱码