Java前端页面网状图 java前端页面模板

转载

imking 2024-04-10 12:41:35

文章标签 Java前端页面网状图 java vue 数据库 html 文章分类 Java 后端开发

前台主站页面

页面分析：

1.在IDEA中启动服务器

Java前端页面网状图 java前端页面模板_java

2.Hbuilder打开projectWeb项目

创建一个模板template.html

Java前端页面网状图 java前端页面模板_Java前端页面网状图_02

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript"></script>
		<script src="axios.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app"></div>
	</body>
	<script>
		var config={
			el:"#app",
			data:{},
			methods:{
				
			},
			mounted:function(){
				console.log("mounted()");
			}
		}
		var vue=new Vue(config);
		
	</script>
</html>

3.复制模板粘贴一个模板，F2重命名为detail.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript"></script>
		<script src="axios.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app"></div>
	</body>
	<script>
		var config={
			el:"#app",
			data:{},
			methods:{
				
			},
			mounted:function(){
				debugger;
				console.log("mounted()");
				//从首页跳转过来
				//detail.html?itemId=2
				//?itemId=2
				var parameter=location.search;
				//去掉?取后面的值
				parameter=parameter.substr(1);
				//字符串的切割
				//stringArray[0]=itemId
				//stringArray[1]=2
				var stringArray=parameter.split("=");
				//取商品的编号
				var itemId=stringArray[1]
				console.log(itemId);
			}
		}
		var vue=new Vue(config);
		
	</script>
</html>

打开浏览器测试：

Java前端页面网状图 java前端页面模板_Java前端页面网状图_03

调取商品

连接数据库，调取商品

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript"></script>
		<script src="axios.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			<img v-bind:src="item.itemImage"><br />
			手机型号：{{item.itemName}}<br>
			价格：{{item.itemPrice}}<br>
			详细：{{item.itemDesc}}<br>
			商品评论<br />
			商品推荐<br />
		</div>
	</body>
	<script>
		var config = {
			el: "#app",
			data: {
				item: null
			},
			methods: {

			},
			mounted: function() {
				debugger;
				console.log("mounted()");
				//从首页跳转过来
				//detail.html?itemId=2
				//?itemId=2
				var parameter = location.search;
				//去掉?取后面的值
				parameter = parameter.substr(1);
				//字符串的切割
				//stringArray[0]=itemId
				//stringArray[1]=2
				var stringArray = parameter.split("=");
				//取商品的编号
				var itemId = stringArray[1];
				console.log(itemId);
				//连接数据库调取商品数据 http://localhost:1314/item/findByItemId?id=1
				var serverUrl = "http://localhost:1314" +
					"/item/findByItemId?id=" + itemId;
				console.log(serverUrl);
				console.log(this);
				//mounted中的this代表的是vue，有item属性
				var vue = this;
				axios.get(serverUrl)
					.then(function(response) {
						debugger;
						var item = response.data;
						//this函数中，this代表的是window，没有 item属性
						//this.item=item;
						vue.item = item;
					})
					.catch(function(e) {
						window.alert("联网失败");
						//打印失败信息
						console.log(e);
					});
			}
		}
		var vue = new Vue(config);
	</script>
</html>

运行执行测试：

我们可以发现跨域调用了，调用失败

Java前端页面网状图 java前端页面模板_Java前端页面网状图_04

给IDEA的商品操作都加上@CrossOrigin注解

package com.tedu.mall.Controller;

import com.tedu.mall.mapper.ItemMapper;
import com.tedu.mall.pojo.Item;
import com.tedu.mall.pojo.ItemExample;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

//商品操作
@RestController
@CrossOrigin
public class ItemController {
    @Autowired
    ItemMapper itemMapper;

    //更新商品
    
    @RequestMapping("/item/update")
    @CrossOrigin
    //http://localhost:1314/item/update?itemId=4
    //&categoryId&itemName=华硕冰锐4
    //&itemPrice=9999&itemDesc=3060Ti
    //&itemImage=9.jpg
    public String update(Item item){
         //update item set item_name=新名字
        //where item_id=4
        int count=itemMapper.updateByPrimaryKey(item);
        if (count>=1){
            return "更新成功";
        }else {
            return "更新失败";
        }
    }

