html+jQuery前端开发代码demo ---并夕夕商城

一、结果预览

代码：

https://download.csdn.net/download/GBS20200720/45483826

欢迎页面

二、代码结构

对前端开发的一些理解
安卓开发 vue html
前端开发个人觉得都是这样的框子 ： 页面元素 + 样式 + 向后端发送请求

html开发页面元素 样式

jQuery发送请求，与前端页面元素关联

springboot简单入门

如何简单入门springboot做一个网页呢？
准备工作
1、新建一个SpringBoot项目，构建web模块
2、导入pojo和dao层的类
pojo层

package com.star.pojo;

public class Department {

    private Integer id;
    private String departmentName;

    public Department() {
    }
    
    public Department(int i, String string) {
        this.id = i;
        this.departmentName = string;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getDepartmentName() {
        return departmentName;
    }

    public void setDepartmentName(String departmentName) {
        this.departmentName = departmentName;
    }

    @Override
    public String toString() {
        return "Department [id=" + id + ", departmentName=" + departmentName + "]";
    }
    
}
package com.star.pojo;

import java.util.Date;

public class Employee {

    private Integer id;
    private String lastName;

    private String email;
    //1 male, 0 female
    private Integer gender;
    private Department department;
    private Date birth;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public Integer getGender() {
        return gender;
    }

    public void setGender(Integer gender) {
        this.gender = gender;
    }

    public Department getDepartment() {
        return department;
    }

    public void setDepartment(Department department) {
        this.department = department;
    }

    public Date getBirth() {
        return birth;
    }

    public void setBirth(Date birth) {
        this.birth = birth;
    }
    public Employee(Integer id, String lastName, String email, Integer gender,
                    Department department) {
        super();
        this.id = id;
        this.lastName = lastName;
        this.email = email;
        this.gender = gender;
        this.department = department;
        this.birth = new Date();
    }

    public Employee() {
    }

    @Override
    public String toString() {
        return "Employee{" +
                "id=" + id +
                ", lastName='" + lastName + '\'' +
                ", email='" + email + '\'' +
                ", gender=" + gender +
                ", department=" + department +
                ", birth=" + birth +
                '}';
    }
}

dao层

package com.star.dao;

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

import com.star.pojo.Department;
import org.springframework.stereotype.Repository;

//模拟数据库
@Repository
public class DepartmentDao {

    private static Map<Integer, Department> departments = null;
    
    static{
        departments = new HashMap<Integer, Department>();
        
        departments.put(101, new Department(101, "D-AA"));
        departments.put(102, new Department(102, "D-BB"));
        departments.put(103, new Department(103, "D-CC"));
        departments.put(104, new Department(104, "D-DD"));
        departments.put(105, new Department(105, "D-EE"));
    }

    //获得全部部门信息
    public Collection<Department> getDepartments(){
        return departments.values();
    }

    //通过id获取部门信息
    public Department getDepartment(Integer id){
        return departments.get(id);
    }
    
}
package com.star.dao;

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

import com.star.pojo.Department;
import com.star.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

//模拟数据库
@Repository
public class EmployeeDao {

    private static Map<Integer, Employee> employees = null;
    
    @Autowired
    private DepartmentDao departmentDao;
    
    static{
        employees = new HashMap<Integer, Employee>();

        employees.put(1001, new Employee(1001, "E-AA", "aa@163.com", 1, new Department(101, "D-AA")));
        employees.put(1002, new Employee(1002, "E-BB", "bb@163.com", 1, new Department(102, "D-BB")));
        employees.put(1003, new Employee(1003, "E-CC", "cc@163.com", 0, new Department(103, "D-CC")));
        employees.put(1004, new Employee(1004, "E-DD", "dd@163.com", 0, new Department(104, "D-DD")));
        employees.put(1005, new Employee(1005, "E-EE", "ee@163.com", 1, new Department(105, "D-EE")));
    }
    
    private static Integer initId = 1006;

    //新增员工实现id自增
    public void save(Employee employee){
        if(employee.getId() == null){
            employee.setId(initId++);
        }
        
        employee.setDepartment(departmentDao.getDepartment(employee.getDepartment().getId()));
        employees.put(employee.getId(), employee);
    }

    //获得全部的员工
    public Collection<Employee> getAll(){
        return employees.values();
    }

