SpringBoot html和JavaScript制作网站

第一步：完成上一篇的任务。

               即（1）建立好数据库并且利用generation生成mapper文件

                   （2）连接数据库

                   （3）写好controller

                   （4）创建html文件

 

第二步：加载vue

在body外面添加：

<script type="text/javascript" src="vue.js"></script>

再另起一个脚本标签开始创建vue：

<script type="text/javascript">
	//
	var config = {
		"el" : "#app",
		"methods" : {
			"insert" : function() {
				//找到输入框
				var input=document.getElementById("name")
				//取到输入内容
				var categoryName=input.value
				//创建对象
				var category={"name":categoryName}
				//把对象放到data中的categoryList中
				this.categoryList.push(category)
			},
			"remove" : function() {
				//删除商品
				this.categoryList.pop();
			}
		},
		"data" : {
			"categoryList" : [ {
				"name" : "电脑"
			}, {
				"name" : "手机"
			} ]
		}
	}
	var vue = new Vue(config)
</script>

 这里静态加载数据，并未使用java提供的数据。

动态修改数据：加载vue.js,axios.min.js

<script type="text/javascript" src="axios.min.js"></script>

然后另起一个脚本标签开始

<script type="text/javascript">
	//1,创建配置对象
	var config = {
		"el" : "#app",
		"data":{
			"categoryList":[],
			"itemList":[]},
		"methods":{ 
			getItemByCategoryId:function(categoryId){
				//设置服务器地址，
				//发送请求
				//接收到的数据赋值给data中的数组
				//html中用v-for显示data数组
				var serverAddress="/item/selectByCategoryId?categoryId="+categoryId
				axios.get(serverAddress)
				.then(function(response){
					console.log(response)
					var serverData = response.data
					//serverData是个集合，里面有多个商品
					//给给每个商品加一个跳转
					//遍历集合
					for(var i =0;i<serverData.length;i++){
						
						var item=serverData[i];
						//给商品加一个跳转地址
						item.detailAddress="detail.html?itemId="+item.itemId;
					}
					this.vue.itemList=serverData
				})
				.catch(function(exception){
					console.log("联网失败")
					console.log(exception)
				})
			} 
			
		},
		
		"mounted" : function() {
			
	
			this.getItemByCategoryId(1)
			//mounted是网页加载完后自动执行
			//alert("mounted")
			//网页加载完后，联网取分类数据
			//前端中联网
			//1,设置服务器地址
			var serverAddress="/category/selectAll"
			//2,发送请求
			//then(函数)，函数是在取到数据后自动执行
			//catch(函数)，函数是在联网失败后执行
			axios.get(serverAddress)
			.then(function(response){
				//把服务器返回的resposne显示在控制台
				console.log(response)
				//取服务器返回的数据
				//response有6个属性  config.header,request,status,data,statusText
				//服务器上的categoryController。selectAll()
				var serverData = response.data
				console.log(serverData)
				this.vue.categoryList=serverData;
			})
			.catch(function(exception){
				console.log("联网失败")
				console.log(exception)
			})
			//3,接收服务器返回的结果
			//4,把数据显示在界面上
		}
	}
	//2,启动vue
	var vue=new Vue(config)
	//http://127.0.0.1:8080/index.html
</script>