XC项目day2_1.单页面应用和页面路由,element-ui,api调用以及跨域问题-优快云博客

1.将前端工程的压缩包导入到指定文件夹下解压

点击pachage.json,启动dev.确认导入成功
在这里插入图片描述

2.单页面应用的原理和优缺点

2.1什么是单页面应用
在这里插入图片描述
2.2单页面应用的优点

1、用户操作体验好，用户不用刷新页面，整个交互过程都是通过Ajax来操作。
2、适合前后端分离开发，服务端提供http接口，前端请求http接口获取数据，使用JS进行客户端渲染

2.3单页面应用的缺点

1、首页加载慢
单页面应用会将js、 css打包成一个文件，在加载页面显示的时候加载打包文件，如果打包文件较大或者网速慢则
用户体验不好。
2、SEO不友好
SEO（Search Engine Optimization）为搜索引擎优化。它是一种利用搜索引擎的搜索规则来提高网站在搜索引擎
排名的方法。目前各家搜索引擎对JS支持不好，所以使用单页面应用将大大减少搜索引擎对网站的收录。

2.4总结:单页面应用比较适合后台管理系统项目.

3.创建页面

3.1页面结构
在model目录创建 cms模块的目录结构
在这里插入图片描述
在page目录新建page_list.vue，扩展名为.vue。

<template>
  <div>
    <!--编写页面静态部分，即view部分-->
    测试页面显示...
  </div>
</template>
<script>
  /*编写页面静态部分，即model及vm部分。*/
</script>
<style>
  /*编写页面样式，不是必须*/
</style>

3.2页面路由
3.2.1)在cms的router下配置路由

import Home from '@/module/home/page/home.vue';
import page_list from '@/module/cms/page/page_list.vue';
export default [{
  path: '/',
  component: Home,
  name: 'CMS',//菜单名称
  hidden: false,
  children:[
    {path:'/cms/page/list',name:'页面列表',component: page_list,hidden:false}
  ]
}
]

3.2.2)在base目录下的router导入cms模块的路由

导入路由规则
import HomeRouter from '@/module/home/router'
import CmsRouter from '@/module/cms/router'
// 合并路由规则
concat(HomeRouter)//加入home模块的路由
concat(CmsRouter)//加入cms模块的路由
export default routes;

3.3测试
重启工程,刷新页面
在这里插入图片描述

4.element-ui

Element是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
官网:https://element.faas.ele.me/#/zh-CN/component/installation

element-ui的使用,参考官网组件

5.Api调用

5.1Api方法定义

在cms模块的api目录定义cms.js，
在cms.js中定义如下js方法，此方法实现http请求服务端页面查询接口

import http from './../../../base/api/public'
import querystring from 'querystring'
let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre;
export const page_list = (page,size,params) => {
  return http.requestQuickGet(apiUrl+'/cms/page/list/'+page+'/'+size);
}

5.2Api调用
前端页面导入cms.js，调用js方法请求服务端页面查询接口。
1）导入cms.js

import * as cmsApi from '../api/cms'

2)在query方法中调用 page_list方法

query() {
        cmsApi.page_list(this.params.page,this.params.size,this.params).then((res)=>{
          this.total = res.queryResult.total;
          this.list = res.queryResult.list;
        })
      },

5.3跨域问题的解决
测试访问,出现错误
在这里插入图片描述
原因：浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同。
解决：采用proxyTable解决。

proxyTable是什么？
vue-cli提供的解决vue开发环境下跨域问题的方法，proxyTable的底层使用了
http-proxymiddleware（https://github.com/chimurai/http-proxy-middleware），
它是http代理中间件，它依赖node.js，基本原理是用服务端代理解决浏览器跨域：

在这里插入图片描述

解决原理:前端访问代理中间件,代理中间件再去访问后端服务.服务端和服务端之间是不存在跨域的.所以解决了这个问题

具体的方法如下:
1)修改前端的访问路径
在这里插入图片描述
2)在config/index.js下配置proxyTable。
以/api/cms开头的请求，代理请求http://localhost:31001

 '/api/cms': {
        target: 'http://localhost:31001',
        pathRewrite: {
          '^/api': ''
        }

6.总结

在这里插入图片描述