    //删除
    @RequestMapping("/item/delete")
    @CrossOrigin
    //localhost:1314/item/delete?itemId=5
    public String delete(Integer itemId){
        //delete from item where item_id=5
        int count = itemMapper.deleteByPrimaryKey(itemId);
        if (count>=1){
            return "删除成功";
        }else{
            return "删除失败";
        }
    }


    //查询所有商品
    @RequestMapping("/item/selectAll")
    @CrossOrigin
    public List<Item> selectAll(){
        return itemMapper.selectByExample(null);
    }

    //添加商品
    @RequestMapping("/item/insert")
    @CrossOrigin
    /*localhost:1314/intem/insert?categoryId=1&itemName=n1
    *&itemImage=1.jpg&itemPrice=90&itemDesc=desc
    */
    public String insert(Item item){
       int count=itemMapper.insertSelective(item);
       if(count >=1){
           return "添加成功";
       }else {
           return "添加失败";
       }
    }

    //首页显示商品，用户单击一个商品，显示商品详细
    //根据商品编号查询商品
    @RequestMapping("/item/findByItemId")
    @CrossOrigin
    //localhost:1314/item/findByItemId?id=2
    public Item findByItemId(Integer id){
        Item item = itemMapper.selectByPrimaryKey(id);
        return item;
    }


    //查询分类下的所有商品
    @RequestMapping("/item/findByCategoryId")
    @CrossOrigin
    //http://localhost:1314/item/findByCategoryId?id=1
    public List<Item> findByCategoryId(Integer id){
        //获取where条件
        ItemExample itemExample=new ItemExample();
        ItemExample.Criteria criteria=itemExample.or();
        criteria.andCategoryIdEqualTo(id);
        //得到一个集合，集合中放的是商品
        List<Item> list=itemMapper.selectByExample(itemExample);
        return list;
    }
}

重启服务器

重新测试连接

Java前端页面网状图 java前端页面模板_vue_05

如果没有显示图片：

在IDEA项目文件目录下添加图片 projectService\src\main\resources\static

Java前端页面网状图 java前端页面模板_java_06

然后更改数据库的图片端口号：

Java前端页面网状图 java前端页面模板_vue_07

商品分类

复制模板 F2更名为index.html(商品分类)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript"></script>
		<script src="axios.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			<table>
				<tr>
					<td v-for="category in categoryList">
						{{category.categoryName}}
					</td>
				</tr>
			</table>
		</div>
	</body>
	<script>
		var config = {
			el: "#app",
			data: {
				categoryList: []
			},
			methods: {
				findCategory: function() {
					debugger;
					var serverUrl = "http://localhost:1314/category/selectAll"
					var vue = this;
					axios.get(serverUrl)
						.then(function(response) {
							debugger;
							vue.categoryList = response.data;
							console.log(vue.categoryList);
						})
						.catch(function(e) {
							window.alert("联网失败");
							console.log(e);
						});
				}
			},
			mounted: function() {
				console.log("mounted()");
				this.findCategory();
			}
		}
		var vue = new Vue(config);
	</script>
</html>

运行：

Java前端页面网状图 java前端页面模板_html_08

商品分类

在index.html中增加商品分类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript"></script>
		<script src="axios.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			<div>
			<table>
				<tr>
					<td v-for="category in categoryList">
						<img v-bind:src="item.itemImage" width="100" height="100"/>
						{{category.categoryName}}
					</td>
				</tr>
			</table>
			</div>
			<div>
			<table>
				<tr v-for="item in itemList"><br />
					<td>
					<img v-bind:src="item.itemImage" width="100" height="100"/>
					<br />
					{{item.itemName}}
					</td>
				</tr>
			</table>
			</div>
		</div>
	</body>
	<script>
		var config = {
			el: "#app",
			data: {
				categoryList: [],
				itemList: [],
			},
			methods: {
				findCategory: function() {
					debugger;
					var serverUrl = "http://localhost:1314/category/selectAll"
					var vue = this;
					axios.get(serverUrl)
						.then(function(response) {
							debugger;
							vue.categoryList = response.data;
							console.log(vue.categoryList);
						})
						.catch(function(e) {
							window.alert("联网失败");
							console.log(e);
						});
				},
				findItemBycategoryId:function(id){
					debugger;
					var serverUrl="http://localhost:1314/item/findByCategoryId?id="+id;
					//F12 从console窗口中拷贝地址到浏览器测试
					console.log(serverUrl);
					var vue=this;
					axios.get(serverUrl)
					.then(function(response){
						debugger;
						vue.itemList=response.data;
					})
					.catch(function(e){
						window.alert("联网失败");
						console.log(e);
					})
				}
			},
			mounted: function() {
				console.log("mounted()");
				this.findCategory();
				this.findItemBycategoryId(1);
			}
		}
		var vue = new Vue(config);
	</script>