    //通过id获取员工
    public Employee get(Integer id){
        return employees.get(id);
    }

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

3、导入静态资源（页面放在Temleate，资源放在static目录下）
链接：https://pan.baidu.com/s/1FH8gy0WlMQXED6inbquPzQ

提取码：77ck

4、所有的页面增加头文件 xmlns:th=“http://www.thymeleaf.org”
5、所有的资源链接修改格式为thymeleaf语法：th:xxx=“@{}”
6、可以增加一个配置类，配置我们的SpringMVC

//代表这是一个配置类
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {

    //通过配置类来设置试图跳转
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index");//定制首页为index.html页面
        registry.addViewController("/index.html").setViewName("index");
        registry.addViewController("/main.html").setViewName("dashboard");
    }

MVC配置原理：https://www.cnblogs.com/lmx-181028/p/12468903.html

7、我们可以设置项目的路径名，application.properties

# 配置自己的服务器路径 localhost:8080/star
service.servlet.context-path=/star

回到顶部
实现功能
1、国际化
可以看到再首页的下面有中英文转换

这就是国际化，我们来实现这个功能！

首先修改编码

在Rources下创建目录 i18n(国际化 internationalization 单词的缩写)

创建login.properties(默认语言)文件，再创建login_zh_CN.properties(中文)文件。可以看到会将两个文件合并在一个目录下！

添加login_en_US.properties(英文)文件

编写login.properties，使用可视化编写！

然后修改index.html代码，使用thymeleaf绑定

<form class="form-signin" th:action="@{user/login}">
	<img class="mb-4" th:src="@{/asserts/img/bootstrap-solid.svg}" alt="" width="72" height="72">

	<h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please Sign In</h1>

	<label class="sr-only">Username</label>
	<input type="text" class="form-control" name="username" th:placeholder="#{login.username}" required="" autofocus="">
	<label class="sr-only">Password</label>
	<input type="password" class="form-control" name="password" th:placeholder="#{login.password}" required="">

	<div class="checkbox mb-3">
		<label>
  			<input type="checkbox" value="remember-me" th:text="#{login.properties}">
		</label>
	</div>
	<button class="btn btn-lg btn-primary btn-block" type="submit">[[#{login.btn}]]</button>
	<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
	<a class="btn btn-sm"}">中文</a>
	<a class="btn btn-sm"}">English</a>
</form>

启动项目测试：

接下来我们使用下面的链接来进行中英文切换！

首先我们进入国际化的源码；

进入WebMvcAutoConfiguration.java类，找到LocaleResolver方法；

分析，代码，可以看出，默认使用AcceptHeaderLocaleResolver类，查看源码：实现LocaleResolver接口！

重写方法！

所以我们可以写一个自己的国际化解析器，实现LocaleResolver接口！

参照AcceptHeaderLocaleResolver类重写方法的格式！

我们先在前端传入语言的参数，thymeleaf传参用()

<a class="btn btn-sm" th:href="@{/index.html(l='zh_CN')}">中文</a>
<a class="btn btn-sm" th:href="@{/index.html(l='en_US')}">English</a>

这个链接的地址还是当前的页面，不过要传国际化参数。

编写自己的国际化解析器！

package com.star.config;

import org.springframework.web.servlet.LocaleResolver;
import org.thymeleaf.util.StringUtils;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;

public class MyLocalResolver implements LocaleResolver {
    @Override
    public Locale resolveLocale(HttpServletRequest request) {
        //获取请求语言中的语言参数
        String language = request.getParameter("l");
        Locale locale = Locale.getDefault();//如果没有使用默认值       
        //如果请求的链接携带了国际化的参数
        if(!StringUtils.isEmpty(language)){
            //zh_CN分割
            String[] s = language.split("_");
            //国家_地区
            locale = new Locale(s[0], s[1]);
        }

        return locale;
    }

    @Override
    public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale locale) {
            //无返回值，不用写代码
    }
}

然后在配置类中注册bean，自定义的国际化组件就生效了

@Bean
public LocaleResolver localeResolver(){
    return new MyLocalResolver();
}

重启项目测试：

功能实现成功！

2、增加登录和拦截的功能！
1、前端提交登录请求 （看表单）

<form class="form-signin" th:action="@{user/login}">

2、后端处理登录请求 （登录成功，跳转到主页，显示用户的名字，如果没有成功告诉用户：用户名或密码错误）

@Controller
public class userController {

