SpringBootログイン+ホームページ6組 - 【JSBプロジェクト実戦】

SpringBootシリーズ記事ディレクトリ

SpringBootの知識範囲 - 学習ステップ[JSBシリーズの000]

この校訓シリーズ

無料公開動画を利用してトレーニングクラスへ飛んでください！撲殺されたら出社せず、頑張ってお金を稼ぎます！
パソコンさえあればフロントプロジェクトもリアプロジェクトもできる！N年間一生懸命勉強したのに誰にも頼まれなかった、一度有名になれば、世界はそれを知っています！

SpringBoot テクノロジーは数多くあります

ハン・シュンピン氏は、「JAVAを学ぶ人には2つの大きな困難がある
。1つ目は混乱だ。百度からJAVAに関する知識が多すぎて、何を
学べばいいのか全く分からない。2つ目は、どの順序で学べばいいのか分からないことだ」と述べた。
SpringBoot のこの部分も面接を受けるのに人気です。多くの人の履歴書はパッケージ化され、装飾されています。上記の経験は少なくとも 10K のようですが、彼らはあえて 3K しか要求せず、面接マネージャーは対応できません。
毎日フアンフアンに電話をかけているが、実は彼にはまったく経験がない。王様になりたいだけで、ずっと釣りをしてきました
この【JSBプロジェクト実戦】はSpringBootの学習と使い方についてです（JSBシリーズはチュートリアルです） 実は、基本的にはSpringBootを簡略化したものです。Ruoyi のような完全なセットはありませんが、多くの人はプロジェクトの経験から完全に偽物であり、簡略化されたものは実際には偽物ではありません。そのロールは他の人にとっては正常です。

環境とツール:

このシリーズの環境

環境	win11
道具	アイデア 2017
jk	1.8
データベース	mysql5.5
メイブン	3.2.1
プロジェクトのインポート方法	メイブンインポート
データベースフロントエンドツール	mysql-front (navicat も機能します)

データベース フロントエンド ツール: mysql-front (navicat も利用可能) は
主に PHPStudy 2018 と統合されているため、
環境の重要性については navicat を開くのが面倒な場合があります。上記の「SpringBoot プロジェクトのコンパイルとエラー処理 – JSB シリーズ 001」を直接参照してください。

上部レンダリング

Windows 上の小さなゲームを除いて、システムが何であっても、登録、ログイン、ホームページの作成が許可されていないものはどれですか?
実はホームページの効果をアピールするために来たのです。

ホームページ

最初に、犬がいて、道教の僧侶がそこら中を歩き回っていますが、えー、チャンネルが間違ったチャンネルに接続されています。
小さなサークルから始めて、美しいホームページに接続してください。本当はアニメーションを入れたかったのですが、CSDN では GIF しか入手できないようです。mp4ではなく、通常の形式です。256色のGIFは眩しいですか？写真だけ載せておきます。オーバーアニメーションセルフ脳サプリメント...

ログイン

これは
事実のようです。とにかく、確認コードもあるので、クリックすると変更できます。醜くないとしか言​​いようがないですよね？

プロファイル設定

プロジェクトディレクトリには漢字やスペースを含めることはできないので、素直にC言語で認識できる変数名を使用するのが最善です。

