天猫整站Springboot系列教材（一百零二）- 前台-无需登录

-->

下载区
文件名	文件大小
请先登录	417k
增值内容	417k
	417k
解压rar如果失败，请用5.21版本或者更高版本的winrar 点击下载 winrar5.21

工具版本兼容问题

步骤 1 : 先运行，看到效果，再学习
步骤 2 : 模仿和排错
步骤 3 : 界面效果
步骤 4 : ForePageController
步骤 5 : register.html
步骤 6 : simpleSearch.html
步骤 7 : registerPage.html
步骤 8 : UserDAO
步骤 9 : UserService
步骤 10 : ForeRESTController.register()
步骤 11 : registerSuccess.html
步骤 12 : registerSuccessPage.html

步骤 1 :

先运行，看到效果，再学习

edit 顶折

纠问

增值内容，请先登录

完整的 Springboot 模仿天猫项目，使用 Springboot 、Vue.js、shiro、redis、elasticsearch 等一整套技术栈，从无到有涵盖全部129个知识点，565个开发步骤, 充实 Springboot 项目经验，为简历加上一个有吸引力的砝码.
增值内容，点击购买

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

步骤 2 :

模仿和排错

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

步骤 3 :

界面效果

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

步骤 4 :

ForePageController

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

代码行数较多，请点击查看

package com.how2java.tmall.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class ForePageController {
	@GetMapping(value="/")
	public String index(){
		return "redirect:home";
	}
	@GetMapping(value="/home")
	public String home(){
		return "fore/home";
	}
	@GetMapping(value="/register")
	public String register(){
		return "fore/register";
	}
	@GetMapping(value="/alipay")
	public String alipay(){
		return "fore/alipay";
	}
	@GetMapping(value="/bought")
	public String bought(){
		return "fore/bought";
	}
	@GetMapping(value="/buy")
	public String buy(){
		return "fore/buy";
	}
	@GetMapping(value="/cart")
	public String cart(){
		return "fore/cart";
	}
	@GetMapping(value="/category")
	public String category(){
		return "fore/category";
	}
	@GetMapping(value="/confirmPay")
	public String confirmPay(){
		return "fore/confirmPay";
	}
	@GetMapping(value="/login")
	public String login(){
		return "fore/login";
	}
	@GetMapping(value="/orderConfirmed")
	public String orderConfirmed(){
		return "fore/orderConfirmed";
	}
	@GetMapping(value="/payed")
	public String payed(){
		return "fore/payed";
	}
	@GetMapping(value="/product")
	public String product(){
		return "fore/product";
	}
	@GetMapping(value="/registerSuccess")
	public String registerSuccess(){
		return "fore/registerSuccess";
	}
	@GetMapping(value="/review")
	public String review(){
		return "fore/review";
	}
	@GetMapping(value="/search")
	public String searchResult(){
		return "fore/search";
	}
	@GetMapping("/forelogout")
	public String logout( ) {
		return "redirect:home";
	}

}

步骤 5 :

register.html

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/fore/header::html" ></head>
<body>
<div id="workingArea">
    <div th:replace="include/fore/top::html" ></div>
    <div th:replace="include/fore/simpleSearch::html" ></div>
    <div th:replace="include/fore/registerPage::html" ></div>
    <div th:replace="include/fore/footer::html" ></div>
</div>
</body>
</html>

步骤 6 :

simpleSearch.html

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

<div class th:fragment="html">
    <a th:href="${application.contextPath}">
        <img id="simpleLogo" class="simpleLogo" src="img/site/simpleLogo.png">
    </a>
    <form action="search" method="get" >
        <div class="simpleSearchDiv pull-right">
            <input type="text" placeholder="平衡车 原汁机"  name="keyword">
            <button class="searchButton" type="submit">搜天猫</button>
            <div class="searchBelow">
				<span th:each="c,status: ${application.categories_below_search}" th:if="${status.index>=7 && status.index<=10}">
					<a th:href="@{'category?cid='+${c.id}}" th:text="${c.name}" ></a>
					<span th:if="${status.index!=10}">|</span>
	            </span>
            </div>
        </div>
    </form>
    <div style="clear:both"></div>
</div>

步骤 7 :

registerPage.html

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