</html>

运行:

Java前端页面网状图 java前端页面模板_vue_09

页面跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript"></script>
		<script src="axios.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			<a href="register.html">注册</a>
			<br>
			<a href="login.html">登录</a>
			<div>
			<table>
				<tr>
					<td v-for="category in categoryList"
					v-on:click="findItemBycategoryId(category.categoryId)"
					>
						{{category.categoryName}}
					</td>
				</tr>
			</table>
			</div>
			<div>
			<table>
				<tr v-for="item in itemList">
					<td>
						<a v-bind:href="'detail.html?id='+item.itemId">
					<img v-bind:src="item.itemImage"
					width="100" height="100"
					/>
					<br>
					{{item.itemName}}
					</a>
					</td>
				</tr>
			</table>
			</div>
		</div>
	</body>
	<script>
		var config={
			el:"#app",
			data:{
				categoryList:[],
				itemList:[]
			},
			methods:{
				findCategory:function(){
					debugger;
					var serverUrl="http://localhost:1314/category/selectAll"
					var vue=this;
					axios.get(serverUrl)
					.then(function(response){
						debugger;
						vue.categoryList=response.data;
						console.log(vue.categoryList);
					})
					.catch(function(e){
						window.alert("联网失败");
						console.log(e);
					});
				},
				findItemBycategoryId:function(id){
					debugger;
					var serverUrl="http://localhost:1314"
					+"/item/findByCategoryId?id="+id;
					//F12 从console窗口中拷贝地址到浏览器中测试一下
					console.log(serverUrl);
					var vue=this;
					axios.get(serverUrl)
					.then(function(response){
						debugger;
						vue.itemList=response.data;
					})
					.catch(function(e){
						window.alert("联网失败");
						console.log(e);
					});
					
				}
			},
			mounted:function(){
				console.log("mounted()");
				this.findCategory();
				this.findItemBycategoryId(1);
			}
		}
		var vue=new Vue(config);
	</script>
</html>

运行：

Java前端页面网状图 java前端页面模板_vue_10

后台管理

新建项目projectAdmin

然后把复制这3个到中projectAdmin

Java前端页面网状图 java前端页面模板_Java前端页面网状图_11

管理员登录

新建adminLogin.html.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript"></script>
		<script src="axios.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			<h1>管理员登录</h1>
			账 号:<input v-model="adminName" /><br />
			密 码:<input v-model="adminPassword" /><br />
			<br />
			        
			<button v-on:click="login">登录</button>
		</div>
	</body>
	<script>
		var config={
			el:"#app",
			data:{
				adminName:null,
				adminPassword:null
			},
			methods:{
				login:function(){
					debugger;
					var serverUrl="http://localhost:1314//admin/login?"
					+"adminName="+this.adminName
					+"&adminPassword="+this.adminPassword;
					//在浏览器中测试Url
					console.log(serverUrl);
					axios.get(serverUrl)
					.then(function(res){
						var admin=res.data;
						if(admin.adminId){
							window.alert("管理员登录成功");
							location.href="index.html";
						}
					})
					.catch(function(e){
						window.alert("连接失败");
						console.log(e);
					})
				}
			},
			mounted:function(){
			  console.log("mounted()");
			}
		}
		var vue=new Vue(config);
		
	</script>
</html>

执行：

Java前端页面网状图 java前端页面模板_Java前端页面网状图_12

商品分类添加商品

