Java Web 开发从入门到实践课件 第11章 - Vue框架

第四篇

流行框架篇JavaWeb开发从入门到实践JavaWebDevelopmentFromIntroductiontoPracticeVue框架Chap11提纲Vue框架Vue是一个渐进式的JavaScript框架，专注于构建用户界面，而Element-UI是基于Vue的高质量组件库，提供了丰富的UI元素和交互功能，帮助快速开发现代化的Web应用。11.1Vue技术11.2Element-UI组件11.3本章小结11.1Vue技术11.1.1Vue入门及应用11.1.2Vue入门案例11.1.3Axios数据交互11.1.4Axios案例11.1.1Vue入门及应用图

11-1

MVVM模型Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。Vue是基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。MVVM模式有助于将应用程序的业务和表示逻辑与用户界面(UI)清晰分离。保持应用程序逻辑和UI之间的清晰分离有助于解决许多开发问题，并使应用程序更易于测试、维护和演变。什么是Vue11.1.1Vue入门及应用模型数据层（Model）：是指数据模型，也就是vue中的data数据，需要从数据库或者一些数据介质中取出来。视图（View）：直接面向最终用户的“视图层”，它是提供给用户的操作界面。前端主要由HTML和CSS来构建，为了更方便地展现ViewModel或者Model层的数据，已经产生了各种各样的前后端模板语言，例如，artTemplate等。视图模型层（ViewMode）：视图模型层是整个mvvm的核心，连接Model和View，实现数据和页面双向绑定。11.1.1Vue入门及应用Vue快速入门案例：创建一个Vue实例，并访问Vue中的data数据（1）新建HTML页面，引入Vue.js文件<scriptsrc="js/vue.js"></script>（2）在JS代码区域，创建Vue核心对象，定义数据模型<script> newVue({ el:"#app", data:{ message:"HelloVue!" } })</script>11.1.1Vue入门及应用（3）编写视图

<divid="app">

{{message}}

<inputtype="text"v-model="message"></div>{{message}}是插值表达式Vue常用指令表

11-1

Vue常用指令指令作用v-bind为HTML标签绑定属性，如设置href等v-model在表单元素上创建双向数据绑定v-on为HTML标签绑定事件v-if、v-else-if、v-else条件性的渲染某元素，判定为true时渲染，否则不渲染v-show根据条件展示某元素，区别在于切换的是display属性的值v-for列表渲染，遍历容器的元素或者对象的属性11.1.1Vue入门及应用Vue常用指令示例<divid="app"> <av-bind:href="url">新浪</a> <a:href="url">新浪</a> <inputtype="text"v-model="url"> <inputtype="button"value="单击事件"v-on:click="handle()"> <inputtype="button"value="单击事件"@click="handle()">

成绩{{score}},经判定为： <spanv-if="score>=85">优秀</span> <spanv-else-if="score>=75">良好</span> <spanv-else>及格</span>

成绩{{score}},经判定为： <spanv-show="score>=85">优秀</span> <divv-for="(name,index)innames">{{index+1}}{{name}}</div></div>11.1.1Vue入门及应用Vue常用指令示例<scriptsrc="js/vue.js"></script><script>newVue({ el:"#app", data:{ url:"", score:90, names:["Charles","Jack","Mia"] }, methods:{ handle:function(){ alert("触发单击事件"); } },})</script>注意，v-bind:可以缩写为:，通过v-bind或者v-model绑定的变量，必须在数据模型中声明。11.1.1Vue入门及应用Vue生命周期生命周期是指一个对象从创建到销毁的整个过程。Vue生命周期包含八个阶段表

11-2Vue生命周期八个阶段状态阶段周期beforeCreate创建前created创建后beforeMount挂载前mounted挂载完成beforeUpdate更新前updated更新后beforeDestroy销毁前destroyed销毁后11.1.1Vue入门及应用生命周期示例<script> newVue({ el:"#app", data:{ }, mounted(){ console.log("Vue挂载完成") }, methods:{ }, })</script>11.1.2Vue入门案例案例：创建一个Vue实例，并访问Vue中的data数据图

