1 vue前端框架
1.1 什么是vue
1.2 如何使用vue
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<%--导入vue得脚本--%>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<%--创建一个双标签--%>
<div id="app">
<%--使用vue这种定义得数据 这是vue得语法--%>
{{name}}<br>
{{age}}
</div>
</body>
<script>
/*创建一个Vue对象*/
var app = new Vue({
//把该对象挂载到div标签上 el属性是必有
el: "#app",
//data:数据区 定义一些数据 这些数据得类型可以是任意类型。
data: {
name:"小杨",
age: 15,
hobby:["看书","玩游戏"],
}
})
</script>
</html>
1.3 el挂载点
Vue实例的作用范围是什么呢？
Vue会管理el选项命中的元素及其内部的后代元素
是否可以使用其他的选择器？
可以，一般我们使用id，因为id是唯一得。
是否可以设置其他的dom元素呢？
可以，必须该dom是一个双标签。不能是body html标签
1.4 data属性
定义vue得数据。 可以定义为任意类型得数据。
1.5 本地应用
Vue指定: 以v-开始，并且可以在标签内容使用得。vue可以解析这个指令。
1.5.1 v-text和v-html
设置标签的文本值(textContent)
v-text:不能解析html标签
v-html: 可以解析html标签。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span > {{name}}你好</span><br>
<span v-text="name">你好</span><br>
<span v-html="name"></span>
</div>
</body>
<script>
var vue = new Vue({
el:"#app",
data:{
name:"<font color='red'>小杨</font>",
age:24,
hobby:["看书","玩游戏"]
}
})
</script>
</html>
1.5.2 v-on指令
为元素绑定事件
在元素上使用οnclick="方法名"。或 $("#元素").click(function(){})
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="-" @click="sub">
<span v-text="sum"></span>
<input type="button" value="+" @click="add">
</div>
</body>
<script>
var vue = new Vue({
el:"#app",
data: {
sum: 0,
},
methods:{
sub(){
this.sum--;
},
add(){
this.sum++;
}
}
});
</script>
</html>
1.5.3 v-show和v-if
根据表达值的真假,切换元素的显示和隐藏
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<%--导入vue得脚本--%>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<%--创建一个双标签--%>
<div class="app">
{{age}}<br>
<%--v-show:判断表达式是否为真如果为真则显示指令所在得标签。通过css得display来控制标识得显示和隐藏--%>
<img src="imgs/1.jpg" width="100" height="200" v-show="age>19&&age<24"/>
<%--v-if:根据表达式得真假控制标签得显示。通过创建和移除标签来控制显示和隐藏。如果显示和隐藏得频率非常高，那么该标签得效率会低--%>
<img src="imgs/1.jpg" width="100" height="200" v-if="age>19&&age<24"/>
<br>
<input type="button" value="点击" @click="fun"/>
</div>
</body>
<script>
/*创建一个Vue对象*/
var app = new Vue({
//挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
el:".app",
data:{
flag:true,
age:17,
},
methods:{
fun(){
this.age++;
}
}
})
</script>
</html>
1.5.4 v-bind
设置元素的属性 绑定元素得属性值。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>图片转换</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="mask">
<div align="center">
<h2>
<img src="images/logo.png">
深圳创维校区环境
</h2>
<span @click="prev" v-show="index!=0">
<img src="images/prev.png">
</span>
<img :src="imgs[index]">
<span @click="next" v-show="index<imgs.length-1">
<img src="images/next.png">
</span>
</div>
</div>
</body>
<script>
var vue=new Vue({
el:"#mask",
data:{
imgs:["images/00.jpg","images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg","images/06.jpg","images/07.jpg","images/08.jpg","images/09.jpg","images/10.jpg"],
index:0,
},
methods:{
prev(){
this.index--;
},
next(){
this.index++;
}
}
});
</script>
</html>
1.5.5 v-for
循环遍历指令
v-for="(变量名,下标) in 数组|集合"
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
<%--导入vue得脚本--%>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<%--创建一个双标签--%>
<div class="app">
<ul>
<li v-for="(a,index) in hobby">{{index}}---->{{a}}</li>
</ul>
<table border="1" width="200" cellpadding="0" cellspacing="0">
<tr v-for="(item,index) in peoples">
<td>{{index}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.address}}</td>
</tr>
</table>
</div>
</body>
<script>
/*创建一个Vue对象*/
var app = new Vue({
//挂载vue对象到指定得标签上,该vue对象就可以作用在该标签以及子标签内有效
el:".app",
data:{
hobby:["游泳","爬山"],
peoples:[
{"name":"张三","age":24,"address":"郑州1"},
]
}
})
</script>
</html>
1.5.6 v-on补充
传递自定义参数,事件修饰符
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(a,index) in hobby">{{index}}-----{{a}}</li>
</ul>
<table border="1">
<tr v-for="(item,index) in peoples">
<td>{{index}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.address}}</td>
<td >
<a @click="del(item)">删除</a>
</td>
</tr>
</table>
<input type="text" @keyup.enter="show('hello')">
</div>
</body>
<script>
var app = new Vue({
el:"#app",
methods:{
show(c){
alert("触发了回车键"+c);
},
del(n){
console.log(n);
}
},
data:{
hobby:["吃饭","睡觉","玩游戏"],
peoples:[
{"name":"张三","age":24,"address":"河南"},
{"name":"张三1","age":24,"address":"河南"},
{"name":"张三2","age":24,"address":"河南"}
]
}
});
</script>1.5.7 v-model
获取和设置==表单元素==的值
哪些是表单元素?
<input type="text|password|hidden|radio|checkbox"/>
<select>
<textarea>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id = "app">
<span v-text="name"></span><br>
<input type=text" v-model="name"><button @click="fun">点击</button>
</div>
</body>
<script>
var vue = new Vue({
el:"#app",
data:{
name:"张三"
},
methods:{
fun(){
this.name="小杨";
}
}
})
</script>2 网络应用
Vue结合网络数据开发应用。调用服务器获取网络数据。vue结合axios完成网络请求。
axios是功能强大的网络请求库，
axios发送网络请求得语法:
axios.get(url?key=value&key2=value2).then(function(result){},function(error){})
axios.post(url,{key:value,key:value}).then(function(result){},function(error){})
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
<button @click="getPlay">获取笑话</button>
<ul>
<li v-for="p in plays">{{p}}</li>
</ul>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
plays:[],
},
methods:{
getPlay(){
var _this=this; //
//不能使用this 因为这里得this标识axios对象。
axios.get("https://autumnfish.cn/api/joke/list?num=5").then(function(result){
_this.plays=result.data.jokes
})
}
}
})
</script>
</body>
</html>悦听html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>悦听player</title>
<!-- 样式 -->
<link rel="stylesheet" href="./css/playerIndex.css">
</head>
<body>
<div class="wrap">
<!-- 播放器主体区域 -->
<div class="play_wrap" id="player">
<div class="search_bar">
<img src="images/player_title.png" alt="" />
<!-- 搜索歌曲 -->
<input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" />
</div>
<div class="center_con">
<!-- 搜索歌曲列表 -->
<div class='song_wrapper'>
<ul class="song_list" >
<li v-for="m in music"><a href="javascript:;" @click="playMusic(m.id)"></a> <b>{{m.name}}</b> <span v-show="m.mvid!=0"><i @click="playMV(m.mvid)"></i></span></li>
</ul>
<img src="images/line.png" class="switch_btn" alt="">
</div>
<!-- 歌曲信息容器 -->
<div :class="flag?'player_con playing':'player_con'">
<img src="images/player_bar.png" class="play_bar" />
<!-- 黑胶碟片 -->
<img src="images/disc.png" class="disc autoRotate" />
<img :src="musicPic" class="cover autoRotate" />
</div>
<!-- 评论容器 -->
<div class="comment_wrapper">
<h5 class='title'>热门留言</h5>
<div class='comment_list'>
<dl v-for="c in musicComments">
<dt><img :src="c.user.avatarUrl" alt=""></dt>
<dd class="name">{{c.user.nickname}}</dd>
<dd class="detail">
{{c.content}}
</dd>
</dl>
</div>
<img src="images/line.png" class="right_line">
</div>
</div>
<div class="audio_con">
<audio ref='audio' :src="musicUrl" controls autoplay loop class="myaudio" @pause="zt" @paly="bf" ></audio>
</div>
<div class="video_con" v-if="mvFlag">
<video controls="controls" :src="musicMV"></video>
<div class="mask" ></div>
</div>
</div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../js/vue.js"></script>
<!-- 官网提供的 axios 在线地址 -->
<script src="../js/axios.min.js"></script>
</body>
<script>
var app = new Vue({
el:".wrap",
data:{
//搜索关键字
query:"",
//搜到所有歌曲
music:[],
//歌曲播放路径
musicUrl:"",
//歌曲封面
musicPic:"",
//歌曲评论
musicComments:[],
//判断启动杆是否放下
flag:false,
//判断MV是否显示
mvFlag:false,
musicMV:"",
},
methods:{
//MV
playMV(mid){
this.mvFlag=true;
var that =this;
axios.get("https://m.livemz.cn/mv/url?id="+mid).then(function (result){
that.musicMV = result.data.data.url;
})
},
//开始
bf(){
this.flag=true;
},
//暂停
zt(){
this.flag=false;
},
//搜索歌曲
searchMusic(){
var that = this;
axios.get("https://m.livemz.cn/search?keywords="+that.query).then(function (result1){
that.music=result1.data.result.songs;
})
},
//播放歌曲
playMusic(id){
this.flag=true;
var that = this;
axios.get("https://m.livemz.cn/song/url?id="+id).then(function (result){
that.musicUrl=result.data.data[0].url;
})
//查询歌曲封面
axios.get("https://m.livemz.cn/song/detail?ids="+id).then(function (result){
that.musicPic = result.data.songs[0].al.picUrl;
})
//歌曲评论
axios.get("https://autumnfish.cn/comment/hot?type=0&id="+id).then(function (result){
that.musicComments=result.data.hotComments;
})
}
}
});
</script>
3 elementui布局框架
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库 。
换句话说:Element它是再vue2.0得基础上，提供了各种组件(比如表单 表格 菜单导航.....),使用这些组件可以更好得完成功能和布局。
这些组件我们使用谁我们就讲谁，你们要主要看看我是如何使用这些组件得，那么你再使用其他组件时也可以按照这种方式来用。
3.1 如何使用elementui组件
（1）需要再相应得网页中引入vue和elementui得文件
注意:==必须先引入vue在引入element==
<!--引入element得css样式-->
<link type="text/css" rel="stylesheet" href="css/index.css"/>
<!--引入vue得js文件 这个必须在element之前引入-->
<script type="text/javascript" src="js/vue.js"></script>
<!--element得js文件-->
<script type="text/javascript" src="js/index.js"></script>
(2)设置表格组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/index.css"></link>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="app">
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column
fixed
prop="date"
label="日期"
width="150">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="province"
label="省份"
width="120">
</el-table-column>
<el-table-column
prop="city"
label="市区"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
width="200">
</el-table-column>
<el-table-column
prop="zip"
label="邮编"
width="120">
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="200">
<template slot-scope="scope">
<el-button type="success" size="small" icon="el-icon-edit">编辑</el-button>
<el-button type="danger" size="small" icon="el-icon-delete">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
tableData:[
{"date":"2022-05","name":"张三","province":"河南","city":"郑州","address":"上海","zip":"123"},
{"date":"2022-05","name":"李四","province":"河南","city":"郑州","address":"上海","zip":"123"},
{"date":"2022-05","name":"王五","province":"河南","city":"郑州","address":"上海","zip":"123"}
],
},
});
</script>
</html>4 elementui+axios+后台代码
(1)-- 创建数据库
create database vue01;
-- 切换数据库到vue01
use vue01;
(2)创建学生实体类
private int id;
private String name;
private int age;
private String address;
private int sex;
public Student() {
}
public Student(int id, String name, int age, String address, int sex) {
this.id = id;
this.name = name;
this.age = age;
this.address = address;
this.sex = sex;
}
@Override
public String toString() {
return "Student{" +
"id=" + id +
", name='" + name + '\'' +
", age=" + age +
", address='" + address + '\'' +
", sex=" + sex +
'}';
}
public int getSex() {
return sex;
}
public void setSex(int sex) {
this.sex = sex;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
}
(3)学生的dao
public List<Student> findAll(){
List<Student> list = new ArrayList<>();
try {
getConn();
String sql="select * from student";
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
while(rs.next()){
Student s = new Student();
s.setId(rs.getInt("id"));
s.setName(rs.getString("name"));
s.setAge(rs.getInt("age"));
s.setAddress(rs.getString("address"));
s.setSex(rs.getInt("sex"));
list.add(s);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
closeAll();
}
return list;
}(4)测试dao方法
StudentDao s2 = new StudentDao();
@Test
public void testFindAll(){
List<Student> list=s2.findAll();
System.out.println(list);
}(5)controller
@WebServlet(name="studentServlet",urlPatterns = "/StudentServlet")
public class StudentServlet extends HttpServlet {
StudentDao studentDao = new StudentDao();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String method =req.getParameter("method");
if("delete".equals(method)){
delete(req,resp);
}else{
queryAll(req,resp);
}
}
private void queryAll(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
List<Student> list = studentDao.findAll();
//把java集合转换为json对象。---fastjson
String result = JSON.toJSONString(list);
PrintWriter writer = resp.getWriter();
//输出给客户
writer.print(result);
//关闭资源
writer.flush();
writer.close();
}(6)展示到网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="app">
<el-table
:data="tableData"
border
style="width: 100%"
>
<el-table-column
prop="id"
label="学生编号"
>
</el-table-column>
<el-table-column
prop="name"
label="学生姓名"
></el-table-column>
<el-table-column
prop="age"
label="学生年龄"
>
</el-table-column>
<el-table-column prop="address"
label="学生地址"
></el-table-column>
<el-table-column
prop="sex"
label="学生性别">
<template slot-scope="scope">
{{ scope.row.sex==0?"男":"女" }}
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
>
<template slot-scope="scope">
<el-button type="success" size="small" icon="el-icon-edit" >编辑</el-button>
<el-button type="danger" size="small" icon="el-icon-delete" @click="del(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
tableData:[]
},
created(){
this.initTable();
},
methods:{
initTable(){
var that = this;
axios.post("StudentServlet").then(function (result){
// console.log(result);
if(result.data.code===2000){
that.tableData = result.data.date;
}
})
},
});
</script>
</html>3.2 删除
axios底层post提交的参数会封装到request playload请求载体中，使用request.getParamter是无法接受到请求载体的参数， request.getParamter它只能接受query param参数和form data参数。我们可以借助qs把请求载体的参数转换为form data参数。转换的步骤
(1) 在网页中引入qs
<script type="text/javascript" src="js/qs.min.js"></script>
(2) 把Qs对象重写赋值一个参数
var qs=Qs;
(3) 把 request playload使用 stringify方法转换
qs.stringify({"":"","":""})
//删除
public void delete(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException{
String id =req.getParameter("id");
int row = studentDao.delete(id);
PrintWriter writer = resp.getWriter();
if(row==1){
CommonResult commonResult = new CommonResult(2000,"删除成功",null);
writer.print(JSON.toJSONString(commonResult));
}else {
CommonResult commonResult = new CommonResult(5000,"删除失败",null);
writer.print(JSON.toJSONString(commonResult));
}
writer.flush();
writer.close();
} //删除操作 public int delete(String id) { String sql ="delete from t_emp where emp_id=?"; return edit(sql,id); }3.3 添加 修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/qs.min.js"></script>
</head>
<body>
<div id="app">
<el-button type="primary" @click="addDialogVisible=true">添加</el-button>
<el-dialog
title="添加学生"
:visible.sync="addDialogVisible"
width="30%">
<el-form :model="addform" :rules="addRules" ref="addRuleForm">
<el-form-item label="姓名" label-width="60px" prop="name">
<el-input v-model="addform.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" label-width="60px" prop="age">
<el-input v-model.number="addform.age" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="地址" label-width="60px"prop="address">
<el-input v-model="addform.address" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性别" label-width="40px">
<el-radio v-model="addform.sex" :label="0">男</el-radio>
<el-radio v-model="addform.sex" :label="1">女</el-radio>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addSt">确 定</el-button>
</span>
</el-dialog>
<el-table
:data="tableData"
border
style="width: 100%"
>
<el-table-column
prop="id"
label="学生编号"
>
</el-table-column>
<el-table-column
prop="name"
label="学生姓名"
></el-table-column>
<el-table-column
prop="age"
label="学生年龄"
>
</el-table-column>
<el-table-column prop="address"
label="学生地址"
></el-table-column>
<el-table-column
prop="sex"
label="学生性别">
<template slot-scope="scope">
{{ scope.row.sex==0?"男":"女" }}
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
>
<template slot-scope="scope">
<el-button type="success" size="small" icon="el-icon-edit" @click="edit(scope.row)" >编辑</el-button>
<el-button type="danger" size="small" icon="el-icon-delete" @click="del(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog
title="添加学生"
:visible.sync="editDialogVisible"
width="30%">
<el-form :model="editform" :rules="addRules" ref="editRuleForm">
<el-form-item label="姓名" label-width="60px" prop="name">
<el-input v-model="editform.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" label-width="60px" prop="age">
<el-input v-model.number="editform.age" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="地址" label-width="60px"prop="address">
<el-input v-model="editform.address" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性别" label-width="40px">
<el-radio v-model="editform.sex" :label="0">男</el-radio>
<el-radio v-model="editform.sex" :label="1">女</el-radio>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="editDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="editSt">确 定</el-button>
</span>
</el-dialog>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
tableData:[],
//修改
editDialogVisible:false,
editform:{},
//添加
addDialogVisible:false,
addform:{"sex":0},
addRules: {
name: [
{required: true, message: '请输入学生姓名', trigger: 'blur'},
],
age: [
{required: true, message: '年龄不能为空'},
{type: 'number', message: '年龄必须为数字值'}
],
address: [
{required: true, message: '请输入学生地址', trigger: 'blur'},
],
}
},
created(){
this.initTable();
},
methods:{
//查询所有
initTable(){
var that = this;
axios.post("StudentServlet").then(function (result){
// console.log(result);
if(result.data.code===2000){
that.tableData = result.data.date;
}
})
},
// del(id){
// var that = this;
// axios.get("StudentServlet?method=delete&id="+id).then(function (result){
// if(result.data.code===2000){
// that.initTable();
// }
// })
// },
//删除
del(id){
var that = this;
var qs = Qs;
axios.post("StudentServlet",qs.stringify({"method":"delete","id":id})).then(function (result){
if(result.data.code===2000){
that.initTable();
}
})
},
//添加
addSt() {
this.$refs['addRuleForm'].validate((valid) => {
if (valid) {
var qs = Qs;
var that = this;
axios.post("StudentServlet?method=insert", qs.stringify(that.addform)).then(function (result) {
if (result.data.code === 2000) {
that.$message.success(result.data.msg);
that.initTable();
that.addDialogVisible = false;
}
})
}
});
},
//修改
edit(row){
this.editDialogVisible = true;
this.editform =row;
},
editSt(){
this.$refs['editRuleForm'].validate((valid) => {
if (valid) {
var qs = Qs;
var that = this;
axios.post("StudentServlet?method=update", qs.stringify(that.editform)).then(function (result) {
if (result.data.code===2000) {
that.$message.success(result.data.msg);
that.initTable();
that.editDialogVisible = false;
}
})
}
});
},
}
});
</script>
</html>package com.xzj.servlet;
import com.alibaba.fastjson.JSON;
import com.xzj.dao.UserDao;
import com.xzj.entity.User;
import com.xzj.until.CommonResult;
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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
/**
* @author xuan
*/
@WebServlet(name = "loginServlet",urlPatterns = "/LoginServlet")
public class LoginServlet extends HttpServlet {
UserDao userDao = new UserDao();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String name = req.getParameter("name");
String password = req.getParameter("password");
User user = userDao.finAll(name,password);
System.out.println(user);
PrintWriter writer = resp.getWriter();
if(user!=null){
HttpSession session = req.getSession();
session.setAttribute("user",user);
CommonResult commonResult = new CommonResult(2000,"登录成功",null);
writer.print(JSON.toJSONString(commonResult));
}else {
CommonResult commonResult = new CommonResult(5000,"登录失败",null);
writer.print(JSON.toJSONString(commonResult));
}
writer.flush();
writer.close();
}
}
3.4 注册
Login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<!--引入element得css样式-->
<link type="text/css" rel="stylesheet" href="css/index.css"/>
<!--引入vue得js文件 这个必须在element之前引入-->
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/qs.min.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<!--element得js文件-->
<script type="text/javascript" src="js/index.js"></script>
<style>
body,.box{
overflow: hidden;
height: 100%;
}
.box{
background: url("imgs/1.jpeg");
}
#loginBox {
width: 450px;
height: 300px;
background: white;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#loginBox>.avatar_box{
height: 130px;
width: 130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px #ddd;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
}
#loginBox>.avatar_box>img {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee;
}
.login_form {
position: absolute;
bottom: 0;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
</style>
</head>
<body background="imgs/1.jpeg">
<div class="box">
<div id="loginBox">
<!-- 头像 -->
<div class="avatar_box">
<img src="imgs/1.jpg"/>
</div>
<el-form label-width="80px" :model="loginForm" :rules="rules" ref="loginFormRef" class="login_form">
<el-form-item label="账号:" prop="name">
<el-input v-model="loginForm.name"></el-input>
</el-form-item>
<el-form-item label="密码:" prop="password">
<el-input v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm()">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
<script>
var app = new Vue({
el: ".box",
data: {
loginForm: {},
//校验规则
rules: {
name: [
{required: true, message: "请输入账号", trigger: "blur"},
{min: 2, max: 12, message: "账号的长度必须{2~12}", trigger: "blur"},
],
password: [
{required: true, message: "请输入密码", trigger: "blur"},
{min: 2, max: 12, message: "密码的长度必须{2~12}", trigger: "blur"},
]
}
},
methods: {
submitForm() {
var that = this;
var qs = Qs;
this.$refs['loginFormRef'].validate((valid) => {
if (valid) {
axios.post("LoginServlet", qs.stringify(that.loginForm)).then(function (result) {
if (result.data.code === 2000) {
that.$message.success(result.data.msg);
location.href = "elementui01.html"
} else {
that.$message.error(result.data.msg);
}
});
}
})
}
}
})
</script>
</body>
</html>LoginServlet
package com.xzj.servlet;
import com.alibaba.fastjson.JSON;
import com.xzj.dao.UserDao;
import com.xzj.entity.User;
import com.xzj.until.CommonResult;
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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
/**
* @author xuan
*/
@WebServlet(name = "loginServlet",urlPatterns = "/LoginServlet")
public class LoginServlet extends HttpServlet {
UserDao userDao = new UserDao();
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
String name = req.getParameter("name");
String password = req.getParameter("password");
User user = userDao.finAll(name,password);
System.out.println(user);
PrintWriter writer = resp.getWriter();
if(user!=null){
HttpSession session = req.getSession();
session.setAttribute("user",user);
CommonResult commonResult = new CommonResult(2000,"登录成功",null);
writer.print(JSON.toJSONString(commonResult));
}else {
CommonResult commonResult = new CommonResult(5000,"登录失败",null);
writer.print(JSON.toJSONString(commonResult));
}
writer.flush();
writer.close();
}
}
9414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