复制模板粘贴，F2更改为item.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript"></script>
		<script src="axios.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			分类: <select v-model="selectId">
				<option v-for="category in categoryList" v-bind:value="category.categoryId">
					{{category.categoryName}}
				</option>
			</select>
			<br>
			名称: <input v-model="itemName" /><br>
			价格: <input v-model="itemPrice" /><br>
			描述: <input v-model="itemDesc" /><br>
			图片: <input v-model="itemImage" /><br>
			<br />
			       
			<button v-on:click="insert">添加</button>
		</div>
	</body>
	<script>
		var config = {
			el: "#app",
			data: {
				selectId: null,
				categoryList: [],
				itemName: "",
				itemPrice: "",
				itemDesc: "",
				itemImage: ""
			},
			methods: {
				insert: function() {
					debugger;
					var serverurl = "http://localhost:1314/item/insert?" 
					+"categoryId=" + this.selectId
					+"&itemName=" + this.itemName
					+"&itemPrice=" + this.itemPrice
					+"&itemDesc=" + this.itemDesc
					+"&itemImage=" + this.itemImage;
					//输入参数，点添加，从console中拷贝url到浏览器
					console.log(serverurl);
					axios.get(serverurl)
					.then(function(res){
						window.alert(res.data);
					})
					.catch(function(e){
						window.alert("联网失败");
						console.log(e);
					})
				},
				findCategory: function() {
					debugger;
					var serverUrl = "http://localhost:1314/category/selectAll";
					var vue = this;
					axios.get(serverUrl)
						.then(function(res) {
							debugger;
							vue.categoryList = res.data;
						})
						.catch(function(e) {
							window.alert("联网失败");
							console.log(e);
						});
				}
			},
			mounted: function() {
				console.log("mounted()");
				this.findCategory();
			}
		}
		var vue = new Vue(config);
	</script>
</html>

运行：

Java前端页面网状图 java前端页面模板_html_13

查看数据库

Java前端页面网状图 java前端页面模板_java_14

实现增删改查

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript"></script>
		<script src="axios.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			分类: <select v-model="selectId">
				<option v-for="category in categoryList" v-bind:value="category.categoryId">
					{{category.categoryName}}
				</option>
			</select>
			<br>
			名称: <input v-model="itemName" /><br>
			价格: <input v-model="itemPrice" /><br>
			描述: <input v-model="itemDesc" /><br>
			图片: <input v-model="itemImage" /><br>
			<br />
			       
			<button v-on:click="insert">添加</button>
			<br />

			<table border="2">
				<tr>
					<td>商品编号</td>
					<td>名称</td>
					<td>价格</td>
					<td>删除</td>
					<td>修改</td>
				</tr>
				<tr v-for="item in itemList">
					<td>{{item.itemId}}</td>
					<td>{{item.itemName}}</td>
					<td>{{item.itemPrice}}</td>
					<td v-on:click="deleteItem(item.itemId)">删除</td>
					<td><a v-bind:href="'update.html?itemId='+item.itemId">修改</a></td>
				</tr>
			</table>

		</div>
	</body>
	<script>
		var config = {
			el: "#app",
			data: {
				selectId: null,
				categoryList: [],
				itemName: "",
				itemPrice: "",
				itemDesc: "",
				itemImage: "",
				itemList: []
			},
			methods: {
				deleteItem: function(itemId) {
					var result = window.confirm("你确定要删除吗？");
					//window.alert(result);
					if (result) {
						var serverUrl = "http://localhost:1314/item/delete?itemId=" + itemId;
						console.log(serverUrl);
						var vue=this;
						axios.get(serverUrl)
							.then(function(res) {
								//sqlyog中查看是否删除
								window.alert(res.data);
								//重新查询
								vue.findItem();
							})
							.catch(function(e) {
								window.alert("删除失败");
								console.log(e);
							});
					}
				},
				findItem: function() {
					var serverUrl = "http://localhost:1314/item/selectAll";
					var vue = this;
					axios.get(serverUrl)
						.then(function(res) {
							debugger;
							vue.itemList = res.data;
						})
						.catch(function(e) {
							window.alert("联网失败");
							console.log(e);
						});
				},

				insert: function() {
					debugger;
					var serverurl = "http://localhost:1314/item/insert?"
					+"categoryId=" + this.selectId 
					+"&itemName=" + this.itemName 
					+"&itemPrice=" + this.itemPrice 
					+"&itemDesc=" + this.itemDesc 
					+"&itemImage=" + this.itemImage;
					//输入参数，点添加，从console中拷贝url到浏览器
					console.log(serverurl);
					axios.get(serverurl)
						.then(function(res) {
							window.alert(res.data);
						})
						.catch(function(e) {
							window.alert("联网失败");
							console.log(e);
						});
				},
				findCategory: function() {
					debugger;
					var serverUrl = "http://localhost:1314/category/selectAll";
					var vue = this;
					axios.get(serverUrl)
						.then(function(res) {
							debugger;
							vue.categoryList = res.data;
						})
						.catch(function(e) {
							window.alert("联网失败");
							console.log(e);
						});
				}
			},
			mounted: function() {
				console.log("mounted()");
				this.findCategory();
				this.findItem();
			}
		}
		var vue = new Vue(config);
	</script>
