【Javaweb项目实战】黑马旅游网

本次项目主要有以下几个重点导入项目、优化servlet、前后台勾连等。

如图片所示，这是一个常见的网站首页，包括登录、注册、查看相关信息的功能。

但要怎么实现呢？

除了准备好相应的图片文字信息，我们要怎么做才能让它拥有以上功能并展示在页面上呢？

抱着这样的疑惑，我们慢慢来一探究竟吧？

首先是基本准备（也可以使用maven直接导入半成品项目）：

后端：

 还有要提前建立存放图片和文字资源的数据库。

这里我使用的是Navicat软件。

这是一款可视化建库软件，使用起来非常方便。

前端及资源文件：

看到pom.xml文件了吗？这表示 我是从maven导入的半成品项目，接下来我们来了解一下如何使用maven导入项目。

maven导入项目：

maven：Maven是一个跨平台的项目管理工具，是Apache组织中的一个颇为成功的开源项目。Maven主要服务基于java的项目构建，项目信息管理和依赖管理。

作用：
1.Maven可以创建项目。
2.Maven可以引入依赖的jar包。
在Maven中有一个核心的概念--仓库，分为本地仓库和远程仓库。远程仓库又分为中央仓库，私服和其他仓库。

首先是确保自己下载了maven的资源文件，并且IDE安装并启动了maven插件：

打开设置：

 以上准备操作没有问题就会在右侧导航栏出现以下内容：

 点击maven，出现以下内容：

 点击“+”号，导入项目。

 选择pom.xml文件，点击OK完成项目导入，初始化微微等待一会即可。

以下是pom.xml文件的内容，我们可以看到里面包含了诸多插件的信息，这是依赖管理：对jar包统一管理的过程

"1.0" encoding="UTF-8"?>
 
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0modelVersion>
 
  <groupId>cn.itcastgroupId>
  <artifactId>travelartifactId>
  <version>1.0-SNAPSHOTversion>
  <packaging>warpackaging>
    <dependencies>
        <dependency>
            <groupId>junitgroupId>
            <artifactId>junitartifactId>
            <version>3.8.1version>
            <scope>testscope>
        dependency>
        
        <dependency>
            <groupId>javax.servletgroupId>
            <artifactId>javax.servlet-apiartifactId>
            <version>3.1.0version>
            <scope>providedscope>
        dependency>
 
 
        
        <dependency>
            <groupId>mysqlgroupId>
            <artifactId>mysql-connector-javaartifactId>
            <version>5.1.26version>
            <scope>compilescope>
        dependency>
        
        <dependency>
            <groupId>com.alibabagroupId>
            <artifactId>druidartifactId>
            <version>1.0.9version>
        dependency>
        
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-coreartifactId>
            <version>4.1.2.RELEASEversion>
            <scope>compilescope>
        dependency>
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-jdbcartifactId>
            <version>4.1.2.RELEASEversion>
            <scope>compilescope>
        dependency>
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-txartifactId>
            <version>4.1.2.RELEASEversion>
            <scope>compilescope>
        dependency>
        <dependency>
            <groupId>org.springframeworkgroupId>
            <artifactId>spring-beansartifactId>
            <version>4.1.2.RELEASEversion>
            <scope>compilescope>
        dependency>
        <dependency>
            <groupId>commons-logginggroupId>
            <artifactId>commons-loggingartifactId>
            <version>1.1.1version>
            <scope>compilescope>
        dependency>
        
        <dependency>
            <groupId>commons-beanutilsgroupId>
            <artifactId>commons-beanutilsartifactId>
            <version>1.9.2version>
            <scope>compilescope>
        dependency>
        
        <dependency>
            <groupId>com.fasterxml.jackson.coregroupId>
            <artifactId>jackson-databindartifactId>
            <version>2.3.3version>
        dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.coregroupId>
            <artifactId>jackson-coreartifactId>
            <version>2.3.3version>
        dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.coregroupId>
            <artifactId>jackson-annotationsartifactId>
            <version>2.3.3version>
        dependency>
 
 
        
        <dependency>
            <groupId>javax.mailgroupId>
            <artifactId>javax.mail-apiartifactId>
            <version>1.5.6version>
        dependency>
        <dependency>
            <groupId>com.sun.mailgroupId>
            <artifactId>javax.mailartifactId>
            <version>1.5.3version>
        dependency>
        
        <dependency>
            <groupId>redis.clientsgroupId>
            <artifactId>jedisartifactId>
            <version>2.7.0version>
        dependency>
 
    dependencies>
 
 
    <build>
        
        <plugins>
            
            <plugin>
                <groupId>org.apache.maven.pluginsgroupId>
                <artifactId>maven-compiler-pluginartifactId>
                <configuration>
                    <source>1.8source>
                    <target>1.8target>
                    <encoding>utf-8encoding>
                configuration>
            plugin>
            
            <plugin>
                <groupId>org.apache.tomcat.mavengroupId>
                
                <artifactId>tomcat7-maven-pluginartifactId>
                <version>2.1version>
                <configuration>
                    
                    <port>80port>
                    
                    <path>/path>
                configuration>
            plugin>
 
        plugins>
    build>
