员工管理系统-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>