SpringBoot开发一个简单的网站

project：springboot-02！！！一、模拟一个数据库

pojo.Department

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Department {
    private Integer id;
    private String departmentName;

}

pojo.Employee

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Employee {
    private Integer id;
    private String lastName;
    private String email;
    private Integer gender;//0女1男
    private Department department;
    private Date birth;
}

dao.DepartmentDao

@Repository
public class DepartmentDao {
    //模拟数据库中的数据
    private static Map departments = null;
    static {
        //Map中的key代表数据库的索引，value代表索引对应的这一行记录
        departments = new HashMap();//创建一个部门数据表
        departments.put(101, new Department(101, "教学部"));
        departments.put(102, new Department(102, "市场部"));
        departments.put(103, new Department(103, "教研部"));
        departments.put(104, new Department(104, "运营部"));
        departments.put(105, new Department(105, "后勤部"));
    }

    //获取所有部门信息
    public Collection getDepartments(){
        return departments.values();
    }

    //通过id得到部门
    public Department getDepartmentById(Integer id){
        return departments.get(id);
    }
}

dao.EmployeeDao

@Repository
public class EmployeeDao {
    //模拟数据库中的数据
    private static Map employees = null;

    @Autowired
    private DepartmentDao departmentDao;

    static {
        //Map中的key代表数据库的索引，value代表索引对应的这一行记录
        employees = new HashMap();
        employees.put(1001, new Employee(1001, "AA", "392851349@qq.com", 0, new Department(101, "教学部"), new Date()));
        employees.put(1002, new Employee(1002, "BB", "378985149@qq.com", 0, new Department(102, "市场部"), new Date()));
        employees.put(1003, new Employee(1003, "CC", "848695349@qq.com", 1, new Department(103, "教研部"), new Date()));
        employees.put(1004, new Employee(1004, "DD", "648695349@qq.com", 1, new Department(104, "运营部"), new Date()));
        employees.put(1005, new Employee(1005, "EE", "248695349@qq.com", 1, new Department(105, "后勤部"), new Date()));
    }

    //主键自增
    private static Integer initId = 1006;

    //增加一个员工
    public void addEmployee(Employee employee){
        if(employee.getId()==null){
            employee.setId(initId++);
        }
        employee.setDepartment(departmentDao.getDepartmentById(employee.getDepartment().getId()));
        employees.put(employee.getId(), employee);
    }

    //查询全部员工
    public Collection getAll(){
        return employees.values();
    }

    //通过id查询员工
    public Employee getEmployeeById(Integer id){
        return employees.get(id);
    }

    //通过id删除员工
    public void delete(Integer id){
        employees.remove(id);
    }
}

@Repository注解

@repository跟@Service,@Compent,@Controller这4种注解是没什么本质区别,都是声明作用,取不同的名字只是为了更好区分各自的功能.

@Repository

对DepartmentDao注解上@Repository后，
@Autowire
private DepartmentDao departmentDao;
就可以这样自动注入了，而不需要new对象

二、导入静态资源

具体资源在java后端开发文件的狂神springboot静态资源目录

注意这里面的html放在templates下，css、js、图片放在static下

三、首页

controller层：

//首页
@Controller
public class IndexController {
    @RequestMapping({"/", "/index", "/index.html"})
    //不管是访问"/", "/index", "/index.html"中的哪一个，都可以跳转到index.html页面
    public String index(){
        return "index";
    }
}

在这里终于搞明白了return的作用，也就是说当请求localhost：8080/index的时候，视图控制器跳转到resources/templates/index.html。
return的字符串其实就是templates下的文件名

结果：

但是这里的index首页中一些css样式和图片没有加进来，下一步就要把html文件中添加css、img
通过thymeleaf模板

扩展MVC

除了通过上述方式跳转到主页index.html以外，还可以通过自己定义的方式去扩展mvc

config.MyMvcConfig类：

@Configuration
//@EnableWebMvc
public class MyMvcConfig implements WebMvcConfigurer{
    @Override
    public void addViewControllers(ViewControllerRegistry registry){
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");
    }
}

@Configuration表示是一个配置类
不能加上@EnableWebMvc，加上后表示springboot 的所有默认配置都失效了，但是我们只想更改部分默认配置

registry.addViewController("/").setViewName("index");//访问根目录时，跳转到index.html文件

但是这里的index首页中一些css样式和图片没有加载进来，下一步就要把html文件中添加css、img。

