白酒包装设计网站,用php做的博客网站,优化网络,dede网站建设文章目录 1.Ajax1.1 介绍1.2 Ajax快速入门1.3 案例-用户注册时#xff0c;检测用户名是否数据库已经存在1.4 Axios1.4.1 Axios快速入门1.4.2 请求别名 1.5 JSON1.5.1 Json的基础语法1.5.2 FastJson的使用5.3.2 Fastjson 使用 2. Vue2.1 介绍2.2 Vue快速入门2.3 Vue常用指令和生… 文章目录 1.Ajax1.1 介绍1.2 Ajax快速入门1.3 案例-用户注册时检测用户名是否数据库已经存在1.4 Axios1.4.1 Axios快速入门1.4.2 请求别名 1.5 JSON1.5.1 Json的基础语法1.5.2 FastJson的使用5.3.2 Fastjson 使用 2. Vue2.1 介绍2.2 Vue快速入门2.3 Vue常用指令和生命周期 3. ElementUI3.1 快速入门3.2 Element 布局 1.Ajax
1.1 介绍 AjaxAsynchronous JavaScript and XML异步的 JavaScript 和 XML。 是一种用于在浏览器和服务器之间进行异步数据交互的技术。 它允许在不刷新整个页面的情况下通过 JavaScript 发送 HTTP 请求并接收服务器返回的数据。在后台进行数据交换更新页面的部分内容而不会造成页面的重载 AJAX 作用 与服务器进行数据交换 通过AJAX可以给服务器发送请求服务器将数据直接响应回给浏览器。 异步交互 可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如搜索联想、用户名是 否可用校验等等 1.2 Ajax快速入门 服务端实现 在项目的创建 com.itheima.web.servlet 并在该包下创建名为 AjaxServlet的servlet package com.web;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(/ajaxServlet)
public class AjaxServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//响应数据resp.getWriter().write(hello ajax~~~~);}Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doGet(req, resp);}
} 客户端实现 在 webapp 下创建名为 ajax-demo1.html 的页面在该页面书写 ajax 代码 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
h1hell/h1
script//1. 创建核心对象var xhttp;if (window.XMLHttpRequest) {xhttp new XMLHttpRequest();} else {// code for IE6, IE5xhttp new ActiveXObject(Microsoft.XMLHTTP);}//2. 发送请求xhttp.open(GET, http://localhost:81/ajaxServlet);xhttp.send();//3. 获取响应xhttp.onreadystatechange function() {if (this.readyState 4 this.status 200) {alert(this.responseText);}};
/script
/body
/html1.3 案例-用户注册时检测用户名是否数据库已经存在 前端完成的逻辑 给用户名输入框绑定光标失去焦点事件 onblur发送 ajax请求携带username参数处理响应是否显示提示信息 后端完成的逻辑 接收用户名调用service查询User。此案例是为了演示前后端异步交互所以此处我们不做业务逻辑处理返回标记 前端实现
% page contentTypetext/html;charsetUTF-8 languagejava %
% taglib prefixc urihttp://java.sun.com/jsp/jstl/core%
% page isELIgnoredfalse %!DOCTYPE html
html langen
headmeta charsetUTF-8title欢迎注册/titlelink hrefcss/register.css relstylesheet
/head
body
div classform-divdiv classreg-content iderrorMsg${login_msg} ${register_msg}h1欢迎注册/h1span已有帐号/span a hreflogin.jsp登录/a/divform idreg-form action/registerServlet methodposttabletrtd用户名/tdtd classinputsinput nameusername typetext idusernamebrspan idusername_err classerr_msg styledisplay:none用户名已经存在/span/td/trtrtd密码/tdtd classinputsinput namepassword typepassword idpasswordbrspan idpassword_err classerr_msg styledisplay: none密码格式有误/span/td/trtrtd验证码/tdtd classinputsinput namecheckCode typetext idcheckCode
%-- img srcimgs/a.jpg--%img idcheckCodeImg src/checkCodeServleta href# idchangeImg 看不清/a/td/trscriptdocument.getElementById(changeImg).onclick function () {//路径后面添加时间戳的目的是避免浏览器进行缓存静态资源document.getElementById(checkCodeImg).src /checkCodeServlet?new Date().getMilliseconds();}/script/tablediv classbuttonsinput value注 册 typesubmit idreg_btn/divbr classclear/form
/divscript//1. 给用户名输入框绑定 失去焦点事件document.getElementById(username).onblur function () {//2. 发送ajax请求// 获取用户名的值var username this.value;//2.1. 创建核心对象var xhttp;if (window.XMLHttpRequest) {xhttp new XMLHttpRequest();} else {// code for IE6, IE5xhttp new ActiveXObject(Microsoft.XMLHTTP);}//2.2. 发送请求xhttp.open(GET, http://localhost:81/selectUserServlet?usernameusername);xhttp.send();//2.3. 获取响应xhttp.onreadystatechange function() {if (this.readyState 4 this.status 200) {//alert(this.responseText);//判断if(this.responseText true){//用户名存在显示提示信息document.getElementById(username_err).style.display ;}else {//用户名不存在 清楚提示信息document.getElementById(username_err).style.display none;}}};}
/script
/body
/html后端实现 定义名为 SelectUserServlet 的servlet。代码如下 package com.web;import com.pojo.User;
import com.service.UserService;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;WebServlet(/selectUserServlet)
public class SelectUserServlet extends HttpServlet {private UserService service new UserService();Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 接收用户名String username request.getParameter(username);System.out.println(username);//2. 调用service查询User对象此处不进行业务逻辑处理直接给 flag 赋值为 true表明用户名占用User user service.selectByUserName(username);boolean flag false;if(user!null){flag true;}//3. 响应标记response.getWriter().write( flag);}Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}
测试
1.4 Axios
官方文档https://www.axios-http.cn/ Axios是对原生的AJAX进行封装用于简化书写 Axios 是一个基于 promise 网络请求库作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。 1.4.1 Axios快速入门 引入 axios 的 js 文件 script srcjs/axios-0.18.0.js/script使用axios 发送请求并获取响应结果 发送 get 请求
axios({method:get,url:http://localhost:8080/ajax-demo1/aJAXDemo1?usernamezhangsan}).then(function (resp){alert(resp.data);})发送 post 请求 axios({method:post,url:http://localhost:8080/ajax-demo1/aJAXDemo1,data:usernamezhangsan
}).then(function (resp){alert(resp.data);
});axios() 是用来发送异步请求的小括号中使用 js 对象传递请求相关的参数
method 属性用来设置请求方式的。取值为 get 或者 post。url 属性用来书写请求的资源路径。如果是 get 请求需要将请求参数拼接到路径的后面格式为 url?参数名参数值参数名2参数值2。data 属性作为请求体被发送的数据。也就是说如果是 post 请求的话数据需要作为 data 属性的值。
then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 回调函数意思是该匿名函数在发送请求时不会被调用而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象通过 resp.data 可以获取到响应的数据。
1.4.2 请求别名 get 请求 axios.get(url[,config]) delete 请求 axios.delete(url[,config]) head 请求 axios.head(url[,config]) options 请求 axios.option(url[,config]) post 请求axios.post(url[,data[,config]) put 请求axios.put(url[,data[,config]) patch 请求axios.patch(url[,data[,config])
入门案例中的 get 请求代码可以改为如下
axios.get(http://localhost:8080/ajax-demo/axiosServlet?usernamezhangsan).then(function (resp) {alert(resp.data);
});入门案例中的 post 请求代码可以改为如下
axios.post(http://localhost:8080/ajax-demo/axiosServlet,usernamezhangsan).then(function (resp) {alert(resp.data);
})1.5 JSON 概念JavaScript Object NotationJavaScript 对象表示法 作用json 格式数据的简单以及所占的字节数少等优点。作为数据的载体在网络中进行数据传输 如下是 JavaScript 对象的定义格式
{name:zhangsan,age:23,city:北京
}AJAX 的格式
studentname张三/nameage23/agecity北京/city
/studentJSON 的格式
{name:zhangsan,age:23,city:北京
}1.5.1 Json的基础语法
JSON 本质就是一个字符串但是该字符串内容是有一定的格式要求的。
var 变量名 {key:value,key:value,...};JSON 串的键要求必须使用双引号括起来而值根据要表示的类型确定。value 的数据类型分为如下 数字整数或浮点数字符串使用双引号括起来逻辑值true或者false数组在方括号中对象在花括号中null 示例 var jsonStr {name:zhangsan,age:23,addr:[北京,上海,西安]}创建一个页面在该页面的 script 标签中定义json字符串
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
script//1. 定义JSON字符串var jsonStr {name:zhangsan,age:23,addr:[北京,上海,西安]}alert(jsonStr);/script
/body
/html获取该 JSON 中的值 如果它是一个 js 对象我们就可以通过 js对象.属性名 的方式来获取数据。JS 提供了一个对象 JSON 该对象有如下两个方法 parse(str) 将 JSON串转换为 js 对象。 使用方式是 var jsObject JSON.parse(jsonStr);stringify(obj) 将 js 对象转换为 JSON 串。 使用方式是var jsonStr JSON.stringify(jsObject) 代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
script//1. 定义JSON字符串var jsonStr {name:zhangsan,age:23,addr:[北京,上海,西安]}alert(jsonStr);//2. 将 JSON 字符串转为 JS 对象let jsObject JSON.parse(jsonStr);alert(jsObject)alert(jsObject.name)//3. 将 JS 对象转换为 JSON 字符串let jsonStr2 JSON.stringify(jsObject);alert(jsonStr2)
/script
/body
/html应用 使用 axios 发送请求时如果要携带复杂的数据时都会以 JSON 格式进行传递如下 axios({method:post,url:http://localhost:8080/ajax-demo/axiosServlet,data:usernamezhangsan
}).then(function (resp) {alert(resp.data);
})JS对象的封装
var jsObject {name:张三};axios({method:post,url:http://localhost:8080/ajax-demo/axiosServlet,data:jsObject //这里 axios 会将该js对象转换为 json 串的
}).then(function (resp) {alert(resp.data);
})1.5.2 FastJson的使用
Fastjson 是阿里巴巴提供的一个Java语言编写的高性能功能完善的 JSON 库是目前Java语言中最快的 JSON 库可以实现 Java 对象和 JSON 字符串的相互转换。
5.3.2 Fastjson 使用
Fastjson 使用也是比较简单的分为以下三步完成 导入坐标 dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion1.2.62/version
/dependencyJava对象转JSON String jsonStr JSON.toJSONString(obj);将 Java 对象转换为 JSON 串只需要使用 Fastjson 提供的 JSON 类中的 toJSONString() 静态方法即可。 JSON字符串转Java对象 User user JSON.parseObject(jsonStr, User.class);将 json 转换为 Java 对象只需要使用 Fastjson 提供的 JSON 类中的 parseObject() 静态方法即可。
测试
javapublic class FastJsonDemo {public static void main(String[] args) {//1. 将Java对象转为JSON字符串User user new User();user.setId(1);user.setUsername(zhangsan);user.setPassword(123);String jsonString JSON.toJSONString(user);System.out.println(jsonString);//{id:1,password:123,username:zhangsan}//2. 将JSON字符串转为Java对象User u JSON.parseObject({\id\:1,\password\:\123\,\username\:\zhangsan\}, User.class);System.out.println(u);}}2. Vue
2.1 介绍
官网 Vue 是一款流行的前端 JavaScript 框架用于构建用户界面。 免除原生JavaScript中的DOM操作简化书写 DOM 操作指的是使用 JavaScript 来访问、修改和操作文档对象模型DOM中的元素、属性和内容的过程。 基于MVVM思想实现数据的双向绑定 2.2 Vue快速入门
https://cn.vuejs.org/
步骤 新建 HTML 页面引入 Vue.js文件 script srcjs/vue.js/script在JS代码区域创建Vue核心对象进行数据绑定 new Vue({el: #app,data() {return {username: }}
});创建 Vue 对象时需要传递一个 js 对象而该对象中需要如下属性 el 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值data 用来定义数据模型methods 用来定义函数。这个我们在后面就会用到 编写视图 div idappinput nameusername v-modelusername {{username}}
/div{{}} 是 Vue 中定义的 插值表达式 在里面写数据模型到时候会将该模型的数据值展示在这个位置。
整体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idappinput v-modelusername!--插值表达式--{{username}}
/div
script srcjs/vue.js/script
script//1. 创建Vue核心对象new Vue({el:#app,data(){ // data() 是 ECMAScript 6 版本的新的写法return {username:}}/*data: function () {return {username:}}*/});/script
/body
/html整体代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
h1hello vue/h1div idapp
!-- 使用了 v-model 指令来实现双向数据绑定--input v-model:idusername
!-- 插值表达式它会将 username 的值动态地显示在页面上--{{username}}}
/div!--引入vue文件--
script src js/vue.js/script
script//1.创建vue核心对象并将其绑定到id为”app“的元素上//这个vue实例包括名为username的数据属性初始值为空new vue({el:#app,data:function (){return{username:}}});/script/body!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyh1hello vue/h1
div id appinput v-modelusername{{username}}
/divscript src js/vue.js/script
scriptnew Vue({el:#app,data(){return{username:}}});
/script/body
/html2.3 Vue常用指令和生命周期
指令作用v-bind为HTML标签绑定属性值如设置 href , css样式等v-model在表单元素上创建双向数据绑定v-on为HTML标签绑定事件v-if条件性的渲染某元素判定为true时渲染,否则不渲染v-elsev-else-ifv-show根据条件展示某元素区别在于切换的是display属性的值v-for列表渲染遍历容器的元素或者对象的属性 v-bind 该指令可以给标签原有属性绑定模型数据。这样模型数据发生变化标签属性值也随之发生变化 例如 a v-bind:hrefurl百度一下/a上面的 v-bind: 可以简化写成 : 如下 !--v-bind 可以省略
--
a :hrefurl百度一下/av-model 该指令可以给表单项标签绑定模型数据。这样就能实现双向绑定效果。例如 input nameusername v-modelusername!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idappa v-bind:hrefurl点击一下/aa :hrefurl点击一下/ainput v-modelurl
/divscript srcjs/vue.js/script
script//1. 创建Vue核心对象new Vue({el:#app,data(){return {username:,url:https://www.baidu.com}}});
/script
/body
/html3. ElementUI Element UI 是一个基于 Vue 的前端 UI 框架提供了丰富的可复用的 UI 组件可用于快速构建漂亮和功能丰富的用户界面 Element是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库用于快速构建网页。Element 提供了很多组件组成网页的部件供我们使用。例如 超链接、按钮、图片、表格等等 3.1 快速入门 将资源 element-ui 文件夹直接拷贝到项目的 webapp 下。 创建页面并在页面引入Element 的css、js文件 和 Vue.js script srcvue.js/script
script srcelement-ui/lib/index.js/script
link relstylesheet hrefelement-ui/lib/theme-chalk/index.css.创建Vue核心对象 Element 是基于 Vue 的所以使用Element时必须要创建 Vue 对象 scriptnew Vue({el:#app})
/script官网复制Element组件代码 在左菜单栏找到 Button 按钮 然后找到自己喜欢的按钮样式点击 显示代码 在下面就会展示出对应的代码将这些代码拷贝到我们自己的页面即可。
整体页面代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idappel-rowel-button默认按钮/el-buttonel-button typeprimary主要按钮/el-buttonel-button typesuccess成功按钮/el-buttonel-button typeinfo信息按钮/el-buttonel-button typewarning警告按钮/el-buttonel-button typedanger删除/el-button/el-rowel-rowel-button plain朴素按钮/el-buttonel-button typeprimary plain主要按钮/el-buttonel-button typesuccess plain成功按钮/el-buttonel-button typeinfo plain信息按钮/el-buttonel-button typewarning plain警告按钮/el-buttonel-button typedanger plain危险按钮/el-button/el-rowel-rowel-button round圆角按钮/el-buttonel-button typeprimary round主要按钮/el-buttonel-button typesuccess round成功按钮/el-buttonel-button typeinfo round信息按钮/el-buttonel-button typewarning round警告按钮/el-buttonel-button typedanger round危险按钮/el-button/el-rowel-rowel-button iconel-icon-search circle/el-buttonel-button typeprimary iconel-icon-edit circle/el-buttonel-button typesuccess iconel-icon-check circle/el-buttonel-button typeinfo iconel-icon-message circle/el-buttonel-button typewarning iconel-icon-star-off circle/el-buttonel-button typedanger iconel-icon-delete circle/el-button/el-row
/divscript srcjs/vue.js/script
script srcelement-ui/lib/index.js/script
link relstylesheet hrefelement-ui/lib/theme-chalk/index.cssscriptnew Vue({el:#app})
/script/body
/html3.2 Element 布局
Element 提供了两种布局方式分别是
Layout 布局Container 布局容器
