Vue:是一套构建【用户界面】的渐进式前端框架，只关注视图层，很方面与其他库或已有的项目整合。通过API来实现【响应数据的绑定】和【组合的视图组件】
视图：负责页面的渲染，主要由HTML+CSS构成
脚本：负责业务数据模型以及数据的处理逻辑
Vue核心对象：每一个Vue程序都是从一个Vue核心对象开始的
let vm = new Vue({
选项列表；
});
选项列表：
el:用于接收获取到页面的【元素】，根据常用的选择器获取
data:用于保存当前的Vue对象的数据。在视图中声明的变量需要再此处赋值
methods:定义方法。方法可以直接通过对象名调用，this代表当前Vue对象
数据绑定：{ {变量名}}，在data里面给数据赋值
<body>
<!--视图-->
<div id="div">
<div>姓名：{
{name}}</div>
<div>班级：{
{classRoom}}</div>
<button onclick="hi()">打招呼</button>
<button onclick="update()">修改班级</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//脚本
let vm = new Vue({
el:"#div",
data:{
name:"张三",
classRoom:"硕计2班"
},
methods:{
study(){
alert(this.name+"正在"+this.classRoom+"学习");
},
}
});
//定义打招呼的方法
function hi(){
vm.study();
}
//定义修改班级的方法
function update(){
vm.classRoom = "计161";
}
</script>
Vue的常用指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app1">
<!-- v-text -->
<span v-text="msg"></span><br>
<span>{
{msg}}</span>
<!--v-html，就是innerHTML-->
<div v-html="htmltag"></div>
<!--v-show：根据表达式之真假值，切换元素的 display CSS 属性。-->
<div v-show="isShow">我是可以看见的div，使用v-show</div>
<!--条件判断-->
<div v-if="Math.random()>0.5">
大于0.5
</div>
<div v-else>
小于0.5
</div>
<!--for循环-->
循环数组：
<ul>
<li v-for="item in arr">{
{item}}</li>
</ul>
循环数组：
<ul>
<li v-for="(item,index) in arr">{
{index}}:{
{item}}</li>
</ul>
循环对象：
<ul>
<li v-for="(val,key) in obj">{
{key}}:{
{val}}</li>
</ul>
循环对象：
<ul>
<li v-for="(val,key,index) in obj">{
{index}}:{
{key}}:{
{val}}</li>
</ul>
循环字符串：
<ul>
<li v-for="(val,index) in str">{
{index}}:{
{val}}</li>
</ul>
循环数字：
<ul>
<li v-for="(val,index) in num">{
{index}}:{
{val}}</li>
</ul>
<!--v-on：绑定事件监听器。事件类型由参数指定。-->
<input type="button" value="测试" v-on:click="func()" />
<!--v-bind：动态地绑定一个或多个属性（特性），或一个组件 prop 到表达式。-->
<img v-bind:src="imgsrc" v-bind:style="imgcss" />
<br>
<!--v-model：在表单控件或者组件上创建双向绑定-->
<input type="text" v-model="inputtxt" />
<span>您在文本框中输入的内容是：{
{inputtxt}}</span>
<!--v-pre：【跳过】这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译-->
<span v-pre>{
{ msg }}</span>
<div v-cloak>
{
{ msg }}
</div>
<span v-once>This will never change: {
{msg}}</span>
</div>
</body>
<script src="js/vue.js"></script>
<script>
/*
v-text：功能和{
{msg}}相似，更新元素的文本内容。如果要更新部分文本内容，需要使用 {
{ msg }} 插值。
v-html：更新元素的 innerHTML
v-show：根据表达式之真假值，切换元素的 display CSS 属性。
v-if：根据表达式的值的真假条件渲染元素
v-else：表示否则
v-else-if：
v-for：可以循环数组，对象，字符串，数字，
v-on：绑定事件监听器。事件类型由参数指定。
v-bind：动态地绑定一个或多个属性（特性），或一个组件 prop 到表达式。
v-model：在表单控件或者组件上创建双向绑定
v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
v-cloak：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
v-once:只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
*/
let v1 = new Vue({
el:"#app1",
data:{
msg:"hello vue",
htmltag:"<p style='background-color:red'>我是一个红色的段落</p>",
isShow:true,
arr:[12,23,34],
obj:{
name:"张三",
age:12,
sex:"男"
},
str:"hello",
num:15,
imgsrc:"img/3.jpg",
imgcss:{"width":"120px","height":"80px"},
inputtxt:""
},
methods:{
func:function(){
alert('点击了按钮');
}
}
});
</script>
</html>
Element:【网站快速成型】工具，是饿了么公司前端开发团队提供的一套【基于Vue的网站组件库】。使用Element必须要有Vue，组件：组成网页的部件，例如超链接，按钮，图片…
官网：https://element.eleme.cn/#/zh-CN
引入三个文件，复制对应网站的代码，还有要创建vue核心对象
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
<!--引入三个文件-->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<!--可以有CSS样式控制-->
</head>
<body>
<div id="div">
<!--此处是网页布局复制的内容-->
</div>
</body>
<script>
/*有些需要复制规则数据啥的*/
new Vue({
el:"#div"
})
</script>
</html>
快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
</head>
<body>
<button>我是按钮</button>
<br>
<!--下面是复制的内容-->
<div id="div">
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
<br>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<br>
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
<br>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
</div>
</body>
<script>
new Vue({
el:"#div"
})
</script>
</html>
布局方式
基础布局：将页面分成最多24个部分，自由切分。每行分成多少列
第一个span=24，那么就是整个一行，也就是一列，第二个是两个span=12，将一行分为两列，三个span=8.....以此类推
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
容器布局：将页面分成头部区域、侧边栏区域、主区域、底部区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<style>
.el-header,.el-footer{
background-color: #d18e66;
color: #333;
text-align: center;
height: 100px;
}
.el-aside{
background-color: #55e658;
color: #333;
text-align: center;
height: 580px;
}
.el-main{
background-color: #5fb1f3;
color: #333;
text-align: center;
height: 520px;
}
</style>
</head>
<body>
<div id="div">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-container>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
</div>
</body>
<script>
new Vue({
el:"#div"
});
</script>
</html>
表单组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
</head>
<body>
<div id="div">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</body>
<script>
new Vue({
el:"#div",
data() {
return {
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
});
</script>
</html>
表格组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
</head>
<body>
<div id="div">
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
</div>
</body>
<script>
new Vue({
el:"#div",
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
})
</script>
</html>
顶部导航栏组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>顶部导航栏</title>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
</head>
<body>
<div id="div">
<el-menu
:default-active="activeIndex2"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项1</el-menu-item>
<el-menu-item index="2-4-2">选项2</el-menu-item>
<el-menu-item index="2-4-3">选项3</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="3" disabled>消息中心</el-menu-item>
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</div>
</body>
<script>
new Vue({
el:"#div",
data() {
return {
activeIndex: '1',
activeIndex2: '1'
};
},
methods: {
handleSelect(key, keyPath) {
console.log(key, keyPath);
}
}
})
</script>
</html>
侧边导航栏组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
</head>
<body>
<div id="div">
<el-col :span="6">
<h5>自定义颜色</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-col>
</div>
</body>
<script>
new Vue({
el:"#div",
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
})
</script>
</html>
综合案例：学生列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<style>
.el-header {
background-color: #545c64;
}
</style>
</head>
<body>
<div id="div">
<!--头部-->
<el-container>
<el-header class="el-header">
<el-container>
<el-menu :default-active="activeIndex2" mode="horizontal" @select="handleSelect"
background-color="#545c64" text-color="white" active-text-color="#ffd04b"
style="margin-left: auto;">
<el-menu-item index="1">处理中心</el-menu-item>
<el-submenu index="2">
<template slot="title">我的工作台</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
<el-menu-item index="3"><a href="学生列表.html" target="_self">首页</a></el-menu-item>
</el-menu>
</el-container>
</el-header>
<!--侧边栏-->
<el-container style="height: 730px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-menu"></i>学工部</template>
<el-menu-item-group>
<el-menu-item index="1-1"><i class="el-icon-help"></i>在校学生管理</el-menu-item>
<el-menu-item index="1-2"><i class="el-icon-help"></i>学生的升级/留级</el-menu-item>
<el-menu-item index="1-3"><i class="el-icon-help"></i>学生就业情况</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>咨询部</template>
<el-menu-item-group>
<el-menu-item index="2-1"><i class="el-icon-help"></i>意向学生管理</el-menu-item>
<el-menu-item index="2-2"><i class="el-icon-help"></i>未报名学生管理</el-menu-item>
<el-menu-item index="2-3"><i class="el-icon-help"></i>已报名学生管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-menu"></i>教研部</template>
<el-menu-item-group>
<el-menu-item index="3-1"><i class="el-icon-help"></i>已有课程管理</el-menu-item>
<el-menu-item index="3-2"><i class="el-icon-help"></i>正在研发课程管理</el-menu-item>
<el-menu-item index="3-3"><i class="el-icon-help"></i>新技术课程管理</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<!--主区域-->
<el-container>
<el-main>
<b style="color: red;font-size: 20px;">学生列表</b>
<div style="float:right">
<el-button type="primary">添加学生</el-button>
</div>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
<el-table-column label="操作" width="180">
<el-button type="warning">编辑</el-button>
<el-button type="danger">删除</el-button>
</el-table-column>
</el-table>
</el-table>
</el-main>
</el-container>
</el-container>
</el-container>
</div>
</body>
<script>
new Vue({
el: "#div",
data: {
tableData: [
{
date: "2021-1-1",
name: "张三",
address: "合肥市肥东县"
},
{
date: "2021-1-2",
name: "李四",
address: "合肥市肥东县"
},
{
date: "2021-1-3",
name: "王五",
address: "合肥市肥东县"
}
]
}
});
</script>
</html>
Vue高级使用
自定义组件：
定义格式：
Vue.component(组件名称，{
props:组件的属性,
data:组件的数据函数,
template:组件解析的标签模板
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="div">
<my-button>自定义按钮</my-button>
</div>
</body>
<script>
Vue.component("my-button", {
//属性
props: ["style"],
//数据函数
data: function () {
return {
msg: "自定义按钮"
}
},
//解析标签模板
template: "<button style='color:red'>{
{msg}}</button>"
});
new Vue({
el: "#div"
});
</script>
</html>
Vue异步操作：在Vue发送异步请求，本质上还是AJAX。可以使用axios这个插件简化操作
使用步骤：引入axios核心js文件，调用axios对象的方法发起异步请求和处理响应数据
常用方法：
get(请求的资源路径和请求的参数)：发起GET 请求
post(请求的资源路径，请求的参数)：发起POST 请求
then(response):请求成功后的回调函数，通过response获取响应的数据
catch（error）：请求失败后的回调函数，通过error获取错误信息
servlet：
package com.lcl;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/testServlet")
public class TestServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("UTF-8");
resp.setContentType("text/html;charset=UTF-8");
String name = req.getParameter("name");
System.out.println(name);
resp.getWriter().write("请求成功");
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
测试页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
</head>
<body>
<div id="div">
{
{name}}
<button @click="send()">发送请求</button>
</div>
</body>
<script>
new Vue({
el: "#div",
data: {
name: "张三"
},
methods: {
send() {
//GET方式
/* axios.get("testServlet?name=" + this.name)
.then(resp => {
alert(resp.data);
})
.catch(error => {
alert(error);
})*/
//POST方式
axios.post("testServlet","name="+this.name)
.then(resp => {
alert(resp.data);
})
.catch(error => {
alert(error);
})
}
}
});
</script>
</html>
vue02没完成，登陆页面样式卡住了
文章浏览阅读2.1k次，点赞101次，收藏78次。【学习背景】今天主要是来了解Java线程Thread中的run()、start()两个方法的执行有哪些区别，会给出一个简单的测试代码样例，快速理解两者的区别，再从源码层面去追溯start()底层是如何最终调用Thread#run()方法的，个人觉得这样的学习不论对面试，还是实际编程来说都是比较有帮助的。进入正文~学习目录一、代码测试二、源码分析2.1 run()方法2.2 start()方法三、使用总结一、代码测试执行Thread的run()、start()方法的测试代码如下：public_jdk的源码hotspot跟jdk是分开的
文章浏览阅读4.4k次，点赞90次，收藏85次。俄乌冲突中，各方势力通过数据擦除恶意软件破坏关键信息基础设施计算机的数据，达到深度致瘫的效果，同时窃取重要敏感信息。_俄乌网络战观察(一)
文章浏览阅读1.7w次，点赞23次，收藏139次。Maven 私服是一种特殊的Maven远程仓库，它是架设在局域网内的仓库服务，用来代理位于外部的远程仓库（中央仓库、其他远程公共仓库）。当然也并不是说私服只能建立在局域网，也有很多公司会直接把私服部署到公网，具体还是得看公司业务的性质是否是保密的等等，因为局域网的话只能在公司用，部署到公网的话员工在家里也可以办公使用。_nexus maven
文章浏览阅读934次。我先用所有的样本数据对模型做几轮初步训练，让深度神经模型基本拟合(数万条记录的训练集，识别率到99%左右)，具备初步的识别能力，这时的模型就是“直男”。相较于训练很多轮、拟合程度很高的“油腻男”，它的拟合程度较低，还是“直男愣头青”。..............._java ocr ai识别训练
文章浏览阅读688次。一、问题现象： 在数据库表中日期字段中存的日期光有年月日，没有时分秒。二、产生原因：三 解决办法 检查表的相应映射xml文件。 <property name="operateDate" type="Date">如果同上面所写，那问题出在 type类型上了正确写法 ：<property name="operateDate" type="java.util..._hibernate解析時間只有年月日沒有時分秒
文章浏览阅读1k次。通过react-native-tab-navigator实现下面这样的底部Tab切换安装npm install react-native-tab-navigator --save属性TabNavigator 属性 属性名 描述 sceneStyle 切换的每一屏的样式，等同于每一屏根View的样式 tabBarStyle ..._evaluating react-native-tab-navigator.js
文章浏览阅读1k次，点赞2次，收藏2次。文章目录问题描述：解决方案：问题描述：提示：idea springbbot运行无法编译成功，找不到jar包报错E:\ideaProject\demokkkk\src\main\java\com\example\demo\config\WebSocketConfig.javaError:(3, 46) java: 程序包org.springframework.context.annotation不存在Error:(4, 46) java: 程序包org.springframework.conte_error:(3, 46) java: 程序包org.springframework.context.annotation不存在
文章浏览阅读6.4k次，点赞6次，收藏36次。1、redux中间件中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。常见的中间件：redux-logger：提供日志输出redux-thunk：处理异步操作..._recate面试
文章浏览阅读405次。由于要在开发板中加载libjpeg，不能使用gcc编译的库文件给以使用，需要自己配置使用另外的编译器编译该库文件。/usr/bin/ld:.libs/jaricom.o:RelocationsingenericELF(EM:40)/usr/bin/ld:.libs/jaricom.o:RelocationsingenericELF(EM:40)...._jpeg_utils.lo: relocations in generic elf (em: 8) error adding symbols: file
文章浏览阅读578次，点赞10次，收藏17次。【办公类-22-06】周计划系列（1）“信息窗” （2024年调整版本）
文章浏览阅读309次。SEO全称为Search Engine Optimization，中文解释为搜索引擎优化。一般指通过对网站内部调整优化及站外优化，使网站满足搜索引擎收录排名需求，在搜索引擎中提高关键词排名，从而把精准..._百度seo resetful
文章浏览阅读438次。回归预测 | Matlab实现HPO-ELM猎食者算法优化极限学习机的数据回归预测_猎食者优化算法