A065_运行前端_跨域_列表

内容介绍
1.运行后台管理前端项目
- 1.1.前端项目运行流程
- - 1.1.1. 准备前端项目（使用父级模块）
  - 1.1.2. 升级elmentui版本
  - 1.1.3. 运行前端项目
  - 1.1.4. 修改主页
  - 1.1.5. 修改端口
  - 1.1.6. 打包运行
- 1.2.一个功能使用流程
- - 1.2.1. 写一个vue文件
  - 1.2.2. 导入vue组件组件
  - 1.2.3. 配置路由
2.系统管理&组织机构管理需求分析
- 2.1.组织机构管理
- 2.2.系统管理
3.部门管理-列表
- 3.1.列表展示
- - 3.1.1. 列表
4. 解决跨域问题
- 4.1.跨域分析
- - 4.1.1.什么是跨域
  - 4.1.2.跨域问题
  - 4.1.3.跨域解决方案
- 4.2. CORS跨域解决方案分析
- - 4.2.1.什么是CORS
  - 4.2.2.原理
- 4.3.跨域解决方案实现
- - 4.3.1.方案一：后台解决方案
  - 4.3.2.方案二：前端解决方案
5.Crud-列表&删除
- 5.1.加载列表数据（高级查询+分页）
- - 5.1.1.列表展示
  - 5.1.2.高级查询+分页
  - 5.1.3.解决列表显示问题
- 5.2.删除数据
6.课程总结
- 6.1.重点
- 6.2.难点
- 6.3.如何掌握
- 6.4.排错技巧（技巧）
7.常见问题
8.课后练习
9.面试题
10.扩展知识或课外阅读推荐（可选）
- 10.1.扩展知识
- 10.2.课外阅读

部门管理

内容介绍

1. 后台管理前端项目集成；（掌握）
2. 系统管理&组织机构管理需求分析；（掌握）
3. 组织机构管理-部门crud；（掌握）
4. 跨域-（浏览器一种安全策略）解决方案；（掌握）

1.运行后台管理前端项目

1.1.前端项目运行流程

   pethome-web-parentpethome-admin:8081pethome-web：80

1.1.1. 准备前端项目（使用父级模块）

1）新建空项目父模块（Empty project）：下面应该包含两个前端项目，后台管理，主站

2解压vue-admin-master到pethome-admin
是别人已经搭建好的一个基于vue-cli的前端基础模型。

npm install      前面已经初始化了不用再vue init webpack
npm run dev
npm run build   不用此命令

1.1.2. 升级elmentui版本

不能使用以下功能

1）升级版本

npm uninstall element-ui
npm install element-ui -S

2）修改配置 main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

3）打开对话框-table.vue 修改字符

运行

1.1.3. 运行前端项目

cd pethome-admin
npm install         安装依赖前端js库
npm run dev         运行前端项目
npm run build       打包--先不管 发布时候使用

1.1.4. 修改主页

改动一下
1)Title
Index.html 改成宠物管理中心
2)Logo 改成宠物管理中心

3)首页

1.1.5. 修改端口

修改为8081，重启测试

1.1.6. 打包运行

 打包部署报错 npm run build copy tomcat

修改如下：

1.2.一个功能使用流程

1.2.1. 写一个vue文件

copy table.vue

1.2.2. 导入vue组件组件

在routes.js

import Department from './views/itsource/department.vue'

1.2.3. 配置路由

{path: '/',component: Home,name: '组织机构管理',iconCls: 'el-icon-message',//图标样式classchildren: [{ path: '/department', component: Department, name: '部门管理' }]
}

通过路由菜单访问

2.系统管理&组织机构管理需求分析

2.1.组织机构管理

人（员工）要属于某一个部门。
店铺管理：支持门店

组织机构管理是一个模块（一级菜单），而这个模块下面有三个功能模块（二级菜单），每一个功能模块下面一般都有crud的功能。

2.2.系统管理

和系统相关一些基本信息管理
权限相关

系统日志。。。
就是把整个系统运行日志记录下来 aop

