本来想早点完成这篇文章的，奈何一方面使用spring boot建立的项目要么是访问不到静态资源，要么就访问不到html页面，完不成demo，另一方面就是这段时间工作比较忙，来不及继续探究资源访问不到的问题。终于实在今晚闲下来了，完成这边文章。最初的立意是为了通过实现简单的登录功能展示如何使用springboot来开发web项目的，但是最后不得不变为重点放在解决如何访问静态资源的问题。
项目文件结构
数据库准备
简单地在MySQL上建立了一个h_user的表，用于存储用户账号和密码
SET FOREIGN_KEY_CHECKS=0;
CREATE TABLE `h_user` (
`pk_id` int(11) NOT NULL AUTO_INCREMENT,
`user_name` varchar(50) NOT NULL,
`login_name` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL,
PRIMARY KEY (`pk_id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC;
INSERT INTO `h_user` VALUES ('1', '张三', 'zhangsan', '123');
INSERT INTO `h_user` VALUES ('2', '李四', 'lisi', '123');
Java实现代码
1、controller层代码
package com.dulucy.springboot.login.controller;
import com.dulucy.springboot.login.service.ILoginService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Map;
@Controller
@RequestMapping("/Login")
public class LoginController {
@Autowired
private ILoginService loginService;
@RequestMapping("/seletePasswordByName.do")
@ResponseBody
public Map<String,Object> seletePasswordByName(HttpServletRequest request, HttpServletResponse response) {
Map<String,Object> map=loginService.seletePasswordByName(request);
return map;
}
}
2、service层代码
package com.dulucy.springboot.login.service;
import javax.servlet.http.HttpServletRequest;
import java.util.Map;
public interface ILoginService {
Map<String,Object> seletePasswordByName(HttpServletRequest request);
}
3、serviceimpl层代码
package com.dulucy.springboot.login.serviceimpl;
import com.dulucy.springboot.login.dao.ILoginDao;
import com.dulucy.springboot.login.service.ILoginService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.Map;
@Service
public class LoginServiceImpl implements ILoginService {
@Autowired
private ILoginDao loginDao;
@Override
public Map<String,Object> seletePasswordByName(HttpServletRequest request) {
String login_name=request.getParameter("login_name");
String pwd =request.getParameter("password");
String password=loginDao.seletePasswordByName(login_name);
Map<String,Object> map=new HashMap<String,Object>(); //用于包装返回结果
if (pwd.equals(password)){
map.put("code",1);
map.put("msg","账号/密码正确，登录成功");
map.put("data","");
}else{
map.put("code",0);
map.put("msg","账号/密码错误");
map.put("data","");
}
return map;
}
}
4、dao层代码（使用注解开发）
package com.dulucy.springboot.login.dao;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Component;
@Component(value = "apiCategoryMapper")
public interface ILoginDao {
@Select("select password from h_user where login_name=#{login_name}")
String seletePasswordByName(@Param("login_name") String login_name);
}
配置文件
1、application.yml文件配置项。这里我是采用的yml文件作为配置文件，结构比properties文件更加清晰。配置了端口和项目名‘/dulucy’，需要注意的是mvc和resources的配置，不然可能会出现无法访问静态资源的问题。
#服务器端口和项目名称配置
server:
port: 8080
servlet:
context-path: /dulucy
#数据库配置
spring:
datasource:
name: springboot
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://localhost:3306/test
username: dulucy
password: 123456
mvc:
view:
suffix: .html
static-path-pattern: /**
resources:
static-locations: classpath:/templates/,classpath:/static/
devtools:
restart:
enabled: true #设置开启热部署
additional-paths: src/main/java #重启目录
exclude: static/**
freemarker:
cache: false #页面不加载缓存，修改即时生效
2、配置daoceng扫描
这个是在启动类上使用注解配置的。
package com.dulucy.springboot;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.transaction.annotation.EnableTransactionManagement;
@SpringBootApplication(scanBasePackages = "com.dulucy.springboot")
@EnableTransactionManagement
@MapperScan("com.dulucy.springboot.login.dao")
public class SpringbootApplication {
public static void main(String[] args) {
SpringApplication.run(SpringbootApplication.class, args);
}
}
3、pom.xml配置
虽然使用了springboot来使得jar包导入更加简便，我这里还是手动添加了几个jar包。
<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.3.3.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.dulucy</groupId>
<artifactId>springboot</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>springboot</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.3</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
<scope>true</scope>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.47</version>
</dependency>
<!--thymeleaf 模板依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
编写html页面
1、登录页面
前台是基于layui做的，切换成其他框架是一样的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="layui-container">
<div class="admin-login-background">
<div class="layui-form login-form">
<form class="layui-form" action="">
<div class="layui-form-item logo-title">
<h1>欢迎登陆</h1>
</div>
<div class="layui-form-item">
<label class="layui-icon layui-icon-username" >username</label>
<input type="text" name="login_name" lay-verify="required|account" placeholder="用户名或者邮箱"
autocomplete="off" class="layui-input" >
</div>
<div class="layui-form-item">
<label class="layui-icon layui-icon-password" >password</label>
<input type="password" name="password" lay-verify="required|password" placeholder="密码"
autocomplete="off" class="layui-input" >
</div>
<div class="layui-form-item">
<input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码">
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login">登 入</button>
</div>
</form>
</div>
</div>
</div>
<script src="../layui/layui.all.js" charset="utf-8"></script>
<script>
layui.use(['form'], function () {
var form = layui.form,$=layui.jquery,
layer = layui.layer;
// 进行登录操作
form.on('submit(login)', function (data) {
data = data.field;
if (data.login_name == '') {
layer.msg('用户名不能为空');
return false;
}
if (data.password == '') {
layer.msg('密码不能为空');
return false;
}
$.ajax({
url:"/dulucy/Login/seletePasswordByName.do",
type:"POST",
data:{
'login_name':data.login_name,
'password':data.password
},success:function (result) {
if (result.code==1){
layer.msg('登录成功', function () {
window.location = '/dulucy/html/success.html';
});
} else{
layer.alert(result.msg);
}
},error:function () {
}
})
return false;
});
});
</script>
</body>
</html>
2、登录成功页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆成功页面</title>
</head>
<body>
登陆成功
</body>
</html>
遇到的问题及解决方案
1、无法访问静态资源问题
这篇文章最主要卡的地方就是这里，从开发来说，这其实就是一个很小的问题，但是就是没弄明白怎么回事。刚入门学习springboot，和之前的配置相比简化了很多，遇到相同的问题，反而不知道怎么处理。最开始参考了很多博客主的教程，都说添加
mvc:
view:
suffix: .html
static-path-pattern: /**
resources:
static-locations: classpath:/templates/,classpath:/static/
就可以访问，实际上可以分开访问到html或者静态图片，但是在html中引用静态资源就报404。
本想着直接用html开发，不使用springboot官方推荐的thymeleaf模板开发，实在进行不下去了，在pom.xml引入thymeleaf后，居然能够访问html和静态资源了。具体的底层的不是很懂，但就是这样解决问题了。
推荐3篇相关的文章：
2917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
