SSM-在线视频学习网站（自己做笔记记录）

最新推荐文章于 2023-03-17 10:34:03 发布

红茶晚报丶

最新推荐文章于 2023-03-17 10:34:03 发布

阅读量209

点赞数

文章标签： maven spring

本文链接：https://blog.csdn.net/weixin_47188125/article/details/120778423

版权

1.技术

spring，springmvc，mybatis，git，maven

配置maven镜像，在mirrors标签下（注意包的存放位置尽量不在C盘）

<mirror>
<id>alimaven</id>
<mirrorOf>central</mirrorOf>
<name>aliyun maven</name>
<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
</mirror>

2.创建数据库

3.IDEA构建SSM项目

src路径下的文件在编译后会放到WEB-INF/classes路径下，默认的classpath是在这里

WEB-INF/classes目录存放src目录java文件编译之后的class文件，xml、properties等资源配置文件，这是一个定位资源的入口

用maven构建项目时候resources目录就是默认的classpath

然后配置Srping文件里面的

4.使用tableGo快速生成实体类以及mapper映射文件

5.创建测试类，测试一下

例如：首先创建dao


public interface BannerDao {
    int insertBanner(Banner banner);
}

然后再到测试类中测试（记得配置mapper文件）

   @Test
    public void t2(){
        Banner banner=new Banner();
        banner.setCreateTime(new Date());
        banner.setFlag(1);
        banner.setImgUrl("url");
        banner.setTargetUrl("target");
        banner.setType(1);

        int code=bannerDao.insertBanner(banner);
        System.out.println(code);
    }

6.前端页面

locolhosthttp://locolhost:8080/static/imgs/123.png此时页面访问失败的原因

所有的请求都会经过DispatcherServlet，但是我们加载的图片是静态资源，无法被解析成功，所以直接访问页面会出错

解决方法：配置静态资源处理机制（在spring-web.xml中配置）

   <mvc:resources mapping="/static/imgs/**" location="/static/imgs/"></mvc:resources>
    <mvc:resources mapping="/static/css/**" location="/static/css/"></mvc:resources>
    <mvc:resources mapping="/static/fonts/**" location="/static/fonts/"></mvc:resources>
    <mvc:resources mapping="/static/js/**" location="/static/js/"></mvc:resources>

也可以这样写

 <mvc:default-servlet-handler/>

7.下载bootstrap

在快速索引中，把这些代码录用进来

调整左右边距

---------------------------------------------------------------------------------------------------------------------------------

接下来完成注册页面

（1）ajax onblur标签属性

因为输入邮箱等，一输入就要提示输入的是否正确

 <input type="text" name="email" placeholder="请输入邮箱" onblur="checkEmail(this)"
                                   pattern="正则表达式"
                                   class="form-control " id="validationEmail" required>

（2）onsubmit标签属性

验证码需要在提交表单的时候再进行判断是否正确，所以与form标签绑定

 <form method="post" action="/regist" onsubmit="return registSubmit()">

（3）hutools来自动生成验证码

// 相应验证码，二进制图片
// http协议设置响应的类型
// src=/vcode 获得图片验证码
private static LineCaptcha lineCaptcha = CaptchaUtil.createLineCaptcha(150, 40);
@RequestMapping("/vcode")
public static void getVerificationCode(HttpServletResponse response, HttpServletRequest request) {
        try {
            //1.创建验证码
            lineCaptcha.createCode();
            //2.将随机验证码字符转换成小写放进session域中
            //这步很重要，因为在后台需要拿到session验证 验证码是否正确
            request.getSession(true).setAttribute
            ("session_vcode",lineCaptcha.getCode().toLowerCase());
            //3.必须设置响应内容类型为图片，否则前台不识别
            response.setContentType("image/png");
            //4.获取文件输出流
            OutputStream os = response.getOutputStream();
            //5.写出到游览器(servlet输出)
            lineCaptcha.write(os);
            os.flush();
            os.close();//关闭流

        } catch (IOException e) {

            e.printStackTrace();

        }

    }

------------------------------------------------验证码的验证过程 --------------------------------------------------------

function registSubmit() {
        var vcodeFlag = checkVcode();

        if (!vcodeFlag) {
            // 验证码不正确
            $("#validationVcode").removeClass("is-valid");
            $("#validationVcode").addClass("is-invalid");
            $("#feedbackVcode").text("验证码填写错误");
            $("#feedbackVcode").attr("class", "invalid-feedback");
            return false;
        }
        // 提交注册
        return true;
    }

    function checkVcode() {
        var vcode = $("#validationVcode").val();
        var flag = false;
        $.ajax({
            url: "/checkVcode?vcode=" + vcode,
            success: function (result) {
                if (result.rcode == 1) {
                    flag = true;
                } else {
                    flag = false;
                }
            },
            // 同步请求
            async: false
        });
        return flag;
    }

   @RequestMapping("/checkVcode")
    @ResponseBody
    public ResponseResult checkVcode(String vcode, HttpSession session) {
        ResponseResult result = new ResponseResult(-1, "vcode invalid");
        String sVcode = (String) session.getAttribute("session_vcode");
        if (StrUtil.isEmpty(vcode) || StrUtil.isEmpty(sVcode)) {
            return result;
        }
        if (!sVcode.equals(vcode)) {
            return result;
        }
        result.setRcode(1);
        result.setMessage("ok");
        return result;
    }