#数据库连接池配置
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.platform=mysql
#配置数据源
spring.datasource.url=jdbc:mysql://localhost:3306/jsb_db_score?characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
#Mybatis配置
#扫描的实体的包
mybatis.typeAliasesPackage=com.score.bean
#扫描的配置文件地址
mybatis.mapperLocations=classpath:mapper/*.xml
#mybatis.configLocation=classpath:mybatis-config.xml
server.port=8080

#控制台打印SQL语句
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl

データソース内の開始するポート番号と
データソースの名前に注意してください。ユーザー名パスワード。なお、mysql のドライバは com.mysql.jdbc.Driver で、
一般的に
com.mysql.jdbc.Driverは mysql-connector-java 5.5 より前、
com.mysql.cj.jdbc.Drivermysql-connector-java 6 および 6 以降となります
。初心者は最新版が良いという誤解に陥りがちですが、実際のところ、彼の書いた内容は明らかに JDK6.0 には十分である可能性が高いです。自分のマシンのメモリが足りないと叫びながら、使えないものをメモリに任せていた。たとえば、アイデアはこれらの開発者ツールの中で最も行き詰まっていると考えるべきです。Web ページをいくつか開くだけの人もいるかもしれないので、Webstorm を使用してみてはいかがでしょうか? 大量のコードを記述する場合でも、軽量の VSCode を選択してみてはいかがでしょうか?

データベースをインポートする

mysql-front または navicat を開きます。
注: データベース名:jsb_db_scoreスーパー ユーザー: root パスワード: 123456
この例の添付ファイルを実行するだけです。データベースの正常なインポートのスクリーンショットは次のとおりです。
システム ユーザー ログイン: (アカウント名: 管理者パスワード: 123456) MD5 暗号化を使用しない場合、

ER 図は次のようになります。

プロジェクト ディレクトリを次の図に示します。

SpringBoot に慣れていない人は、ディレクトリ階層に注意して [JSB シリーズ] を注意深く学習してください。

パブリックとテンプレートの違いについては「SpringBootプロジェクトのWEBページの配置場所 – 【JSBシリーズ008】」を参照してください。

コード部分:

コントローラ

package com.score.controller;

import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.score.bean.ResultObject;
import com.score.bean.TStudent;
import com.score.bean.User;
import com.score.service.IUserService;
import com.score.service.TStudentService;
import com.score.util.Constant;

/**
 * @author hmg
 *
 */
@RequestMapping("/user")
@RestController //标识为返回类型为Json的控制器
public class UserController {
    
    
	
	//自动注入服务类
	@Autowired
	private IUserService userService;
	
	@Autowired
	private TStudentService studentService;
	
    //标识请求地址
    @RequestMapping("/login")
    public ResultObject<List<User>> getUsers(User user,HttpServletRequest request) {
    
    
    	//查询用户列表
    	List<User> list= userService.getUser(user);
    	ResultObject<List<User>> rs=new ResultObject<List<User>>();
    	if(list.isEmpty()) {
    
    
    		//状态码
        	rs.setCode(Constant.FAILURE_RETUEN_CODE);
        	//提示
        	rs.setMsg("登录失败");
    	}else {
    
    
    		//状态码
        	rs.setCode(Constant.SUCCESS_RETUEN_CODE);
        	request.getSession().setAttribute("user", list.get(0));
        	//提示
        	rs.setMsg("登录成功");
    	}    	
    	//数据
    	rs.setData(list);
        return rs;
    }
    @RequestMapping("/loginOut")
    public ResultObject<Object> loginOut(HttpServletRequest request) {
    
    
    	//查询用户列表
    	ResultObject<Object> rs=new ResultObject<Object>();
    	request.getSession().removeAttribute("user");	
    	//数据
    	rs.setCode(Constant.SUCCESS_RETUEN_CODE);
    	rs.setMsg("退出成功");
        return rs;
    }
    
    //标识请求地址
    @RequestMapping("/studentLogin")
    public ResultObject<List<TStudent>> studentLogin(User user,HttpServletRequest request) {
    
    
    	//查询用户列表
    	TStudent student=new TStudent();
    	student.setStudentNo(Integer.parseInt(user.getUserName()));
    	student.setStuPass(user.getPassword());
    	List<TStudent> list= studentService.selectloginStudent(student);
    	ResultObject<List<TStudent>> rs=new ResultObject<List<TStudent>>();
    	if(list.isEmpty()) {
    
    
    		//状态码
        	rs.setCode(Constant.FAILURE_RETUEN_CODE);
        	//提示
        	rs.setMsg("登录失败");
    	}else {
    
    
    		//状态码
        	rs.setCode(Constant.SUCCESS_RETUEN_CODE);
        	request.getSession().setAttribute("student", list.get(0));
        	//提示
        	rs.setMsg("登录成功");
    	}    	
    	//数据
    	rs.setData(list);
        return rs;
    }
    @RequestMapping("/studentloginOut")
    public ResultObject<Object> studentloginOut(HttpServletRequest request) {
    
    
    	//查询用户列表
    	ResultObject<Object> rs=new ResultObject<Object>();
    	request.getSession().removeAttribute("student");	
    	//数据
    	rs.setCode(Constant.SUCCESS_RETUEN_CODE);
    	rs.setMsg("退出成功");
        return rs;
    }
    
}

フィルター

