前端sse可以用axios吗 前端的ssr是什么

SSR： 服务端渲染（Server Side Render），即：网页是通过服务端渲染生成后输出给客户端。

一、那为什么要使用SSR呢？

我用一句话理解的就是降低SPA(Single Page Application)首屏渲染的时间，解决SPA不利于SEO(Search Engine Optimization)的优化。

那Nuxt是什么呢？跟SSR有什么关系呢？

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。

我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。

Nuxt.js 预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。

除此之外，我们还提供了一种命令叫：nuxt generate，为基于 Vue.js 的应用提供生成对应的静态站点的功能。

我们相信这个命令所提供的功能，是向开发集成各种微服务（microservices）的 Web 应用迈开的新一步。

作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

Nuxt.js是受到了React SSR框架Next.js的启发，使用 Webpack 和 Node.js 进行封装的基于Vue的SSR框架。

二、nuxt.js的优势

1）就是我们无需为了路由划分而烦恼，你只需要按照对应的文件夹层级创建 .vue 文件就行。

2）无需考虑数据传输问题，nuxt 会在模板输出之前异步请求数据（需要引入 axios 库），而且对 vuex 有进一步的封装。

3）内置了 webpack，省去了配置 webpack 的步骤，nuxt 会根据配置打包对应的文件。

三、开始Nuxt项目的搭建

1.首先根据官方网站教程创建一个项目。

为了快速入门，Nuxt.js团队创建了脚手架工具 create-nuxt-app。

确保安装了npx（npx在NPM版本5.2.0默认安装了）：

$ npx create-nuxt-app <项目名>

或者用yarn ：

$ yarn create nuxt-app <项目名>

它会让你进行一些选择:

1. 在集成的服务器端框架之间进行选择:

• None (Nuxt默认服务器)
• Express
• Koa
• Hapi
• Feathers
• Micro
• Adonis (WIP)

2. 选择您喜欢的UI框架:

• None (无)
• Bootstrap
• Vuetify
• Bulma
• Tailwind
• Element UI
• Ant Design Vue
• Buefy

3. 选择你想要的Nuxt模式 (Universal or SPA)
4. 添加 axios module 以轻松地将HTTP请求发送到您的应用程序中。
5. 添加 EsLint 以在保存时代码规范和错误检查您的代码。
6. 添加 Prettier 以在保存时格式化/美化您的代码。

当运行完时，它将安装所有依赖项，因此下一步是启动项目:

$ npm run dev

应用现在运行在 http://localhost:3000 上运行。

 

2.引入axios,封装axios和请求api(使用的easy-mock请求模拟数据)

1) 安装依赖：npm i axios -S

2) 新建一个文件夹service,存放axios及api相关文件。

3)service目录下新建index.js（封装axios）

1 /**
 2  * Created by yuchen on 2019/2/20.
 3  */
 4 import axios from 'axios'
 5 import qs from 'qs'
 6 import config from './config'
 7 import {API, API_URL} from './api'
 8 
 9 if (process.server){
10   config.baseURL = `http://${process.env.HOST || 'localhost'} : ${process.env.PORT || 3000}`
11 }
12 
13 const service = axios.create(config)
14 
15 // POST 传参序列化
16 service.interceptors.request.use(
17   config => {
18     if (config.method === 'post') config.data = qs.stringfy(config.data)
19     return config
20   },
21   error => {
22     return Promise.reject(error)
23   }
24 )
25 
26 // 返回结果处理
27 service.interceptors.response.use(
28   res => {
29     return res.data
30   },
31   error => {
32     return Promise.reject(error)
33   }
34 )
35 
36 
37 const get = (url) => {
38   let temp = API[url]
39   let URL = `${API_URL}${temp}`
40   return service({
41     method: 'get',
42     url:URL
43   })
44 
45 }
46 
47 const post = (url, params, showLoading) => {
48   let temp = API[url]
49   let URL = `${API_URL}${temp}`
50   axios.post(URL, params, {
51     showLoading: showLoading
52   })
53 }
54 
55 export default {
56  get
57 }

View Code

 4) 新建config.js自定义配置

