[学习交流] 【郑州校区】Nuxt.js实战下

【郑州校区】Nuxt.js实战下

8.界面优化
8.1 优化首页

我们发现，在项目启动后，页面的头部和尾部已经能正常显示，但页面中间的文字，不是我们想要的。如果想修改这里的文字或图片，则可以在项目根目录下的pages目录中，修改index.vue，因为当前项目默认访问的就是这个文件。

[AppleScript] 纯文本查看 复制代码

<template>
  <section class="container">
    <div>
      <app-logo/>
      <h1 class="title">
        黑马旅游网
      </h1>
      <h2 class="subtitle">
        你最值得信赖的旅游指导
      </h2>
      <div class="links">
        <a
          href="http://www.itcast.cn/"
          target="_blank"
          class="button--green">传智播客</a>
        <a
          href="http://www.itheima.com/"
          target="_blank"
          class="button--green">黑马程序员</a>
      </div>
    </div>
  </section>
</template>

<script>
import AppLogo from '~/components/AppLogo.vue'
export default {
  components: {
    AppLogo
  }
}
</script>

<!-- css样式，可以根据自己选择进行调整 -->
<style>
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: "Quicksand"，"Source Sans Pro"，-apple-system，BlinkMacSystemFont，"Segoe UI"，Roboto，"Helvetica Neue"，Arial，sans-serif; /* 1 */
  display: block;
  font-weight: 300;
  font-size: 70px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 20px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

修改后，效果如图所示

8.2 全局页面配置

如果修改单独的页面，可以在pages目录中找到对应页面进行修改。如果想修改全局的页面配置，可以在项目根目录下的nuxt.config.js文件中进行修改，比如全局的默认title。

9.异步加载分类数据

除了以上的页面需要修改之外，我们在首页中，还需要去异步访问后台数据服务器，然后根据返回数据，动态显示页面上的分类信息。

9.1 准备后台数据服务器

后台数据服务器可以使用任意语言搭建，要求能返回json数据即可。后台数据服务器如何搭建，在这里就省略了，(我使用Java搭建的后台数据服务器，并且已经启动)：

访问路径:

http://localhost:8080/category/findAll

返回数据:

[AppleScript] 纯文本查看 复制代码

[
  {
    "cid": 1，
    "cname": "门票"
  }，
  {
    "cid": 2，
    "cname": "酒店"
  }，
  {
    "cid": 3，
    "cname": "香港车票"
  }，
  {
    "cid": 4，
    "cname": "出境游"
  }，
  {
    "cid": 5，
    "cname": "国内游"
  }，
  {
    "cid": 6，
    "cname": "港澳游"
  }，
  {
    "cid": 7，
    "cname": "抱团定制"
  }，
  {
    "cid": 8，
    "cname": "全球自由行"
  }
]

9.2 nuxt.js访问后台数据服务器

在根目录下的assets中，创建public.js文件，该文件是一个"工具类"，该工具类中，通过"axios"技术，定义了多个异步发送请求的方法。
public.js文件代码如下:

[AppleScript] 纯文本查看 复制代码

import axios from 'axios'
axios.defaults.timeout = 10000
axios.defaults.headers.post['Content-Type'] = 'application/x-www=form-urlencoded'
export default {
  //get请求
  requestGet (url，params = {}) {
    return new Promise((resolve，reject) => {
      axios.get(url，params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  }，
  //get请求不带参数
  requestQuickGet (url) {
    return new Promise((resolve，reject) => {
      axios.get(url).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  }，
  //post请求
  requestPostForm (url，params = {}) {
    return new Promise((resolve，reject) => {
      axios.post(url，params，{
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'，
          }，
        }
      ).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  }，
  //post请求
  requestPost (url，params = {}) {
    return new Promise((resolve，reject) => {
      axios.post(url，params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  }，
  //put请求
  requestPut (url，params = {}) {
    return new Promise((resolve，reject) => {
      axios.put(url，params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  }，
  //delete请求
  requestDelete (url，params = {}) {
    return new Promise((resolve，reject) => {
      axios.delete(url，params).then(res => {
        resolve(res.data)
      }).catch(error => {
        reject(error)
      })
    })
  }
}

2.在根目录的assets中，创建cms.js文件

cms.js文件代码如下:

[AppleScript] 纯文本查看 复制代码

import http from './public'  //引入public文件

// 定义页面加载的方法
export const page_loading = () => {
  // 调用public文件中的requestQuickGet方法，发送异步请求
  return http.requestQuickGet("http://localhost:8080/category/findAll")
}

3.在当前项目中，Header头部在页面加载时，需要访问后台数据服务器获取数据并动态显示，所以，在Header.vue文件中，调用该方法

[AppleScript] 纯文本查看 复制代码

<!-- 其他部分代码省略... -->
<script>
  // 导入cms.js文件中的所有方法
  import * as loadApi from './../assets/cms';
  export default {
    name: "Header"，
    data(){
      return {
        category_list:{}
      }
    }，
    head: {
      link: [
        {rel: 'stylesheet'，href: '/css/common.css'}，
        {rel: 'stylesheet'，href: '/css/bootstrap.min.css'}，
      ]
    }，
    methods:{
        // 定义findAll方法
            findAll: function () {
            // 调用cms.js文件中的page_loading方法，发送请求，并把返回值交给res
            loadApi.page_loading().then((res)=>{
                // 把res中的返回值，赋值给上边data()中的category_list
                this.category_list = res;
            });
       }
    }，
    // 页面被加载时，调用自己定义的findAll方法
    created(){
        this.findAll();
    }
  }
</script>

3.这时，data()中的category_list已经有数据了，那么我们就可以在页面的html部分处，遍历并显示这部分数据

4.因为该异步请求使用的是"axios"技术，所以，当前项目需要"axios"的支持，需要在package.json中配置axios的支持

5.注意，如果这时候运行项目，则无法正常运行，会出现错误

原因：浏览器的同源策略不允许跨域访问。解决方案: 采用代理解决。

10.跨域请求10.1 安装 @gauseen/nuxt-proxy 依赖资源

在当前项目根目录下，执行以下命令:

[AppleScript] 纯文本查看 复制代码

npm install --save-dev @gauseen/nuxt-proxy

10.2 配置代理

在nuxt.config.js文件中，添加对应代理规则

/api --> 特定的标识字符串，当请求路径中有这个的时候就进行代理

target --> 目标代理服务，就是要跳转到哪个服务器

ws --> 是否支持 websocket 代理

pathRewrite --> 代理后，把请求路径中的"/api"给替换为""

10.3 修改请求路径

根据上述代理规则规定，只有在请求路径中有/api，才进行代理，所以，需要修改上述cms.js文件中的代码，

修改后如下:

[AppleScript] 纯文本查看 复制代码

import http from './public'
// 页面加载分类信息
export const page_loading = () => {
  return http.requestQuickGet("/api/category/findAll")
}

10.4 启动项目

总结

Nuxt.js 是一个基于 Vue.js 的通用应用框架。如果想掌握Nuxt.js的使用方法，则必须要有以下几点前提：

1.精通js相关知识。

2.熟悉Vue的相关语法。

3.并且要对服务端和客户端的相关概念要有一定的理解。

4.了解Node.js。

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【郑州校区】Nuxt.js实战 下

1 个回复

[学习交流] 【郑州校区】Nuxt.js实战下