Spring セキュリティはありませんが、単純なアクセス許可を制御する必要があり、インデックスを直接通過することはできません。これは前の要件とは異なります。「SpringBoot は SSM プロジェクトをプッシュする方法のみを知っています – [JSB プロジェクト戦闘]」を参照してください
。そのため、段階的に学習するのが最善です。このようにして得た知識は十分に確かなものです。
構成クラスは間違いなく必須です。
このナレッジポイントについては、「SpringBoot 構成クラス – JSB シリーズ 003」を参照してください。

package com.score.interceptor;

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class FilterConfig {
    
    
 
    @Bean
    public FilterRegistrationBean registFilter() {
    
    
        FilterRegistrationBean registration = new FilterRegistrationBean();
        registration.setFilter(new LoginFilter());
        registration.addUrlPatterns("/*");
        registration.setName("loginFilter");
        registration.setOrder(1);
        return registration;
    }
 
}

その場合、フィルター コードは次のようになります。

package com.score.interceptor;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.score.util.Constant;

@WebFilter(filterName = "loginFilter", urlPatterns = "/*.html")
public class LoginFilter implements Filter {
    
    
 
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    
    
 
        System.out.println("----------------------->过滤器被创建");
    }
 
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    
    
 
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response=(HttpServletResponse)servletResponse;
        String requestURI = request.getRequestURI();
        System.out.println("--------------------->过滤器：请求地址"+requestURI);
        if(Constant.loginUrl.equals(requestURI)||requestURI.contains(Constant.AESSET)||Constant.LOGIN_URI.equals(requestURI)||Constant.STUDENT_LOGIN_URL.equals(requestURI)) {
    
    
         	  filterChain.doFilter(servletRequest, servletResponse);
        }else {
    
    
        	  if(Constant.STUDENT_INDEX.equals(requestURI)||Constant.MY_SCORE.equals(requestURI)||
        			  Constant.STUDENT_LOGINOUT_URL.equals(requestURI)||Constant.GET_MY_SCORE.equals(requestURI)||
        			  	Constant.SCORE.equals(requestURI)||Constant.GET_MY_SCORE_COUNT.equals(requestURI)
        			  ) {
    
    
        		  Object obj=request.getSession().getAttribute("student");
                  if(obj==null){
    
    
                  	response.sendRedirect("/login.html");
                  	return;
                  }else {
    
    
                  	 filterChain.doFilter(servletRequest, servletResponse);
                  }
        	  }else {
    
    
        		  Object obj=request.getSession().getAttribute("user");
                  if(obj==null){
    
    
                  	response.sendRedirect("/login.html");
                  	return;
                  }else {
    
    
                  	 filterChain.doFilter(servletRequest, servletResponse);
                  }
        	  }
             
        }
    }
    @Override
    public void destroy() {
    
    
        System.out.println("----------------------->过滤器被销毁");
    }

}

フィルターやセッションの状況を詳細に分析

実際、この方法はプロジェクトで最初に使用された方法でした。Cookie 方法が徐々に使われるようになったのは、クライアントのコンピュータのパフォーマンスが向上してからです。「3Q 戦争」により、Cookie のセキュリティ問題が最前線に押し上げられ、再びセッション ログイン方法に戻りました。正確に言うと、現在 1 台のサーバーで 100 万人のユーザーをサポートできます。クラスターのグループはどうなるのでしょうか? ファーウェイのような大企業でも、依然としてセッション方式を使用しているシステム（もちろんすべてではない一部のシステム）があるのはこのためです。なぜ Huawei のユーザーの 1% であってもまだ springCloud や JWT、トークンなどのフルセットを使用しているのかについては、これは同社の戦略としか言いようがありません。
一部の問題は技術的な問題ではなく、会社の運営上の意思決定に重要です。労働者としては、会社が使うものであれば何でもいいのです！

