1. System introduction
This project is developed usingidea tools, jsp+spring+spring-mvc+mybatis+jquery< /span> development tool. navicatTechnically written, the database uses mysql,
The system is divided into 2 roles: administrator and user
2. Module Introduction
administrator
1. Login
2. User management
3. Carousel image management
4. First-level classification management
5. Secondary classification management
6. Product management
7. Order management
8. Express delivery management
9. Comment management
10. Personal information management
user
1. Log in and register
2. Browse products
3. Add to cart
4. Purchase goods
5. Comment on products
7. Personal information management
8. View orders
9. Check express delivery
Project Introduction
Difficulty Level: ✩✩
User Type: 2 Roles (Administrator, User)
Design pattern: MVC
Project architecture: B/S architecture
Development language: Java language
Front-end technology: HTML, CSS, JS, JQuery, etc.
Back-end technology: JSP, ssm framework
Running environment: Windows 7 or 10, JDK1.8
Run Tools: This system is developed using idea. It only supports idea running and does not support MyEclipse and eclipse running. Because the skeletons of the three are different, forcing the import to open and run may cause unknown errors.
Database: MySQL5.5/5.7/8.0 version
Running server: Tomcat7.0/8.0/8.5/9.0 and other versions
Whether it is based on Maven environment: No
Whether it uses a framework: Yes
Number of database tables: 11 tables
JSP page Quantity: more than 30 pieces
Whether there is pagination: There is pagination
Related screenshots
Related code
Log in
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>登录</title>
<link rel="icon" href="<%=path%>/resource/static/favicon.ico">
<link rel="stylesheet" href="<%=path%>/resource/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="<%=path%>/resource/static/admin/css/login.css">
<script src="<%=path%>/resource/static/js/vue.min.js"></script>
<script src="<%=path%>/resource/static/js/jquery-3.3.1.min.js"></script>
<script src="<%=path%>/resource/static/bootstrap/js/bootstrap.bundle.js"></script>
</head>
<style>
body{
background-image:url(<%=path%>/resource/back.jpeg) ;/*插入的背景图片的url
background-attachment: fixed;/*背景图片不会固定不会因页面滚动而重复*/
background-repeat: no-repeat;/*使图片不管任何大小都不会重复*/
background-size: 100%;/*改变背景图的长和宽*/
}
</style>
<body>
<div class="login" style="height: 50%">
<form id="saveForm">
<h2>美妆购物平台登录</h2>
<div class="form-group">
<label>用户名</label>
<input type="text" v-model="username" name="username" id="username" class="form-control form-control-lg">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" v-model="password" name ="password" id="password" class="form-control form-control-lg" id="pwd">
</div>
<div class="form-group form-check">
<input type="radio" class="form-check-input" name="type" value="1" id="exampleCheck2" checked>
<label class="form-check-label" for="exampleCheck2">管理员</label>
<input type="radio" class="form-check-input" name="type" value="2" id="exampleCheck1" >
<label class="form-check-label" for="exampleCheck1">普通用户</label>
</div>
<button type="button" :disabled="loading" @click="login" id="login" class="btn btn-primary btn-lg btn-block">
<span v-show="loading" class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
立即登录
</button>
</form>
</div>
<script>
$("#login").click(function(){
var username = $("#username").val();
var password = $("#password").val();
if(username == null || username == ""){
alert("请填写用户名");
return false;
}if(password == null || password == ""){
alert("请填写密码");
return false;
}
//执行添加的操作ajax
$.ajax({
cache:true,
type:"post",
url:"login",
data:$("#saveForm").serialize(),
async:false,
success:function(e){
if(e == 'ok'){
alert("登录成功");
window.parent.location.href="toMain";
}else if(e == 'toIndex'){
alert("登录成功");
window.parent.location.href="toIndex";
}else{
alert("登录失败，账号或密码错误");
}
}
})
});
</script>
</body>
</html>
/**
* 登录
* @param username
* @param request
* @param password
* @param session
* @param response
* @param mv
* @return
* @throws ServletException
* @throws IOException
*/
@RequestMapping("/login")
@ResponseBody
public String login(@RequestParam("username")String username,
HttpServletRequest request, @RequestParam("password")String password,
HttpSession session, HttpServletResponse response, ModelAndView mv) throws ServletException, IOException {
session.removeAttribute("admin");
session.removeAttribute("user");
String type=request.getParameter("type").toString();
request.getSession().setAttribute("type", type);
String message = "error";
if(type != null && type.equals("1")){
Admin admin1 = service.selectAdmin(username,password);
if(admin1 != null){
request.getSession().setAttribute("admin", admin1);
message = "ok";
}
}else if(type != null && type.equals("2")){
User te = service.selectUser(username,password);
if(te != null){
request.getSession().setAttribute("user", te);
message = "toIndex";
}
}
return message;
}