<div th:fragment="html"> <script> $(function(){ var data4Vue = { uri:'foreregister', result: [], user:{name:'', password:'', repeatpassword:''} }; //ViewModel var vue = new Vue({ el: '#workingArea', data: data4Vue, mounted:function(){ linkDefaultActions(); }, methods: { register:function(){ var url = this.uri; if(0==this.user.name.length){ $("span.errorMessage").html("请输入用户名"); $("div.registerErrorMessageDiv").css("visibility","visible"); return; } if(0==this.user.password.length){ $("span.errorMessage").html("请输入密码"); $("div.registerErrorMessageDiv").css("visibility","visible"); return; } if(0==this.user.repeatpassword.length){ $("span.errorMessage").html("请输入重复密码"); $("div.registerErrorMessageDiv").css("visibility","visible"); return; } if(this.user.password !=this.user.repeatpassword){ $("span.errorMessage").html("重复密码不一致"); $("div.registerErrorMessageDiv").css("visibility","visible"); return; } axios.post(url,this.user).then(function(response) { var result = response.data; if(result.code==0){ location.href="registerSuccess"; } else{ $("span.errorMessage").html(result.message); $("div.registerErrorMessageDiv").css("visibility","visible"); } }); } } }); }) </script> <div class="registerDiv"> <div class="registerErrorMessageDiv"> <div class="alert alert-danger" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button> <span class="errorMessage"></span> </div> </div> <table class="registerTable" align="center"> <tr> <td class="registerTip registerTableLeftTD">设置会员名</td> <td></td> </tr> <tr> <td class="registerTableLeftTD">登陆名</td> <td class="registerTableRightTD"><input v-model="user.name" placeholder="会员名一旦设置成功，无法修改" > </td> </tr> <tr> <td class="registerTip registerTableLeftTD">设置登陆密码</td> <td class="registerTableRightTD">登陆时验证，保护账号信息</td> </tr> <tr> <td class="registerTableLeftTD">登陆密码</td> <td class="registerTableRightTD"><input v-model="user.password" type="password" placeholder="设置你的登陆密码" > </td> </tr> <tr> <td class="registerTableLeftTD">密码确认</td> <td class="registerTableRightTD"><input v-model="user.repeatpassword" type="password" placeholder="请再次输入你的密码" > </td> </tr> <tr> <td colspan="2" class="registerButtonTD"> <a @click="register"><button>提交</button></a> </td> </tr> </table> </div> </div>

代码行数较多，请点击查看

<div th:fragment="html">
    <script>
        $(function(){
            var data4Vue = {
                uri:'foreregister',
                result: [],
                user:{name:'', password:'', repeatpassword:''}
            };
            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted:function(){
                    linkDefaultActions();
                },
                methods: {
                    register:function(){
                        var url =  this.uri;
                        if(0==this.user.name.length){
                            $("span.errorMessage").html("请输入用户名");
                            $("div.registerErrorMessageDiv").css("visibility","visible");
                            return;
                        }
                        if(0==this.user.password.length){
                            $("span.errorMessage").html("请输入密码");
                            $("div.registerErrorMessageDiv").css("visibility","visible");
                            return;
                        }
                        if(0==this.user.repeatpassword.length){
                            $("span.errorMessage").html("请输入重复密码");
                            $("div.registerErrorMessageDiv").css("visibility","visible");
                            return;
                        }
                        if(this.user.password !=this.user.repeatpassword){
                            $("span.errorMessage").html("重复密码不一致");
                            $("div.registerErrorMessageDiv").css("visibility","visible");
                            return;
                        }

                        axios.post(url,this.user).then(function(response) {
                            var result = response.data;
                            if(result.code==0){
                                location.href="registerSuccess";
                            }
                            else{
                                $("span.errorMessage").html(result.message);
                                $("div.registerErrorMessageDiv").css("visibility","visible");
                            }
                        });
                    }
                }
            });
        })
    </script>
    <div class="registerDiv">
        <div class="registerErrorMessageDiv">
            <div class="alert alert-danger" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                <span class="errorMessage"></span>
            </div>
        </div>

        <table class="registerTable" align="center">
            <tr>
                <td  class="registerTip registerTableLeftTD">设置会员名</td>
                <td></td>
            </tr>
            <tr>
                <td class="registerTableLeftTD">登陆名</td>
                <td  class="registerTableRightTD"><input v-model="user.name" placeholder="会员名一旦设置成功，无法修改" > </td>
            </tr>
            <tr>
                <td  class="registerTip registerTableLeftTD">设置登陆密码</td>
                <td  class="registerTableRightTD">登陆时验证，保护账号信息</td>
            </tr>
            <tr>
                <td class="registerTableLeftTD">登陆密码</td>
                <td class="registerTableRightTD"><input v-model="user.password"  type="password"  placeholder="设置你的登陆密码" > </td>
            </tr>
            <tr>
                <td class="registerTableLeftTD">密码确认</td>
                <td class="registerTableRightTD"><input v-model="user.repeatpassword"   type="password"  placeholder="请再次输入你的密码" > </td>
            </tr>

            <tr>
                <td colspan="2" class="registerButtonTD">
                    <a @click="register"><button>提   交</button></a>
                </td>
            </tr>
        </table>
    </div>
</div>

步骤 8 :

UserDAO

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

package com.how2java.tmall.dao;

import org.springframework.data.jpa.repository.JpaRepository;

import com.how2java.tmall.pojo.User;

public interface UserDAO extends JpaRepository<User,Integer>{

    User findByName(String name);

}

步骤 9 :

UserService

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

代码行数较多，请点击查看