表紙

	<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>后台登录</title>
		<link rel="stylesheet" type="text/css" href="assets/admin/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="assets/admin/css/login.css" />
		<script src="assets/js/aJaxUtil.js"></script>
		<script src="assets/js/jquery-3.3.1.min.js"></script>
	</head>

	<body>
		<div class="m-login-bg">
			<div class="m-login">
				<h3>范德彪成绩管理查询系统</h3>
				<div class="m-login-warp">
					<form class="layui-form">
						<div class="layui-form-item">
							<input type="text" name="userName" required lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-form-item">
							<input type="password" name="password" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
						</div>
						<div class="layui-form-item">
							<input type="radio" name="type" value="1" title="教师" checked="">
      						<input type="radio" name="type" value="2" title="学生">
						</div>
						<div class="layui-form-item m-login-btn">
							<div class="layui-inline">
								<button class="layui-btn layui-btn-normal" lay-submit lay-filter="login">登录</button>
							</div>
							<div class="layui-inline">
								<button type="reset" class="layui-btn layui-btn-primary">取消</button>
							</div>
						</div>
					</form>
				</div>
				<p class="copyright" style="color: #00b7ee"><a href="https://blog.csdn.net/dearmite">Copyright 2021 by 项目开发后花园</a></p>
			</div>
		</div>
		<script src="assets/admin/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
		<script>
			layui.use(['form', 'layedit', 'laydate','jquery'], function() {
    
    
				var form = layui.form,
					layer = layui.layer,
					admin = layui.admin,
					$ = layui.jquery;

				//自定义验证规则
				form.verify({
    
    
					userName: function(value) {
    
    
						if(value.length < 4) {
    
    
							return '用户名至少4个字符';
						}
					},
					password: [/(.+){
    
    5,12}$/, '密码必须5到12位']
					
				});
				//监听提交
				form.on('submit(login)', function(data) {
    
    
					   var str = JSON.stringify(data.field);
			            var param = JSON.parse(str);
			     		if("1"==param.type){
    
    
			     			$.ajax({
    
    
				                //几个参数需要注意一下
				                    type: "POST",//方法类型
				                    dataType: "json",//预期服务器返回的数据类型
				                    url: "/user/login",//url
				                    data: param,
				                    success: function (result) {
    
    
				                    	if (result.code == "0") {
    
    
						                       location.href="/index.html";
						                    } else {
    
    
						                        layer.msg('用户名密码错误', {
    
    
						                            icon: 5
						                        });
						                    }
				                    },
				                    error : function() {
    
    
				                    	layer.msg('服务器错误', {
    
    
				                            icon: 5
				                        });
				                    }
				                });
			     		}else{
    
    
			     			debugger;
			     			var userName=param.userName;
			     			var reg=/^[\d]{
    
    6,10}$/;
			     			if(userName.length>10){
    
    
			     				layer.msg('学号长度不能大于10位', {
    
    
		                            icon: 5
		                        });
			     			}
			     			if(reg.test(userName)){
    
    
			     				$.ajax({
    
    
					                //几个参数需要注意一下
					                    type: "POST",//方法类型
					                    dataType: "json",//预期服务器返回的数据类型
					                    url: "/user/studentLogin",//url
					                    data: param,
					                    success: function (result) {
    
    
					                    	if (result.code == "0") {
    
    
							                       location.href="/student-index.html";
							                    } else {
    
    
							                        layer.msg('用户名密码错误', {
    
    
							                            icon: 5
							                        });
							                    }
					                    },
					                    error : function() {
    
    
					                    	layer.msg('服务器错误', {
    
    
					                            icon: 5
					                        });
					                    }
					                });
			     			}else{
    
    
			     				layer.msg('学生角色登录请使用学号', {
    
    
		                            icon: 5
		                        });
			     			}
			     		}	
					return false;
				});

			});
		</script>
	</body>

</html>

ホームページは一般に複雑なので、2,000 行を超えるホームページもよくありますが、すべて読むことができると思いますか? 私が皆さんに伝えたいのは、美しさには代償があるということです。ここでは、login.html のページ コードを示します。
最後に表示されたインターフェイス:

その他サポートページ表示

2番目のスキームのページに直接移動します

第3弾企画のページ。

パッケージ 4 のめちゃくちゃ長い長いページ。

e コマースとホームページを使用しない 5 ページのマッチング

ミニ電子商取引のパッケージ 6

サポートリソース

VIP はありません。ポイント数に応じて異なります。CSDN は価格を引き上げるようです。

手術：

いいえ、理解してください。彪神
の古典的な引用です。プロジェクトを学ぶときは柔軟でなければなりません。対戦相手がルーチンに従ってカードをプレイしない場合、ルーチンに従ってプレイすることはできません。