    //登录实现
    @RequestMapping("/user/login")
    public String login(@RequestParam("username") String username, @RequestParam("password") String password, Model model, HttpSession session){
        if(!StringUtils.isEmpty(username)&& "123456".equals(password)){
            model.addAttribute("msg","");
            session.setAttribute("loginUser",username);
            //登陆成功
            //登录重定向，避免一直提交
            return "redirect:/main.html";
        }else {
            model.addAttribute("msg","登录失败，请重新登录");
            return "index";
        }
    }
}

3、发现问题：没有登录也能进入主页

4、增加一个拦截器，判断用户是否登录

package com.star.interceptor;

import org.springframework.web.servlet.HandlerInterceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        if(request.getSession().getAttribute("loginUser")==null){
            request.setAttribute("msg","没有权限,请先登录!");
            request.getRequestDispatcher("/index.html").forward(request,response);//转发到登录页面
            return false;
        }else{
            return true;
        }
    }
}

配置类中注册拦截器

//注册拦截器
@Override
public void addInterceptors(InterceptorRegistry registry) {
    //选择要过滤和排除的请求
    registry.addInterceptor(new LoginInterceptor())
            .addPathPatterns("/**")
            .excludePathPatterns("/","/index.html","/user/login")//排除登录的请求
            .excludePathPatterns("/asserts/**");//排除静态资源的请求
}

将 登录失败，请重新登录 的参数传入前端页面

<!--判断是否有错误标签-->
<p style="color: red" th:if="${not #strings.isEmpty(msg)}" th:text="${msg}"></p>

5、测试登录和拦截是否成功；

我们如果未登录，main.html请求就不能通过，并且转发到登录页面！

3、展示员工列表
我们将所有员工的信息查询并展示出来

编写controller类

package com.star.controller;

import com.star.dao.EmployeeDao;
import com.star.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.Collection;

@Controller
public class EmployeeController {

    @Autowired  //自动转配，或者在配置类中注册bean
    EmployeeDao employeeDao;

    @RequestMapping("/emps")
    public String list(Model model){
        Collection<Employee> employees = employeeDao.getAll();//通过该方法查询所有的员工信息
        model.addAttribute("emps",employees);
        return "emp/list";//跳转至在templates下的emp目录下list.html页面
    }
}

为了减少代码量，我们提取公共页面，在templates目录下创建commons目录，新建commons.html页面；

由于list页面和dashboard页面的顶部栏和侧边栏是相同的。所以我们抽取出来，放在commens.html页面中

在头部导航栏的标签中添加 th:fragment=“topBar”(使用thymeleaf语法)

在侧边导航栏的标签中添加 th:fragment=“sideBar”

然后在两个页面的原位置添加如下代码：

<!--顶部导航栏  commons目录下的commons页面的topBar-->
<div th:replace="~{commons/commons::topBar}"></div>
<!--侧边栏-->
<div th:replace="~{commons/commons::sideBar}"></div>

我们需要选定某个页面，侧边拦中的该页面要变亮；

接下来实现这个功能

看公共页面中 首页 的代码中可以看到有active

我们可以使用thymeleaf语法来判断；

请求首页时传参数active=‘main.html’

在dashboard.html页面中修改代码

<!--侧边栏-->
<div th:replace="~{commons/commons::sideBar(active='main.html')}"></div>

请求员工管理即list页面时传参数active=‘list.html’

在list.html页面中修改代码

<!--侧边栏-->
<div th:replace="~{commons/commons::sideBar(active='list.html')}"></div>

修改公共页的代码

<!--修改侧边栏的首页代码-->
th:class="${active=='main.html'?'nav-link active':'nav-link'}"
<!--修改侧边栏员工管理代码-->
th:class="${active=='list.html'?'nav-link active':'nav-link'}"

测试：

接下来我们展示所有的员工信息

修改list.html页面中thead标签和tbody标签中的代码(使用thymeleaf语法)

<thead>
	<tr>
		<th>id</th>
		<th>lastName</th>
		<th>email</th>
		<th>gender</th>
		<th>department</th>
		<th>birth</th>
		<th>操作</th>
	</tr>
</thead>
<tbody>
	<tr th:each="emp:${emps}">
		<td th:text="${emp.getId()}"></td>
		<td th:text="${emp.getLastName()}"></td>
		<td th:text="${emp.getEmail()}"></td>
		<td th:text="${emp.getGender()==1?'男':'女'}"></td>
		<td th:text="${emp.getDepartment().getDepartmentName()}"></td>
		<td th:text="${#dates.format(emp.getBirth(),'yyyy-HH-dd HH:mm:ss')}"></td>
		<td>
			<a href="" class="btn btn-sm btn-success">编辑</a>
			<a href="" class="btn btn-sm btn-danger">删除</a>
		</td>
	</tr>
</tbody>

测试：