通过thymeleaf模板引擎来在html加载静态资源

1、在html中添加thymeleaf命名空间

2、更改html中的超链接：

3、......

在application.properties中关闭模板引擎的缓存，否则更改的html会因为缓存而无效

spring.thymeleaf.cache=false

四、首页的国际化

1、首先在File-setting-Editor-File Encodings中确保都是utf8，否则会乱码

2、在resources下新建一个i18n文件夹（全称：internationalization，i和n之间有18个字母）

新建三个名为：login.properties、login_en_US.properties、login_zh_CN.properties的配置文件，springboot会根据文件名自动识别其功能，并把它们自动合并在Resource Bundle 'login'

login.tip=请登录
login.password=密码
login.remember=记住我
login.username=用户名
login.btn=登录

login_en_US.properties（英文）

login.tip=Please sign in
login.password=password
login.remember=remember me
login.username=user name
login.btn=sign in

login_zh_CN.properties（中文）

login.tip=请登录
login.password=密码
login.remember=记住我
login.username=用户名
login.btn=登录

3、application.properties中添加配置：

#国际化的配置文件所在地
spring.messages.basename=i18n.login

4、修改对应的index.html文件

...............省略下面过程

五、首页的登录功能

功能描述：

首页输入用户名和密码，如果正确，则页面跳转，如果不正确，那么提示密码错误。

首先来看首页提交的表单部分：

form标签的action属性表示表单提交后处理表单的url地址，用thymeleaf改写前这个form是这样的：但是这样只是静态的，无法和服务器交互
注意thymeleaf中url用@{}来表示，改写后表示表单提交后，将跳转到localhost：8080/user/login请求
要实现登录功能，input标签必须有name属性，这个name属性不仅仅是别名的作用，还作为可与服务器交互数据的HTML元素的服务器端的标示，比如input、select、textarea、和button的name属性都有这个功能。我们可以在服务器端根据其Name通过@RequestParam取得元素提交的值

controller层：

在controller文件夹下新建一个类：

@Controller
public class LoginController {
    @RequestMapping("/user/login")
    public String login(@RequestParam("username") String username, @RequestParam("password") String password, Model model){
        //获取到提交的表单的username、password后，进行具体的业务（这里是验证用户名密码是否正确业务）
        if(username!=null && password.equals("123456")){
            return "dashboard";//登录成功，跳转到dashboard.html页面
        }else{
            //显示登陆失败
            //通过model向页面传递值
            model.addAttribute("msg","用户名密码错误！");
            return "index";
        }
    }
}

这里要结合index.html的表单部分来看
form表单提交后，，这个表示会产生一个localhost：8080/user/login的请求，从而这个请求会被上面这个controller层的login方法接收。（action="@{/user/login}和@RequestMapping("/user/login")相互对应）这里你也可以仔细品味一下@RequestMapping，翻译为中文就是请求映射，把一个请求映射到另外一个路径上

@RequestParam("username") String username 就表示把name="username"的标签的内容（这里指的是input标签中，我们从网页输入的内容）获取到，并且就是这个String username

Model model的作用是向前端页面传递值。

model.addAttribute("msg","用户名密码错误！");//即向下面这个p标签的msg传递值

p标签的作用是，如果msg不为空（即msg为用户名密码错误！），就将这个p标签显示出来，否则不显示（用户名密码正确）。
用户名密码错误时：

用户名密码正确时：

但是注意上面这个url：

http://localhost:8080/user/login?username=ZY2002529&password=123456

这个url并不是这个页面的地址：localhost：8080/dashboard.html
而是一个请求（从“?username=ZY2002529&password=123456”这些参数就可以很明显看出来）
因此就要介绍一下请求转发和重定向的区别了！

@RequestMapping注解所在的方法

如果是return " ****** "; 那么是请求转发
如果是return " redirect:/ ***** "; 是重定向

总结重定向和请求转发的区别

请求转发：直接调用跳转的页面，让它返回，但是对于浏览器来说，地址栏不变，地址栏仍然是请求
请求重定向：重定向是发一个302的状态码给浏览器，浏览器自己去请求跳转的网页，url会改变，request数据不带到重定向的方法中

重定向的方式进入dashboard.html页面

上述方式是错误的，会404，找不到dashboard.html，没搞明白为啥！？？？？？？？？
必须在扩展MVC配置类中加入这个才能正确跳转到dashboard.html

SpringBoot开发一个简单的网站

Java相关栏目本月热门文章