沈阳网站建设本地化技术服务,热点事件舆情分析,科技官网,十大网页设计大全1. Nuxt.js 概述
1.1 我们一起做过的SPA SPA#xff08;single page web application#xff09;单页 Web 应用#xff0c;Web 不再是一张张页面#xff0c;而是一个整体的应用#xff0c;一个由路由系统、数据系统、页面#xff08;组件#xff09;系统等等#xff0…
1. Nuxt.js 概述
1.1 我们一起做过的SPA SPAsingle page web application单页 Web 应用Web 不再是一张张页面而是一个整体的应用一个由路由系统、数据系统、页面组件系统等等组成的应用程序。 我们之前学习的Vue就是SPA中的佼佼者。 SPA 应用广泛用于对SEO要求不高的场景中
1.2 什么是SEO SEO搜索引擎优化Search Engine Optimization, 通过各种技术手段来确保我们的Web内容被搜索引擎最大化收录最大化提高权重最终带来更多流量。 非常明显SPA程序不利于SEO SEO解决方案提前将页面和数据进行整合 前端采用SSR 后端页面静态化 freemarker 、thymeleaf、velocity
1.3 什么是SSR技术 服务端渲染Server Side Render即网页是通过服务端渲染生成后输出给客户端。 在SSR中前端分成2部分前端客户端、前端服务端前端服务端用于发送ajax获得数据前端客户端用于将ajax数据和页面进行渲染渲染成html页面并响应给调用程序浏览器、爬虫 如果爬虫获得html页面就可以启动处理程序处理页面内容最终完成SEO操作。
1.4 SPA和SSR对比
SPA单页应用程序SSR服务器端渲染优势1.页面内容在客户端渲染2. 只关注View层与后台耦合度低前后端分离3.减轻后台渲染画面的压力1.更好的SEO搜索引擎工具可以直接查看完全渲染的画面2.更快的内容到达时间 (time-to-content)用户能更快的看到完整渲染的画面劣势1.首屏加载缓慢2.SEO(搜索引擎优化)不友好1.更多的服务器端负载2.涉及构建设置和部署的更多要求需要用Node.js渲染3.开发条件有限制一些生命周期将失效4.一些常用的浏览器API无法使用
1.5 什么是Nuxt.js Nuxt.js 是一个基于 Vue.js 的通用应用框架。 Nuxt支持vue的所有功能此类内容为前端客户端内容。Nuxt特有的内容都是前端服务端内容。 通过对客户端/服务端基础架构的抽象组织Nuxt.js 主要关注的是应用的 UI 渲染。 Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。
2 入门案例
2.1 create-nuxt-app 介绍 Nuxt.js 提供了脚手架工具 create-nuxt-app create-nuxt-app 需要使用 npx npx 命令为 NPM版本5.2.0默认安装组件
2.2 安装
npx create-nuxt-app project-name例如
npx create-nuxt-app demo_nuxt022.3 启动
npm run devnuxtjs改善
2.4 访问
http://localhost:30003. 目录结构
3.1 目录
目录名称描述assets资源目录用于存放需要编译的静态资源。例如LESS、SASS等 默认情况下Nuxt使用Webpack若干加载器处理目录中的文件componentsvue组件目录Nuxt.js 不会增强该目录及不支持SSRlayouts布局组件目录pages页面目录所有的vue视图nuxt根据目录结构自动生成对应的路由。plugins插件目录static静态文件目录不需要编译的文件storevuex目录nuxt.config.jsnuxt个性化配置文件内容将覆盖默认package.json项目配置文件 3.2 别名 assets 资源的引用~ 或 // HTML 标签
img src~assets/13.jpg styleheight:100px;width:100px; alt
img src~/assets/13.jpg styleheight:100px;width:100px; alt
img src/assets/13.jpg styleheight:100px;width:100px; alt// CSS
background-image: url(~assets/13.jpg);
background-image: url(~/assets/13.jpg);
background-image: url(/assets/13.jpg);static 目录资源的引用/ 直接引用 //html标签
img src/12.jpg styleheight:100px;width:100px; alt//css
background-image: url(/12.jpg);实例 templatediv!-- 引用 assets 目录下经过 webpack 构建处理后的图片 --img src~assets/13.jpg styleheight:100px;width:100px; alt!-- 引用 static 目录下的图片 --img src/12.jpg styleheight:100px;width:100px; alt!-- css --div classimg1/divdiv classimg2/div/div
/templatescript
export default {}
/scriptstyle.img1 {height: 100px;width: 100px;background-image: url(~assets/13.jpg);background-size: 100px 100px;display: inline-block;}.img2 {height: 100px;width: 100px;background-image: url(/12.jpg);background-size: 100px 100px;display: inline-block;}
/style4 路由
4.1 路由概述
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。要在页面之间切换路由我们建议使用nuxt-link 标签。
标签名描述nuxt-linknuxt.js中切换路由Nuxt /nuxt.js的路由视图router-linkvue默认切换路由router-view/vue默认路由视图
4.2 基础路由
自动生成基础路由规则
路径组件位置及其名称规则/pages/index.vue默认文件 index.vue/userpages/user/index.vue默认文件 index.vue/user/onepages/user/one.vue指定文件 实例 情况1访问路径由pages目录资源的名称组成目录名称、文件的名称- 资源位置 ~/pages/user/one.vue- 访问路径http://localhost:3000/user/one情况2每一个目录下都有一个默认文件 index.vue- 资源位置 ~/pages/user/index.vue- 访问路径http://localhost:3000/user思考/user 可以匹配几种文件 pages/user.vue 文件 【优先级高】pages/user/index.vue 文件
4.3 动态路由
在 Nuxt.js 里面定义带参数的动态路由需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。
路由中路径匹配组件位置及其名称/pages/index.vue/user/:idpages/user/_id.vue/:slugpages/_slug/index.vue/:slug/commentspages/_slug/comments.vue
实例1获得id值创建资源 user/_id.vue
templatediv查询详情 {{this.$route.params.id}}/div
/templatescript
export default {transition: test,mounted() {console.info(this.$route)},
}
/scriptstyle/style
4.4 动态命名路由 路径 /news/123 匹配_id.vue还是_name.vue 我们可以使用nuxt-link解决以上问题 通过name 确定组件名称“xxx-yyy”通过params 给对应的参数传递值
nuxt-link :to{name:news-id,params:{id:1002}}第2新闻/nuxt-link
nuxt-link :to{name:news-name,params:{name:1003}}第3新闻/nuxt-link4.5 默认路由
路径组件位置及其名称不匹配的路径pages/_.vue
404页面可以采用 _.vue进行处理
4.6 嵌套路由(知道) 创建嵌套子路由你需要添加一个 父组件Vue 文件同时添加一个与该文件同名的目录用来存放子视图组件。 要求父组件 使用nuxt-child/ 显示子视图内容 pages/
--| book/ //同名文件夹
-----| _id.vue
-----| index.vue
--| book.vue //父组件步骤1编写父组件 pages/child/book.vue templatedivnuxt-link to/child/book/list书籍列表/nuxt-link |nuxt-link to/child/book/123书籍详情/nuxt-link |hrnuxt-child //div
/templatescript
export default {}
/scriptstyle/style 步骤2编写子组件 pages/child/book/list.vue templatediv书籍列表/div
/templatescript
export default {}
/scriptstyle/style 步骤3编写子组件 pages/child/book/_id.vue templatediv书籍详情{{$route.params.id}} /div
/templatescript
export default {}
/scriptstyle/style
4.7 过渡动效了解
4.7.1 全局过渡动效设置 Nuxt.js 默认使用的过渡效果名称为 page .page-enter-active样式表示进入的过渡效果。.page-leave-active样式表示离开的过渡效果。 步骤1创建 assets/main.css编写如下内容 .page-enter-active, .page-leave-active {transition: opacity .5s;
}
.page-enter, .page-leave-active {opacity: 0;
}步骤2nuxt.config.js 引入main.css文件 module.exports {css: [assets/main.css]
}4.7.1 自定义动画 如果想给某个页面自定义过渡特效的话只要在该页面组件中配置 transition 字段即可 步骤1在全局样式 assets/main.css 中添加名称为test的过渡效果 .test-enter-active, .test-leave-active {transition: all 2s;font-size:12px;
}.test-enter, .test-leave-active {opacity: 0;font-size:40px;
} 步骤2需要使用特效的vue页面编写如下 export default {transition: test
}4.8 案例学生管理 需求1首页 需求2点击学生管理 需求3点击“添加”按钮 需求4点击修改按钮 需求5详情
5. 视图
5.1 默认模板了解 定制化默认的 html 模板只需要在应用根目录下创建一个 app.html 的文件。 默认模板 !DOCTYPE html
html {{ HTML_ATTRS }}head {{ HEAD_ATTRS }}{{ HEAD }}/headbody {{ BODY_ATTRS }}{{ APP }}/body
/html修改模板对低版本IE浏览器进行支持兼容IE浏览器 !DOCTYPE html
!--[if IE 9]html langen-US classlt-ie9 ie9 {{ HTML_ATTRS }}![endif]--
!--[if (gt IE 9)|!(IE)]!--html {{ HTML_ATTRS }}!--![endif]--head {{ HEAD_ATTRS }}{{ HEAD }}/headbody {{ BODY_ATTRS }}{{ APP }}/body
/html5.2 默认布局【掌握】
5.2.1 布局概述 布局Nuxt.js根据布局将不同的组件进行组合。 模板html页面是布局后所有组件挂载的基础。 5.2.2 布局分析
layouts/default.vue 默认布局组件 访问路径根据路由确定执行组件组件具体显示的位置有布局来确定 5.2.3 公共导航
修改 layouts/default.vue
templatedivnuxt-link to/首页/nuxt-link |nuxt-link to/user/login登录/nuxt-link |nuxt-link to/user/123详情/nuxt-link |nuxt-link to/about默认页/nuxt-link |nuxt-link to/nuxt/asyncasync/nuxt-link |hr/Nuxt //div
/template5.3 自定义布局 在layouts目录下创建组件layouts/blog.vue templatediv开头br/nuxt/结束br//div/templatescript
export default {}
/scriptstyle/style 在需要的视图中使用 blog布局 script
export default {layout: blog//...
}
/script 5.4 错误页面了解
编写layouts/error.vue页面实现个性化错误页面
templatedivdiv v-iferror.statusCode 404404 页面不存在 {{error.message}}/divdiv v-else应用程序错误/divnuxt-link to/首 页/nuxt-link/div
/templatescript
export default {props: [error]
}
/scriptstyle/style
解决问题 404 、500、连接超时服务器关闭总结所学习的技术中有2种方式处理错误页面 方式1默认路径_.vue 先执行方式2错误页面~/layouts/error.vue
6 Nuxt组件特殊配置
6.1 概述
Nuxt页面组件实际上是 Vue 组件只不过 Nuxt.js 为这些组件添加了一些特殊的配置项在Vue组件的基础上添加了额外功能
特殊配置项描述asyncDataSSR进行异步数据处理也就是服务器端ajax操作区域。fetch在渲染页面之前获取数据填充应用的状态树storehead配置当前页面的head标签整合第三方css、js等。layout指定当前页面使用的布局transition指定页面切换的过渡动效scrollToTop布尔值默认: false。 用于判定渲染页面前是否需要将当前页面滚动至顶部。
6.2 模板代码
templateh1 classredHello {{ name }}!/h1
/templatescript
export default {asyncData (context) { //异步处理数据, 每次加载之前被调用return { name: World }}, fetch () { //用于在渲染页面之前获取数据填充应用的状态树store},head: { //配置当前页面的 Meta 标签},layout: 自定义布局名 //自定义布局...
}
/scriptstyle
.red {color: red;
}
/style
6.3 head - 入门 html模板代码 html
headmeta charsetUTF-8 /title我是标题/titlelink relstylesheet typetext/css hrefcss外部文件/script srcjs外部文件 typetext/javascript charsetutf-8/script
/head
body
/body
/html通过nuxt提供head属性可以给单个也是设置标题、外部css、外部js 等内容。 基本模板 script
export default {head: {link: [], //导入第三方css文件可以导入多个script: [] //导入第三方js文件可以导入多个}
}
/script完整代码
templatediv详情页 {{$route.params.id}} br/div classbg2/divdiv classbg3/div/div
/templatescript
export default {head: {title: 详情页,link: [{rel:stylesheet,href:/style/img.css},....],script: [{ type: text/javascript, src: /js/news.js }]}
}
/scriptstyle.bg2 {background-image: url(~static/img/2.jpg);width: 300px;height: 300px;background-size: 300px;}
/style
7. ajax操作
7.1 整合 axios
7.1.1 默认整合 在构建项目时如果选择axios组件nuxt.js将自动与axios进行整合
7.1.2 手动整合可选 步骤1package.json有axios的版本 dependencies: {nuxtjs/axios: ^5.13.1,},步骤2安装 npm install步骤3nuxt.config.js 以模块的方式添加axios modules: [// https://go.nuxtjs.dev/axiosnuxtjs/axios,],7.1.3 常见配置 修改 nuxt.config.js 进行baseURL的配置 // Axios module configuration: https://go.nuxtjs.dev/config-axiosaxios: {baseURL:http://localhost:10010/},7.2 使用axios发送ajax 在vue页面中通过 this. a x i o s . x x x ( ) 操作 a j a x 。 t h i s . axios.xxx() 操作ajax。this. axios.xxx()操作ajax。this.axios 与之前 axios等效。 this.$axios.post(/search-service/search,this.searchMap).then( res {//获得查询结果this.searchResult res.data.data;
});7.3 使用asyncData发送 ajax asyncData中的ajax将在“前端服务端执行”在浏览器看到是数据而不是ajax程序。
7.3.1 发送一次请求
语法
export default {async asyncData( context ) { //context就相当于其他地方的this//发送ajaxlet { data } await context.$axios.get(路径,参数)// 返回结果return {变量: 查询结果从data获取 }},
}实例 templatediv{{echo}}/div
/templatescript
export default {async asyncData(context) {// 发送ajaxlet {data} await context.$axios.get(/service-consumer/feign/echo/abc)// 返回数据return {echo: data}},
}
/scriptstyle/style
7.3.2 发送多次请求 语法1 export default {async asyncData( content ) {let [结果1,结果2] await Promise.all([ ajax请求1, ajax请求2])return {变量1: 结果1,变量2: 结果2}},
}语法2 export default {async asyncData( content ) {let [{数据:别名1},{数据:别名2}] await Promise.all([ ajax请求1, ajax请求2])return {变量1: 别名1,变量2: 别名2}},
}//演化过程
let response ajax请求
let [response,response] await Promise.all([ajax1,ajax2])
let [{data},{data}] await Promise.all([ajax1,ajax2])
let [{data:别名1},{data:别名2}] await Promise.all([ajax1,ajax2])实例
templatediv{{echo}} {{echo2}}/div
/templatescript
export default {async asyncData(context) {// 发送ajaxlet [{data:echo}, {data:echo2}] await Promise.all([context.$axios.get(/service-consumer/feign/echo/abc),context.$axios.get(/service-consumer/client/echo/abc)])// 返回数据return {echo,echo2}},
}
/scriptstyle/style
7.4 使用fetch发送 ajax
fetch 方法用于在渲染页面前填充应用的状态树store数据 与 asyncData 方法类似不同的是它不会设置组件的数据。 步骤1创建store/index.js export const state () ({str: 0
})export const mutations {setData (state, value) {state.str value}
}步骤2测试页面 templatediv!-- 显示数据 --{{$store.state.str}}/div
/templatescriptexport default {async fetch( {store, $axios} ) {// 发送ajaxlet { data } await $axios.get(/service-consumer/feign/echo/abc)// 设置数据store.commit(setData , data )}
}
/scriptstyle/style
7.5 插件自定义axios
7.5.0 分析 7.5.1 客户端 步骤一在nuxt.conf.js中配置客户端插件设置 mode 为 client plugins: [{ src: ~plugins/api_client.js, mode: client }//{ src: ~plugins/api.js, ssr: false }],步骤二编写 plugins/api_client.js 对 内置的 $axios进行增强 //自定义函数
const request {test : (params) {return axios.get(/service-consumer/feign/echo/abc,{params})},
}var axios null
export default ({ $axios }, inject) {//3 保存内置的axiosaxios $axios//4) 将自定义函数交于nuxt// 使用方式1在vue中this.$request.xxx()// 使用方式2在nuxt的asyncData中content.app.$request.xxx()inject(request, request)
}
7.5.2 服务端 步骤一配置服务端插件设置 mode 为 server plugins: [{ src: ~plugins/api_client.js, mode: client },{ src: ~plugins/api_server.js, mode: server },//{ src: ~plugins/api.js, ssr: false },//{ src: ~plugins/api.server.js, ssr: true }],步骤二编写 plugins/api.server.js 对 内置的 $axios进行增强 const request {test : (params) {return axios.get(/service-consumer/feign/echo/abc,{params})},}var axios null
export default ({ $axios, redirect, process }, inject) {//赋值axios $axios//4) 将自定义函数交于nuxt// 使用方式1在vue中this.$requestServer.xxx()// 使用方式2在nuxt的asyncData中content.app.$requestServer.xxx()inject(requestServer, request)
} 注意前端服务端插件不支持切换路由。也就是说刷新可以访问使用nuxt-link切换不能访问。解决方案 方案1修改mode支持client和service。方案2使用 location.href ‘路径’ 进行跳转
7.5.3 插件配置总结
//方式1通过src设置文件通过mode设置模式
plugins: [{ src: ~/plugins/apiclient.js, mode: client }, //前端客户端{ src: ~/plugins/apiserver.js, mode: server }, //前端服务端{ src: ~/plugins/api.js } //前端客户端 前端服务端
]//方式2通过命名来确定模式
plugins: [~/plugins/api.client.js, //前端客户端~/plugins/api.server.js, //前端服务端~/plugins/api.js, //前端客户端 前端服务端
]8. Vuex 状态树
8.1 根模块数据操作 步骤一创建 store/index.js 添加一个 counter变量并可以继续累加操作 export const state () ({counter: 0
})export const mutations {increment (state) {state.counter}
} 步骤二在页面中使用 templatediv首页 {{counter}}input typebutton value clickincrement//div
/templatescript
import { mapState,mapMutations } from vuex
export default {computed: {...mapState([counter])},methods: {...mapMutations([increment])},
}
/scriptstyle/style
8.2 其他模块数据操作 步骤一创建其他模块 store/book.js export const state () ({money: 0
})export const mutations {addmoney (state) {state.money 5}
}步骤二使用指定模块中的数据 templatediv金额{{money}} brinput typebutton value累加 clickaddMoney(5)/div
/templatescript
import {mapState, mapMutations} from vuex
export default {methods: {// ...mapMutations({方法名:模块/action名称})...mapMutations({addMoney:book/addMoney})},computed: {//...mapState(模块名称,[变量])...mapState(book,[money])}
}
/scriptstyle/style8.3 完整vuex模板
// state为一个函数, 注意箭头函数写法
const state () ({user: jack
})// mutations为一个对象
const mutations {setUser(state, value) {state.counter value}
}
// action执行mutation
const actions {userAction (context,value){// 可以发送ajaxcontext.commit(setUser,value)}}// 获取数据
const getters {getUser (state) {return state.user}
}
export default {namespace: true, // 命名空间强制要求在使用时加上所属的模块名例如book/addmoneystate,mutations,actions,getters
}
9. nuxt流程总结 10. Nuxt整合Element UI
11 综合练习
10.1 练习1学生列表 表结构 #班级表
create table tab_class(cid int primary key auto_increment,cname varchar(50)
);
insert into tab_class(cid, cname) values(1,Java56);
insert into tab_class(cid, cname) values(2,Java78);#学生表
create table tab_student(sid int primary key auto_increment,sname varchar(50),cid int
);insert into tab_student(sname,cid) values(张三,1);
insert into tab_student(sname,cid) values(李四,1);
insert into tab_student(sname,cid) values(王五,2);
insert into tab_student(sname,cid) values(赵六,2); 需求查询学生列表信息 要求1可以进行“班级”条件查询要求2对“班级”数据进行SEO要求3学生数据不进行SEO 10.2 练习2
10.2.1 表结构
CREATE TABLE tb_teacher(tid INT PRIMARY KEY AUTO_INCREMENT,tname VARCHAR(50) COMMENT 老师姓名,TYPE INT COMMENT 老师类型1.授课老师、2.助理老师、3.辅导员老师
);
INSERT INTO tb_teacher(tid,tname,TYPE) VALUES(1,梁桐老师,1);
INSERT INTO tb_teacher(tid,tname,TYPE) VALUES(2,马坤老师,2);
INSERT INTO tb_teacher(tid,tname,TYPE) VALUES(3,仲燕老师,3);
INSERT INTO tb_teacher(tid,tname,TYPE) VALUES(4,袁新奇老师,1);
INSERT INTO tb_teacher(tid,tname,TYPE) VALUES(5,任林达老师,2);
INSERT INTO tb_teacher(tid,tname,TYPE) VALUES(6,王珊珊老师,3);CREATE TABLE tb_class(cid INT PRIMARY KEY AUTO_INCREMENT,cname VARCHAR(50) COMMENT 班级名称,teacher1_id INT COMMENT 授课老师,teacher2_id INT COMMENT 助理老师,teacher3_id INT COMMENT 辅导员老师
);INSERT INTO tb_class(cid,cname,teacher1_id,teacher2_id,teacher3_id) VALUES(1,Java56,1,2,3);
INSERT INTO tb_class(cid,cname,teacher1_id,teacher2_id,teacher3_id) VALUES(2,Java78,1,2,3);
INSERT INTO tb_class(cid,cname,teacher1_id,teacher2_id,teacher3_id) VALUES(3,Java12,4,5,6);
INSERT INTO tb_class(cid,cname,teacher1_id,teacher2_id,teacher3_id) VALUES(4,Java34,4,5,6);
10.2.2 需求查询
需求使用“自定义axios”完成 查询班级详情通过班级名称模糊查询查询班级的同时查询老师信息 10.2.3 扩展需求添加 end