project>

项目导入成功之后我们便要启动项目：

项目启动:

方式一：

 启动Tomcat7：run；的命令

方式二：配置maven快捷启动

 

 启动项目之后来分析一下每一层我们要做的事情：

技术选型：

1. 1. Web层

1. 1. Servlet：前端控制器
   2. html：视图
   3. Filter：过滤器
   4. BeanUtils：数据封装
   5. Jackson：json序列化工具

1. 1. Service层

1. 1. Javamail：java发送邮件工具
   2. Redis：nosql内存数据库
   3. Jedis：java的redis客户端

1. 1. Dao层

1. 1. Mysql：数据库
   2. Druid：数据库连接池
   3. JdbcTemplate：jdbc的工具

现在我们手里已经有了一个前端页面后端实体类已经写好的网页，接下来要让它具备登录注册的功能。

注册功能:

页面效果：

 

前台代码设计：

html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>注册title>
        <link rel="stylesheet" type="text/css" href="css/common.css">
        <link rel="stylesheet" href="css/register.css">
		
		<script src="js/jquery-3.3.1.js">script>
 
		<script>
			/*
				表单校验：
					1.用户名：单词字符，长度8到20位
					2.密码：单词字符，长度8到20位
					3.email：邮件格式
					4.姓名：非空
					5.手机号：手机号格式
					6.出生日期：非空
					7.验证码：非空
			 */
 
			//校验用户名
			//单词字符，长度4到20位
			function checkUsername() {
                //1.获取用户名值
				var username = $("#username").val();
				//2.定义正则
				var reg_username = /^\w{4,20}$/;
				
				//3.判断，给出提示信息
			    var flag = reg_username.test(username);
			    if(flag){
			        //用户名合法
                    $("#username").css("border","");
				}else{
			        //用户名非法,加一个红色边框
					$("#username").css("border","1px solid red");
				}
			    
                return flag;
            }
 
            //校验密码
            function checkPassword() {
                //1.获取密码值
                var password = $("#password").val();
                //2.定义正则
                var reg_password = /^\w{6,20}$/;
 
                //3.判断，给出提示信息
                var flag = reg_password.test(password);
                if(flag){
                    //密码合法
                    $("#password").css("border","");
                }else{
                    //密码非法,加一个红色边框
                    $("#password").css("border","1px solid red");
                }
 
                return flag;
            }
 
            //校验邮箱
			function checkEmail(){
			    //1.获取邮箱
				var email = $("#email").val();
				//2.定义正则		itcast@163.com
				var reg_email = /^\w+@\w+\.\w+$/;
 
				//3.判断
				var flag = reg_email.test(email);
				if(flag){
                    $("#email").css("border","");
				}else{
                    $("#email").css("border","1px solid red");
				}
 
				return flag;
			}
			//校验姓名
			//非空单词字符，长度1到10位
			function checkName() {
				//1.获取姓名
				var name = $("#name").val();
				//2.定义姓名正则
				var reg_name = /^\w{1,10}$/;
 
				//3.判断，给出提示信息
				var flag = reg_name.test(name);
				if (name!=null){
					if(flag){
						//姓名合法
						$("#name").css("border","");
					}
 
				}else{
					//姓名非法,加一个红色边框
					$("#name").css("border","1px solid red");
				}
 
				return flag;
			}
			//校验手机号
			//非空单词字符，长度11位
			function checkPhoneNumber() {
				//1.获取用号码
				var number = $("#number").val();
				//2.定义11位手机号码正则
				var reg_number = /^[1][3,4,5,7,8][0-9]{9}$/;
 
				//3.判断，给出提示信息
				var flag = reg_number.test(number);
 
				if(flag){
						//号码合法
						$("#number").css("border","");
 
 
				}else{
					//号码非法,加一个红色边框
					$("#number").css("border","1px solid red");
				}
 
				return flag;
			}
			//校验生日
			function checkBirthday() {
				//1.获取生日
				var birthday = $("#birthday").val();
				//2.定义日期正则
				var reg_birthday =/^((?:19[2-9]\d{1})|(?:20(?:(?:0[0-9])|(?:1[0-8]))))\-((?:0?[1-9])|(?:1[0-2]))\-((?:0?[1-9])|(?:[1-2][0-9])|30|31)$/;
 
				//3.判断，给出提示信息
				var flag = reg_birthday.test(birthday);
 
				if(flag){
					//生日合法
					$("#birthday").css("border","");
 
 
				}else{
					//生日非法,加一个红色边框
					$("#birthday").css("border","1px solid red");
				}
 
				return flag;
			}
			//校验4位验证码authCode
			function checkAuthCode() {
				//1.获取密码值
				var authCode = $("#authCode").val();
				//2.定义正则
				var reg_authCode = /^\w{4}$/;
 
				//3.判断，给出提示信息
				var flag = reg_authCode.test(authCode);
				if(flag){
					//密码合法
					$("#authCode").css("border","");
				}else{
					//密码非法,加一个红色边框
					$("#authCode").css("border","1px solid red");
				}
 
				return flag;
			}
 
 
			$(function () {
                //当表单提交时，调用所有的校验方法
				$("#registerForm").submit(function(){
					//1.发送数据到服务器
					if(checkUsername() && checkPassword() && checkEmail()){
					    //校验通过,发送ajax请求，提交表单的数据   username=zhangsan&password=123
 
						$.post("user/regist",$(this).serialize(),function(data){
							//处理服务器响应的数据  data  {flag:true,errorMsg:"注册失败"}
 
							if(data.flag){
							    //注册成功，跳转成功页面
								location.href="register_ok.html";
							}else{
							    //注册失败,给errorMsg添加提示信息
								$("#errorMsg").html(data.errorMsg);
 
							}
						});
 
					}
					//2.不让页面跳转
                    return false;
                    //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
				});
 
                //当某一个组件失去焦点是，调用对应的校验方法
				$("#username").blur(checkUsername);
                $("#password").blur(checkPassword);
                $("#email").blur(checkEmail);
                $("#name").blur(checkName);
                $("#number").blur(checkPhoneNumber);
                $("#birthday").blur(checkBirthday);
                $("#authCode").blur(changeCheckCode);
 
 
            });
 
 
		script>
 
 
    head>
	<body>
	
	<div id="header">div>
        
    	<div class="rg_layout">
    		<div class="rg_form clearfix">
    			<div class="rg_form_left">
    				<p>新用户注册p>
    				<p>USER REGISTERp>
    			div>
    			<div class="rg_form_center">
					<div id="errorMsg" style="color:red;text-align: center">div>
					
    				<form id="registerForm" action="user">
						
						<input type="hidden" name="action" value="register">
    					<table style="margin-top: 25px;">
    						<tr>
    							<td class="td_left">
    								<label for="username">用户名label>
    							td>
    							<td class="td_right">
    								<input type="text" id="username" name="username" placeholder="请输入4-20位账号">
    							td>
    						tr>
    						<tr>
    							<td class="td_left">
    								<label for="password">密码label>
    							td>
    							<td class="td_right">
    								<input type="text" id="password" name="password" placeholder="请输入6-10位密码">
    							td>
    						tr>
    						<tr>
    							<td class="td_left">
    								<label for="email">Emaillabel>
    							td>
    							<td class="td_right">
    								<input type="text" id="email" name="email" placeholder="请输入Email">
    							td>
    						tr>
    						<tr>
    							<td class="td_left">
    								<label for="name">姓名label>
    							td>
    							<td class="td_right">
    								<input type="text" id="name" name="name" placeholder="请输入真实姓名">
    							td>
    						tr>
    						<tr>
    							<td class="td_left">
    								<label for="telephone">手机号label>
    							td>
    							<td class="td_right">
    								<input type="text" id="telephone" name="telephone" placeholder="请输入您的11位手机号">
    							td>
    						tr>
    						<tr>
    							<td class="td_left">
    								<label for="sex">性别label>
    							td>
    							<td class="td_right gender">
    								<input type="radio" id="sex" name="sex" value="男" checked> 男
    								<input type="radio" name="sex" value="女"> 女
    							td>
    						tr>
    						<tr>
    							<td class="td_left">
    								<label for="birthday">出生日期label>
    							td>
    							<td class="td_right">
    								<input type="date" id="birthday" name="birthday" placeholder="年/月/日">
    							td>
    						tr>
    						<tr>
    							<td class="td_left">
    								<label for="check">验证码label>
    							td>
    							<td class="td_right check">
    								<input type="text" id="check" name="check" class="check">
    								<img src="checkCode" height="32px" alt="" onclick="changeCheckCode(this)">
									<script type="text/javascript">
										//图片点击事件
										function changeCheckCode(img) {
											img.src="checkCode?"+new Date().getTime();
                                        }
									script>
    							td>
    						tr>
    						<tr>
    							<td class="td_left"> 
    							td>
    							<td class="td_right check"> 
    								<input type="submit" class="submit" value="注册">
									<span id="msg" style="color: red;">span>
    							td>
    						tr>
    					table>
    				form>
    			div>
    			<div class="rg_form_right">
    				<p>
    					已有账号？
    					<a href="#">立即登录a>
    				p>
    			div>
    		div>
    	div>
        
    	<div id="footer">div>
		
		<script type="text/javascript" src="js/include.js">script>
    	
    body>