前台数据提交到后台来，进行表单验证

注意！！！！！！！！！

如果不用springMVC框架，我们一般都是用HttpServletRequest的request.getParameter(“name”);这种方式来获取表单中的信息

springMVC会自动帮我们封装前端传来的对象的属性值

    @Autowired
    UserService userService;


    @RequestMapping(value = "/regist",method = RequestMethod.POST)
    public String regist(User user, HttpSession session, String vcode){
        // TODO 后台表单数据验证
        String sVcode=(String) session.getAttribute("session_vcode");

        if(StrUtil.isEmpty(vcode)){
            // TODO 跳转错误页面
            throw new UserException("验证码错误");
        }

        boolean emailMatch = ReUtil.isMatch("[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?", user.getEmail());
        boolean phoneMatch = ReUtil.isMatch("1[3456789]\\d{9}$", user.getMobile());
        boolean passwordMatch = ReUtil.isMatch("^(?![\\d]+$)(?![a-zA-Z]+$)(?![^\\da-zA-Z]+$).{6,20}$", user.getPassword());

        if(!emailMatch || !phoneMatch || !passwordMatch){
            throw new UserException("注册信息错误");
        }

        // 参数验证通过
        int code = userService.regist(user);
        if (code != 1) {
            // TODO 数据库插入数据失败，跳转错误页面
            throw new UserException("注册失败");
        }

        // 注册成功直接登录
        session.setAttribute("login_user", user);

        // 重定向到首页
        return "redirect:/";
    }

---------------------------------------在前端遇到问题时，需要学会debug---------------------------------------

如：一开始不知道为什么验证码一直显示错误

按12 进入源代码选择两个端点进行debug

------------------------------------------------------------------------------------------------------------------------------

登录页面----自动登录

> 使用token记录自动登录状态，保存用户登录状态48小时（2天）
>
> 关闭浏览器，下次打开浏览器，如果没有超过时间，仍然是登录状态
>
> token就不能保存在session中，因为浏览器关闭session结束了，正常实现（Redis）
>
> 就要保存在一个全局的数据。application

        // TODO 自动登录
        //在前端中设置自动登录的值为1
        if (StrUtil.isEmpty(autoLogin) || "1".equals(autoLogin)) {
            // 1 生成cookie返回给客户端凭证cookie
            // 2 服务器端保存token对应loginToken数据,application
            LoginToken loginToken = VideoUtil.generateLoginToken(request, user);
            //对token进行md5加密
            Cookie cookie = new Cookie("autoToken", loginToken.generateToken());
            // 设置COOKIE保存属性
            cookie.setPath("/");
            // 单位秒 48小时 60 * 60 * 48;
            cookie.setMaxAge(60 * 60 * 48);
            response.addCookie(cookie);

            // TODO 服务器保存对应的LoginToken用户登录数据
            HashMap<String, LoginToken> tokenMap = (HashMap<String, LoginToken>)             
              application.getAttribute(Constants.AUTO_LOGIN_TOKEN);
            if (tokenMap == null) {
                // 初始化
                tokenMap = new HashMap<String, LoginToken>();
                tokenMap.put(loginToken.generateToken(), loginToken);
                application.setAttribute(Constants.AUTO_LOGIN_TOKEN, tokenMap);
            } else {
                // 已经初始化，直接保存loginToken
                tokenMap.put(loginToken.generateToken(), loginToken);
            }
        }

        // 重定向到首页
        return "redirect:/";

浏览器（cookie）
token = xxxxxxxxxxxxxxxxxxxxxxxxx (登录凭证，48小时失效)

服务器（）
        1 登录成功，返回token给浏览器保存，自动登录凭证。
        2 token生成
            token --> 时间、用户、IP、浏览器信息、（MD5）

用户打开浏览器
        1 token发送到服务器
        2 服务器根据token获取对应的值，
          3 验证token是否有效（ IP、浏览器信息）

- 打开网站恢复用户登录

> 拦截器，判断token是否有效（时间、用户、IP、浏览器信息）+ 时间是否超时
>

  <mvc:interceptors>

        <!-- 自动登录拦截器-->
        <mvc:interceptor>
            <mvc:mapping path="/**"/>
            <bean class="com.duyi.onlinevideo.interceptor.AutoLoginInterceptor"></bean>
        </mvc:interceptor>
    </mvc:interceptors>

> 如果有效，直接session放入user，变成已登录
>
> 如果失效，什么都不做！

    <dependency>
      <groupId>javax.mail</groupId>
      <artifactId>mail</artifactId>
      <version>1.4.7</version>
    </dependency>

会员页面

直接在bootstrap 中实例这里复制源代码

图标库（进去下载，然后放在静态资源目录下）

PageHelper分页插件（meavn与xml都需要配置）

 <!-- https://mvnrepository.com/artifact/com.github.pagehelper/pagehelper -->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.2.0</version>
    </dependency>