用idea从0到1创建一个超市购物平台的javaweb项目【详细版教程上】

关注

最新推荐文章于 2026-06-21 14:17:11 发布 · 4.8k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

IDEA+Java+SSM+JSP+Mysql实现超市订单系统 2.系统首页3.订单管理4.供应商管理5.用户管理6.修改密码三、部分代码BaseControllerBillControllerLoginControllerProviderController四、其他1.更多系统Java+JSP系统系列实现Java+Servlet系统系列实现Java+SSM系统系列实现Java+SSH系统系列实现Java+Springboot系统系列实现2.源码下载3.备注4.支持博主一、系统介绍======1.开发环境开发工具：IDEA2018JDK版本：jdk1.8Mysql版本：阅读详情

在这段时期，屯菜购物平台成了热门网站，解决了最后一公里的送货问题。今天分享的就是一个购物平台web界面的编写过程。
由于篇幅原因，今天先分享页眉部分的代码。

一、前期准备

1、下载并安装好idea程序

2、创建web工程必备的文件夹以及文件

image、css，js三个文件夹、index.html、css文件、js文件。

3、用idea打开这个项目

file–open选择你所创建的文件夹
在这里插入图片描述
图中的.didea文件夹及内容都是系统自动创建的。

4、在index.html文件中关联上css和js文件

如果想直接让系统给出index的框架，那么可以在idea中点击新建HTML
在这里插入图片描述
代码为：（可直接复制）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">//关联上css
    <script type="text/javascript" src="js/first.js"></script>//关联上js
</head>
<body>
buy some food.
</body>
</html>

5、运行程序，在浏览器上显示出

在这里插入图片描述

二、页面头部的基本信息

或者称为页眉区
在这里插入图片描述
页眉区有3个部分，一个是网站logo图片，一个是商品分类的菜单栏，还有一个就是登录/注册部分。这三部分的区分就在于div块。

（一）网站logo块

1、只需要将logo图片关联进div块即可

<div class="logo">
    <img class="logopng" src="image/logo.png">
</div>

2、处于美观考虑，需要设置相关的css
比如图片距离上方和左方的位置，有留白的区域会看着舒服。

.header .logo .logopng{
    float:left;
    /*让logo的图片向左浮动*/
    position:relative;
    max-width:150px;
    max-height:150px;
    /*等比例缩小logo图片*/
}

补充：

类的选择器是.开头，并且每一步都不能跳过
而id选择器由于其唯一性，可以直接用#ID名来选择。

比如上方的logopng如果不是class类名，而是id名。那么在css中可以改为。

#logopng{
    float:left;
    /*让logo的图片向左浮动*/
    position:relative;
    max-width:150px;
    max-height:150px;
    /*等比例缩小logo图片*/
}

（二）菜单栏块

1、基础的HTML代码

<div class="menu" onmouseleave="show_menu1()">
        <div class="menu-title" onclick="show_menu0()">
            <a href="#">商品分类</a>
        </div>
<!--        href=#代表链接到当前页面但不刷新。-->
        <ul id="menu0">
            <li>蔬菜瓜果</li>
            <li>米面油盐</li>
            <li>日用百货</li>
            <li>肉类蛋类</li>
        </ul>
    </div>

前两个div标签中的on开头的语句，是涉及到js的动态交互。第一句是鼠标移开menu模块后的状态。而第二句是鼠标点击商品分类文字时的状态。

2、css代码

.header .menu ul{
    display: none;
    /*将列表中内容隐藏*/
}

.header .menu ul li{
    margin-top: 15px;
    /*设置每个子列表之间的距离*/
    list-style: none;
    /*将列表前面的小圆圈去掉*/
    text-align: center;
    /*将列表中的文字也设置在中间*/

}

.header .menu{
    float:left;
    position:relative;
    margin-top:12px;
    margin-left:60px;
}

.header .menu .menu-title{
    border-bottom: aqua 2px solid;
    //设置商品分类下划线的颜色、宽度。
    padding-bottom: 10px;
    width: 75px;
    text-align: center;

}
a{
    text-decoration: none;
    /*将超链接的下划线去掉*/
}

补充：

如果想要让菜单相对于logo的位置不变
必须将logo块和菜单块的浮动都为相对

3、js代码

show_menu0
鼠标点击商品分类时会跳出子菜单
点击第二次时，会隐藏子菜单

show_menu1
鼠标移出menu菜单时隐藏子菜单

var flag = true;

function show_menu0(){
    var menu0 = document.getElementById("menu0");
    // 获取到列表的内容
    if(flag){
        menu0.style.display="block";
        flag=false;
    }else{
        menu0.style.display="none";
        flag=true}
}

function show_menu1(){
    var menu1=document.getElementById("menu0");
    menu1.style.display="none";
    flag=true;
}

（三）登录/注册列表

1、基础的HTML代码

<div class="auth">
    <ul id="author">
        <li><a href="#">注册</a></li>
        <li><a href="#">登录</a></li>
    </ul>
</div>

2、css代码

列表默认的是竖向排列。
如果要将列表从竖向排列转向横向排列
那么就单独设置li的关系
浮动方式为左侧或者右侧

.header .auth ul{
    float:right;
}
.header .auth ul li{
    float:right;
    margin-right: 30px;
    /*设置每个子列表之间的距离*/
    margin-top: 18px;
    list-style: none;
    /*将列表前面的小圆圈去掉*/
}