html>

 

异步(ajax)提交表单：

 后台代码实现：

RegistUserServlet

package cn.itcast.travel.web.servlet;
 
import cn.itcast.travel.domain.ResultInfo;
import cn.itcast.travel.domain.User;
import cn.itcast.travel.service.UserService;
import cn.itcast.travel.service.impl.UserServiceImpl;
import cn.itcast.travel.service.impl.routeServiceImpl;
import cn.itcast.travel.service.routeService;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.apache.commons.beanutils.BeanUtils;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;
 
@WebServlet("/registUserServlet")
public class RegistUserServlet extends HttpServlet {
 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 
 
        //验证校验
        String check = request.getParameter("check");
        //从sesion中获取验证码
        HttpSession session = request.getSession();
        String checkcode_server = (String) session.getAttribute("CHECKCODE_SERVER");
        session.removeAttribute("CHECKCODE_SERVER");//为了保证验证码只能使用一次
        //比较
        if(checkcode_server == null || !checkcode_server.equalsIgnoreCase(check)){
            //验证码错误
            ResultInfo info = new ResultInfo();
            //注册失败
            info.setFlag(false);
            info.setErrorMsg("验证码错误");
            //将info对象序列化为json
            ObjectMapper mapper = new ObjectMapper();
            String json = mapper.writeValueAsString(info);
            response.setContentType("application/json;charset=utf-8");
            response.getWriter().write(json);
            return;
        }
 