1 /**
 2  * Created by yuchen on 2019/2/20.
 3  */
 4 import http from 'http'
 5 import https from 'https'
 6 
 7 export default {
 8   // 自定义的请求头
 9   headers: {
10     post: {
11       'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
12     },
13     'X-Requested-With': 'XMLHttpRequest'
14   },
15   // 超时设置
16   timeout: 10000,
17   // 跨域是否带Token
18   withCredentials: true,
19   // 响应的数据格式 json / blob /document /arraybuffer / text / stream
20   responseType: 'json',
21   // 用于node.js
22   httpAgent: new http.Agent({
23     keepAlive: true
24   }),
25   httpsAgent: new https.Agent({
26     keepAlive: true
27   })
28 }

View Code

5) 新建api.js存放相关请求api(easy-mock模拟)

1 /**
 2  * Created by yuchen on 2019/2/25.
 3  */
 4 let API_URL = 'https://easy-mock.com/mock'
 5 const API = {
 6   'mockTest':'/5c7387403b7ff2219057c6bb/example/mock'
 7 }
 8 export {
 9   API_URL,
10   API
11 }

 

6) 在plugins下新建http.js(挂载$http到vue上)

1 /**
2  * Created by yuchen on 2019/2/25.
3  */
4 import Vue from 'vue'
5 import http from '~/service/index'
6 Vue.prototype.$http = http
7 Vue.use(http)

View Code

7) 在nuxt.config.js下引入插件plugins下的http.js

1 /**
2  * Created by yuchen on 2019/2/25.
3  */
4 import Vue from 'vue'
5 import http from '~/service/index'
6 Vue.prototype.$http = http
7 Vue.use(http)

View Code

 

3.跨域处理

使用过 vue 的同学，肯定知道对于项目中的跨域，vue-cli 对 webpack 中的 proxy 选项进行了一层封装。它暴露出来的是一个叫 proxyTable 的选项，是对 webpack 中的 proxy 和其三方插件 http-proxy-middleware 的一个整合。

不幸的 Nuxt 中没有 proxyTable 这么一个配置项来进行跨域的配置。当然幸运的是，在 Nuxt 中你可以直接通过配置 http-proxy-middleware 来处理跨域。更幸运的是 Nuxt 官方提供了两个包来处理 axios 跨域问题。

• @nuxtjs/axios
• @nuxtjs/proxy

首先，进行安装

npm i @nuxtjs/axios @nuxtjs/proxy -D

然后在 nuxt.config.js 文件里进行配置

1 modules: [
 2   '@nuxtjs/axios'
 3 ],
 4 axios: {
 5   proxy: true
 6 },
 7 proxy: {
 8   '/api': {
 9     target: 'xxx.target.com',
10     pathRewrite: { '^/api': '' }
11   }
12 }

View Code

 

4.同理引入第三方插件element-ui

在plugins下新建element-ui.js(可全局和按需引用)，然后在nuxt.config.js引入

1 /**
 2  * Created by yuchen on 2019/2/20.
 3  */
 4 import Vue from 'vue'
 5 import ElementUI from 'element-ui'
 6 import 'element-ui/lib/theme-chalk/index.css'
 7 
 8 Vue.use(ElementUI)
 9 
10 // import { Radio } from 'element-ui'
11 // Vue.component(Radio.name, Radio )

View Code

 

5.官方教程引入css预处理器less

styleResources

• 类型: Object
• 默认: {}

当您需要在页面中注入一些变量和mixin而不必每次都导入它们时，这非常有用。

Nuxt.js 使用 https://github.com/nuxt-community/style-resources-module 来实现这种行为。

您需要为css预处理器指定要包含的 模式 / 路径 ： less, sass, scss 或 stylus

您不能在此处使用路径别名(~ 和 @)，

:warning: You cannot use path aliases here (~ and @)，你需要使用相对或绝对路径。

安装 style-resources：

$ yarn add @nuxtjs/style-resources

根据需要安装：

• SASS: $ yarn add sass-loader node-sass
• LESS: $ yarn add less-loader less
• Stylus: $ yarn add stylus-loader stylus

如果使用的npm,则变为npm install less-loader less

修改 nuxt.config.js:

1   modules: [
2     '@nuxtjs/style-resources'
3   ],
4   styleResources:{
5     less:'./assets/common.less'
6   }

 

四、项目地址及Demo展示

此nuxt项目在脚手架新建的基础上增加了axios,elemet-ui,less,跨域处理,路由nuxt会帮你创建对应的路由，你只需要在page创建对应层级文件。

项目地址传送门：nuxt-ssr