package com.how2java.tmall.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.cache.annotation.CacheConfig;
import org.springframework.cache.annotation.CacheEvict;
import org.springframework.cache.annotation.Cacheable;
import org.springframework.data.domain.Page;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Pageable;
import org.springframework.data.domain.Sort;
import org.springframework.stereotype.Service;

import com.how2java.tmall.dao.UserDAO;
import com.how2java.tmall.pojo.User;
import com.how2java.tmall.util.Page4Navigator;

@Service
public class UserService {

	@Autowired UserDAO userDAO;

	public boolean isExist(String name) {
		User user = getByName(name);
		return null!=user;
	}

	public User getByName(String name) {
		return userDAO.findByName(name);
	}

	public Page4Navigator<User> list(int start, int size, int navigatePages) {
		Sort sort = new Sort(Sort.Direction.DESC, "id");
		Pageable pageable = new PageRequest(start, size,sort);
		Page pageFromJPA =userDAO.findAll(pageable);
		return new Page4Navigator<>(pageFromJPA,navigatePages);
	}

	public void add(User user) {
		userDAO.save(user);
	}

}

步骤 10 :

ForeRESTController.register()

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

代码行数较多，请点击查看

package com.how2java.tmall.web;

import com.how2java.tmall.pojo.Category;
import com.how2java.tmall.pojo.User;
import com.how2java.tmall.service.CategoryService;
import com.how2java.tmall.service.ProductService;
import com.how2java.tmall.service.UserService;
import com.how2java.tmall.util.Result;
import org.apache.shiro.crypto.SecureRandomNumberGenerator;
import org.apache.shiro.crypto.hash.SimpleHash;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.util.HtmlUtils;

import java.util.List;

@RestController
public class ForeRESTController {
    @Autowired
    CategoryService categoryService;
    @Autowired
    ProductService productService;
    @Autowired
    UserService userService;

    @GetMapping("/forehome")
    public Object home() {
        List<Category> cs= categoryService.list();
        productService.fill(cs);
        productService.fillByRow(cs);
        categoryService.removeCategoryFromProduct(cs);
        
        return cs;
    }    
    @PostMapping("/foreregister")
    public Object register(@RequestBody User user) {
        String name =  user.getName();
        String password = user.getPassword();
        name = HtmlUtils.htmlEscape(name);
        user.setName(name);
        boolean exist = userService.isExist(name);
            
        if(exist){
            String message ="用户名已经被使用,不能使用";
            return Result.fail(message);
        }
        
		user.setPassword(password);
		
        userService.add(user);
        
    	return Result.success();
    }        

}

步骤 11 :

registerSuccess.html

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head th:include="include/fore/header::html" ></head>
	<body>
		<div id="workingArea">
			<div th:replace="include/fore/top::html" ></div>	
			<div th:replace="include/fore/simpleSearch::html" ></div>	
			<div th:replace="include/fore/registerSuccessPage::html" ></div>	
			<div th:replace="include/fore/footer::html" ></div>	
		</div>
	</body>
</html>

步骤 12 :

registerSuccessPage.html

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

<div th:fragment="html">
	<div class="registerSuccessDiv">
		<img src="img/site/registerSuccess.png">
		恭喜注册成功
	</div>
</div>

天猫整站Springboot系列教材（一百零一）- 前台-无需登录 - 概述

天猫整站Springboot系列教材（一百零三）- 前台-无需登录 - 登录

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2022-04-29 关于注册清除users缓存的意义

wc3551967

关于实践项目-天猫整站Springboot-注册的提问

您好站长，请问一下：注册验证完成后，把用户信息入库时要清除所有的users缓存，这是为啥呀？假设此时有100人注册，其中一个人注册成功就把另外99个尚未成功的缓存给清除了，这样不会太好吧......万一这99人当中有恶意注册同一ID而反复访问数据库的，岂不是无法避免？所以不太懂这清除所有users缓存的意义，望站长老师解答下.

 @CacheEvict(allEntries = true)//清除所有users缓存
    public void add(User user) {
        userDAO.save(user);
    }

1 个答案

how2j
答案时间：2022-06-02

因为后台有用户管理功能，而用户管理功能会进行分页展示用户列表，如果这里不清空缓存，那么后台的用户展示功能就会受影响了。

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2022-01-06 top.html中<a th:href="${application.getContextPath}">返回不到首页只刷新当前页面的解决办法

鸡你太美噢北北

关于实践项目-天猫整站Springboot-注册的提问

用 ${#httpServletRequest.getContextPath()} 替换 ${application.getContextPath}

1 个答案

how2j
答案时间：2022-02-02

额。。。我的是 application.contextPath ，而非 application.getContextPath 哦

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2021-05-17 站长大佬，我想问一下第十步跳转是怎么知道应该往ForeRESTController中跳转的？

2021-04-22 点击注册按钮没有反应

2020-07-14 是不是后面如果用不到getByName就可以不用特意写这个函数？

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 11 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于实践项目-天猫整站Springboot-注册的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图