java web项目：adminsystem（1）

最新推荐文章于 2024-04-22 09:37:27 发布

原创最新推荐文章于 2024-04-22 09:37:27 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #oracle #tomcat #html #css

School_konwledge 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了一个简单的JSP页面构建过程，包括使用HTML、CSS和JavaScript进行基本的前端布局，通过引入自定义的JavaScript库实现动态效果，并讲解了如何在JSP中设置页面属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

准备：
前期准备：安装配置oracle(可在我博客中找到安装oracle 以及配置的文章)；

创建项目adminsystem;
搭建tomcat服务器；
导入项目所需要的jar包，将jar包放入web-inf下的lib文件夹；
第一篇主要讲：html+css布局技术：

本项目的web.xml文件是一键生成的；
第一个jsp页面：
在webcontent下新建一个jsp file;
输入名字index.jsp;
选择字符格式：点开右下角的JSP Templates;
在jsp Files中将修改Encoding为utf-8格式；
创建出第一个jsp页面；
代码如下：

/简易坦克/

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
hello world
<div id="tank"></div>
<!--  
<div class="a"></div>
<div class="a"></div>
-->
<script src="js/zquery.1.0.0.js"></script>
<script src="js/index.js"></script>

</body>
</html>

优化jsp:
在webcontent下新建两个文件夹：css,js;
在css下新建file:index.css,后缀名为css;
在js下新建file:index.js & zquery.1.0.0.js,后缀名为js;
index.css代码：

body{
    color:red;
}
#tank{
    width:100px;
    height:100px;
/*  background:red;  */
    border:1px solid red;
    position:absolute;
}
.a{
    width:100px;
    height:100px;
    background:red;
    margin-bottom:5px;  

}

index.js代码：

var User = function(username,password){
    this.username = username;
    this.password = password;
    this.login = function(){
        console.log(this.username+"has logined!");

    }
}

//var xiaoming = new User("xiaoming","666666");
//xiaoming.login();

//var xiaohong = {username:"xiaohong",password:"666",login:function()
//{console.log(this.username+"has logined!")}}
//xiaohong.login();
//function run(){
//  console.log("123");
//}
//run();
//??????
//var tank = document.getElementById("tank");
var tank = $("#tank");
var run1=function(){
//  console.log("321");
    //interval 间隔2000运动跑
    window.setInterval(function(){
        tank.style.left = tank.offsetLeft+100+"px";
    }, 50)

}
/**
 * 触发事件
 */
tank.onclick = function(){
    run1();
    //alert("321");
}
//run1();

zquery.1.0.0.js代码：

var $ = function(element){
    var ele;
    if(element.indexOf("#")!=-1) //包含#  
        //substring 截取  如112233  截取掉#
        lel=document.getElementById(element.substring(1));
    return lel;
}