数据字典在系统中某些选项是由特定几个值组成，每个用户都是一样的。支付方式：银联 支付宝 微信 其他客户来源： 老学员推荐 互联网  市场

t_systemdictionarytype 数据字典

Id	Name	Description
1	支付方式
2	客户来源

t_systemdictionarydetail 数据字典明细表

Id	Name	Type_id
1	银联	1
2	支付宝	1
…

等

3.部门管理-列表

3.1.列表展示

关闭mock

注释登录拦截

直接访问
http://localhost:8081/#/department

3.1.1. 列表

1.在main.js页面引入axios

import axios from 'axios'
//配置axios的全局基本路径
axios.defaults.baseURL='http://localhost:8080/'
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios

2.user User用户全部替换为 department Department 部门
3.axios请求
后端解决跨域问题访问列表

tion><!--列表v-loading="listLoading"--><el-table :data="departments" v-loading="listLoading" highlight-current-row  style="width: 100%;"><!--多选框--><el-table-column type="selection" width="55"></el-table-column><!--索引值,为什么不用id,id不序号--><el-table-column type="index" width="60"></el-table-column>

export default {data() {return {listLoading:false,departments:[]}},methods: {getDepartments(){//发送Ajax请求后台获取数据  axioslet para = {};this.listLoading = true; //显示加载圈this.$http.patch("/department",para).then(result=>{console.log(result);console.log(result.data);this.departments = result.data;this.listLoading = false;  //关闭加载圈});}},mounted() {this.getDepartments()}
}

报错：

该问题就是跨域问题

4. 解决跨域问题

4.1.跨域分析

4.1.1.什么是跨域

跨域是指跨域名.域名:记忆网络电脑ip很难记,就给它取了一个名字来记忆,这个名字就要域名,域名最终要被转换为ip.

www.baidu.com 185.15.15.14
www.jd.com 185.15.15.14
跨域是指跨域名的访问,从一个域名的系统去访问另一个域名系统，以下情况都属于跨域：

一个系统访问另一个系统才会存在跨域,同系统访问不存在跨.

  跨域原因说明          示例                               域名不同              www.jd.com 与 www.taobao.com      域名相同，端口不同       www.jd.com:8080 与 www.jd.com:8081父级域名相同，子域名不同        item.jd.com 与 miaosha.jd.com     wenku.baidu.com  tieba.baidu.com
如果域名和端口都相同，但是请求路径不同，不属于跨域，如：www.jd.com/item www.jd.com/goods
只要域名（ip）和端口号有一样不同，那么都是跨域http://localhost:8081  前端系统 发送Ajax取后端系统获取数据http://localhost:8080  后端系统

4.1.2.跨域问题

跨域不一定会有跨域问题。

因为跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是于当前页同域名的路径，这能有效的阻止跨站攻击。
因此：跨域问题是针对ajax的一种限制。
但是这却给我们的开发带来了不便，而且在实际生成环境中，肯定会有很多台服务器之间交互，地址和端口都可能不同，怎么办？

4.1.3.跨域解决方案

目前比较常用的跨域解决方案有3种：

Jsonp-- json变种
最早的解决方案，利用动态去填充script标签可以跨域的原理实现。
<sccipt src=”http:/wwww/ssss”>–处理
限制：
- 需要服务的支持
- 只能发起GET请求
nginx反向代理(部署)
思路是：利用nginx反向代理把跨域为不跨域，支持各种请求方式
缺点：需要在nginx进行额外配置，语义不清晰 –
CORS(都可以使用-采纳)
规范化的跨域请求解决方案，安全可靠。
优势：
在服务端进行控制是否允许跨域，可自定义规则
支持各种请求方式
缺点：
会产生额外的请求,要做询问

4.2. CORS跨域解决方案分析

4.2.1.什么是CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

浏览器端：
目前，所有浏览器都支持该功能（IE10以下不行）。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。
服务端：
CORS通信与AJAX没有任何差别，因此你不需要改变以前的业务逻辑。只不过，浏览器会在请求中携带一些头信息，我们需要以此判断是否运行其跨域，然后在响应头中加入一些信息即可。这一般通过过滤器完成即可。

4.2.2.原理

浏览器会将ajax请求分为两类，其处理方案略有差异：简单请求、特殊请求。

简单请求
只要同时满足以下两大条件，就属于简单请求。：
（1) 请求方法是以下三种方法之一：

HEAD
GET
POST

（2）HTTP的头信息不超出以下几种字段：

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

当浏览器发现发现的ajax请求是简单请求时，会在请求头中携带一个字段：Origin.

Origin中会指出当前请求属于哪个域（协议+域名+端口）。服务会根据这个值决定是否允许其跨域。如果服务器允许跨域，需要在返回的响应头中携带下面信息：

Access-Control-Allow-Origin：可接受的域，是一个具体域名或者*，代表任意
Access-Control-Allow-Credentials：是否允许携带cookie，默认情况下，cors不会携带cookie，除非这个值是true

特殊请求
不符合简单请求的条件，会被浏览器判定为特殊请求,，例如请求方式为PUT。
预检请求
特殊请求会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

一个“预检”请求的样板：

与简单请求相比，除了Origin以外，多了两个头：

Access-Control-Request-Method：接下来会用到的请求方式，比如PUT
Access-Control-Request-Headers：会额外用到的头信息

预检请求的响应

服务的收到预检请求，如果许可跨域，会发出响应：

除了Access-Control-Allow-Origin和Access-Control-Allow-Credentials以外，这里又额外多出3个头：

Access-Control-Allow-Methods：允许访问的方式
Access-Control-Allow-Headers：允许携带的头
Access-Control-Max-Age：本次许可的有效时长，单位是秒，过期之前的ajax请求就无需再次进行预检了询问-支持源地址跨域真实请求

4.3.跨域解决方案实现

4.3.1.方案一：后台解决方案

虽然原理比较复杂，但是前面说过：
浏览器端都有浏览器自动完成，我们无需操心
服务端可以通过拦截器统一实现，不必每次都去进行跨域判定的编写。
事实上，SpringMVC已经帮我们写好了CORS的跨域过滤器：CorsFilter ,内部已经实现了刚才所讲的判定逻辑，我们直接用就好了。

package cn.itsource.crud.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;@Configuration
public class GlobalCorsConfig {@Beanpublic CorsFilter corsFilter() {//1.添加CORS配置信息CorsConfiguration config = new CorsConfiguration();//1) 允许的域,不要写*，否则cookie就无法使用了config.addAllowedOrigin("http://127.0.0.1:8081");
config.addAllowedOrigin("http://localhost:8081");
config.addAllowedOrigin("http://127.0.0.1:80");
config.addAllowedOrigin("http://localhost:80");
config.addAllowedOrigin("http://127.0.0.1");
config.addAllowedOrigin("http://localhost");//2) 是否发送Cookie信息config.setAllowCredentials(true);//3) 允许的请求方式config.addAllowedMethod("OPTIONS");config.addAllowedMethod("HEAD");config.addAllowedMethod("GET");config.addAllowedMethod("PUT");config.addAllowedMethod("POST");config.addAllowedMethod("DELETE");config.addAllowedMethod("PATCH");// 4）允许的头信息config.addAllowedHeader("*");//2.添加映射路径，我们拦截一切请求UrlBasedCorsConfigurationSource configSource = newUrlBasedCorsConfigurationSource();configSource.registerCorsConfiguration("/**", config);//3.返回新的CorsFilter.return new CorsFilter(configSource);}
}

4.3.2.方案二：前端解决方案

如果是前端开发，多个项目之间有相互访问的情况(只能在vue-cli的项目可以解决)。
①在项目的config/index.js

proxyTable: {'/api': {target: 'http://localhost:8080',changeOrigin: true,pathRewrite: {'^/api': '' //类似于nginx反向代理所有以api开头的访问}},
},

②在main.js中加入全局访问配置为了不改变原来的访问，或者不需要每一次访问后台都要加上api

//配置axios的全局基本路径
axios.defaults.baseURL='/api'

方案1：后端配置-最全最通用，开发的时候我们选择它
方案2：前端配置-只适合脚手架搭建项目（vuecli），不支持纯html+css(主站)
方案3：Nginx代理上线的时候就使用它

5.Crud-列表&删除

5.1.加载列表数据（高级查询+分页）

5.1.1.列表展示

users:双向数据绑定的名字。
prop=”name” 需要展示列属性的名字
width=”120” 指定列的宽度，如果删除可以自适应
sortable 是否显示排序按钮

Js部分

   methods: {//获取用户列表getUsers() {//开启加载框this.listLoading = true;//NProgress.start();//向后台发起请求数据this.$http.post('/department').then(result=>{//数据请求完毕给当前的变量赋值进行双向绑定this.users = result.data.rows;this.total = result.data.tatal;this.listLoading = false;  //关闭加载圈});},},mounted() {//默认加载用户列表this.getUsers();}

5.1.2.高级查询+分页

后端写sql语句
原理:

  <!--工具条--><el-col :span="24" class="toolbar" style="padding-bottom: 0px;"><el-form :inline="true" :model="filters"><el-form-item><!--双向绑定的查询字段--><el-input v-model="filters.keywords" placeholder="姓名"></el-input></el-form-item><el-form-item><!--给按钮绑定事件请求方法--><el-button type="primary" v-on:click="getUsers">查询</el-button></el-form-item><el-form-item><el-button type="primary" @click="handleAdd">新增</el-button></el-form-item></el-form></el-col>

给点击事件提供方法：

 getUsers() {//封装请求参数let query = {index: this.page,keywords: this.filters.keywords};//开启加载框this.listLoading = true;//NProgress.start();//向后台发起请求数据this.$http.post('/department',query).then(result=>{//数据请求完毕给当前的变量赋值this.users = result.data.rows;this.total = result.data.tatal;this.listLoading = false;  //关闭加载圈});}

5.1.3.解决列表显示问题

格式化状态栏的显示数据。
方式一：（推荐）

            <el-table-column prop="state" label="状态" width="120" sortable><template scope="scope"><span v-if="scope.row.state=='-1'" style="color: red">停用</span><span v-if="scope.row.state=='0'" style="color: green">正常</span></template></el-table-column>

方式二：

  <el-table-column prop="state" label="状态" width="120"   :formatter="formatState" sortable></el-table-column>

Js追加格式化的方法

 methods: {//状态的显示转换formatState: function (row, column) {return row.state == 0 ? '正常' : '停用 ';},}

上级部门的名称显示

<el-table-column prop="parent.name" label="上级部门" >
</el-table-column>

5.2.删除数据

第一步：列表中添加删除的方法

<el-table-column label="操作" width="150"><template scope="scope"><el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button></template></el-table-column>

@click=“handleDel(scope.$index, scope.row)” :点击事件参数为当前行的索引，以及当前行的数据

第二步：在js中添加handleDel方法，发起后台的请求数据

            //删除handleDel: function (index, row) {//第一步弹出对话框 提示用户是否删除记录this.$confirm('确认删除该记录吗?', '提示', {type: 'warning'}).then(() => {//开启加载图标this.listLoading = true;this.$http.delete('department/'+row.id).then(res =>{//console.debug(res);//删除成功提示if(res.data.success){this.$message({message:'删除成功',type:'success'})}else {//删除失败提示this.$message({message:'删除失败',type:'error'})}})//重新加载列表数据this.getUsers();//关闭加载效果this.listLoading = false;}).catch(() => {});},

6.课程总结

6.1.重点

6.2.难点

6.3.如何掌握

6.4.排错技巧（技巧）

7.常见问题

8.课后练习

1.完成当日代码

9.面试题

10.扩展知识或课外阅读推荐（可选）

10.1.扩展知识

10.2.课外阅读