OK!我们实现了展示所有员工信息的功能

4、实现增加员工的功能
在展示列表的上面添加一个增加员工的链接

<h2><a class="btn btn-lg btn-success" th:href="@{/toAdd}">添加员工</a></h2>

这里是get请求

我们编写controller类

 @Autowired
    DepartmentDao departmentDao;

    @GetMapping("/toAdd")
    public String add(Model model){
        Collection<Department> departments = departmentDao.getDepartments();
        model.addAttribute("departments",departments);//页面传入departments
        return "emp/add";
    }

新建一个增加员工的页面add.html

代码框架和list一样，修改main标签的内容

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
    <!--增加一个表单  提交到/emp请求-->
    <form th:action="@{/emp}" method="post">
        <div class="form-group">
            <label>lastName</label>
            <input type="text" class="form-control" name="lastName"  placeholder="lastName">
        </div>
        <div class="form-group">
            <label>email</label>
            <input type="email" class="form-control" name="email" placeholder="email">
        </div>
        <div class="radio">
            <label>gender</label>
            <br>
            <label>
                <input type="radio" name="gender" value="1">男
                <input type="radio" name="gender" value="0">女
            </label>
        </div>
        <div class="form-group">
            <label>department</label>
            <select class="form-control" name="department.id">
                <option th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value=
            </select>
        </div>
        <div class="form-group">
            <label>birth</label>
            <input type="text" name="birth" class="form-control" placeholder="birth">
        </div>
        <br>
        <div class="form-group">
            <button type="submit" class="btn btn-sm btn-success">添加</button>
        </div>
    </form>
</main>

表单使用post请求到emp，编写controller页面

@Autowired
EmployeeDao  employeeDao;

@PostMapping("/emp")
public String addEmp(Employee employee){
    employeeDao.save(employee);//使用save方法增加员工
    return "redirect:/emps";//重定向到emps也就是list.hrml页面
}

测试功能：

注意：springBoot里面的时间默认格式为：yyyy/MM/dd 所以表单的时间的格式为2020/01/01；

OK！增加员工功能实现成功！

5、修改员工功能
编写修改的链接以及请求

<a th:href="@{/toUpdate/}+${emp.getId()}" class="btn btn-sm btn-success">编辑</a>

编写对应的controlelr类

@GetMapping("/toUpdate/{id}")
public String toUpdate(@PathVariable("id") int id, Model model){
    Collection<Department> departments = departmentDao.getDepartments();
    model.addAttribute("departments",departments);
    Employee employee = employeeDao.get(id);
    model.addAttribute("emp",employee);
    return "emp/update";
}

编写修改页面update.html，也是一个表单，同样提交到emp请求，这里注意要加一个隐藏域显示id，这样id就不会自增从而修改成功！

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
    <form th:action="@{/emp}" method="post">
        <!--隐藏域-->
        <input type="hidden" name="id" th:value="${emp.getId()}">

        <div class="form-group">
            <label>lastName</label>
            <input type="text" class="form-control" name="lastName" th:value="${emp.getLastName()}"  placeholder="lastName" >
        </div>
        <div class="form-group">
            <label>email</label>
            <input type="email" class="form-control" name="email" th:value="${emp.getEmail()}" placeholder="Email">
        </div>
        <div class="radio">
            <label>gender</label>
            <br>
            <label>
                <input th:checked="${emp.getGender()==1}" type="radio" name="gender" value="1">男
                <input th:checked="${emp.getGender()==0}" type="radio" name="gender" value="0">女
            </label>
        </div>
        <div class="form-group">
            <label>department</label>
            <select class="form-control" name="department.id">
                <option th:selected="${dept.getId()==emp.getDepartment().getId()}" th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
            </select>
        </div>
        <div class="form-group">
            <label>birth</label>
            <input type="text" name="birth" class="form-control" th:value="${#dates.format(emp.getBirth(),'yyyy/MM/dd HH:mm:ss')}">
        </div>
        <br>
        <div class="form-group">
            <button type="submit" class="btn btn-sm btn-success">修改</button>
        </div>
    </form>
</main>

测试：

OK！修改功能成功！

6、删除员工页面
编写删除的链接以及请求

<a th:href="@{/delete/}+${emp.getId()}" class="btn btn-sm btn-danger">删除</a>

编写对应的controlelr类

@GetMapping("/delete/{id}")
public String delete(@PathVariable("id") int id){
    employeeDao.delete(id);//根据id删除对应的员工
    return "redirect:/emps";
}

测试功能：点击删除即可！