11-2

用户数据11.1.2Vue入门案例<divid="app"style="margin:0pxauto;"><tableborder="1"cellspacing="0"width="60%"><tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>成绩</th><th>等级</th></tr><tralign="center"v-for="(user,index)inusers"><td>{{index+1}}</td><td>{{}}</td><td><spanv-if="user.sex==1">男</span><spanv-if="user.sex==2">女</span></td><td>{{user.age}}</td><td>{{user.score}}</td><td><spanv-if="user.score>=85">优秀</span><spanv-else-if="user.score>=60">及格</span><spanstyle="color:red;"v-else>不及格</span></td></tr></table></div>11.1.2Vue入门案例<script>newVue({el:"#app",data:{users:[{name:'Charles',sex:1,age:35,score:95},{name:'Mia',sex:1,age:30,score:80},{name:'July',sex:2,age:35,score:58}]}})</script>11.1.3Axios数据交互Axios（AjaxI/OSystem）是一个基于Promise的HTTP库，可以工作于浏览器，也可以在node.js中使用。它是一个非常强大和流行的第三方库，可以轻松地发送异步请求并处理响应数据。Axios不是一种新技术,本质上还是对原生XMLHttpRequest的封装。Apifox-Postman在线API调试工具Apifox官网，进行注册并登录1、首先创建数据模型2、然后分享接口文档具体步骤参考书籍11.1.3Axios数据交互Axios入门Axios是一个基于promise的网络请求库，对原生的Ajax进行了封装，简化书写，快速开发。（1）引入Axios的js文件<scriptsrc="js/axios-0.18.0.js"></script>（2）使用Axios发送请求，并获取响应结果Axios发送请求常用的二种方式是GET和POST，每种方式有二种写法11.1.3Axios数据交互GET请求方式<script>functionget(){//第一种方式：通过向axios传递相关配置来创建请求axios({method:"GET",url:"/m1/3496474-0-default/users/1"}).then((result)=>{console.log(result.data);}).catch((err)=>{console.log(err);});

//第二种方式（推荐方式）：请求别名的方式，简化请求方法配置的API。axios.get("/m1/3496474-0-default/users/1").then((result)=>{console.log(result.data);})}</script>11.1.3Axios数据交互POST请求方式<script>

functionpost(){

//第一种方式：通过向axios传递相关配置来创建请求

axios({

method:"POST",

//url:"/m1/3496474-0-default/users?username=zhangsan",//Apifox设置为Post请求

url:"/m1/3496474-0-default/users",

data:"username=jack"

}).then((result)=>{

console.log(result.data)

}).catch((err)=>{

console.log(err);

});

//第二种方式（推荐方式）：请求别名的方式，简化请求方法配置的API。

axios.post("/m1/3496474-0-default/users","username=jack").then((result)=>{

console.log(result.data);

})

}</script>11.1.4Axios案例案例：基于Vue及Axios完成数据的动态加载展示（1）数据准备图

11-4

响应数据11.1.4Axios案例案例：基于Vue及Axios完成数据的动态加载展示（1）在页面加载完成后，自动发送异步请求，加载数据图

11-5用户信息展示11.1.4Axios案例<head><scriptsrc="js/vue.js"></script><script>VductionTip=false</script></head><body><divid="app"><tableborder="1"cellspacing="0"width="60%"><trstyle="height:40px;"><th>序号</th><th>编号</th><th>姓名</th><th>头像</th><th>性别</th><th>年龄</th><th>状态</th><th>email</th></tr><tralign="center"v-for="(user,index)inusers"><td>{{index+1}}</td><td>{{user.id}}</td><td>{{}}</td><td><img:src="user.img"width="70px"height="40px"></td>

11.1.4Axios案例<td><spanv-if="user.sex==1">男</span><spanv-else-if="user.sex==0">女</span><spanv-else>未知</span></td><td>{{user.age}}</td><td><spanv-if="user.state==1">启用</span><spanv-else-if="user.state==0">停用</span><spanv-else>未知</span></td><td>{{user.email}}</td></tr></table></div></body>11.1.4Axios案例<scriptsrc="js/axios-0.18.0.js"></script><script>newVue({el:"#app",//接管区域data:{users:[]},//注意：不能放在methods中mounted(){axios.get("/m1/3496474-0-default/users").then((result)=>{console.log(result.data);this.users=result.data.data;})}})</script>11.2Element-UI组件11.2.1前端工程化11.2.2Vue组件库Element11.2.1前端工程化前端工程化是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。前端工程化包括模块化（JS、CSS）、组件化（UI结构、样式、行为）、规范化（目录结构、编码、接口）和自动化（构建、部署和测试）。实际开发中，通常基于vue-cli搭建前端工程化项目。vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板。vue-cli提供的功能包括统一的目录结构、本地调试、热部署、单元测试和集成打包上线。vue-cli依赖NodeJS。（1）安装vue-cli：使用管理员身份运行命令行npminstall-g@vue/cli（2）创建项目vuecreatevue-element图形化界面方式命令行方式vueui11.2.1前端工程化图

11-6

Vue项目的目录结构图图

11-7

src目录下的目录结构11.2.1前端工程化（3）启动Vue项目方式一：图形化界面（点击servevue-cli-serviceserve后面的“Run”图标）图

11-8

图形化界面启动Vue项目方式二：命令行（执行命令“npmrunserve”）图

11-9

命令行启动Vue项目11.2.1前端工程化（4）配置Vue项目的端口默认端口为8080，可以在文件vue.config.js中修改端口号，端口号改为7000的代码如下：const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({ publicPath:"./",//公共路径（必须有的） transpileDependencies:true, devServer:{ port:7000 }})11.2.1前端工程化（5）Vue项目开发流程public目录下index.html是默认首页，src下的main.js是入口文件，src下的App.vue是根组件。index.html<body> <noscript> <strong>We'resorrybut<%=htmlWebpackPlugin.options.title%>doesn'tworkproperlywithoutJavaScriptenabled.Pleaseenableittocontinue.</strong> </noscript> <divid="app"></div> <!--builtfileswillbeautoinjected--></body>11.2.1前端工程化main.jsimportVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'VductionTip=falsenewVue({

router,

render:h=>h(App)}).$mount('#app')App.vue<template>

<div>

<h1>{{message}}</h1>

</div></template><script>exportdefault{

data(){

return{

message:"HelloVue-cli"

}

}}</script><style></style>11.2.2Vue组件库Element在Vue项目中通常引入一套不依赖业务的UI组件库ElementUI，该组件库可以减少用户对常用组件的封装，降低开发的难易程序。快速入门：Vue组件库ElementUI的简单使用（1）在当前工程目录下，执行命令“npminstallelement-ui@2.15.3”安装ElementUI组件库。（2）引入ElementUI组件库importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);11.2.2Vue组件库Element常见组件ElementUI组件库包含表格、Pagination分页、Dialog对话框、Form表单和Container布局容器等组件。（1）表格。Table表格用于展示多条结构类似的数据，可对数据进行排序、筛选或其它自定义操作。（2）Pagination分页。当数据量过多时，使用分页分解数据。（3）Dialog对话框。在保留当前页面状态的情况下，告知用户并承载相关操作。（4）Form表单。由输入框、单选按钮等控件组成，用以收集、校验、提交数据。（5）Container布局容器。用于页面布局，方便快速搭建页面的基本结构。11.2.2Vue组件库ElementVue路由VueRouter是Vue的官方路由，Vue路由负责将用户的浏览器URL与其内容定义的组件进行映射，

VueRouter由以下三部分组成。（1）VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件。（2）<router-link>：请求链接组件，浏览器会解析成<a>。（3）<router-view>：动态视图组件，用来渲染展示与路由路径对应的组件。图

11-10

Vue路由组件11.2.2Vue组件库ElementVue路由的使用步骤（1）安装Vue路由npminstallvue-router@3.5.1（2）定义路由：在“src→router”目录下的index.js文件中定义路由constroutes=[{path:'/dept',