        //1.获取数据
        Map map = request.getParameterMap();
 
        //2.封装对象
        User user = new User();
        try {
            BeanUtils.populate(user,map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        System.out.println(user);
 
        //3.调用service完成注册
        UserService service = new UserServiceImpl();
        boolean flag = service.regist(user);
        ResultInfo info = new ResultInfo();
        //4.响应结果
        if(flag){
            //注册成功
            info.setFlag(true);
        }else{
            //注册失败
            info.setFlag(false);
            info.setErrorMsg("注册失败!");
        }
 
        //将info对象序列化为json
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(info);
 
        //将json数据写回客户端
        //设置content-type
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().write(json);
 
 
    }
 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

 有了请求信息，我们现在要做的就是做可注册用户的校验和存入注册信息到数据库。

编写UserService以及UserServiceImpl：

 

public class UserServiceImpl implements UserService {
 
    private UserDao userDao = new UserDaoImpl();
    /**
     * 注册用户
     * @param user
     * @return
     */
    @Override
    public boolean regist(User user) {
        //1.根据用户名查询用户对象
        User u = userDao.findByUsername(user.getUsername());
        //判断u是否为null
        if(u != null){
            //用户名存在，注册失败
            return false;
        }
        //2.保存用户信息
        userDao.save(user);
        return true;
}

Dao部分：

userDao：

 UserDaoImpl：

public class UserDaoImpl implements UserDao {
 
    private JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
 
    @Override
    public User findByUsername(String username) {
        User user = null;
        try {
            //1.定义sql
            String sql = "select * from tab_user where username = ?";
            //2.执行sql
            user = template.queryForObject(sql, new BeanPropertyRowMapper(User.class), username);
        } catch (Exception e) {
 
        }
 
        return user;
    }
 
    @Override
    public void save(User user) {
        //1.定义sql
        String sql = "insert into tab_user(username,password,name,birthday,sex,telephone,email,status,code) values(?,?,?,?,?,?,?,?,?)";
        //2.执行sql
 
        template.update(sql,user.getUsername(),
                    user.getPassword(),
                user.getName(),
                user.getBirthday(),
                user.getSex(),
                user.getTelephone(),
                user.getEmail(),
                user.getStatus(),
                user.getCode()
                );
    }
}

完成这个功能之后我们需要激活账户。

现在常用的方法是通过邮件验证激活。

具体操作如下：

邮件激活功能：

1. 申请邮箱
2. 开启授权码
3. 在MailUtils中设置自己的邮箱账号和密码(授权码)

 

邮件工具类：MailUtils，调用其中sendMail方法可以完成邮件发送：

MailUtils：

package cn.itcast.travel.util;
 
import javax.mail.*;
import javax.mail.internet.InternetAddress;
import javax.mail.internet.MimeMessage;
import java.util.Properties;
 
/**
 * 发邮件工具类
 */
public final class MailUtils {
    private static final String USER = "********@qq.com"; // 发件人称号，同邮箱地址
    private static final String PASSWORD = "**********"; // 如果是qq邮箱可填写户端授权码，或者登录密码
 
    /**
     *
     * @param to 收件人邮箱
     * @param text 邮件正文
     * @param title 标题
     */
    /* 发送验证信息的邮件 */
    public static boolean sendMail(String to, String text, String title){
        try {
            final Properties props = new Properties();
            props.put("mail.smtp.auth", "true");
            props.put("mail.smtp.host", "smtp.qq.com");
 
            // 发件人的账号
            props.put("mail.user", USER);
            //发件人的密码
            props.put("mail.password", PASSWORD);
 
            // 构建授权信息，用于进行SMTP进行身份验证
            Authenticator authenticator = new Authenticator() {
                @Override
                protected PasswordAuthentication getPasswordAuthentication() {
                    // 用户名、密码
                    String userName = props.getProperty("mail.user");
                    String password = props.getProperty("mail.password");
                    return new PasswordAuthentication(userName, password);
                }
            };
            // 使用环境属性和授权信息，创建邮件会话
            Session mailSession = Session.getInstance(props, authenticator);
            // 创建邮件消息
            MimeMessage message = new MimeMessage(mailSession);
            // 设置发件人
            String username = props.getProperty("mail.user");
            InternetAddress form = new InternetAddress(username);
            message.setFrom(form);
 
            // 设置收件人
            InternetAddress toAddress = new InternetAddress(to);
            message.setRecipient(Message.RecipientType.TO, toAddress);
 
            // 设置邮件标题
            message.setSubject(title);
 
            // 设置邮件的内容体
            message.setContent(text, "text/html;charset=UTF-8");
            // 发送邮件
            Transport.send(message);
            return true;
        }catch (Exception e){
            e.printStackTrace();
        }
        return false;
    }
 
    public static void main(String[] args) { // 做测试用
        MailUtils.sendMail("2621247177@qq.com","你好，这是一封测试邮件，无需回复。","测试邮件");
        System.out.println("发送成功");
    }
 
 
 
}

用户点击邮件激活：用户激活其实就是修改用户表中的status为‘Y’

 修改保存Dao代码，加上存储status和code 的代码逻辑：

 

激活代码实现：

ActiveUserServlet：

package cn.itcast.travel.web.servlet;
 
import cn.itcast.travel.service.UserService;
import cn.itcast.travel.service.impl.UserServiceImpl;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
 
@WebServlet("/activeUserServlet")
public class ActiveUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取激活码
        String code = request.getParameter("code");
        if(code != null){
            //2.调用service完成激活
            UserService service = new UserServiceImpl();
            boolean flag = service.active(code);
 
            //3.判断标记
            String msg = null;
            if(flag){
                //激活成功
                msg = "激活成功，请登录";
            }else{
                //激活失败
                msg = "激活失败，请联系管理员!";
            }
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().write(msg);
        }
 
    }
 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

UserService：active：

  /**
     * 激活用户
     * @param code
     * @return
     */
    @Override
    public boolean active(String code) {
        //1.根据激活码查询用户对象
        User user = userDao.findByCode(code);
        if(user != null){
            //2.调用dao的修改激活状态的方法
            userDao.updateStatus(user);
            return true;
        }else{
            return false;
        }
 
 
 
    }

 userDao：之后会有相同的流程，为了便捷，接口部分将省略不写，对三层架构有了解的小伙伴应该对这个流程轻车熟路了。

 

  userDaoImpl：

  /**
     * 根据激活码查询用户对象
     * @param code
     * @return
     */
    @Override
    public User findByCode(String code) {
        User user = null;
        try {
            String sql = "select * from tab_user where code = ?";
 
            user = template.queryForObject(sql,new BeanPropertyRowMapper(User.class),code);
        } catch (DataAccessException e) {
            e.printStackTrace();
        }
 
        return user;
    }
 
    /**
     * 修改指定用户激活状态
     * @param user
     */
    @Override
    public void updateStatus(User user) {
        String sql = " update tab_user set status = 'Y' where uid=?";
        template.update(sql,user.getUid());
    }

登录功能的实现：

前台代码：

login.html

 

 
    "utf-8">
    "X-UA-Compatible" content="IE=edge">
    "viewport" content="width=device-width, initial-scale=1">
      
    "stylesheet" type="text/css" href="css/common.css">
    "stylesheet" type="text/css" href="css/login.css">