网站开发使用语言,网站开发过程的基本环节,电商网站定制开发,西安高科鱼化建设有限公司网站vue基础回顾进阶
课程内容
VUE 基础回顾路由 Vue-Router状态管理 vuexTypeScript
1. VUE 基础回顾
1.1 基于脚手架创建前端工程
1.1.1 环境要求
要想基于脚手架创建前端工程#xff0c;需要具备如下环境要求#xff1a;
node.js 前端项目的运行环境 学习web阶段已安…vue基础回顾进阶
课程内容
VUE 基础回顾路由 Vue-Router状态管理 vuexTypeScript
1. VUE 基础回顾
1.1 基于脚手架创建前端工程
1.1.1 环境要求
要想基于脚手架创建前端工程需要具备如下环境要求
node.js 前端项目的运行环境 学习web阶段已安装 npm JavaScript的包管理工具 安装完node.js之后自带了npm这个命令 Vue CLI 基于Vue进行快速开发的完整系统实现交互式的项目脚手架 需要通过npm命令来安装
安装完node.js后可以通过命令行来查看版本号如下 安装 Vue CLI命令如下 1.1.2 操作过程
使用 Vue CLI 创建前端工程的方式
方式一vue create 项目名称 管理员的方式打开Dos窗口之后进入到一个非中文目录这个目录当做我们的VScode工作空间输入命令vue create vue-demo-1 上下键选择vue的版本这里以vue2为例 可以看到vue项目创建成功
方式二vue ui推荐
重点介绍使用 vue ui 命令创建前端工程的过程
第一步同样首先以管理员的方式打开命令行窗口之后切换到一个非中文的目录这个目录当做我们的VScode工作空间在命令行输入命令 vue ui在浏览器ui界面中选择前端工程存放的位置 第二步点击“在此创建新项目”按钮跳转到创建新项目设置页面。填写项目名称、选择包管理器为npm点击“下一步”按钮 第三步选择 Default(Vue 2)点击创建项目按钮完成项目的创建 1.1.3 工程结构
工程目录结构
1.1.4 启动前端服务
使用VS Code打开创建的前端工程启动前端工程 访问前端工程 注要停止前端服务可以在命令行终端使用 ctrl C
前端项目启动后服务端口默认为8080很容易和后端tomcat端口号冲突。如何修改前端服务的端口号
可以在vue.config.js中配置前端服务端口号
const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,devServer: {port: 7070 //指定前端服务端口号}
})1.2 vue基本使用方式
本章节从如下几个方面进行vue回顾
vue 组件文本插值属性绑定事件绑定双向绑定条件渲染axios
1.2.1 vue 组件
Vue 的组件文件以 .vue 结尾每个组件由三部分组成
结构 template样式 style逻辑 script 1.2.2 测试准备工作
说明
当前页面比较乱它自带了很多的数据为了方便测试效果把数据给它清理一下。 可以看到页面上还显示一个图片这是因为当前展示的这个页面并不是直接来自于HelloWorld.Vue组件而是这个App.vueApp.vue组件才是真正的项目入口页面App.vue页面中又引入了HelloWorld.Vue组件这个图片是设置在App.vue组件中此时不想要图片需要到App.vue组件中进行删除。 效果
1.2.3 文本插值
作用用来绑定 data 方法返回的对象属性
用法{{插值表达式}}
示例 测试
代码
templatediv classhello{{name}}{{age 60 ? 老年 : 青年}}/div
/templatescript
export default {name: HelloWorld,props: {msg: String},data() {return {name: 张三,age: 22}},}
/script!-- Add scoped attribute to limit CSS to this component only --
style scoped
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
/style
效果
1.2.4 属性绑定
作用为标签的属性绑定 data 方法中返回的属性
用法v-bind:xxx简写为 :xxx
示例 测试
代码
效果
1.2.5 事件绑定
作用为元素绑定对应的事件
用法v-on:xxx简写为 xxx
示例 测试 代码
效果
1.2.6 双向绑定
作用表单输入项和 data 方法中的属性进行绑定任意一方改变都会同步给另一方
用法v-model
示例 测试
代码
效果修改输入框的值name会发生变化点击事件方法修改name的值输入框的值会跟着改变
1.2.7 条件渲染
作用根据表达式的值来动态渲染页面元素
用法v-if、v-else、v-else-if
示例 测试 代码
效果
1.2.8 axios
Axios 是一个基于 promise 的 网络请求库作用于浏览器和 node.js 中。使用Axios可以在前端项目中发送各种方式的HTTP请求。
安装axios的命令npm install axios以管理员的方式打开VScode 导入import axios from axios axios 的 API 列表[ ]代表可选参数可以有可以没有。 参数说明
url请求路径data请求体数据最常见的是JSON格式数据config配置对象可以设置查询参数、请求头信息
注在使用axios时经常会遇到跨域问题。为了解决跨域问题可以在 vue.config.js 文件中配置代理
const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,devServer: {port: 7070,proxy: {/api: {target: http://localhost:8080,pathRewrite: {^/api: }}}}
})axios的post请求示例
axios.post(/api/admin/employee/login,{username:admin,password: 123456}).then(res {console.log(res.data)}).catch(error {console.log(error.response)})axios的get请求示例
axios.get(/api/admin/shop/status,{headers: {token: ‘xxx.yyy.zzz’}})axios提供的统一使用方式示例一可以发送各种方式的请求 axios提供的统一使用方式示例二可以发送各种方式的请求
axios({url: /api/admin/employee/login,method:post,data: {username:admin,password: 123456}}).then((res) {console.log(res.data.data.token)axios({url: /api/admin/shop/status,method: get,params: {id: 100},headers: {token: res.data.data.token}})}).catch((error) {console.log(error)})1.2.9 axios 测试没有配置跨域----post请求
HelloWorld.vue代码 input typebutton value发送POST请求 clickhandleSendPOST/handleSendPOST() {//通过axios发送post请求 提供了url data 没有提供config//地址是苍穹外卖后台登录的接口地址后台项目要先启动axios.post(http://localhost:8080/admin/employee/login,{username: admin,password: 123456}).then(res { //调用成功的回调函数console.log(res.data)}).catch(error { //调用失败的回调函数console.log(error.response)})},启动后台项目启动前端项目vue-demo-2点击按钮发送请求发现前后台没有任何反应f12查看控制台发现报错发生了跨域 原因发生了跨域问题前端的访问端口是7070后端的是8080当前是在7070服务中往8080这个端口发送所以产生了跨域。
解决需要配置代理
1.2.10 axios 测试配置跨域----post请求
为了解决跨域问题可以在 vue.config.js 文件中配置代理
代理的作用前端发送的请求先请求到代理上然后由代理进行转发到我们的后台服务这样就可以解决跨域问题了。 const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,devServer: {port: 7070,proxy: {/api: {//拦截前端发送的请求都含有api前缀的地址target: http://localhost:8080,//拦截后转发到的目标服务器地址pathRewrite: {//请求转发到后端后后端接口路径多了个/api匹配不上找不到controller所以需要去掉^/api: //路径重写把/api替换为空串 ^api表示以/api作为开头}}}}
})修改HelloWorld.vue中发送的后台请求地址http://localhost:8080—》/api 因为修改的是配置文件所以需要重启前端项目才能生效
再次发送请求
1.2.11 axios 测试get请求
HelloWorld.vue代码 input typebutton value发送GET请求 clickhandleSendGET/handleSendGET() {//通过axios发送get方式请求 指定了url店铺的营业状态 指定configaxios.get(/api/admin/shop/status,{//这个请求需要携带jwt的令牌地址才能正确访问复制上面发送post请求调用登录接口生成的令牌地址headers: { //指定config在请求头里追加参数tokentoken: eyJhbGciOiJIUzI1NiJ9.eyJlbXBJZCI6MSwiZXhwIjoxNzEwNjkyMTgxfQ.WAb2SoElTlJcobDCXUAqKPlm0At68LAexTz1MTwZdz4}}).then(res {console.log(res.data)})}, 对应的店铺营业状态接口
首先发送post请求复制返回的token.
刷新页面发送get请求成功 1.2.12 axios 测试通用方式发送请求
axios 统一使用方式axios(config)
HelloWorld.vue代码 input typebutton value统一请求方式 clickhandleSend/handleSend() {//使用axios提供的统一调用方式发送请求axios({url: /api/admin/employee/login,method: post, //默认是getdata: { //data表示通过请求体传参 username: admin,password: 123456}}).then(res {//成功回调console.log(res.data.data.token) //res.data返回的result对象里面包含datadata中又包含tokenaxios({ //在成功的回调函数里又发送一个get请求 获取店铺的营业状态url: /api/admin/shop/status,method: get,headers: {token: res.data.data.token //因为这个get方法实际上是在post请求的回调函数里面所以这个地方可以动态的获取token}})})}测试2次请求都成功发送 2. 路由 Vue-Router
2.1 Vue-Router 介绍
vue 属于单页面应用所谓路由就是根据浏览器路径不同用不同的视图组件替换这个页面内容。
单页面应用在整个vue应用中实际上只有一个页面我们看到的浏览器多个页面其实是一种假象它是通过页面切换 切换不同的视图组件
现实举例一块黑板不同的老师上课把之前老师写的内容删除掉之后写上自己课的内容。
这个替换的过程就是通过路由来完成的。 如上图所示不同的访问路径对应不同的页面展示。
基于Vue CLI 创建带有路由功能的前端项目
在vue应用中使用路由功能需要安装Vue-Router 注创建完带有路由功能的前端项目后在工程中会生成一个路由文件如下所示 关于路由的配置主要就是在这个路由文件中完成的。
为了能够使用路由功能在前端项目的入口文件main.js中创建Vue实例时需要指定路由对象
创建完路由项目后自动生成 启动项目查看效果点击不同的地址会自动切换页面 说明
什么是路由 根据浏览器访问路径不同展示不同的视图组件 vue应用中如何实现路由 通过 vue-router 实现路由功能需要安装js库npm install vue-router刚才之所以没有显示的去安装是因为在页面上使用了脚手架构建项目并且勾选了路由功能这样的话在创建这个前端工程时实际上就会通过这个命令安装所需要的库。如果是一个老项目使用路由功能此时需要执行此命令手动安装。
2.2 路由配置
首先了解一下路由组成
VueRouter路由器根据路由请求在路由视图中动态渲染对应的视图组件 路由器作用根据路由请求来渲染这个不同的视图具体渲染哪一个视图组件呢在路由器中其实会维护一个路由表它里面保存了映射关系某一个路由路径对应的那一个视图组件。 router-link路由链接组件浏览器会解析成a 作用生成超链接标签的 router-view路由视图组件用来展示与路由路径匹配的视图组件 展示某一个视图组件指定的位置本质是页面中的一个占位符通过路由去渲染不同的视图组件视图组件要渲染的就是这个页面router-view占位符所在的位置。 这三部分之间是如何协作的
点击路由链接组件超链接发起路由请求这个请求会交给路由器处理。路由器会根据路由路径的不同然后去渲染对应的视图组件具体渲染到这个路由视图组件 router-view这个占位符位置。
具体配置方式
基于脚手架创建前端项目的时候勾选了路由功能此时工程中路由的代码已经自动生成好了。
首先在package.json里面加入vue-router此时就可以在前端项目中使用路由功能了 然后在main.js入口文件中引入router这个router来自于index.js文件 找到router下面有一个index.js然后在这个文件里引入VueRouter这个VueRouter来自于node_modules保存创建好项目之后所依赖的包中的vue-router里
在路由文件index.js中配置路由路径和视图的对应关系路由表 import Vue from vue
import VueRouter from vue-router
import HomeView from ../views/HomeView.vueVue.use(VueRouter)//维护路由表某个路由路径对应哪个视图组件
const routes [{path: /, //对应一个路由路径name: home, //名字component: HomeView //路径所对应的视图组件 方式一静态导入最终项目上线需要打包打包会把这些组件}, // 打到同一个js文件里面两种打包方式不同// 性能稍差不管你视图展示不展示都打入到同一个js文件里面导致这个js文件非常大// 哪怕你这个视图从来没有强求过没显示过但是这部分资源已经加载了{path: /about,name: about,// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.//方式二动态导入推荐 懒加载策略打包的时候会单独的把这些组件打到js文件里面// 性能更好按需引入因为它是单独的把这些视图组件单独的打到js文件里面// 只有请求这个视图它才会加载这个js文件如果不请求就不会加载了。component: () import(/* webpackChunkName: about */ ../views/AboutView.vue)}
]const router new VueRouter({routes
})export default router
在视图组件App.vue入口页面文件中配置 router-link标签用于生成超链接 router-link to/Home/router-link | !-- 路由链接组件生成超链接 --router-link to/aboutAbout/router-link在视图组件汇总配置router-view标签占位符视图渲染到的位置 效果可以来回切换 要实现路由跳转可以通过标签式和编程式两种
标签式router-link to/aboutAbout/router-link 通过router-link标签生成超链接实现跳转 编程式this.$router.push(/about) 通过js代码实现跳转
测试编程式
代码
input typebutton value编程式路由跳转 clickjump/ !-- 方法不需要参数的话()可以省略掉 --script
export default {methods: {jump() {//使用编程路由的方式跳转 具体的路由路径路由表中配置的路径this.$router.push(/about,() {})}}
}
/script效果点击按钮也能跳转到about页面 问题思考如果用户访问的路由地址不存在该如何处理
可以通过配置一个404视图组件当访问的路由地址不存在时则重定向到此视图组件具体配置如下
index.js文件路由表 /* 只写这一个配置的效果我们访问到404路径的时候就可以访问到这个组件而我们的需求是 当用户访问一个不存在的路径时才会跳转到404视图去展示所以还需要接着配置重定向*/{path: /404, //name可以不用配置component: () import(../views/404View.vue)},/* 配置重定向流程当用户访问到一个不存在的路径就会重定向到/404,/404路径对应的就是404页面组件 */{path: *, //上面这些访问的路径都没匹配上才会走这最后一个路径redirect: /404 //重定向到/404访问路径}App.vue超链接
router-link to/testTest/router-link | !-- 没有对应的路由路径/test --路由请求路径不存在跳转的页面组件 templatediv classabouth1您请求的资源不存在/h1/div
/template
效果
2.3 嵌套路由
嵌套路由组件内要切换内容就需要用到嵌套路由子路由效果如下
在App.vue视图组件中有router-view标签其他视图组件可以展示在此 ContainerView.vue组件可以展示在App.vue视图组件的router-view位置 ContainerView.vue组件进行了区域划分分为上、左、右在右边编写了router-view标签点击左侧菜单时可以将对应的子视图组件展示在此 总结
原先是不同的vue组件嵌套到App.vue入口视图组件页面中现在是不同的子组件先嵌套到ContainerView.vue组件中ContainerView.vue组件在嵌套到App.vue入口视图组件中。
实现步骤
第一步安装并导入 elementui实现页面布局Container 布局容器—ContainerView.vue
安装 elementui
npm i element-ui -S导入 elementui在 main.js 中写入以下内容
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;Vue.use(ElementUI);//全局使用ElementUi实现页面布局Container 布局容器—ContainerView.vue
templateel-containerel-headerHeader/el-headerel-containerel-aside width200px/el-asideel-main/el-main/el-container/el-container
/templatescript
export default {}
/scriptstyle
.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;}body .el-container {margin-bottom: 40px;}.el-container:nth-child(5) .el-aside,.el-container:nth-child(6) .el-aside {line-height: 260px;}.el-container:nth-child(7) .el-aside {line-height: 320px;}
/style第二步提供子视图组件用于效果展示 —P1View.vue、P2View.vue、P3View.vue
templatediv这是P1 View/div
/templatescript
export default {}
/scriptstyle
.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;}body .el-container {margin-bottom: 40px;}.el-container:nth-child(5) .el-aside,.el-container:nth-child(6) .el-aside {line-height: 260px;}.el-container:nth-child(7) .el-aside {line-height: 320px;}
/style第三步在 src/router/index.js 中配置路由映射规则嵌套路由配置 {path: /c,component: () import(../views/container/ContainerView.vue),//嵌套路由子路由对应的组件会展示在当前组件内部children: [//通过children属性指定子路由相关信息path、component{path: /c/p1,component: () import(../views/container/P1View.vue)},{path: /c/p2,component: () import(../views/container/P2View.vue)},{path: /c/p3,component: () import(../views/container/P3View.vue)}]}第四步在ContainerView.vue 布局容器视图中添加实现子视图组件展示
el-mainrouter-view/
/el-main第五步在ContainerView.vue 布局容器视图中添加实现路由请求
el-aside width200pxrouter-link to/c/p1P1/router-linkbrrouter-link to/c/p2P2/router-linkbrrouter-link to/c/p3P3/router-linkbr
/el-aside效果http://localhost:8080/#/c 点击超链接http://localhost:8080/#/c/p1右侧会进行替换组件。
注意子路由变化切换的是【ContainerView 组件】中 router-view/router-view 部分的内容
问题思考
1.对于前面的案例如果用户访问的路由是 /c会有什么效果呢 2.如何实现在访问 /c 时默认就展示某个子视图组件呢
配置重定向当访问/c时直接重定向到/c/p1即可如下配置 redirect :/c/p1,效果
3. 状态管理 vuex待定P177
3.1 vuex 介绍
vuex 是一个专为 Vue.js 应用程序开发的状态管理库vuex 可以在多个组件之间共享数据并且共享的数据是响应式的即数据的变更能及时渲染到模板vuex 采用集中式存储管理所有组件的状态
每一个 Vuex 应用的核心就是 store仓库。“store”基本上就是一个容器它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候若 store 中的状态发生变化那么相应的组件也会相应地得到高效更新。你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
安装vuexnpm install vuexnext --save
vuex中的几个核心概念
state状态对象集中定义各个组件共享的数据mutations类似于一个事件用于修改共享数据要求必须是同步函数actions类似于mutation可以包含异步操作通过调用mutation来改变共享数据
3.2 使用方式
本章节通过一个案例来学习vuex的使用方式具体操作步骤如下
第一步创建带有vuex功能的前端项目 注在创建的前端工程中可以发现自动创建了vuex相关的文件(src/store/index.js)并且在main.js中创建Vue实例时需要将store对象传入代码如下
import Vue from vue
import App from ./App.vue
import store from ./storeVue.config.productionTip falsenew Vue({store,//使用vuex功能render: h h(App)
}).$mount(#app)第二步在src/store/index.js文件中集中定义和管理共享数据
import Vue from vue
import Vuex from vuex
import axios from axiosVue.use(Vuex)//集中管理多个组件共享的数据
export default new Vuex.Store({//集中定义共享数据state: {name: 未登录游客},getters: {},//通过当前属性中定义的函数修改共享数据必须都是同步操作mutations: {},//通过actions调用mutation在actions中可以进行异步操作actions: {},modules: {}
})第三步在视图组件中展示共享数据
templatediv classhelloh1欢迎你{{$store.state.name}}/h1/div
/template注$store.state为固定写法用于访问共享数据
第四步在mutations中定义函数用于修改共享数据 //通过当前属性中定义的函数修改共享数据必须都是同步操作mutations: {setName(state,newName) {state.name newName}},第五步在视图组件中调用 mutations 中定义的函数 注mutations中定义的函数不能直接调用必须通过状态对象的 commit 方法来调用
第六步如果在修改共享数据的过程中有异步操作则需要将异步操作的代码编写在actions的函数中 //通过actions调用mutation在actions中可以进行异步操作actions: {setNameByAxios(context){axios({ //异步请求url: /api/admin/employee/login,method: post,data: {username: admin,password: 123456}}).then(res {if(res.data.code 1){//异步请求后需要修改共享数据//在actions中调用mutation中定义的setName函数context.commit(setName,res.data.data.name)}})}},注在actions中定义的函数可以声明context参数通过此参数可以调用mutations中定义的函数
第七步在视图组件中调用actions中定义的函数 注在actions中定义的函数不能直接调用必须通过 this.$store.dispatch(‘函数名称’) 这种方式调用
4. TypeScript
4.1 TypeScript 介绍
TypeScript简称TS 是微软推出的开源语言TypeScript 是 JavaScript 的超集JS 有的 TS 都有 TypeScript Type JavaScript在 JS 基础上增加了类型支持TypeScript 文件扩展名为 tsTypeScript 可编译成标准的 JavaScript并且在编译时进行类型检查 在前端项目中使用TS需要进行安装命令为npm install -g typescript
查看TS版本 TS初体验
创建 hello.ts 文件内容如下
//定义一个函数 hello并且指定参数类型为string
function hello(msg:string) {console.log(msg)
}//调用上面的函数传递非string类型的参数
hello(123)使用 tsc 命令编译 hello.ts 文件 可以看到编译报错提示参数类型不匹配。这说明在编译时TS会进行类型检查。需要注意的是在编译为JS文件后类型会被擦除。
思考TS 为什么要增加类型支持
TS 属于静态类型编程语言JS 属于动态类型编程语言静态类型在编译期做类型检查动态类型在执行期做类型检查对于 JS 来说需要等到代码执行的时候才能发现错误晚对于 TS 来说在代码编译的时候就可以发现错误早配合 VSCode 开发工具TS 可以提前到在编写代码的同时就发现代码中的错误减少找 Bug、改 Bug 的时间
在前端项目中使用TS需要创建基于TS的前端工程 4.2 TypeScript 常用类型
TS中的常用类型如下
类型例备注字符串类型string数字类型number布尔类型boolean数组类型number[],string[], boolean[] 依此类推任意类型any相当于又回到了没有类型的时代复杂类型type 与 interface函数类型() void对函数的参数和返回值进行说明字面量类型“a”|“b”|“c”限制变量或参数的取值class 类class Animal
4.2.1 类型标注的位置
基于TS进行前端开发时类型标注的位置有如下3个
标注变量标注参数标注返回值 4.2.2 字符串、数字、布尔类型
字符串、数字、布尔类型是前端开发中常用的类型 4.2.3 字面量类型
字面量类型用于限定数据的取值范围类似于java中的枚举 4.2.4 interface 类型
interface 类型是TS中的复杂类型它让 TypeScript 具备了 JavaScript 所缺少的、描述较为复杂数据结构的能力。 可以通过在属性名后面加上表示当前属性为可选如下 4.2.5 class 类型
使用 class 关键字来定义类类中可以包含属性、构造方法、普通方法等 在定义类时可以使用 implments 关键字实现接口如下 在定义类时可以使用 extends 关键字 继承其他类如下