</html>

运行：

Java前端页面网状图 java前端页面模板_数据库_15

管理员修改功能

复制模板 F2更名为update.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品修改</title>
		<script src="vue.js" type="text/javascript"></script>
		<script src="axios.min.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			分类:
			<select v-model="itemCategoryId">
				<option v-for="category in categoryList" v-bind:value="category.categoryId">{{category.categoryName}}</option>
			</select>
			<br />
			名称: <input v-model="item.itemName" /><br />
			价格: <input v-model="item.itemPrice" /><br />
			描述: <input v-model="item.itemDesc" /><br />
			图片: <input v-model="item.itemImage" /><br />
			<br />
			<button v-on:click="update">修改</button>
		</div>
	</body>
	<script>
		var config = {
			el: "#app",
			data: {
				categoryList: [],
				itemCategoryId: null,
				item: null
			},
			methods: {
				update: function() {
					var serverUrl = "http://localhost:1314/item/update?" +
						"itemId=" + this.item.itemId +
						"&categoryId=" + this.itemCategoryId +
						"&itemName=" + this.item.itemName +
						"&itemPrice=" + this.item.itemPrice +
						"&itemDesc=" + this.item.itemDesc +
						"&itemImage=" + this.item.itemImage;
					//update.htm?itemId=2
					//console拷贝url到浏览器测试
					console.log(serverUrl);
					axios.get(serverUrl)
						.then(function(res) {
							window.alert(res.data);
							//让浏览器访问item.html
							location.href="item.html";
						})
						.catch();
				},
				findItemById: function(itemId) {
					var serverUrl = "http://localhost:1314/item/findByItemId?id=" + itemId;
					console.log(serverUrl);
					var vue = this;
					axios.get(serverUrl)
						.then(function(res) {
							debugger;
							vue.item = res.data;
							//修改data中商品的分类id
							vue.itemCategoryId = vue.item.categoryId;
						})
						.catch()
				},

				findCategory: function() {
					debugger;
					var serverUrl = "http://localhost:1314/category/selectAll";
					var vue = this;
					axios.get(serverUrl)
						.then(function(res) {
							debugger;
							vue.categoryList = res.data;
						})
						.catch(function(e) {
							window.alert("联网失败");
							console.log(e);
						});
				}
			},
			mounted: function() {
				console.log("mounted()");
				this.findCategory();
				//获取传过来的商品编号
				//?itemId=2
				var p = location.search;
				//itemId=2
				p = p.substr(1);
				//对字符串进行切割
				var stringArray = p.split("=");
				var itemId = stringArray[1];
				console.log(itemId);
				this.findItemById(itemId);
			}
		}
		var vue = new Vue(config);
	</script>
</html>

运行：

Java前端页面网状图 java前端页面模板_vue_16

用户管理

新建一个index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户管理界面</title>
	</head>
	<body>
		<a href="item.html">商品管理</a>
		<a href="user.html">用户管理</a>
	</body>
</html>

新建一个user.html

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		用户管理
	</body>
</html>

运行：

Java前端页面网状图 java前端页面模板_vue_17

到此所有的步骤都完成了，页面比较简陋，功能实现后可以自己进行调试

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：mysql 取主表连带子表分id数量 mysql如何区分主表和从表

下一篇：粒子群目标检测粒子群算法01规划

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